work-agent 0.1.0

package/app/(admin)/skills/[name]/page.tsx

@@ -0,0 +1,378 @@
+'use client';
+
+import { useEffect, useState, use } from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { 
+  ArrowLeft, 
+  Play, 
+  Copy, 
+  Check, 
+  Shield, 
+  ShieldAlert,
+  Terminal as TerminalIcon,
+  FileText,
+  Code,
+  Trash2,
+  Settings,
+  Eye
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Terminal, TerminalHeader, TerminalTitle, TerminalContent } from '@/components/ai-elements/terminal';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+
+interface Script {
+  name: string;
+  type: 'read_only' | 'modify';
+  description: string;
+  method: string;
+  path: string;
+}
+
+interface Skill {
+  name: string;
+  displayName?: string;
+  description?: string;
+  version?: string;
+  author?: string;
+  categories?: string[];
+  readme?: string;
+  config?: string;
+  scripts: Script[];
+  isBuiltIn: boolean;
+  skillPath: string;
+}
+
+export default function SkillDetailPage({ params }: { params: Promise<{ name: string }> }) {
+  const resolvedParams = use(params);
+  const [skill, setSkill] = useState<Skill | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [selectedScript, setSelectedScript] = useState<Script | null>(null);
+  const [executing, setExecuting] = useState(false);
+  const [output, setOutput] = useState('');
+  const [showScriptDialog, setShowScriptDialog] = useState(false);
+  const [scriptContent, setScriptContent] = useState('');
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  const fetchSkill = async () => {
+    try {
+      const res = await fetch(`/api/skills/${resolvedParams.name}`);
+      if (res.ok) {
+        const data = await res.json();
+        setSkill(data);
+      }
+    } catch (error) {
+      console.error('Failed to fetch skill:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchSkill();
+  }, [resolvedParams.name]);
+
+  const handleExecuteScript = async (script: Script) => {
+    setSelectedScript(script);
+    setExecuting(true);
+    setOutput('');
+    setMessage(null);
+
+    try {
+      const res = await fetch(`/api/skills/${resolvedParams.name}/execute`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ scriptName: script.name }),
+      });
+
+      const data = await res.json();
+
+      if (data.requiresApproval) {
+        setMessage({
+          type: 'success',
+          text: `已创建工单 ${data.ticketId}，请前往审批`,
+        });
+        setOutput(`修改操作需要审批。
+
+工单已创建: ${data.ticketId}
+状态: pending
+
+请前往 /tickets/${data.ticketId} 审批后执行。`);
+      } else {
+        setOutput(data.output || data.error || '无输出');
+        if (data.hasError) {
+          setMessage({ type: 'error', text: '脚本执行出错' });
+        }
+      }
+    } catch (error) {
+      setOutput(`执行失败: ${error}`);
+      setMessage({ type: 'error', text: '执行失败' });
+    } finally {
+      setExecuting(false);
+    }
+  };
+
+  const handleViewScript = async (script: Script) => {
+    try {
+      const res = await fetch(`/api/skills/${resolvedParams.name}`);
+      if (res.ok) {
+        const skillData = await res.json();
+        const scriptRes = await fetch(`/api/skills/${resolvedParams.name}/scripts/${script.name}`);
+        // For now, just show basic info
+        setScriptContent(`# ${script.name}
+# ${script.description}
+# 类型: ${script.type === 'read_only' ? '只读操作' : '修改操作'}
+# API: ${script.method} ${script.path}`);
+        setShowScriptDialog(true);
+      }
+    } catch (error) {
+      console.error('Failed to view script:', error);
+    }
+  };
+
+  const readOnlyScripts = skill?.scripts.filter(s => s.type === 'read_only') || [];
+  const modifyScripts = skill?.scripts.filter(s => s.type === 'modify') || [];
+
+  if (loading) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  if (!skill) {
+    return (
+      <div className="p-6">
+        <div className="max-w-7xl mx-auto text-center py-12">
+          <h2 className="text-2xl font-bold mb-4">Skill 不存在</h2>
+          <Link href="/skills">
+            <Button>返回列表</Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex items-center gap-4 mb-8">
+          <Link href="/skills">
+            <Button variant="ghost" size="icon">
+              <ArrowLeft className="w-5 h-5" />
+            </Button>
+          </Link>
+          <div className="flex-1">
+            <div className="flex items-center gap-3">
+              <h1 className="text-2xl font-bold">{skill.displayName || skill.name}</h1>
+              {skill.isBuiltIn && (
+                <Badge variant="secondary">
+                  <Shield className="w-3 h-3 mr-1" />
+                  内置
+                </Badge>
+              )}
+            </div>
+            <p className="text-muted-foreground mt-1">{skill.description}</p>
+          </div>
+          <div className="text-sm text-muted-foreground">
+            v{skill.version} • {skill.skillPath}
+          </div>
+        </div>
+
+        {message && (
+          <div className={`mb-6 p-4 rounded-lg ${message.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
+            {message.text}
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 space-y-6">
+            <Tabs defaultValue="scripts">
+              <TabsList>
+                <TabsTrigger value="scripts">
+                  <Code className="w-4 h-4 mr-2" />
+                  脚本 ({skill.scripts.length})
+                </TabsTrigger>
+                <TabsTrigger value="readme">
+                  <FileText className="w-4 h-4 mr-2" />
+                  文档
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="scripts" className="space-y-4 mt-4">
+                {readOnlyScripts.length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-sm font-medium flex items-center gap-2">
+                        <Shield className="w-4 h-4 text-green-500" />
+                        只读操作
+                        <Badge variant="outline">{readOnlyScripts.length}</Badge>
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="grid gap-2">
+                        {readOnlyScripts.map((script) => (
+                          <div
+                            key={script.name}
+                            className="flex items-center justify-between p-3 rounded-lg border bg-green-50/50"
+                          >
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2">
+                                <Badge variant="outline" className="font-mono text-xs">
+                                  {script.method}
+                                </Badge>
+                                <code className="text-sm">{script.path}</code>
+                              </div>
+                              <p className="text-xs text-muted-foreground mt-1">{script.description}</p>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => handleViewScript(script)}
+                                title="查看"
+                              >
+                                <Eye className="w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="default"
+                                size="icon"
+                                onClick={() => handleExecuteScript(script)}
+                                disabled={executing}
+                                title="执行"
+                              >
+                                <Play className="w-4 h-4" />
+                              </Button>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+
+                {modifyScripts.length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-sm font-medium flex items-center gap-2">
+                        <ShieldAlert className="w-4 h-4 text-amber-500" />
+                        修改操作
+                        <Badge variant="outline">{modifyScripts.length}</Badge>
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="grid gap-2">
+                        {modifyScripts.map((script) => (
+                          <div
+                            key={script.name}
+                            className="flex items-center justify-between p-3 rounded-lg border bg-amber-50/50"
+                          >
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2">
+                                <Badge variant="outline" className="font-mono text-xs">
+                                  {script.method}
+                                </Badge>
+                                <code className="text-sm">{script.path}</code>
+                              </div>
+                              <p className="text-xs text-muted-foreground mt-1">{script.description}</p>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => handleViewScript(script)}
+                                title="查看"
+                              >
+                                <Eye className="w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="default"
+                                size="icon"
+                                onClick={() => handleExecuteScript(script)}
+                                disabled={executing}
+                                title="执行（需审批）"
+                              >
+                                <Play className="w-4 h-4" />
+                              </Button>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+
+                {skill.scripts.length === 0 && (
+                  <Card className="border-dashed">
+                    <CardContent className="py-8 text-center text-muted-foreground">
+                      此 Skill 暂无脚本
+                    </CardContent>
+                  </Card>
+                )}
+              </TabsContent>
+
+              <TabsContent value="readme" className="mt-4">
+                <Card>
+                  <CardContent className="prose prose-sm max-w-none py-4">
+                    <pre className="whitespace-pre-wrap text-sm">{skill.readme || '暂无文档'}</pre>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+            </Tabs>
+          </div>
+
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base flex items-center gap-2">
+                  <TerminalIcon className="w-4 h-4" />
+                  执行输出
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Terminal output={output} className="min-h-[200px]">
+                  <TerminalHeader>
+                    <TerminalTitle>执行结果</TerminalTitle>
+                  </TerminalHeader>
+                  <TerminalContent />
+                </Terminal>
+              </CardContent>
+            </Card>
+
+            {skill.isBuiltIn && (
+              <Card className="border-primary/20 bg-primary/5">
+                <CardHeader>
+                  <CardTitle className="text-base">关于内置 Skill</CardTitle>
+                </CardHeader>
+                <CardContent className="text-sm text-muted-foreground">
+                  <p>generate-api-system 是系统内置的元 Skill，用于从 Swagger/OpenAPI 规范生成新的 API Skill 系统。</p>
+                  <p className="mt-2">它不能被卸载，但可以通过创建新的 Skill 来使用。</p>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+
+        <Dialog open={showScriptDialog} onOpenChange={setShowScriptDialog}>
+          <DialogContent className="max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>脚本详情: {selectedScript?.name}</DialogTitle>
+            </DialogHeader>
+            <div className="mt-4">
+              <Terminal output={scriptContent} className="min-h-[200px]">
+                <TerminalHeader>
+                  <TerminalTitle>{selectedScript?.name}</TerminalTitle>
+                </TerminalHeader>
+                <TerminalContent />
+              </Terminal>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}