wangxuming/makelore
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: move plugin center into project configuration

Browse Source
This commit is contained in:
inman
2026-08-31 16:57:26 +08:00
parent b3f4166f21
commit e237941399
13 changed files with 260 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/ProjectConfiguration/index.tsx
View File

@@ -7,13 +7,14 @@ import { Button } from '@/components/ui/button';
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle } from '@/components/ui/sheet';
import { AgentCreationDialog, type AgentCreationInput } from '@/components/coding/AgentCreationDialog';
import { PluginServices } from '@/components/plugins/PluginServices';
import { ProjectPublishAction } from '@/components/works/ProjectPublishAction';
import { ProjectPlugins } from '@/pages/ProjectPlugins';
import { buildCodingModelOptions, parseCodingModelKey, type CodingModelOption } from '@/lib/coding-model-options';
import { getCodingSkills } from '@/lib/coding-product-tools';
import { abortCodingConversation } from '@/lib/coding-conversations';
import { isCanonicalCodingProjectId } from '@/lib/coding-projects';
import { getSkillDisplayInfo } from '@/lib/skill-display';
import { getPluginServiceTab, type PluginServiceTab } from '@/lib/plugin-services';
import { getAgentAvatarSrc } from '@/lib/agent-avatars';
import { cn } from '@/lib/utils';
import { codingConversationStore } from '@/stores/coding-conversations';
@@ -147,6 +148,7 @@ export function ProjectConfiguration() {
const pluginLoadState = useCodingPluginsStore((state) => state.loadState);
const [draft, setDraft] = useState<CodingProjectConfig | null>(null);
const [drawerMode, setDrawerMode] = useState<DrawerMode>(null);
const [pluginServiceTab, setPluginServiceTab] = useState<PluginServiceTab>('project');
const [activeSkillId, setActiveSkillId] = useState<string | null>(null);
const [activeAgentId, setActiveAgentId] = useState<string | null>(null);
const [skills, setSkills] = useState<SkillInfo[]>([]);
@@ -190,7 +192,10 @@ export function ProjectConfiguration() {
setPartnerDialogOpen(true);
}, [draft, location.search]);
useEffect(() => {
if (new URLSearchParams(location.search).get('resource') === 'plugins') setDrawerMode('plugins');
const params = new URLSearchParams(location.search);
if (params.get('resource') !== 'plugins') return;
setPluginServiceTab(getPluginServiceTab(params.get('pluginTab')));
setDrawerMode('plugins');
}, [location.search]);
useEffect(() => { loadSkills(); }, [loadSkills]);
useEffect(() => {
@@ -214,6 +219,29 @@ export function ProjectConfiguration() {
: `${enabledPluginCount} 个已启用 · ${availablePluginCount} 个可用`;
const playSaveConfirmation = () => undefined;
const handleBack = () => navigate(-1);
const handlePluginServiceTabChange = (tab: PluginServiceTab) => {
setPluginServiceTab(tab);
const params = new URLSearchParams(location.search);
params.set('resource', 'plugins');
params.set('pluginTab', tab);
navigate({ pathname: '/project-config', search: `?${params.toString()}` }, { replace: true });
};
const openPluginServices = () => {
setPluginServiceTab('project');
setDrawerMode('plugins');
const params = new URLSearchParams(location.search);
params.set('resource', 'plugins');
params.set('pluginTab', 'project');
navigate({ pathname: '/project-config', search: `?${params.toString()}` }, { replace: true });
};
const closePluginServices = () => {
setDrawerMode(null);
const params = new URLSearchParams(location.search);
params.delete('resource');
params.delete('pluginTab');
const search = params.toString();
navigate({ pathname: '/project-config', search: search ? `?${search}` : '' }, { replace: true });
};
if (!activeProject) return <main data-testid="project-configuration-empty-state" className="flex min-h-full items-start bg-background p-8 text-foreground"><p className="pt-4 text-xl font-semibold tracking-[-0.02em]">一念成光，万物可创。</p></main>;
if (!draft) return <div className="p-8 text-center text-sm font-medium">正在读取项目配置…</div>;
@@ -471,7 +499,7 @@ export function ProjectConfiguration() {
</form>
)}
</section>
<section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4"><ResourceCard id="models" icon={<Cpu />} title="可用模型" subtitle={`${modelOptions.length} 个可用模型`} onClick={() => setDrawerMode('models')} /><ResourceCard id="skills" icon={<Blocks />} title="可用技能" subtitle={`${skills.length} 项可用技能`} onClick={() => { setActiveSkillId(null); setDrawerMode('skills'); }} /><ResourceCard id="knowledge" icon={<Files />} title="知识文件" subtitle={`${knowledge.length} 个知识文件`} onClick={() => setDrawerMode('knowledge')} /><ResourceCard id="plugins" icon={<Puzzle />} title="项目插件" subtitle={pluginSummary} onClick={() => setDrawerMode('plugins')} /></section>
<section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4"><ResourceCard id="models" icon={<Cpu />} title="可用模型" subtitle={`${modelOptions.length} 个可用模型`} onClick={() => setDrawerMode('models')} /><ResourceCard id="skills" icon={<Blocks />} title="可用技能" subtitle={`${skills.length} 项可用技能`} onClick={() => { setActiveSkillId(null); setDrawerMode('skills'); }} /><ResourceCard id="knowledge" icon={<Files />} title="知识文件" subtitle={`${knowledge.length} 个知识文件`} onClick={() => setDrawerMode('knowledge')} /><ResourceCard id="plugins" icon={<Puzzle />} title="插件服务" subtitle={pluginSummary} onClick={openPluginServices} /></section>
<section id="project-agents-section" className="config-motion-partners surface-card rounded-2xl border border-border/70 bg-background p-5 shadow-soft"><div className="mb-4 flex items-center justify-between gap-3"><div><h2 className="text-xl font-semibold">项目智能体</h2><p className="mt-1 text-sm font-medium text-muted-foreground">智能体配置仅属于当前项目；每个智能体可以拥有多条独立对话。</p></div><Button type="button" size="icon" className="h-8 w-8 rounded-full border border-brand/20 bg-brand-soft text-brand" aria-label="创建智能体" title="创建智能体" onClick={() => { if (modelOptions.length === 0) { toast.error('请先在模型设置中配置至少一个可用模型。'); setDrawerMode('models'); return; } setActiveAgentId(null); setPartnerDialogOpen(true); }}><Plus className="h-4 w-4" /></Button></div><div data-testid="agent-cards-scroll-region" className="-m-2 flex gap-4 overflow-auto p-2">{draft.agents.filter((agent) => !agent.archivedAt).map((agent) => <AgentCard key={agent.id} agent={agent} onOpen={() => { setActiveAgentId(agent.id); setPartnerDialogOpen(true); }} />)}{draft.agents.every((agent) => agent.archivedAt) ? <div className="w-full rounded-xl border border-dashed border-foreground/15 p-6 text-center text-sm font-medium text-muted-foreground">当前项目还没有智能体，点击右上角的 + 创建。</div> : null}</div>{draft.agents.some((agent) => agent.archivedAt) ? <div className="mt-4 border-t border-border/70 pt-4"><p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">已归档</p><div className="mt-2 flex flex-wrap gap-2">{draft.agents.filter((agent) => agent.archivedAt).map((agent) => <Button key={agent.id} type="button" variant="outline" className="border-border/70 bg-surface-subtle" onClick={() => updateAgent({ ...agent, archivedAt: null })}>{agent.name || '未命名智能体'} · 恢复</Button>)}</div></div> : null}</section>
<div data-testid="project-configuration-actions" className="glass-surface config-motion-actions sticky bottom-3 z-10 mt-auto flex shrink-0 flex-col gap-2 rounded-2xl border border-border/70 bg-background/85 p-2 shadow-float sm:flex-row sm:items-start sm:justify-between">
<Button type="button" variant="outline" size="sm" onClick={() => setDeleteDialogOpen(true)} className="h-9 w-full border-brand/25 bg-background px-3 font-semibold text-foreground shadow-none hover:border-brand/40 hover:bg-brand-soft sm:w-auto"><Trash2 className="mr-2 h-4 w-4" />删除项目</Button>
@@ -502,12 +530,12 @@ export function ProjectConfiguration() {
title={activeAgent ? `${activeAgent.name || '未命名智能体'} · 编辑智能体` : '创建项目智能体'}
submitLabel={activeAgent ? '保存智能体' : '创建智能体'}
/>
<Sheet open={drawerMode !== null} onOpenChange={(open) => { if (!open) { setDrawerMode(null); setActiveSkillId(null); } }}><SheetContent className={cn('glass-surface flex flex-col overflow-hidden border-l border-border/70 bg-background/90 p-0 text-foreground sm:max-w-none', drawerMode === 'plugins' ? 'w-[min(920px,96vw)]' : 'w-[min(430px,94vw)]')}>
<Sheet open={drawerMode !== null} onOpenChange={(open) => { if (!open) { if (drawerMode === 'plugins') closePluginServices(); else setDrawerMode(null); setActiveSkillId(null); } }}><SheetContent className={cn('glass-surface flex flex-col overflow-hidden border-l border-border/70 bg-background/90 p-0 text-foreground sm:max-w-none', drawerMode === 'plugins' ? 'w-[min(1080px,96vw)]' : 'w-[min(430px,94vw)]')}>
{drawerMode === 'models' ? <DrawerFrame title="可用模型" desc="查看已配置的模型；智能体默认模型在智能体配置中设置。" onClose={() => setDrawerMode(null)}><ModelList models={modelOptions} /></DrawerFrame> : null}
{drawerMode === 'knowledge' ? <DrawerFrame title="知识文件" desc="文件保存在当前项目的 knowledge/ 目录中。" onClose={() => setDrawerMode(null)}><input ref={knowledgeInputRef} type="file" className="sr-only" onChange={(event) => { void handleKnowledge(event.target.files?.[0]); event.currentTarget.value = ''; }} /><Button className="w-full border border-foreground/15 bg-brand-soft text-foreground" onClick={() => knowledgeInputRef.current?.click()}><Upload className="mr-2 h-4 w-4" />上传知识文件</Button><div className="mt-5 space-y-3">{knowledge.length ? knowledge.map((file) => <div key={file} className="rounded-lg border border-foreground/15 bg-white p-3 font-semibold">{file}</div>) : <div className="rounded-lg border border-dashed border-foreground/15 bg-white p-4 text-sm font-medium">当前还没有知识文件。</div>}</div></DrawerFrame> : null}
{drawerMode === 'skills' && activeSkill ? <DrawerFrame title={`${activeSkill.name} · 技能详情`} desc="查看技能目录结构和主文件 SKILL.md。" onClose={() => setActiveSkillId(null)} closeLabel="返回技能列表" closeIcon="back"><SkillDetail skill={activeSkill} /></DrawerFrame> : null}
{drawerMode === 'skills' && !activeSkill ? <DrawerFrame title="可用技能" desc="查看技能目录与主文件；在智能体配置中启用所需技能。" onClose={() => setDrawerMode(null)}><div className="space-y-3">{skills.length > 0 ? skills.map((skill) => <button key={skill.id} type="button" data-testid={`skill-card-${skill.id}`} aria-label={`查看技能详情：${skill.name}`} onClick={() => setActiveSkillId(skill.id)} className="w-full rounded-lg border border-foreground/15 bg-white p-3 text-left transition hover:border-brand/40 hover:bg-brand-soft/30"><div className="flex items-start gap-3"><Blocks className="mt-0.5 h-4 w-4 shrink-0 text-brand" /><span className="min-w-0 flex-1"><span className="block font-semibold">{skill.name}</span><span className="mt-1 block text-sm text-muted-foreground">{skill.description}</span><span className="mt-2 block text-[11px] font-medium text-brand">查看目录与 SKILL.md</span></span><ArrowLeft className="mt-0.5 h-4 w-4 shrink-0 rotate-180 text-muted-foreground" aria-hidden="true" /></div></button>) : <div className="rounded-lg border border-dashed border-foreground/15 bg-white p-4 text-sm font-medium text-muted-foreground">当前没有可查看的技能。</div>}</div></DrawerFrame> : null}
{drawerMode === 'plugins' ? <DrawerFrame title="项目插件" desc="启用当前项目所需能力；插件提供的 Skill 仍在智能体配置中单独分配。" onClose={() => setDrawerMode(null)}><ProjectPlugins embedded onChanged={loadSkills} onResolveIdentity={() => setDrawerMode(null)} onManageAgents={() => setDrawerMode(null)} /></DrawerFrame> : null}
{drawerMode === 'plugins' ? <DrawerFrame title="插件服务" desc="发现与下载插件，并为当前项目单独启用；伙伴 Skill 仍在智能体配置中分配。" onClose={closePluginServices}><PluginServices value={pluginServiceTab} onValueChange={handlePluginServiceTabChange} onProjectPluginsChanged={loadSkills} onResolveIdentity={closePluginServices} onManageAgents={closePluginServices} /></DrawerFrame> : null}
</SheetContent></Sheet>
<ConfirmDialog
open={Boolean(archiveAgentId)}