work-agent 0.1.0

package/app/my/skills/new/page.tsx

@@ -0,0 +1,394 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { ArrowLeft, Plus, CheckCircle, Loader2, MessageSquare, Zap, XCircle } 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 { Terminal, TerminalHeader, TerminalTitle, TerminalContent } from '@/components/ai-elements/terminal';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+
+interface GenerationStep {
+  status: 'pending' | 'running' | 'success' | 'error';
+  message: string;
+}
+
+export default function NewSkillPage() {
+  const router = useRouter();
+
+  const [swaggerUrl, setSwaggerUrl] = useState('');
+  const [systemName, setSystemName] = useState('');
+  const [baseUrl, setBaseUrl] = useState('');
+  const [token, setToken] = useState('');
+
+  const [generating, setGenerating] = useState(false);
+  const [steps, setSteps] = useState<GenerationStep[]>([]);
+  const [result, setResult] = useState<{
+    success: boolean;
+    skillName: string;
+    displayName: string;
+    scriptCount?: number;
+    apiCount?: number;
+    type?: string;
+    path?: string;
+  } | null>(null);
+
+  const [showSuccessDialog, setShowSuccessDialog] = useState(false);
+  const [showErrorDialog, setShowErrorDialog] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const addStep = (message: string) => {
+    setSteps(prev => [...prev, { status: 'running', message }]);
+  };
+
+  const updateStep = (index: number, status: GenerationStep['status'], message?: string) => {
+    setSteps(prev => {
+      const updated = [...prev];
+      updated[index] = { ...updated[index], status, message: message || updated[index].message };
+      return updated;
+    });
+  };
+
+  const handleSwaggerGenerate = async () => {
+    if (!swaggerUrl) {
+      setErrorMessage('请输入 Swagger URL');
+      setShowErrorDialog(true);
+      return;
+    }
+
+    const userId = localStorage.getItem('userId');
+
+    setGenerating(true);
+    setSteps([]);
+    setResult(null);
+    setShowErrorDialog(false);
+    setErrorMessage(null);
+
+    try {
+      addStep(`开始生成 Skill: ${systemName || '新系统'}`);
+      updateStep(0, 'running', '正在解析 Swagger 文档...');
+
+      const res = await fetch('/api/skills/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          swaggerUrl,
+          systemName: systemName || undefined,
+          baseUrl: baseUrl || undefined,
+          token: token || undefined,
+          userId: userId || undefined,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || '生成失败');
+      }
+
+      updateStep(0, 'success', `生成完成! ${data.apiCount} 个 API, ${data.scriptCount} 个脚本`);
+
+      setResult({
+        success: true,
+        skillName: data.skillName,
+        displayName: data.displayName,
+        scriptCount: data.scriptCount,
+        apiCount: data.apiCount,
+      });
+      setShowSuccessDialog(true);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : '生成失败';
+      if (steps.length > 0) {
+        updateStep(steps.length - 1, 'error', message);
+      }
+      setErrorMessage(message);
+      setShowErrorDialog(true);
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const handleAICreate = () => {
+    const userId = localStorage.getItem('userId');
+    if (userId) {
+      router.push(`/?skill=skill-creator&prompt=${encodeURIComponent('帮我创建一个新的技能')}`);
+    } else {
+      router.push('/');
+    }
+  };
+
+  const output = steps.map((step) => {
+    const icon = step.status === 'running' ? '⏳' : step.status === 'success' ? '✓' : step.status === 'error' ? '✗' : '○';
+    return `${icon} [${step.status.toUpperCase()}] ${step.message}`;
+  }).join('\n');
+
+  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">选择创建方式</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          <Card className="cursor-pointer hover:border-primary/50 hover:bg-primary/5 transition-all" onClick={handleAICreate}>
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <MessageSquare className="w-6 h-6 text-primary" />
+                </div>
+                <div>
+                  <CardTitle className="flex items-center gap-2">
+                    AI 引导创建
+                    <span className="text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded">推荐</span>
+                  </CardTitle>
+                  <CardDescription>通过对话创建通用技能</CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <ul className="text-sm text-muted-foreground space-y-2">
+                <li className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  多轮对话引导，更易上手
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  自动生成符合规范的 Skill
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-green-500">✓</span>
+                  支持知识型、命令型、工作流型
+                </li>
+              </ul>
+              <Button className="w-full mt-4">
+                开始对话创建
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card className="hover:border-primary/50 transition-all">
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded-lg bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
+                  <Zap className="w-6 h-6 text-orange-600" />
+                </div>
+                <div>
+                  <CardTitle>Swagger/API 生成</CardTitle>
+                  <CardDescription>从 API 文档自动生成</CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <ul className="text-sm text-muted-foreground space-y-2">
+                <li className="flex items-center gap-2">
+                  <span className="text-orange-500">⚡</span>
+                  自动解析 Swagger/OpenAPI
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-orange-500">⚡</span>
+                  生成可执行的 API 调用脚本
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-orange-500">⚡</span>
+                  自动分类只读/修改操作
+                </li>
+              </ul>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Zap className="w-5 h-5 text-orange-600" />
+              Swagger/API Skill 生成
+            </CardTitle>
+            <CardDescription>
+              提供 API 文档地址，系统将自动解析并生成 Skill
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="swaggerUrl">Swagger URL *</Label>
+                  <Input
+                    id="swaggerUrl"
+                    placeholder="https://api.example.com/openapi.json"
+                    value={swaggerUrl}
+                    onChange={(e) => setSwaggerUrl(e.target.value)}
+                    disabled={generating}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    支持 Swagger 2.0 和 OpenAPI 3.0 格式
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="systemName">显示名称</Label>
+                  <Input
+                    id="systemName"
+                    placeholder="My API System"
+                    value={systemName}
+                    onChange={(e) => setSystemName(e.target.value)}
+                    disabled={generating}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    用于 @引用和显示，目录名自动生成
+                  </p>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="baseUrl">API Base URL</Label>
+                    <Input
+                      id="baseUrl"
+                      placeholder="https://api.example.com"
+                      value={baseUrl}
+                      onChange={(e) => setBaseUrl(e.target.value)}
+                      disabled={generating}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="token">API Token（可选）</Label>
+                    <Input
+                      id="token"
+                      type="password"
+                      placeholder="your-api-token"
+                      value={token}
+                      onChange={(e) => setToken(e.target.value)}
+                      disabled={generating}
+                    />
+                  </div>
+                </div>
+
+                <Button
+                  className="w-full"
+                  onClick={handleSwaggerGenerate}
+                  disabled={generating || !swaggerUrl}
+                >
+                  {generating ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      生成中...
+                    </>
+                  ) : (
+                    <>
+                      <Plus className="w-4 h-4 mr-2" />
+                      生成 Skill
+                    </>
+                  )}
+                </Button>
+
+                <div className="p-3 rounded bg-muted text-sm">
+                  <div className="font-medium mb-2">示例 Swagger URL</div>
+                  <div className="space-y-1 text-xs font-mono text-muted-foreground">
+                    <div>https://petstore.swagger.io/v2/swagger.json</div>
+                    <div>https://jsonplaceholder.typicode.com/openapi.yaml</div>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <Label className="mb-2 block">生成进度</Label>
+                <Terminal output={output || '等待开始生成...'} className="min-h-[280px]">
+                  <TerminalHeader>
+                    <TerminalTitle>生成日志</TerminalTitle>
+                  </TerminalHeader>
+                  <TerminalContent />
+                </Terminal>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Dialog open={showSuccessDialog} onOpenChange={setShowSuccessDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-green-600">
+              <CheckCircle className="w-5 h-5" />
+              生成成功!
+            </DialogTitle>
+            <DialogDescription>
+              技能已成功创建
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {result && (
+              <div className="grid grid-cols-2 gap-4">
+                <div className="p-3 rounded bg-muted text-center">
+                  <div className="text-2xl font-bold">{result.apiCount}</div>
+                  <div className="text-sm text-muted-foreground">API 端点</div>
+                </div>
+                <div className="p-3 rounded bg-muted text-center">
+                  <div className="text-2xl font-bold">{result.scriptCount}</div>
+                  <div className="text-sm text-muted-foreground">脚本</div>
+                </div>
+              </div>
+            )}
+          </div>
+          <DialogFooter className="sm:justify-center gap-2">
+            <Link href={result ? `/my/skills/${result.skillName}` : '/my/skills'} className="flex-1">
+              <Button variant="outline" className="w-full">
+                查看 Skill
+              </Button>
+            </Link>
+            <Button onClick={() => {
+              setShowSuccessDialog(false);
+              setSwaggerUrl('');
+              setSystemName('');
+              setBaseUrl('');
+              setToken('');
+              setSteps([]);
+              setResult(null);
+            }}>
+              再生成一个
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={showErrorDialog} onOpenChange={setShowErrorDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-red-600">
+              <XCircle className="w-5 h-5" />
+              生成失败
+            </DialogTitle>
+            <DialogDescription>
+              操作未能完成，请检查错误信息
+            </DialogDescription>
+          </DialogHeader>
+          <div className="p-3 rounded-lg bg-red-50 text-red-700 text-sm border border-red-200">
+            {errorMessage}
+          </div>
+          <DialogFooter className="sm:justify-center">
+            <Button onClick={() => setShowErrorDialog(false)}>
+              关闭
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/app/my/skills/page.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import {
+  ArrowLeft,
+  Bot,
+  Trash2,
+  Plus,
+  Package,
+  Star,
+  Upload,
+  Edit
+} 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';
+
+interface UserSkill {
+  id: string;
+  skillName: string;
+  source: 'market' | 'builtin' | 'personal';
+  useCount: number;
+  isBuiltin: boolean;
+  installedAt: string;
+  lastUsedAt?: string;
+}
+
+export default function MySkillsPage() {
+  const router = useRouter();
+  const [skills, setSkills] = useState<UserSkill[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [userId, setUserId] = useState<string>('');
+  const [uploadingSkill, setUploadingSkill] = useState<string | null>(null);
+  const [uploadMessage, setUploadMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  useEffect(() => {
+    const uid = localStorage.getItem('userId');
+    if (!uid) {
+      router.push('/login');
+      return;
+    }
+    setUserId(uid);
+    fetchSkills(uid);
+  }, [router]);
+
+  const fetchSkills = async (uid: string) => {
+    try {
+      const res = await fetch(`/api/user/skills?userId=${uid}`);
+      if (res.ok) {
+        const data = await res.json();
+        setSkills(data.skills || []);
+      }
+    } catch (error) {
+      console.error('Failed to fetch skills:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUninstall = async (skillName: string) => {
+    if (!userId) return;
+
+    try {
+      const res = await fetch('/api/user/skills', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userId,
+          action: 'uninstall',
+          skillName,
+        }),
+      });
+
+      if (res.ok) {
+        setSkills(prev => prev.filter(s => s.skillName !== skillName));
+      }
+    } catch (error) {
+      console.error('Failed to uninstall skill:', error);
+    }
+  };
+
+  const handleUploadToMarket = async (skillName: string) => {
+    if (!userId) return;
+
+    setUploadingSkill(skillName);
+    setUploadMessage(null);
+
+    try {
+      const res = await fetch('/api/marketplace/skills', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userId,
+          skillName,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        const message = data.updated ? '技能已更新到市场' : '技能已上传到市场';
+        setUploadMessage({ type: 'success', text: message });
+      } else {
+        setUploadMessage({ type: 'error', text: data.error || '上传失败' });
+      }
+    } catch (error) {
+      console.error('Failed to upload skill:', error);
+      setUploadMessage({ type: 'error', text: '上传失败，请稍后重试' });
+    } finally {
+      setUploadingSkill(null);
+    }
+  };
+
+  const builtinSkills = skills.filter(s => s.isBuiltin);
+  const marketSkills = skills.filter(s => s.source === 'market');
+  const personalSkills = skills.filter(s => s.source === 'personal');
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div />
+        <div className="flex items-center gap-2">
+          <Link href="/my/skills/new">
+            <Button size="sm">
+              <Plus className="w-4 h-4 mr-2" />
+              创建技能
+            </Button>
+          </Link>
+          <Link href="/market/skills">
+            <Button variant="outline" size="sm">
+              <Package className="w-4 h-4 mr-2" />
+              市场
+            </Button>
+          </Link>
+        </div>
+      </div>
+      <div>
+        {loading ? (
+          <div className="text-center py-12 text-gray-500">加载中...</div>
+        ) : skills.length === 0 ? (
+          <div className="text-center py-12">
+            <Bot className="w-12 h-12 mx-auto text-gray-300 mb-4" />
+            <p className="text-gray-500 mb-6">还没有安装任何Skill</p>
+            <div className="flex items-center justify-center gap-4">
+              <Link href="/my/skills/new">
+                <Button>
+                  <Plus className="w-4 h-4 mr-2" />
+                  创建技能
+                </Button>
+              </Link>
+              <Link href="/market/skills">
+                <Button variant="outline">
+                  <Package className="w-4 h-4 mr-2" />
+                  去市场安装
+                </Button>
+              </Link>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {/* 内置Skill */}
+            {builtinSkills.length > 0 && (
+              <section>
+                <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Star className="w-5 h-5 text-yellow-500" />
+                  内置Skill
+                </h2>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  {builtinSkills.map((skill) => (
+                    <Card key={skill.id}>
+                      <CardHeader className="pb-3">
+                        <CardTitle className="text-lg">{skill.skillName}</CardTitle>
+                        <CardDescription>内置技能，无法卸载</CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="flex items-center justify-between text-sm text-gray-500">
+                          <span>使用 {skill.useCount} 次</span>
+                          <Badge>内置</Badge>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </section>
+            )}
+
+            {/* 市场安装的Skill */}
+            {marketSkills.length > 0 && (
+              <section>
+                <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Package className="w-5 h-5 text-blue-500" />
+                  市场Skill ({marketSkills.length})
+                </h2>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  {marketSkills.map((skill) => (
+                    <Card key={skill.id}>
+                      <CardHeader className="pb-3">
+                        <CardTitle className="text-lg">{skill.skillName}</CardTitle>
+                          <CardDescription>
+                            安装于 {skill.installedAt ? new Date(skill.installedAt).toLocaleDateString() : '未知'}
+                          </CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="flex items-center justify-between">
+                          <span className="text-sm text-gray-500">
+                            使用 {skill.useCount} 次
+                          </span>
+                          <Button 
+                            variant="outline" 
+                            size="sm"
+                            onClick={() => handleUninstall(skill.skillName)}
+                          >
+                            <Trash2 className="w-4 h-4 mr-1" />
+                            卸载
+                          </Button>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </section>
+            )}
+
+            {/* 个人创建的Skill */}
+            {personalSkills.length > 0 && (
+              <section>
+                <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Bot className="w-5 h-5 text-green-500" />
+                  个人Skill ({personalSkills.length})
+                </h2>
+                {uploadMessage && (
+                  <div className={`mb-4 p-3 rounded-lg text-sm ${uploadMessage.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
+                    {uploadMessage.text}
+                  </div>
+                )}
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  {personalSkills.map((skill) => (
+                    <Card key={skill.id}>
+                      <CardHeader className="pb-3">
+                        <CardTitle className="text-lg">{skill.skillName}</CardTitle>
+                          <CardDescription>
+                            {skill.installedAt ? `创建于 ${new Date(skill.installedAt).toLocaleDateString()}` : '未知创建时间'}
+                          </CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-sm text-gray-500">
+                            使用 {skill.useCount ?? 0} 次
+                          </span>
+                        </div>
+                        <div className="flex gap-2">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="flex-1"
+                            asChild
+                          >
+                            <Link href={`/my/skills/${skill.skillName}`}>
+                              <Edit className="w-4 h-4 mr-1" />
+                              编辑
+                            </Link>
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="flex-1"
+                            onClick={() => handleUploadToMarket(skill.skillName)}
+                            disabled={uploadingSkill === skill.skillName}
+                          >
+                            {uploadingSkill === skill.skillName ? (
+                              <>
+                                <span className="w-4 h-4 mr-1 animate-spin">⏳</span>
+                                上传中
+                              </>
+                            ) : (
+                              <>
+                                <Upload className="w-4 h-4 mr-1" />
+                                上传
+                              </>
+                            )}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleUninstall(skill.skillName)}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </section>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}