+ {title &&
+
+ {title}
} +
+ {showSearch && (
+
+ U
+
+
+
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/frontend-v2/src/components/layout/Sidebar.tsx b/frontend-v2/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..eada4fe
--- /dev/null
+++ b/frontend-v2/src/components/layout/Sidebar.tsx
@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+import {
+ MessageSquare,
+ BookOpen,
+ Zap,
+ Bot,
+ Puzzle,
+ Workflow,
+ Shield,
+ Radio,
+ AppWindow,
+ LayoutDashboard,
+ User,
+ Bell,
+ ChevronLeft,
+ ChevronRight,
+} from 'lucide-react';
+
+interface NavItem {
+ path: string;
+ label: string;
+ icon: React.ReactNode;
+}
+
+interface NavGroup {
+ title: string;
+ items: NavItem[];
+}
+
+const navGroups: NavGroup[] = [
+ {
+ title: 'AI 能力',
+ items: [
+ { path: '/chat', label: 'AI 聊天', icon:
+
+
+
+ 首页
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+ 七虎AI
+测试页面 - 如果看到这个说明 React 正常工作
+
+
+ {isLoading ? (
+
+
+
+
+ ))
+ )}
+
+ {/* Create New */}
+
+
+
+
+
+
+ );
+}
diff --git a/frontend-v2/src/pages/front/ChatPage/index.tsx b/frontend-v2/src/pages/front/ChatPage/index.tsx
new file mode 100644
index 0000000..d88aea3
--- /dev/null
+++ b/frontend-v2/src/pages/front/ChatPage/index.tsx
@@ -0,0 +1,270 @@
+import { useState, useRef, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Badge } from '@/components/ui/badge';
+import {
+ Send,
+ Sparkles,
+ Plus,
+ Search,
+ Settings,
+ MessageSquare,
+ Copy,
+ ThumbsUp,
+ ThumbsDown,
+ RotateCcw,
+ Trash2,
+ Loader2,
+} from 'lucide-react';
+import {
+ useConversations,
+ useMessages,
+ useCreateConversation,
+ useSendMessage,
+ useDeleteConversation,
+} from '@/hooks/useApi';
+import type { Conversation, ChatMessage } from '@/api/client';
+
+export function ChatPage() {
+ const [selectedConv, setSelectedConv] = useState
+
+
+
+
+
+ 应用中心
+管理第三方 AI 应用
+
+
+ ) : apps.length === 0 ? (
+
+
+ ) : (
+ apps.map((app: MarketApp) => (
+ 暂无应用
+去应用市场浏览并安装应用
+
+
+
+
+ {app.type === 'standalone' ? (
+
+
+
+ {app.status === 'enabled' ? '已启用' : '已停用'}
+
+
+ {app.type === 'standalone' ? '独立应用' : '嵌入式'}
+
+
+ {app.name}
+{app.description}
+ +
+
+
+
+
+
+ 创建新应用
+
+ {/* Conversation List */}
+
+ );
+}
+
+// Import for streaming
+import { chatApi } from '@/api/client';
diff --git a/frontend-v2/src/pages/front/ImBotHub/index.tsx b/frontend-v2/src/pages/front/ImBotHub/index.tsx
new file mode 100644
index 0000000..6e79519
--- /dev/null
+++ b/frontend-v2/src/pages/front/ImBotHub/index.tsx
@@ -0,0 +1,163 @@
+import { motion } from 'framer-motion';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import {
+ Wifi,
+ WifiOff,
+ Plus,
+ MessageSquare,
+ Settings,
+ QrCode,
+ ExternalLink,
+ Loader2,
+ AlertTriangle,
+} from 'lucide-react';
+import { useImBotStatus, useDisconnectBot } from '@/hooks/useApi';
+
+const otherChannels = [
+ { id: '2', name: '企业微信', icon: '🏢', status: 'disconnected' as const, botId: '', lastMessage: '', messageCount: 0 },
+ { id: '3', name: '飞书', icon: '📨', status: 'disconnected' as const, botId: '', lastMessage: '', messageCount: 0 },
+ { id: '4', name: 'QQ', icon: '🐧', status: 'disconnected' as const, botId: '', lastMessage: '', messageCount: 0 },
+];
+
+export function ImBotHub() {
+ const { data: wechatStatus, isLoading } = useImBotStatus();
+ const disconnectBot = useDisconnectBot();
+
+ const handleDisconnect = async () => {
+ if (!confirm('确定断开微信连接？')) return;
+ try {
+ await disconnectBot.mutateAsync();
+ } catch {}
+ };
+
+ return (
+
+
+
+
+
+ {/* Chat Area */}
+
+
+
+
+
+
+
+
+ {convsLoading ? (
+
+
+
+ ) : (
+ conversations.map((conv: Conversation) => (
+
+
+
+
+ ))
+ )}
+
+ {/* Messages */}
+
+ {!selectedConv ? (
+
+
+ {/* Input Area */}
+
+
+
+ ) : msgsLoading ? (
+
+
+ 开始与 AI 对话吧
++ 支持 Markdown 渲染和代码高亮，选择合适的模型开始聊天 +
+ +
+
+ ) : (
+
+ {messages.map((msg: ChatMessage) => (
+
+
+ ))}
+
+ {/* Streaming indicator */}
+ {streamingContent && (
+
+
+ )}
+
+
+ )}
+
+
+ {msg.content}
+ {msg.role === 'assistant' && (
+
+
+
+
+
+
+ )}
+
+
+ {streamingContent}
+
+
+
+
+
+
+
+
+ setInput(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && handleSend()}
+ placeholder={selectedConv ? '输入消息... (Shift+Enter 换行)' : '请先选择或创建对话'}
+ className="flex-1"
+ disabled={!selectedConv || sendMessage.isPending}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Other Channels - Mock */}
+
+ {otherChannels.map((channel) => (
+
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/frontend-v2/src/pages/front/KnowledgePage/index.tsx b/frontend-v2/src/pages/front/KnowledgePage/index.tsx
new file mode 100644
index 0000000..dc1d7db
--- /dev/null
+++ b/frontend-v2/src/pages/front/KnowledgePage/index.tsx
@@ -0,0 +1,201 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+ Search,
+ Plus,
+ Upload,
+ FileText,
+ Database,
+ RefreshCw,
+ Trash2,
+ Loader2,
+} from 'lucide-react';
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import {
+ useKnowledgeBases,
+ useCreateKnowledgeBase,
+ useDeleteKnowledgeBase,
+} from '@/hooks/useApi';
+import type { KnowledgeBase } from '@/api/client';
+
+export function KnowledgePage() {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [showCreateDialog, setShowCreateDialog] = useState(false);
+ const [newName, setNewName] = useState('');
+ const [newDesc, setNewDesc] = useState('');
+
+ const { data: bases = [], isLoading } = useKnowledgeBases();
+ const createBase = useCreateKnowledgeBase();
+ const deleteBase = useDeleteKnowledgeBase();
+
+ const handleCreate = async () => {
+ if (!newName.trim()) return;
+ try {
+ await createBase.mutateAsync({ name: newName, description: newDesc });
+ setShowCreateDialog(false);
+ setNewName('');
+ setNewDesc('');
+ } catch {}
+ };
+
+ const handleDelete = async (id: string) => {
+ if (!confirm('确定删除此知识库？')) return;
+ try {
+ await deleteBase.mutateAsync(id);
+ } catch {}
+ };
+
+ return (
+
+
+
+ {/* WeChat Bot - Real Data */}
+
+
+
+ 渠道管理
+配置和管理您的 IM 渠道
+
+
+ {isLoading ? (
+
+
+
+ {wechatStatus?.status === 'connected' && (
+
+
+
+ 💬
+
+
+
+ 个人微信
++ {wechatStatus?.ilink_bot_id || '未配置'} +
+
+
+
+ )}
+
+ {wechatStatus?.status === 'expired' && (
+
+ 会话已过期，请重新扫码连接
+
+ )}
+
+
+ {wechatStatus?.status === 'connected' ? (
+ <>
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+ {channel.icon}
+
+
+
+ {channel.name}
+未配置
+
+
+
+
+ {/* Search Bar */}
+
+
+
+
+
+ {/* Tabs */}
+
+
+
+ {isLoading ? (
+
+
+
+
+ ))
+ )}
+
+ {/* Add New Card */}
+ setShowCreateDialog(true)}
+ >
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend-v2/src/pages/front/LandingPage/index.tsx b/frontend-v2/src/pages/front/LandingPage/index.tsx
new file mode 100644
index 0000000..dc779f5
--- /dev/null
+++ b/frontend-v2/src/pages/front/LandingPage/index.tsx
@@ -0,0 +1,259 @@
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+ MessageSquare,
+ Zap,
+ Bot,
+ Puzzle,
+ BookOpen,
+ AppWindow,
+ TrendingUp,
+ ArrowRight,
+ ChevronRight,
+ Loader2,
+} from 'lucide-react';
+import { useDashboardStats, useMarketApps, useCurrentUser } from '@/hooks/useApi';
+
+const quickEntries = [
+ { icon:
+
+ + 支持跨库检索 · 向量相似度排序 · 来源溯源 +
+
+
+ 全部知识库
+ 最近使用
+
+
+
+
+
+
+ ) : (
+ bases.map((kb: KnowledgeBase) => (
+
+
+ {kb.status === 'active' ? '运行中' : kb.status === 'building' ? '构建中' : '异常'}
+
+
+
+
+ {kb.name}
+
+
+
+ {kb.description && (
+ {kb.description}
+ )} +
+
+ 更新于 {new Date(kb.updated_at).toLocaleDateString('zh-CN')}
+
+
+
+
+
+
+
+
+
+ 新建知识库
+
+ {/* Header */}
+
+
+
+
+ {/* Stats */}
+
+ {displayStats.map((stat, i) => (
+
+
+
+
+
+
+ ))}
+
+
+ {/* Quick Entry */}
+
+
+ {/* Footer */}
+
+
+ );
+}
diff --git a/frontend-v2/src/pages/front/LoginPage/index.tsx b/frontend-v2/src/pages/front/LoginPage/index.tsx
new file mode 100644
index 0000000..e85f022
--- /dev/null
+++ b/frontend-v2/src/pages/front/LoginPage/index.tsx
@@ -0,0 +1,139 @@
+import { useState, type FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Label } from '@/components/ui/label';
+import { Mail, Smartphone, ArrowRight, Loader2 } from 'lucide-react';
+import { useLogin } from '@/hooks/useApi';
+
+export function LoginPage() {
+ const navigate = useNavigate();
+ const loginMutation = useLogin();
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [phone, setPhone] = useState('');
+ const [code, setCode] = useState('');
+ const [error, setError] = useState('');
+
+ const handleLogin = async (e: FormEvent) => {
+ e.preventDefault();
+ setError('');
+ try {
+ await loginMutation.mutateAsync({ username: email, password });
+ navigate('/chat');
+ } catch (err) {
+ setError(err instanceof Error ? err.message : '登录失败');
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ 七
+
+
+ 七虎AI
+ AI PaaS 平台
+
+ {stat.label}
+
+ {statsLoading ? (
+
+ {stat.value}
+ )} + {stat.change && ( + +
+
+ {quickEntries.map((entry, i) => (
+
+ navigate(entry.path)}
+ >
+
+
+
+
+ ))}
+
+
+
+ {/* Hot Rankings */}
+ 快捷入口
+
+ {entry.icon}
+
+
+
+
+
+ + {entry.label} +
+{entry.desc}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {appsLoading ? (
+
+
+ ))
+ )}
+
+
+
+ ) : hotSkills.length === 0 ? (
+ 暂无数据
+ ) : ( + hotSkills.map((skill, i) => ( +
+
+ {i + 1}
+
+ {skill.name}
+
+ {skill.downloads}
+
+
+
+
+
+
+
+
+
+ {appsLoading ? (
+
+
+ ))
+ )}
+
+
+
+ ) : hotAgents.length === 0 ? (
+ 暂无数据
+ ) : ( + hotAgents.map((agent, i) => ( +
+
+ {i + 1}
+
+ {agent.name}
+
+ {agent.downloads}
+
+
+
+ );
+}
diff --git a/frontend-v2/src/styles/globals.css b/frontend-v2/src/styles/globals.css
new file mode 100644
index 0000000..4b2fa99
--- /dev/null
+++ b/frontend-v2/src/styles/globals.css
@@ -0,0 +1,395 @@
+/* ===== 七虎AI 统一设计系统 ===== */
+/* 桥接旧版 CSS 变量 + Tailwind shadcn/ui 主题 */
+
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+@import "tailwindcss";
+@source "../";
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* Tailwind CSS 主题 (shadcn/ui 兼容) */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+
+@theme inline {
+ --radius-sm: 6px;
+ --radius-md: 8px;
+ --radius-lg: 12px;
+ --radius-xl: 16px;
+ --radius-2xl: 20px;
+ --radius-full: 9999px;
+
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-success: #219B5E;
+ --color-warning: #E8922C;
+ --color-info: #3B82F6;
+
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* Tailwind 主题色值 (CSS 变量) */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+
+:root {
+ /* --- Tailwind shadcn/ui 变量 --- */
+ --background: #F8F9FB;
+ --foreground: #101214;
+ --card: #FFFFFF;
+ --card-foreground: #101214;
+ --primary: #5B5FED;
+ --primary-foreground: #FFFFFF;
+ --secondary: #F1F3F7;
+ --secondary-foreground: #101214;
+ --muted: #F1F3F7;
+ --muted-foreground: #8B919E;
+ --accent: #5B5FED;
+ --accent-foreground: #FFFFFF;
+ --destructive: #D9383A;
+ --destructive-foreground: #FFFFFF;
+ --border: #E3E6EB;
+ --input: #E3E6EB;
+ --ring: #5B5FED;
+
+ /* --- 旧版变量 (兼容旧页面) --- */
+ --color-bg-primary: #F8F9FB;
+ --color-bg-secondary: #FFFFFF;
+ --color-bg-tertiary: #F1F3F7;
+ --color-bg-hover: #EBEEF3;
+ --color-bg-active: #E3E7F0;
+
+ --color-text-primary: #101214;
+ --color-text-secondary: #545A65;
+ --color-text-tertiary: #8B919E;
+ --color-text-disabled: #BFC4CE;
+ --color-text-inverse: #FFFFFF;
+
+ --color-accent: #5B5FED;
+ --color-accent-hover: #4A4ECC;
+ --color-accent-light: #EEEDFF;
+ --color-accent-subtle: #F6F5FF;
+
+ --color-success: #219B5E;
+ --color-success-light: #E6F7EE;
+ --color-warning: #E8922C;
+ --color-warning-light: #FEF4E8;
+ --color-error: #D9383A;
+ --color-error-light: #FDEBEB;
+ --color-info: #3B82F6;
+ --color-info-light: #EBF2FE;
+
+ --color-border: #E3E6EB;
+ --color-border-light: #EEF0F4;
+ --color-border-hover: #CDD2DA;
+
+ --color-sidebar-bg: #F5F6F9;
+ --color-sidebar-hover: #EAECF2;
+ --color-sidebar-active: #E1E3F0;
+
+ /* --- 阴影 --- */
+ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+ --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
+ --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
+ --shadow-xl: 0 20px 48px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
+
+ /* --- 间距 --- */
+ --space-xs: 4px;
+ --space-sm: 8px;
+ --space-md: 12px;
+ --space-lg: 16px;
+ --space-xl: 20px;
+ --space-2xl: 24px;
+ --space-3xl: 32px;
+ --space-4xl: 40px;
+ --space-5xl: 48px;
+
+ /* --- 字号 --- */
+ --text-xs: 11px;
+ --text-sm: 13px;
+ --text-base: 14px;
+ --text-md: 15px;
+ --text-lg: 18px;
+ --text-xl: 22px;
+ --text-2xl: 28px;
+ --text-3xl: 36px;
+
+ /* --- 布局 --- */
+ --sidebar-width: 240px;
+ --sidebar-collapsed: 64px;
+ --header-height: 56px;
+
+ /* --- 过渡 --- */
+ --transition-fast: 120ms ease;
+ --transition-normal: 200ms ease;
+ --transition-slow: 300ms ease;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* 暗色模式 */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+
+.dark, [data-theme="dark"] {
+ --background: #0f172a;
+ --foreground: #f8fafc;
+ --card: #1e293b;
+ --card-foreground: #f8fafc;
+ --primary: #818cf8;
+ --primary-foreground: #0f172a;
+ --secondary: #1e293b;
+ --secondary-foreground: #f8fafc;
+ --muted: #1e293b;
+ --muted-foreground: #94a3b8;
+ --accent: #818cf8;
+ --accent-foreground: #0f172a;
+ --destructive: #f87171;
+ --destructive-foreground: #0f172a;
+ --border: #334155;
+ --input: #334155;
+ --ring: #818cf8;
+
+ /* 旧版变量暗色 */
+ --color-bg-primary: #0f172a;
+ --color-bg-secondary: #1e293b;
+ --color-bg-tertiary: #1e293b;
+ --color-bg-hover: #334155;
+ --color-bg-active: #475569;
+ --color-text-primary: #f8fafc;
+ --color-text-secondary: #cbd5e1;
+ --color-text-tertiary: #94a3b8;
+ --color-text-disabled: #475569;
+ --color-accent: #818cf8;
+ --color-accent-hover: #a5b4fc;
+ --color-accent-light: rgba(129,140,248,0.15);
+ --color-border: #334155;
+ --color-border-light: #1e293b;
+ --color-border-hover: #475569;
+ --color-sidebar-bg: #1e293b;
+ --color-sidebar-hover: #334155;
+ --color-sidebar-active: #475569;
+
+ --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+ --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
+ --shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
+ --shadow-xl: 0 20px 48px rgba(0,0,0,0.5);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* 全局基础 */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+
+*, *::before, *::after {
+ box-sizing: border-box;
+ border-color: var(--border);
+}
+
+html {
+ font-size: var(--text-base);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ overflow-x: hidden;
+}
+
+body {
+ margin: 0;
+ font-family: var(--font-sans);
+ color: var(--foreground);
+ background-color: var(--background);
+ line-height: 1.6;
+ overflow: hidden;
+ overflow-x: hidden;
+ height: 100vh;
+}
+
+#root {
+ height: 100vh;
+ overflow: hidden;
+}
+
+a {
+ color: var(--primary);
+ text-decoration: none;
+}
+a:hover {
+ color: var(--primary-foreground);
+ text-decoration: underline;
+}
+
+button {
+ font-family: inherit;
+ cursor: pointer;
+ border: none;
+ background: none;
+}
+
+input, textarea, select {
+ font-family: inherit;
+ font-size: inherit;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* 滚动条 */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+::-webkit-scrollbar-thumb {
+ background: rgba(0,0,0,0.1);
+ border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+ background: rgba(0,0,0,0.2);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+ background: rgba(255,255,255,0.15);
+}
+.dark ::-webkit-scrollbar-thumb:hover {
+ background: rgba(255,255,255,0.25);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* 通用工具类 (旧页面兼容) */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+
+.page-container {
+ padding: var(--space-2xl);
+ height: 100%;
+ overflow-y: auto;
+}
+
+.card {
+ background: var(--card);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-sm);
+ transition: box-shadow var(--transition-normal);
+}
+
+.card:hover {
+ box-shadow: var(--shadow-md);
+}
+
+.badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 2px 8px;
+ border-radius: var(--radius-full);
+ font-size: var(--text-xs);
+ font-weight: 500;
+ line-height: 1.4;
+}
+
+.badge-success {
+ background: var(--color-success-light);
+ color: var(--color-success);
+}
+
+.badge-warning {
+ background: var(--color-warning-light);
+ color: var(--color-warning);
+}
+
+.badge-error {
+ background: var(--color-error-light);
+ color: var(--color-error);
+}
+
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ padding: 8px 16px;
+ border-radius: var(--radius-md);
+ font-size: var(--text-sm);
+ font-weight: 500;
+ cursor: pointer;
+ transition: all var(--transition-fast);
+ border: 1px solid transparent;
+}
+
+.btn-primary {
+ background: var(--primary);
+ color: var(--primary-foreground);
+ border-color: var(--primary);
+}
+
+.btn-primary:hover {
+ opacity: 0.9;
+ box-shadow: var(--shadow-sm);
+}
+
+.btn-outline {
+ background: transparent;
+ color: var(--foreground);
+ border-color: var(--border);
+}
+
+.btn-outline:hover {
+ background: var(--muted);
+}
+
+.input {
+ width: 100%;
+ padding: 8px 12px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-md);
+ background: var(--background);
+ color: var(--foreground);
+ font-size: var(--text-sm);
+ outline: none;
+ transition: border-color var(--transition-fast);
+}
+
+.input:focus {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(91,95,237,0.1);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* 动画 */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+
+@keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+.animate-spin {
+ animation: spin 1s linear infinite;
+}
+
+@keyframes fade-in {
+ from { opacity: 0; transform: translateY(4px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+ animation: fade-in 0.2s ease;
+}
diff --git a/frontend-v2/src/vite-env.d.ts b/frontend-v2/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/frontend-v2/src/vite-env.d.ts
@@ -0,0 +1 @@
+///