work-agent 0.1.0

package/app/market/skills/page.tsx

@@ -0,0 +1,397 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import {
+	Plus,
+	Search,
+	Star,
+	Download,
+	ArrowLeft,
+	Sparkles,
+	Bot,
+	Package,
+	Rocket,
+	Shield,
+	Loader2,
+	Trash2,
+} 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 { Input } from '@/components/ui/input';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+interface MarketSkill {
+  id: string;
+  name: string;
+  displayName: string;
+  description: string;
+  version: string;
+  author: string;
+  authorName?: string;
+  status: 'pending' | 'approved' | 'rejected' | 'archived';
+  isOfficial: boolean;
+  ratingAvg: number;
+  ratingCount: number;
+  downloadCount: number;
+  reviewedBy?: string;
+  reviewedAt?: string;
+  reviewComment?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function MarketPage() {
+  const router = useRouter();
+  const [skills, setSkills] = useState<MarketSkill[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [userId, setUserId] = useState<string>('');
+  const [userRole, setUserRole] = useState<'admin' | 'guest'>('guest');
+  const [installedSkills, setInstalledSkills] = useState<Set<string>>(new Set());
+const [promotingSkillId, setPromotingSkillId] = useState<string | null>(null);
+	const [deletingSkillId, setDeletingSkillId] = useState<string | null>(null);
+	const [alertMessage, setAlertMessage] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
+
+  useEffect(() => {
+    const uid = localStorage.getItem('userId');
+    if (!uid) {
+      router.push('/login');
+      return;
+    }
+    setUserId(uid);
+
+    // Get user role from localStorage (stored as separate key by login page)
+    const role = localStorage.getItem('role') as 'admin' | 'guest' | null;
+    setUserRole(role || 'guest');
+
+    fetchSkills();
+    fetchInstalledSkills(uid);
+  }, [router]);
+
+  const fetchSkills = async () => {
+    try {
+      // Only show approved skills in the market
+      const res = await fetch(`/api/marketplace/skills?status=approved&search=${encodeURIComponent(search)}`);
+      if (res.ok) {
+        const data = await res.json();
+        setSkills(data.skills || []);
+      }
+    } catch (error) {
+      console.error('Failed to fetch skills:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchInstalledSkills = async (uid: string) => {
+    try {
+      const res = await fetch(`/api/user/skills?userId=${uid}`);
+      if (res.ok) {
+        const data = await res.json();
+        setInstalledSkills(new Set((data.skills || []).map((s: any) => s.skillName)));
+      }
+    } catch (error) {
+      console.error('Failed to fetch installed skills:', error);
+    }
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    fetchSkills();
+  };
+
+  const handleInstall = 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: 'install',
+          skillName,
+          source: 'market',
+        }),
+      });
+
+      if (res.ok) {
+        setInstalledSkills(prev => new Set([...prev, skillName]));
+      }
+    } catch (error) {
+      console.error('Failed to install skill:', error);
+    }
+  };
+
+  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) {
+        setInstalledSkills(prev => {
+          const next = new Set(prev);
+          next.delete(skillName);
+          return next;
+        });
+      }
+    } catch (error) {
+      console.error('Failed to uninstall skill:', error);
+    }
+  };
+
+  const handlePromoteToSystem = async (skillId: string, skillName: string) => {
+    if (!userId || userRole !== 'admin') {
+      setAlertMessage({ type: 'error', message: '需要管理员权限' });
+      return;
+    }
+
+    setPromotingSkillId(skillId);
+    setAlertMessage(null);
+
+    try {
+      const res = await fetch(`/api/marketplace/skills/${skillId}/promote-to-system?userId=${userId}`, {
+        method: 'POST',
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setAlertMessage({ type: 'success', message: data.message || '技能已提升为系统技能' });
+        // Refresh the skills list
+        fetchSkills();
+      } else {
+        const data = await res.json();
+        setAlertMessage({ type: 'error', message: data.error || '提升技能失败' });
+      }
+    } catch (error) {
+      console.error('Failed to promote skill:', error);
+      setAlertMessage({ type: 'error', message: '提升技能失败' });
+} finally {
+			setPromotingSkillId(null);
+		}
+	};
+
+	const handleDelete = async (skillId: string, skillName: string) => {
+		if (!userId || userRole !== 'admin') {
+			setAlertMessage({ type: 'error', message: '需要管理员权限' });
+			return;
+		}
+
+		if (!confirm(`确定要删除技能 "${skillName}" 吗？此操作不可恢复。`)) {
+			return;
+		}
+
+		setDeletingSkillId(skillId);
+		setAlertMessage(null);
+
+		try {
+			const res = await fetch(`/api/marketplace/skills/${skillId}?userId=${userId}&role=${userRole}`, {
+				method: 'DELETE',
+			});
+
+			if (res.ok) {
+				setAlertMessage({ type: 'success', message: '技能已删除' });
+				setSkills(prev => prev.filter(s => s.id !== skillId));
+			} else {
+				const data = await res.json();
+				setAlertMessage({ type: 'error', message: data.error || '删除技能失败' });
+			}
+		} catch (error) {
+			console.error('Failed to delete skill:', error);
+			setAlertMessage({ type: 'error', message: '删除技能失败' });
+		} finally {
+			setDeletingSkillId(null);
+		}
+	};
+
+  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">
+            <Button variant="outline" size="sm">
+              <Bot className="w-4 h-4 mr-2" />
+              我的Skill
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      {/* Alert Message */}
+      {alertMessage && (
+        <Alert
+          variant={alertMessage.type === 'error' ? 'destructive' : 'default'}
+          className="mb-4"
+        >
+          <AlertDescription>{alertMessage.message}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Search */}
+        <form onSubmit={handleSearch} className="mb-6">
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+              <Input
+                type="text"
+                placeholder="搜索Skill..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <Button type="submit">搜索</Button>
+          </div>
+        </form>
+
+        {/* Stats */}
+        <div className="grid grid-cols-3 gap-4 mb-6">
+          <Card>
+            <CardContent className="p-4">
+              <div className="text-2xl font-bold">{skills.length}</div>
+              <div className="text-sm text-gray-500">市场Skill</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="text-2xl font-bold">{installedSkills.size}</div>
+              <div className="text-sm text-gray-500">已安装</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="text-2xl font-bold">
+                {skills.reduce((sum, s) => sum + s.downloadCount, 0)}
+              </div>
+              <div className="text-sm text-gray-500">总下载</div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Skills Grid */}
+        {loading ? (
+          <div className="text-center py-12 text-gray-500">加载中...</div>
+        ) : skills.length === 0 ? (
+          <div className="text-center py-12">
+            <Package className="w-12 h-12 mx-auto text-gray-300 mb-4" />
+            <p className="text-gray-500">暂无Skill</p>
+          </div>
+        ) : (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {skills.map((skill) => (
+              <Card key={skill.id} className="hover:shadow-md transition-shadow">
+                <CardHeader className="pb-3">
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <CardTitle className="text-lg">{skill.displayName}</CardTitle>
+                      <CardDescription className="text-xs mt-1">
+                        by {skill.authorName || skill.author || '匿名'}
+                      </CardDescription>
+                    </div>
+                    <div className="flex gap-1">
+                      {skill.isOfficial && (
+                        <Badge variant="secondary" className="text-xs">
+                          <Shield className="w-3 h-3 mr-1" />
+                          官方
+                        </Badge>
+                      )}
+                      {skill.status === 'approved' && userRole === 'admin' && (
+                        <Badge variant="outline" className="text-xs border-green-500 text-green-600">
+                          已审核
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm text-gray-600 mb-4 line-clamp-2">
+                    {skill.description || '暂无描述'}
+                  </p>
+
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4 text-sm text-gray-500">
+                      <span className="flex items-center gap-1">
+                        <Download className="w-4 h-4" />
+                        {skill.downloadCount}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Star className="w-4 h-4 text-yellow-500" />
+                        {skill.ratingAvg > 0 ? skill.ratingAvg.toFixed(1) : '-'}
+                      </span>
+                    </div>
+
+<div className="flex gap-2">
+						{/* Admin buttons for approved skills */}
+						{userRole === 'admin' && skill.status === 'approved' && (
+							<>
+								<Button
+									variant="outline"
+									size="sm"
+									className="text-purple-600 border-purple-600 hover:bg-purple-50"
+									onClick={() => handlePromoteToSystem(skill.id, skill.name)}
+									disabled={promotingSkillId === skill.id}
+									title="提升为系统技能"
+								>
+									{promotingSkillId === skill.id ? (
+										<Loader2 className="w-4 h-4 animate-spin" />
+									) : (
+										<Rocket className="w-4 h-4" />
+									)}
+								</Button>
+								<Button
+									variant="outline"
+									size="sm"
+									className="text-red-600 border-red-600 hover:bg-red-50"
+									onClick={() => handleDelete(skill.id, skill.name)}
+									disabled={deletingSkillId === skill.id}
+									title="删除技能"
+								>
+									{deletingSkillId === skill.id ? (
+										<Loader2 className="w-4 h-4 animate-spin" />
+									) : (
+										<Trash2 className="w-4 h-4" />
+									)}
+								</Button>
+							</>
+						)}
+
+                      {installedSkills.has(skill.name) ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleUninstall(skill.name)}
+                        >
+                          已安装
+                        </Button>
+                      ) : (
+                        <Button
+                          size="sm"
+                          onClick={() => handleInstall(skill.name)}
+                        >
+                          安装
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+  );
+}