agent-Specialization/doc/frontend/next_steps_3.md

前端重构续办说明（next_steps_3）

接续 next_steps_2。本阶段聚焦“聊天/输入域重构 + 资源抽象 + 全局壳层”三大阶段，确保所有逻辑逐步回归 Pinia store 与 composable，彻底告别 app.ts 的“超级控制器”角色。

阶段划分

1. 聊天/输入域重构

   • 拆出 useChatStore、useInputStore、useUploadStore 等，托管所有消息流和输入状态。
   • 将 ChatArea 的动作块拆成组件（Thinking/Text/Tool/Append/Modify/System），Markdown/复制/命令等复杂逻辑抽到 composable。
   • 完成后 App 只负责 socket → store 的分发，不再直接操作 messages 或输入框。

2. 业务面板与个性化

   • 为文件树/聚焦/子智能体/个性化等侧栏业务建立独立 store。
   • 把轮询、右键菜单及 Personalization Drawer 事件迁出 app.ts，组件只消费 store。

3. 全局壳层与 Socket/Overlay

   • 拆出 AppShell（ToastStack/ConfirmDialog/ContextMenu/EasterEgg）和 useLegacySocket、usePolling、useEasterEgg 等组合式函数。
   • 收束 Quick Menu/压缩对话/资源轮询等跨域逻辑，让 App 仅担任布局入口。

第一阶段（聊天/输入域）拆解

1. 状态迁移（已完成 ✅）

   • useChatStore：新增用户/助手消息、thinking/text action 管理、system/append/modify payload、滚动锁等 action。
   • useInputStore：可设置/清空输入、行数、多行态、焦点；sendMessage/autoResize/resetAllStates 均调用 store。
   • useUploadStore：托管上传中状态，上传逻辑与 Quick Upload 按 store 控制。

2. Action 组件化 / Markdown composable（已完成 ✅）

   • ChatArea 订阅 store 并拆出 ThinkingAction/TextAction/ToolAction/Modify*Action/ActionSummary。
   • 新增 useMarkdownRenderer，包含 Markdown parsing、代码高亮、LaTeX 渲染、streaming 兜底；App 中不再保留对应方法。
   • append_payload / modify_payload 事件已经接入 AppendPayloadAction、Modify*Action，旧版占位/警告信息在 Vue 组件中完整还原。

3. 动作按钮逻辑迁移（已完成 ✅）

   • 新增 useChatActionStore，集中托管复制/应用/执行命令动作，通过依赖注入与 quick input DOM 交互；ChatArea 直接调用 store，并对 copy-code-btn 进行事件委托，Markdown 代码块现在可以一键复制。

当前进展

• 聊天状态和输入状态的核心逻辑已迁至 Pinia；ChatArea 子组件化完成大半，Markdown 渲染也模块化。
• 资源域 (useResourceStore) 负责 Token/Quota/容器/存储轮询，上传域由 useUploadStore 托管。
• App.vue 仍承担 socket 事件分发、工具/Markdown action 以及少量 DOM 操作，后续阶段可继续拆解。

下一步建议

1. 推进第二阶段
   • 建立 useFileStore/useFocusStore/useSubAgentStore/usePersonalizationStore，把轮询与 Panel/Drawer 事件迁出。
2. 准备第三阶段
   • 规划 AppShell 和 Socket composable 的接口，以便迁移 Toast/Overlay 与全局事件监听。

如遇新的拆分点，继续在此文档更新阶段划分与状态，务必同步 legacy_ui_spec.md 的要求，保持旧版体验一致。