= ({ collapsed }) => {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const menuItems: MenuProps['items'] = [
+ {
+ key: '/workspaces',
+ icon: ,
+ label: '工作空间',
+ onClick: () => navigate('/workspaces'),
+ },
+ {
+ key: '/projects',
+ icon: ,
+ label: '项目',
+ onClick: () => navigate('/projects'),
+ },
+ {
+ key: '/members',
+ icon: ,
+ label: '成员管理',
+ onClick: () => navigate('/members'),
+ },
+ {
+ key: '/subscription',
+ icon: ,
+ label: '订阅管理',
+ onClick: () => navigate('/subscription'),
+ },
+ {
+ key: '/profile',
+ icon: ,
+ label: '个人中心',
+ onClick: () => navigate('/profile'),
+ },
+ ];
+
+ // 根据当前路径选中菜单项
+ const selectedKey = '/' + location.pathname.split('/')[1];
+
+ return (
+
+
+ {collapsed ? '🦐' : '小虾 SaaS'}
+
+
+
+ );
+};
+
+export default Sidebar;
diff --git a/apps/web/src/hooks/useAuth.ts b/apps/web/src/hooks/useAuth.ts
new file mode 100644
index 000000000..a8281f0da
--- /dev/null
+++ b/apps/web/src/hooks/useAuth.ts
@@ -0,0 +1,79 @@
+/**
+ * 认证相关 Hooks
+ */
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import * as authApi from '@/api/auth';
+import { useAuthStore } from '@/store/authStore';
+
+// 登录 Hook
+export const useLogin = () => {
+ const navigate = useNavigate();
+ const setAuth = useAuthStore((state) => state.setAuth);
+
+ return useMutation({
+ mutationFn: authApi.login,
+ onSuccess: (data) => {
+ // 先保存 token
+ localStorage.setItem('access_token', data.access_token);
+ localStorage.setItem('refresh_token', data.refresh_token);
+
+ // 获取用户信息
+ authApi.getCurrentUser().then((user) => {
+ setAuth(user, data.access_token, data.refresh_token);
+ navigate('/workspaces');
+ });
+ },
+ });
+};
+
+// 注册 Hook
+export const useRegister = () => {
+ const navigate = useNavigate();
+
+ return useMutation({
+ mutationFn: authApi.register,
+ onSuccess: () => {
+ navigate('/login', {
+ state: { message: '注册成功！请查收验证邮件。' },
+ });
+ },
+ });
+};
+
+// 登出 Hook
+export const useLogout = () => {
+ const navigate = useNavigate();
+ const clearAuth = useAuthStore((state) => state.clearAuth);
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: authApi.logout,
+ onSuccess: () => {
+ clearAuth();
+ queryClient.clear();
+ navigate('/login');
+ },
+ onError: () => {
+ // 即使登出失败也清除本地状态
+ clearAuth();
+ queryClient.clear();
+ navigate('/login');
+ },
+ });
+};
+
+// 获取当前用户 Hook
+export const useCurrentUser = () => {
+ const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+ const setUser = useAuthStore((state) => state.setUser);
+
+ return useQuery({
+ queryKey: ['currentUser'],
+ queryFn: authApi.getCurrentUser,
+ enabled: isAuthenticated,
+ onSuccess: (user) => {
+ setUser(user);
+ },
+ });
+};
diff --git a/apps/web/src/hooks/useWorkspace.ts b/apps/web/src/hooks/useWorkspace.ts
new file mode 100644
index 000000000..296461a65
--- /dev/null
+++ b/apps/web/src/hooks/useWorkspace.ts
@@ -0,0 +1,64 @@
+/**
+ * 工作空间相关 Hooks
+ */
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import * as workspaceApi from '@/api/workspace';
+import { useWorkspaceStore } from '@/store/workspaceStore';
+
+// 获取工作空间列表
+export const useWorkspaces = () => {
+ const setWorkspaces = useWorkspaceStore((state) => state.setWorkspaces);
+
+ return useQuery({
+ queryKey: ['workspaces'],
+ queryFn: workspaceApi.getWorkspaces,
+ onSuccess: (data) => {
+ setWorkspaces(data);
+ },
+ });
+};
+
+// 获取工作空间详情
+export const useWorkspace = (id: string) => {
+ return useQuery({
+ queryKey: ['workspace', id],
+ queryFn: () => workspaceApi.getWorkspace(id),
+ enabled: !!id,
+ });
+};
+
+// 创建工作空间
+export const useCreateWorkspace = () => {
+ const queryClient = useQueryClient();
+ const addWorkspace = useWorkspaceStore((state) => state.addWorkspace);
+
+ return useMutation({
+ mutationFn: workspaceApi.createWorkspace,
+ onSuccess: (data) => {
+ addWorkspace(data);
+ queryClient.invalidateQueries({ queryKey: ['workspaces'] });
+ },
+ });
+};
+
+// 获取成员列表
+export const useWorkspaceMembers = (workspaceId: string) => {
+ return useQuery({
+ queryKey: ['workspaceMembers', workspaceId],
+ queryFn: () => workspaceApi.getMembers(workspaceId),
+ enabled: !!workspaceId,
+ });
+};
+
+// 邀请成员
+export const useInviteMember = (workspaceId: string) => {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (data: workspaceApi.InviteMemberRequest) =>
+ workspaceApi.inviteMember(workspaceId, data),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['workspaceMembers', workspaceId] });
+ },
+ });
+};
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 3d7150da8..6d7ac3d4b 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,10 +1,42 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+/**
+ * 更新主入口，引入全局样式
+ */
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import router from './router';
+import './index.css';
+import './styles/global.css';
+
+// 创建 React Query 客户端
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: 1,
+ refetchOnWindowFocus: false,
+ staleTime: 5 * 60 * 1000, // 5 分钟
+ gcTime: 10 * 60 * 1000, // 10 分钟
+ },
+ },
+});
+
+// Ant Design 主题配置
+const theme = {
+ token: {
+ colorPrimary: '#1890ff',
+ borderRadius: 4,
+ },
+};
ReactDOM.createRoot(document.getElementById('root')!).render(
-
- ,
-)
+
+
+
+
+
+
+);
diff --git a/apps/web/src/pages/admin/Dashboard.tsx b/apps/web/src/pages/admin/Dashboard.tsx
new file mode 100644
index 000000000..e508e7ad7
--- /dev/null
+++ b/apps/web/src/pages/admin/Dashboard.tsx
@@ -0,0 +1,68 @@
+/**
+ * Admin Dashboard 仪表盘
+ */
+import React from 'react';
+import { Card, Row, Col, Statistic, Table } from 'antd';
+import {
+ UserOutlined,
+ CrownOutlined,
+ DollarOutlined,
+ RiseOutlined,
+} from '@ant-design/icons';
+
+const Dashboard: React.FC = () => {
+ // 模拟数据
+ const stats = [
+ { title: '总用户数', value: 1234, icon: , color: '#1890ff' },
+ { title: '付费用户', value: 156, icon: , color: '#52c41a' },
+ { title: '月收入', value: 15444, prefix: '¥', icon: , color: '#faad14' },
+ { title: '活跃用户', value: 892, icon: , color: '#722ed1' },
+ ];
+
+ const recentUsers = [
+ { id: '1', username: 'user1', email: 'user1@example.com', created_at: '2024-06-17' },
+ { id: '2', username: 'user2', email: 'user2@example.com', created_at: '2024-06-16' },
+ { id: '3', username: 'user3', email: 'user3@example.com', created_at: '2024-06-15' },
+ ];
+
+ const columns = [
+ { title: '用户名', dataIndex: 'username', key: 'username' },
+ { title: '邮箱', dataIndex: 'email', key: 'email' },
+ { title: '注册时间', dataIndex: 'created_at', key: 'created_at' },
+ ];
+
+ return (
+
+
Dashboard
+
+
+ {stats.map((stat, index) => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
用户管理
+
+
+ }
+ style={{ width: 300 }}
+ />
+
+
+
+
+
+
+
+ ,
+ ]}
+ />
+
+
+ );
+ }
+
+ return (
+
+
+
+ 请输入您的邮箱地址，我们将发送重置密码的链接到您的邮箱。
+
+
+
+
+
+
+
+
+ ,
+ ]}
+ />
+
+
+ );
+ }
+
+ if (resetMutation.isSuccess) {
+ return (
+
+
+
+
+ ,
+ ]}
+ />
+
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+export default ResetPassword;
diff --git a/apps/web/src/pages/profile/AccountSecurity.tsx b/apps/web/src/pages/profile/AccountSecurity.tsx
new file mode 100644
index 000000000..b3f9e79d8
--- /dev/null
+++ b/apps/web/src/pages/profile/AccountSecurity.tsx
@@ -0,0 +1,110 @@
+/**
+ * 账号安全设置页面
+ */
+import React from 'react';
+import { Card, Form, Input, Button, message, Divider } from 'antd';
+import { LockOutlined, MailOutlined } from '@ant-design/icons';
+
+const AccountSecurity: React.FC = () => {
+ const [passwordForm] = Form.useForm();
+ const [emailForm] = Form.useForm();
+
+ const onPasswordSubmit = (values: any) => {
+ console.log('修改密码:', values);
+ message.success('密码修改成功');
+ passwordForm.resetFields();
+ };
+
+ const onEmailSubmit = (values: any) => {
+ console.log('修改邮箱:', values);
+ message.success('验证邮件已发送到新邮箱');
+ emailForm.resetFields();
+ };
+
+ return (
+
+
账号安全
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AccountSecurity;
+
+export const Component = AccountSecurity;
diff --git a/apps/web/src/pages/profile/NotificationSettings.tsx b/apps/web/src/pages/profile/NotificationSettings.tsx
new file mode 100644
index 000000000..500f0b194
--- /dev/null
+++ b/apps/web/src/pages/profile/NotificationSettings.tsx
@@ -0,0 +1,90 @@
+/**
+ * 通知设置页面
+ */
+import React from 'react';
+import { Card, Form, Switch, Button, message, Divider } from 'antd';
+
+const NotificationSettings: React.FC = () => {
+ const [form] = Form.useForm();
+
+ const onFinish = (values: any) => {
+ console.log('保存通知设置:', values);
+ message.success('通知设置已保存');
+ };
+
+ return (
+
+ );
+};
+
+export default NotificationSettings;
+
+export const Component = NotificationSettings;
diff --git a/apps/web/src/pages/profile/SessionManagement.tsx b/apps/web/src/pages/profile/SessionManagement.tsx
new file mode 100644
index 000000000..93275ff8c
--- /dev/null
+++ b/apps/web/src/pages/profile/SessionManagement.tsx
@@ -0,0 +1,121 @@
+/**
+ * Session 管理页面
+ */
+import React from 'react';
+import { Card, Table, Button, Tag, Space, Popconfirm, message } from 'antd';
+import { LaptopOutlined, MobileOutlined, DeleteOutlined } from '@ant-design/icons';
+
+interface Session {
+ id: string;
+ device: string;
+ deviceType: 'desktop' | 'mobile';
+ location: string;
+ lastActive: string;
+ isCurrent: boolean;
+}
+
+const SessionManagement: React.FC = () => {
+ // 模拟数据
+ const sessions: Session[] = [
+ {
+ id: '1',
+ device: 'Chrome on Windows',
+ deviceType: 'desktop',
+ location: '北京, 中国',
+ lastActive: '当前会话',
+ isCurrent: true,
+ },
+ {
+ id: '2',
+ device: 'Safari on iPhone',
+ deviceType: 'mobile',
+ location: '上海, 中国',
+ lastActive: '2 小时前',
+ isCurrent: false,
+ },
+ ];
+
+ const handleLogout = (sessionId: string) => {
+ console.log('登出会话:', sessionId);
+ message.success('会话已结束');
+ };
+
+ const handleLogoutAll = () => {
+ console.log('登出所有其他设备');
+ message.success('所有其他设备已登出');
+ };
+
+ const columns = [
+ {
+ title: '设备',
+ dataIndex: 'device',
+ key: 'device',
+ render: (device: string, record: Session) => (
+
+ {record.deviceType === 'desktop' ? : }
+ {device}
+
+ ),
+ },
+ {
+ title: '位置',
+ dataIndex: 'location',
+ key: 'location',
+ },
+ {
+ title: '最后活动',
+ dataIndex: 'lastActive',
+ key: 'lastActive',
+ render: (text: string, record: Session) => (
+ <>
+ {text}
+ {record.isCurrent && 当前}
+
+ ),
+ },
+ {
+ title: '操作',
+ key: 'action',
+ render: (_: any, record: Session) => {
+ if (record.isCurrent) {
+ return -;
+ }
+ return (
+ handleLogout(record.id)}
+ okText="确定"
+ cancelText="取消"
+ >
+ }>
+ 结束会话
+
+
+ );
+ },
+ },
+ ];
+
+ return (
+
+ );
+};
+
+export default SessionManagement;
+
+export const Component = SessionManagement;
diff --git a/apps/web/src/pages/profile/Settings.tsx b/apps/web/src/pages/profile/Settings.tsx
new file mode 100644
index 000000000..8d3f3df46
--- /dev/null
+++ b/apps/web/src/pages/profile/Settings.tsx
@@ -0,0 +1,55 @@
+/**
+ * 个人设置页面
+ */
+import React from 'react';
+import { Card, Form, Input, Button, message } from 'antd';
+import { useAuthStore } from '@/store/authStore';
+
+const Settings: React.FC = () => {
+ const user = useAuthStore((state) => state.user);
+ const [form] = Form.useForm();
+
+ const onFinish = (values: any) => {
+ console.log('保存设置:', values);
+ message.success('设置已保存');
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default Settings;
+
+export const Component = Settings;
diff --git a/apps/web/src/pages/subscription/Billing.tsx b/apps/web/src/pages/subscription/Billing.tsx
new file mode 100644
index 000000000..f864b5f30
--- /dev/null
+++ b/apps/web/src/pages/subscription/Billing.tsx
@@ -0,0 +1,106 @@
+/**
+ * 账单管理页面
+ */
+import React from 'react';
+import { Card, Table, Button, Tag, Space } from 'antd';
+import { DownloadOutlined, FileTextOutlined } from '@ant-design/icons';
+
+interface Invoice {
+ id: string;
+ date: string;
+ amount: number;
+ status: 'paid' | 'pending' | 'overdue';
+ plan: string;
+}
+
+const Billing: React.FC = () => {
+ // 模拟数据
+ const invoices: Invoice[] = [
+ {
+ id: 'INV-2024-001',
+ date: '2024-06-01',
+ amount: 99,
+ status: 'paid',
+ plan: 'Pro',
+ },
+ {
+ id: 'INV-2024-002',
+ date: '2024-05-01',
+ amount: 99,
+ status: 'paid',
+ plan: 'Pro',
+ },
+ ];
+
+ const getStatusTag = (status: string) => {
+ const config: Record = {
+ paid: { color: 'success', text: '已支付' },
+ pending: { color: 'processing', text: '待支付' },
+ overdue: { color: 'error', text: '逾期' },
+ };
+ const item = config[status] || config.pending;
+ return {item.text};
+ };
+
+ const columns = [
+ {
+ title: '账单编号',
+ dataIndex: 'id',
+ key: 'id',
+ },
+ {
+ title: '日期',
+ dataIndex: 'date',
+ key: 'date',
+ },
+ {
+ title: '套餐',
+ dataIndex: 'plan',
+ key: 'plan',
+ },
+ {
+ title: '金额',
+ dataIndex: 'amount',
+ key: 'amount',
+ render: (amount: number) => `¥${amount}`,
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
+ render: (status: string) => getStatusTag(status),
+ },
+ {
+ title: '操作',
+ key: 'action',
+ render: (_: any, record: Invoice) => (
+
+ }>
+ 下载
+
+ }>
+ 发票
+
+
+ ),
+ },
+ ];
+
+ return (
+
+ );
+};
+
+export default Billing;
+
+export const Component = Billing;
diff --git a/apps/web/src/pages/subscription/Plans.tsx b/apps/web/src/pages/subscription/Plans.tsx
new file mode 100644
index 000000000..da71d6493
--- /dev/null
+++ b/apps/web/src/pages/subscription/Plans.tsx
@@ -0,0 +1,80 @@
+/**
+ * 订阅计划页面
+ */
+import React from 'react';
+import { Card, Row, Col, Button, List } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
+
+const Plans: React.FC = () => {
+ const plans = [
+ {
+ name: 'Free',
+ price: '¥0',
+ period: '/月',
+ features: ['3 个项目', '10GB 存储', '3 个成员', '邮件支持'],
+ },
+ {
+ name: 'Pro',
+ price: '¥99',
+ period: '/月',
+ features: ['无限项目', '100GB 存储', '20 个成员', '优先支持'],
+ recommended: true,
+ },
+ {
+ name: 'Enterprise',
+ price: '¥999',
+ period: '/月',
+ features: ['无限项目', '1TB 存储', '无限成员', '专属支持', '定制开发'],
+ },
+ ];
+
+ return (
+
+
选择适合你的套餐
+
+ {plans.map((plan) => (
+
+
+ {plan.recommended && (
+ 推荐
+ )}
+ {plan.name}
+
+ {plan.price}
+
+ {plan.period}
+
+
+ (
+
+
+ {item}
+
+ )}
+ />
+
+
+
+ ))}
+
+
+
setSelectedPlan('pro')}
+ className={selectedPlan === 'pro' ? 'selected-plan' : ''}
+ >
+ Pro 套餐
+ ¥99/月
+
+ - 无限项目
+ - 100GB 存储
+ - 20 个成员
+
+
+
setSelectedPlan('enterprise')}
+ className={selectedPlan === 'enterprise' ? 'selected-plan' : ''}
+ >
+ Enterprise 套餐
+ ¥999/月
+
+ - 无限项目
+ - 1TB 存储
+ - 无限成员
+ - 专属支持
+
+
+
+
升级订阅
+
+
{steps[current].content}
+
+ {current < steps.length - 1 && (
+ <>
+ {current > 0 && (
+
+ )}
+
+
+ )}
+
+
加载中...
;
+ if (!workspace) return 工作空间不存在
;
+
+ const getStatusColor = (status: string) => {
+ const colors: Record = {
+ normal: '#52c41a',
+ warning: '#faad14',
+ critical: '#ff4d4f',
+ exceeded: '#ff4d4f',
+ };
+ return colors[status] || colors.normal;
+ };
+
+ const items = [
+ {
+ key: 'overview',
+ label: '概览',
+ children: (
+
+
+
+ {workspace.name}
+
+ {workspace.subscription_plan}
+
+
+ {workspace.subscription_status}
+
+
+ {new Date(workspace.created_at).toLocaleDateString()}
+
+
+
+
+ {quota && (
+
+
+
+
+
+
项目数量：{quota.projects.used} /{' '}
+ {quota.projects.limit}
+
+
+
+
+ 存储空间：{quota.storage.used_gb.toFixed(2)} GB /{' '}
+ {quota.storage.limit_gb} GB
+
+
+
+
+ )}
+
+
+ }
+ onClick={() => setInviteModalOpen(true)}
+ >
+ 邀请成员
+
+
+
+
+
工作空间设置（待开发）
,
+ },
+ ];
+
+ return (
+
+
{workspace.name}
+
+ setInviteModalOpen(false)}
+ />
+
+ );
+};
+
+export default WorkspaceDetail;
+
+export const Component = WorkspaceDetail;
diff --git a/apps/web/src/pages/workspace/WorkspaceList.css b/apps/web/src/pages/workspace/WorkspaceList.css
new file mode 100644
index 000000000..4e85a33d3
--- /dev/null
+++ b/apps/web/src/pages/workspace/WorkspaceList.css
@@ -0,0 +1,37 @@
+.workspace-list {
+ padding: 24px;
+}
+
+.workspace-list-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+}
+
+.workspace-card {
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.workspace-card:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.workspace-name {
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 8px;
+}
+
+.empty-state {
+ text-align: center;
+ padding: 80px 0;
+}
+
+.empty-state p {
+ font-size: 16px;
+ color: #999;
+ margin: 24px 0;
+}
diff --git a/apps/web/src/pages/workspace/WorkspaceList.tsx b/apps/web/src/pages/workspace/WorkspaceList.tsx
new file mode 100644
index 000000000..6f8d7ab6d
--- /dev/null
+++ b/apps/web/src/pages/workspace/WorkspaceList.tsx
@@ -0,0 +1,72 @@
+/**
+ * 工作空间列表页面
+ */
+import React from 'react';
+import { Card, Button, Row, Col, Tag, Space } from 'antd';
+import { PlusOutlined, TeamOutlined, CrownOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import { useWorkspaces } from '@/hooks/useWorkspace';
+import './WorkspaceList.css';
+
+const WorkspaceList: React.FC = () => {
+ const navigate = useNavigate();
+ const { data: workspaces, isLoading } = useWorkspaces();
+
+ const getPlanTag = (plan: string) => {
+ const planConfig = {
+ free: { color: 'default', text: 'Free' },
+ pro: { color: 'blue', text: 'Pro' },
+ enterprise: { color: 'gold', text: 'Enterprise' },
+ };
+ const config = planConfig[plan as keyof typeof planConfig] || planConfig.free;
+ return {config.text};
+ };
+
+ return (
+
+
+
我的工作空间
+ } size="large">
+ 创建工作空间
+
+
+
+
+ {workspaces?.map((workspace) => (
+
+ navigate(`/workspaces/${workspace.id}`)}
+ className="workspace-card"
+ >
+
+ {workspace.name}
+ {getPlanTag(workspace.subscription_plan)}
+
+ 成员数量
+
+
+ 创建于 {new Date(workspace.created_at).toLocaleDateString()}
+
+
+
+
+ ))}
+
+
+ {!isLoading && workspaces?.length === 0 && (
+
+
+
还没有工作空间
+
}>
+ 创建第一个工作空间
+
+
+ )}
+