44 lines
3.3 KiB
Markdown
44 lines
3.3 KiB
Markdown
# 前端重构接力说明
|
||
|
||
当前仓库处于“旧版逻辑 + Vite 构建 + 局部组件化”的中间态，后续需要继续完成 Pinia 状态拆分与组件化重构。以下信息供下一位开发者参考。
|
||
|
||
## 已完成工作
|
||
|
||
1. **整体迁移**：旧版 `index.html + app.js` 的 DOM/逻辑已迁入 `static/src/App.vue` 与 `static/src/app.ts`，由 Vite + Vue 3 构建，入口 `main.ts` 使用标准 `createApp(App)`。
|
||
2. **组件抽离**：
|
||
- `ConversationSidebar.vue`：对话历史侧栏、搜索、折叠按钮。
|
||
- `LeftPanel.vue`：左侧 Logo 卡 + 三合一面板（文件树/待办/子智能体）。
|
||
- `FileNode.vue`：文件树递归节点。
|
||
- `TokenDrawer.vue`：Token/Quota/资源统计抽屉。
|
||
- `FocusPanel.vue`：右侧聚焦文件展示。
|
||
- `PersonalizationDrawer.vue`：个人空间抽屉。
|
||
3. **依赖抽离**：图标常量集中在 `static/src/utils/icons.ts`，组件复用。KaTeX/Prism/Socket.IO 改用 npm 依赖。
|
||
4. **构建验证**：`npm run build` 能通过，`static/dist` 生成最新产物。
|
||
|
||
## 待办事项
|
||
|
||
1. **Pinia Store 拆分**：按照 `doc/frontend/componentization_plan.md` 中的表格，将 `app.ts` 的 state/methods 拆成多个 store（连接、系统、对话、聊天、资源、文件、工具、个性化、UI 等），组件通过 store 获取/更新状态，逐步移除 `this.xxx`。
|
||
2. **组件化剩余区域**：
|
||
- 聊天区（消息列表、Action 卡、append/modify/system 块）。
|
||
- 输入区/Quick Menu/Quick Settings。
|
||
- Toast/Confirm/ContextMenu/EasterEgg overlay。
|
||
- 右侧聚焦的滚动锁/按钮等交互细节。
|
||
3. **逻辑封装**：将 Socket 事件、滚动锁、彩蛋执行、工具栈维护等重逻辑拆到 composables（例如 `useLegacySocket`、`useScrollLock`、`useEasterEgg`、`useToolActions`），并与 Pinia store 协调。
|
||
4. **样式模块化**：目前仍依赖 `static/style.css`，可逐步将各组件的样式拆至局部或 SCSS 文件，保持 `legacy` 视觉一致。
|
||
|
||
## 推荐实施顺序
|
||
|
||
1. 建立基础 store（Connection/System/Conversation/Chat），先把最常用的 state 拆出去，再让 `ConversationSidebar`、`LeftPanel` 等组件改用 store。
|
||
2. 按模块迁移模板：聊天区 → 输入区 → Toast/Overlay → 右侧面板。每次迁移时将相关 methods 搬入 store/composable。
|
||
3. 集中处理高阶逻辑：Quick Menu、工具禁用、彩蛋、子智能体轮询、Token/Quota 轮询等，确保事件流与旧版一致。
|
||
4. 每完成一块运行 `npm run build` 并手测：对话切换、发送/停止、工具流式、彩蛋触发、个人空间 CRUD、聚焦面板更新等，确保与 `static/old_version_backup/前端备份` 一致。
|
||
|
||
## 注意事项
|
||
|
||
- 保持旧版 API 和 Socket 事件名称不变。
|
||
- UI 细节（aria-label、按钮提示、SVG）需与备份版一致，参见 `doc/frontend/legacy_ui_spec.md`。
|
||
- `window.ensureCsrfToken`、`window.requestSocketToken`、`EasterEggRegistry` 等仍由后端注入，组件需要容错。
|
||
- 过程中可参考 `/tmp/backup_App_corrupted.vue` 或 `static/old_version_backup/前端备份/` 来比对原结构。
|
||
|
||
如遇上下文不足，可将正在拆分的模板块另存临时文件，逐段迁移。完成全部 Pinia + 组件化后，即可开始清理 `app.ts` 中不再需要的逻辑，并考虑拆分 CSS。祝顺利！
|