52 lines
3.9 KiB
Markdown
52 lines
3.9 KiB
Markdown
# 前端重构续办说明（next_steps_2）
|
||
|
||
> 本文基于 `doc/frontend/next_steps.md` 的上下文，记录当前阶段的新进展、注意事项和下一步工作计划，供接力开发者参考。凡是与旧版 UI/交互存在歧义时，以 `doc/frontend/legacy_ui_spec.md` 及 `static/old_version_backup/前端备份` 目录为最终权威。
|
||
|
||
## 最新状态（相较上一版 next_steps）
|
||
|
||
1. **Pinia 引入**：`static/src/main.ts` 已创建 Pinia 实例；`useUiStore`/`useConversationStore` 落地，侧栏/会话列表基本信息改由 store 管理。App 通过 `mapWritableState` 读取这两个 store。
|
||
2. **组件化进展**：
|
||
- `ConversationSidebar`、`LeftPanel`、`FocusPanel`、`TokenDrawer`、`PersonalizationDrawer`、`QuickMenu` 已单独成组件。
|
||
- 聊天区拆成 `ChatArea.vue`（含全部 action 块）、输入区拆成 `InputComposer.vue`，`App.vue` 只负责传状态/事件。
|
||
3. **兼容逻辑**：
|
||
- 自动滚动、思考块滚动锁、工具卡片等逻辑仍在 `app.ts` 中，通过对新组件暴露的 `rootEl / getThinkingRef` 引用继续工作。
|
||
- Quick Menu/Settings/工具禁用/压缩对话等入口仍走原 methods，只是事件链路转接到了组件。
|
||
|
||
## 待办事项
|
||
|
||
1. **Pinia Store 拆分补全**
|
||
- 参考 `doc/frontend/componentization_plan.md`，逐步迁移 `app.ts` 的数据/方法至 `useChatStore`、`useInputStore`、`useToolStore`、`useResourceStore`、`usePersonalizationStore` 等。
|
||
- 控制流程：先搬 state，再迁 actions/watch，最后清理 `app.ts` 中重复逻辑。
|
||
|
||
2. **聊天/动作组件细分**
|
||
- 目前的 `ChatArea` 仍包含大量内联模板，可按行动类型（Thinking/Text/System/Modify/Tool/Summary）拆成独立子组件，增强可读性与复用性。
|
||
- Markdown 渲染、工具卡片展示、thinking-scroll 等复杂逻辑建议拆到 composable（如 `useMarkdownRenderer`、`useToolPayloadRenderer`）。
|
||
|
||
3. **输入区状态/事件整合**
|
||
- 将 `inputMessage`、`inputLineCount`、`inputIsFocused`、`quickMenuOpen` 等迁入 store 或 composable；InputComposer 只负责展示，避免 `app.ts` 持有大量 ref。
|
||
- 文件上传逻辑（`handleFileSelected`、`uploadSelectedFile`）可以移至 `useUploadStore` 或专用 composable，配合 InputComposer 的事件使用。
|
||
|
||
4. **Socket/轮询拆分**
|
||
- 现有 socket 事件与轮询仍在 `app.ts`，需抽出 `useLegacySocket`、`usePolling` 等组合式函数，让各 store 订阅自己关心的事件。
|
||
|
||
5. **Overlay/Toast 组件化**
|
||
- ToastStack/ConfirmDialog/EasterEggOverlay/ContextMenu 仍在 `App.vue`，后续需转成 `AppShell` 或独立组件，并提供订阅 API。
|
||
|
||
6. **样式与测试**
|
||
- 长期目标是按模块拆分 `style.css`，但当前仍以遗留 CSS 为准。组件化完成后再考虑 Sass 模块化。
|
||
- 继续保持 `npm run build` 通过；若引入 Pinia store/composable，补充单元测试/故事（可选）以防 regression。
|
||
|
||
## 推荐执行顺序
|
||
|
||
1. 完成 Input/Chat 相关 store/composable 拆分，移除 `App.vue` 的大部分 refs 和 watchers。
|
||
2. 逐步把资源/工具/子智能体等模块迁至对应 store，同时将轮询/Socket 事件拆出。
|
||
3. 在 store/composable 稳定后，再处理 Overlay/Toast/EasterEgg 等全局 UI。
|
||
4. 全量对照 `static/old_version_backup/前端备份` 与 `legacy_ui_spec` 做细节校验，确保折叠/aria/title 动作一致。
|
||
|
||
## 注意事项
|
||
|
||
- 任何新逻辑都需以 `legacy_ui_spec` 和 `static/old_version_backup/前端备份` 为准，确保视觉、交互、API 行为不偏离旧版。
|
||
- 操作 DOM 时尽量通过组件暴露出的 ref/composable，而不是直接访问 `$refs`。拆分后应逐步删除 `app.ts` 中的 DOM 引用。
|
||
- 保持现有 API / Socket 事件名不变；若有必要增加事件，请先在文档中说明。
|
||
- 在大规模迁移前，先写好过渡层（store/composable），避免一次性修改导致回退困难。
|