4.6 KiB
4.6 KiB
前端开发
开发规范见 开发规范文档。
控制台架构
两个控制台入口共享 ConsoleShell（src/web/components/ConsoleShell/）：
- Admin（
src/web/consoles/admin/）：路由/（总览）、/projects、/models。 - Workbench（
src/web/consoles/workbench/）：路由/workbench/:projectId、/workbench/:projectId/chat。WorkbenchProjectGate从 URL 读 projectId，通过ProjectContext提供项目上下文，仅 active 项目渲染。
ConsoleShell 包含：ConfigProvider(zhCN) + AntApp + Layout(Header/Sider/Content) + 主题切换（明亮/黑暗/系统）+ 侧边栏折叠。Header 显示品牌名、版本号和控制台标题。
Sidebar（src/web/components/Sidebar/）纯展示组件，通过 menuItems props 接收配置。
页面
| 页面 | 路径 | 入口 |
|---|---|---|
| 总览 | / |
pages/dashboard/index.tsx |
| 项目管理 | /projects |
pages/projects/index.tsx — ProjectToolbar(Tab 切换 active/archived + 搜索 + 新建) + ProjectTable + ProjectFormModal。支持创建/编辑/归档/恢复/删除，仅 active 项目可跳转工作台。 |
| 模型管理 | /models |
pages/models/index.tsx — antd Tabs 切换供应商/模型视图。模型表单和表格使用 GET /api/providers/options。供应商表单支持预保存连通性测试（POST /api/providers/test），新建时 type 默认 openai-compatible，测试 ok: false 展示失败但不阻止保存。 |
| 聊天室 | /workbench/:id |
consoles/workbench/pages/ChatPage.tsx |
| 404 | * |
pages/404/index.tsx |
聊天页面
ChatPage = ChatSidebar + ChatPanel。
- ChatSidebar：TanStack Query 管理会话列表，创建/删除操作。
- ChatPanel：
useChat（@ai-sdk/react）+DefaultChatTransport（ai 包）与后端 SSE 通信。按part.type分派渲染：TextPart（streamdown Markdown）、ReasoningPart、ToolPart（四态）。支持编辑重发、重新生成、复制。 - ChatInputArea：
Input.TextArea+Button+Select（模型切换）。
Hooks
| Hook | 说明 |
|---|---|
use-meta.ts |
/api/meta（30s 轮询，5s staleTime） |
use-projects.ts |
项目 CRUD + archive/restore |
use-providers.ts |
供应商 CRUD + test connection |
use-models.ts |
模型 CRUD + test connection |
use-conversations.ts |
会话和消息 fetch 函数（不含 Query hooks） |
use-theme-preference |
主题偏好 localStorage 持久化 |
use-sidebar-collapsed |
侧边栏折叠 localStorage 持久化 |
工具函数
| 文件 | 导出 |
|---|---|
utils/api.ts |
handleResponse(response, extract)、handleVoidResponse(response) |
utils/time.ts |
formatCountdown、formatDurationUnit、formatRelativeTime、isOlderThan、subtractHours |
更新触发条件
修改前端运行时代码结构、页面组成、组件索引或 hooks/工具清单时，必须更新本文档。