agent-Specialization/doc/frontend/next_steps.md

前端重构接力说明

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