290 lines
9.2 KiB
TypeScript
290 lines
9.2 KiB
TypeScript
'use client';
|
||
|
||
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Blocks,
|
||
RefreshCw,
|
||
Loader2,
|
||
AlertCircle,
|
||
Bot,
|
||
Terminal,
|
||
Wrench,
|
||
ChevronDown,
|
||
ChevronRight,
|
||
Globe,
|
||
FolderOpen,
|
||
} from 'lucide-react';
|
||
import { listPlugins } from '@/lib/api';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import type { PluginInfo } from '@/types';
|
||
|
||
export default function PluginsPage() {
|
||
const [plugins, setPlugins] = useState<PluginInfo[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const load = async () => {
|
||
setLoading(true);
|
||
setError(null);
|
||
try {
|
||
const data = await listPlugins();
|
||
setPlugins(Array.isArray(data) ? data : []);
|
||
} catch (err: any) {
|
||
setError(err.message || '加载插件失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
load();
|
||
}, []);
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex items-center justify-center py-20">
|
||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="max-w-5xl mx-auto p-6 space-y-6">
|
||
{/* Page header */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||
<Blocks className="w-6 h-6" />
|
||
插件
|
||
</h1>
|
||
<p className="text-sm text-muted-foreground mt-1">
|
||
已安装位置：{' '}
|
||
<code className="text-xs bg-muted px-1 py-0.5 rounded">~/.nanobot/plugins/</code>
|
||
{' '}或{' '}
|
||
<code className="text-xs bg-muted px-1 py-0.5 rounded"><workspace>/plugins/</code>
|
||
</p>
|
||
</div>
|
||
<Button onClick={load} variant="outline" size="sm">
|
||
<RefreshCw className="w-4 h-4 mr-2" />
|
||
刷新
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Error */}
|
||
{error && (
|
||
<Card className="border-destructive">
|
||
<CardContent className="pt-6">
|
||
<div className="flex items-center gap-2 text-destructive text-sm">
|
||
<AlertCircle className="w-4 h-4" />
|
||
{error}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Empty state */}
|
||
{!error && plugins.length === 0 && (
|
||
<Card>
|
||
<CardContent className="py-16 text-center text-muted-foreground">
|
||
<Blocks className="w-12 h-12 mx-auto mb-4 opacity-30" />
|
||
<p className="font-medium">还没有安装任何插件</p>
|
||
<p className="text-sm mt-2 max-w-sm mx-auto">
|
||
把插件目录放到 <code className="text-xs bg-muted px-1 py-0.5 rounded">~/.nanobot/plugins/</code>，
|
||
然后重启 Boardware Genius。
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Plugin cards */}
|
||
<div className="space-y-4">
|
||
{plugins.map((plugin) => (
|
||
<PluginCard key={plugin.name} plugin={plugin} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PluginCard({ plugin }: { plugin: PluginInfo }) {
|
||
const [agentsOpen, setAgentsOpen] = useState(true);
|
||
const [commandsOpen, setCommandsOpen] = useState(true);
|
||
const [skillsOpen, setSkillsOpen] = useState(false);
|
||
|
||
const totalItems = plugin.agents.length + plugin.commands.length + plugin.skills.length;
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader className="pb-3">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<CardTitle className="text-base font-semibold">{plugin.name}</CardTitle>
|
||
<SourceBadge source={plugin.source} />
|
||
</div>
|
||
{plugin.description && (
|
||
<p className="text-sm text-muted-foreground mt-1 leading-relaxed">
|
||
{plugin.description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
{/* Summary chips */}
|
||
<div className="flex items-center gap-1.5 shrink-0 flex-wrap justify-end">
|
||
{plugin.agents.length > 0 && (
|
||
<span className="flex items-center gap-1 text-xs bg-muted px-2 py-0.5 rounded-full">
|
||
<Bot className="w-3 h-3" />
|
||
{plugin.agents.length} 个智能体
|
||
</span>
|
||
)}
|
||
{plugin.commands.length > 0 && (
|
||
<span className="flex items-center gap-1 text-xs bg-muted px-2 py-0.5 rounded-full">
|
||
<Terminal className="w-3 h-3" />
|
||
{plugin.commands.length} 条命令
|
||
</span>
|
||
)}
|
||
{plugin.skills.length > 0 && (
|
||
<span className="flex items-center gap-1 text-xs bg-muted px-2 py-0.5 rounded-full">
|
||
<Wrench className="w-3 h-3" />
|
||
{plugin.skills.length} 个技能
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
|
||
{totalItems > 0 && (
|
||
<CardContent className="pt-0 space-y-3">
|
||
{/* Agents */}
|
||
{plugin.agents.length > 0 && (
|
||
<Section
|
||
icon={<Bot className="w-3.5 h-3.5" />}
|
||
label="智能体"
|
||
count={plugin.agents.length}
|
||
open={agentsOpen}
|
||
onToggle={() => setAgentsOpen((v) => !v)}
|
||
>
|
||
<div className="divide-y divide-border rounded-md border">
|
||
{plugin.agents.map((agent) => (
|
||
<div key={agent.name} className="px-3 py-2 flex items-start gap-3">
|
||
<code className="text-xs font-mono text-primary shrink-0 mt-0.5">
|
||
{agent.name}
|
||
</code>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-xs text-muted-foreground leading-relaxed line-clamp-2">{agent.description || '—'}</p>
|
||
</div>
|
||
{agent.model && (
|
||
<Badge variant="outline" className="text-xs shrink-0">
|
||
{agent.model}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Section>
|
||
)}
|
||
|
||
{/* Commands */}
|
||
{plugin.commands.length > 0 && (
|
||
<Section
|
||
icon={<Terminal className="w-3.5 h-3.5" />}
|
||
label="命令"
|
||
count={plugin.commands.length}
|
||
open={commandsOpen}
|
||
onToggle={() => setCommandsOpen((v) => !v)}
|
||
>
|
||
<div className="divide-y divide-border rounded-md border">
|
||
{plugin.commands.map((cmd) => (
|
||
<div key={cmd.name} className="px-3 py-2 flex items-start gap-3">
|
||
<div className="flex items-center gap-1.5 shrink-0 mt-0.5">
|
||
<code className="text-xs font-mono text-primary">/{cmd.name}</code>
|
||
{cmd.argument_hint && (
|
||
<span className="text-xs text-muted-foreground">{cmd.argument_hint}</span>
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-muted-foreground leading-relaxed line-clamp-2">
|
||
{cmd.description || '—'}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Section>
|
||
)}
|
||
|
||
{/* Skills */}
|
||
{plugin.skills.length > 0 && (
|
||
<Section
|
||
icon={<Wrench className="w-3.5 h-3.5" />}
|
||
label="技能"
|
||
count={plugin.skills.length}
|
||
open={skillsOpen}
|
||
onToggle={() => setSkillsOpen((v) => !v)}
|
||
>
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{plugin.skills.map((skill) => (
|
||
<Badge key={skill} variant="secondary" className="text-xs font-mono">
|
||
{skill}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</Section>
|
||
)}
|
||
</CardContent>
|
||
)}
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function SourceBadge({ source }: { source: 'global' | 'workspace' }) {
|
||
if (source === 'workspace') {
|
||
return (
|
||
<Badge variant="default" className="text-xs gap-1">
|
||
<FolderOpen className="w-3 h-3" />
|
||
工作区
|
||
</Badge>
|
||
);
|
||
}
|
||
return (
|
||
<Badge variant="secondary" className="text-xs gap-1">
|
||
<Globe className="w-3 h-3" />
|
||
全局
|
||
</Badge>
|
||
);
|
||
}
|
||
|
||
function Section({
|
||
icon,
|
||
label,
|
||
count,
|
||
open,
|
||
onToggle,
|
||
children,
|
||
}: {
|
||
icon: React.ReactNode;
|
||
label: string;
|
||
count: number;
|
||
open: boolean;
|
||
onToggle: () => void;
|
||
children: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<div>
|
||
<button
|
||
onClick={onToggle}
|
||
className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors mb-2 w-full text-left"
|
||
>
|
||
{open ? (
|
||
<ChevronDown className="w-3.5 h-3.5" />
|
||
) : (
|
||
<ChevronRight className="w-3.5 h-3.5" />
|
||
)}
|
||
{icon}
|
||
{label}
|
||
<span className="ml-1 text-muted-foreground/60">({count})</span>
|
||
</button>
|
||
{open && children}
|
||
</div>
|
||
);
|
||
}
|