# 前端重构续办说明（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` 的要求，保持旧版体验一致。