work-agent 0.1.0

package/app/my/skills/[name]/page.tsx

@@ -0,0 +1,320 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useRouter, useParams } from 'next/navigation';
+import { ArrowLeft, Plus, CheckCircle, Loader2, FileText, Code, Workflow, Layers, Save } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Terminal, TerminalHeader, TerminalTitle, TerminalContent } from '@/components/ai-elements/terminal';
+
+interface UserSkill {
+  name: string;
+  displayName?: string;
+  description?: string;
+  content?: string;
+  version?: string;
+}
+
+export default function EditSkillPage() {
+  const router = useRouter();
+  const params = useParams();
+  const skillName = params.name as string;
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const [skillDisplayName, setSkillDisplayName] = useState('');
+  const [skillDescription, setSkillDescription] = useState('');
+  const [skillKnowledge, setSkillKnowledge] = useState('');
+  const [skillCommandPatterns, setSkillCommandPatterns] = useState('');
+  const [skillRiskDefault, setSkillRiskDefault] = useState<string>('medium');
+
+  useEffect(() => {
+    const userId = localStorage.getItem('userId');
+    if (!userId) {
+      router.push('/login');
+      return;
+    }
+
+    loadSkill(userId);
+  }, [skillName, router]);
+
+  const loadSkill = async (userId: string) => {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/skills/user/${skillName}?userId=${userId}`);
+      if (res.ok) {
+        const data = await res.json();
+        setSkillDisplayName(data.displayName || '');
+        setSkillDescription(data.description || '');
+        
+        let content = data.content || '';
+        
+        const commandPatternsMatch = content.match(/## 命令模式\n\n([\s\S]*?)(?:\n\n默认风险级别:|$)/);
+        if (commandPatternsMatch) {
+          const patterns = commandPatternsMatch[1];
+          setSkillCommandPatterns(patterns.replace(/^- /gm, '').trim());
+          content = content.replace(/## 命令模式\n\n[\s\S]*?(?:\n\n默认风险级别:|$)/, '');
+        }
+        
+        const riskMatch = content.match(/默认风险级别: (\w+)/);
+        if (riskMatch) {
+          setSkillRiskDefault(riskMatch[1]);
+          content = content.replace(/\n\n默认风险级别: \w+$/, '');
+        }
+        
+        const knowledgeMatch = content.match(/## 知识[\s\S]*?(?:\n\n##|$)/);
+        if (knowledgeMatch) {
+          const knowledgeContent = knowledgeMatch[0].replace(/## 知识\n\n/, '').replace(/\n\n##.*$/s, '').trim();
+          setSkillKnowledge(knowledgeContent);
+        } else {
+          setSkillKnowledge(content.trim());
+        }
+      } else {
+        setError('技能不存在');
+      }
+    } catch (err) {
+      console.error('Failed to load skill:', err);
+      setError('加载失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    const userId = localStorage.getItem('userId');
+    if (!userId) {
+      setError('未找到用户 ID，请先登录');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    setSuccess(false);
+
+    try {
+      let content = skillKnowledge.trim();
+      if (skillCommandPatterns.trim()) {
+        const patterns = skillCommandPatterns.split('\n').map(p => p.trim()).filter(Boolean);
+        if (content) content += '\n\n';
+        content += `## 命令模式\n\n${patterns.map(p => `- ${p}`).join('\n')}`;
+        content += `\n\n默认风险级别: ${skillRiskDefault}`;
+      }
+
+      const res = await fetch(`/api/skills/user/${skillName}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userId,
+          displayName: skillDisplayName || skillName,
+          description: skillDescription,
+          content,
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || '保存失败');
+      }
+
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : '保存失败';
+      setError(message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  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>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center gap-4 mb-8">
+          <Link href="/my/skills">
+            <Button variant="ghost" size="icon">
+              <ArrowLeft className="w-5 h-5" />
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-2xl font-bold">编辑技能</h1>
+            <p className="text-muted-foreground mt-1">技能名称: {skillName}</p>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-6 p-4 rounded-lg bg-red-50 text-red-700 text-sm border border-red-200">
+            {error}
+          </div>
+        )}
+
+        {success && (
+          <div className="mb-6 p-4 rounded-lg bg-green-50 text-green-700 text-sm border border-green-200">
+            保存成功!
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>基本信息</CardTitle>
+                <CardDescription>
+                  编辑私有技能的基本信息
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="skillDisplayName">显示名称</Label>
+                  <Input
+                    id="skillDisplayName"
+                    placeholder="我的 Skill"
+                    value={skillDisplayName}
+                    onChange={(e) => setSkillDisplayName(e.target.value)}
+                    disabled={saving}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="skillDescription">描述</Label>
+                  <Textarea
+                    id="skillDescription"
+                    placeholder="描述这个 Skill 的功能和用途..."
+                    value={skillDescription}
+                    onChange={(e) => setSkillDescription(e.target.value)}
+                    disabled={saving}
+                    rows={3}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>高级配置</CardTitle>
+                <CardDescription>
+                  可选配置，根据 Skill 类型选择填写
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="skillKnowledge">知识/指令内容</Label>
+                  <Textarea
+                    id="skillKnowledge"
+                    placeholder="为 AI 提供的额外知识或指令..."
+                    value={skillKnowledge}
+                    onChange={(e) => setSkillKnowledge(e.target.value)}
+                    disabled={saving}
+                    rows={6}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="skillCommandPatterns">命令模式</Label>
+                  <Textarea
+                    id="skillCommandPatterns"
+                    placeholder="^kubectl\s+&#10;^docker\s+"
+                    value={skillCommandPatterns}
+                    onChange={(e) => setSkillCommandPatterns(e.target.value)}
+                    disabled={saving}
+                    rows={3}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    每行一个正则表达式，用于命令型 Skill
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="skillRiskDefault">默认风险级别</Label>
+                  <Select value={skillRiskDefault} onValueChange={setSkillRiskDefault} disabled={saving}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="low">低风险 (low)</SelectItem>
+                      <SelectItem value="medium">中风险 (medium)</SelectItem>
+                      <SelectItem value="high">高风险 (high)</SelectItem>
+                      <SelectItem value="critical">严重风险 (critical)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Button
+              className="w-full"
+              onClick={handleSave}
+              disabled={saving}
+            >
+              {saving ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  保存中...
+                </>
+              ) : (
+                <>
+                  <Save className="w-4 h-4 mr-2" />
+                  保存修改
+                </>
+              )}
+            </Button>
+          </div>
+
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>技能类型说明</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-start gap-3">
+                  <FileText className="w-5 h-5 text-muted-foreground mt-0.5" />
+                  <div>
+                    <div className="font-medium">知识型</div>
+                    <div className="text-sm text-muted-foreground">为AI提供领域知识和指令</div>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <Code className="w-5 h-5 text-muted-foreground mt-0.5" />
+                  <div>
+                    <div className="font-medium">命令型</div>
+                    <div className="text-sm text-muted-foreground">定义命令模式和风险配置</div>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <Workflow className="w-5 h-5 text-muted-foreground mt-0.5" />
+                  <div>
+                    <div className="font-medium">工作流型</div>
+                    <div className="text-sm text-muted-foreground">多步骤自动化操作</div>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <Layers className="w-5 h-5 text-muted-foreground mt-0.5" />
+                  <div>
+                    <div className="font-medium">混合型</div>
+                    <div className="text-sm text-muted-foreground">包含多种类型的特性</div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}