# 前端重构接力说明

当前仓库处于“旧版逻辑 + 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。祝顺利！