# 前端重构续办说明（next_steps_5 · 收官阶段）

> 本节点总结 Phase 3 之后的“收官阶段”成果，并给出后续可选任务。经过本轮，主 Web UI 已完全由 Vite + Vue 3 + Pinia + Sass 驱动，旧版 HTML/JS/CSS 迁入 `static/old_version_backup/` 仅作对照。

## 最新状态

1. **连接与 Socket**：`useConnectionStore` + `useLegacySocket()` 统一处理令牌、事件绑定、Stop/Quota 行为，App 仅负责引导。
2. **全局壳层**：`AppShell.vue` + `QuotaToast/ToastStack/ConfirmDialog/EasterEggOverlay/FileContextMenu` 负责所有 overlay，`useUiStore` 托管 Toast/Confirm/Quota/EasterEgg 状态。
3. **上传与聊天链路**：`useUploadStore`、`useChatStore`、`useToolStore`、`useMarkdownRenderer`、`useToolActions` 等 composable 已覆盖 Quick Menu、工具禁用、压缩、复制代码、思考/文本/工具流式渲染。
4. **样式体系**：`static/src/styles/` 分层 SCSS 已上线，`static/style.css` 仅 `@import /static/dist/assets/main.css`；旧 CSS 备份移动到 `static/old_version_backup/前端备份/`。
5. **构建验证**：`npm run build`（Vite 5 + TS + Sass）稳定输出，`static/dist/` 产物即为运行真值。

## 后续待办 / 可选方向

1. **卫星页面模块化**：`static/old_version_backup/` 中的登录、注册、终端、resource busy 等页面仍为旧式 HTML/JS，可仿照主工程拆分为独立 Vue 入口或合并到现有 app。
2. **文件管理器重构**：`static/file_manager/` 仍在使用 jQuery 风格脚本，建议逐步迁移 API/DOM 再并入 Vite 构建。
3. **终端 UI 统一**：CLI/Web 终端尚未使用 Pinia/组件化，若需一致体验，可复用现有 stores/composables。
4. **自动化测试**：目前缺少组件/端到端测试，优先覆盖高风险链路（上传、工具禁用、对话压缩、彩蛋）。
5. **性能与监控**：在构建稳定后，可加入 bundle 分析、错误上报、Socket 事件日志等观测手段，为后续扩展留余地。

## 推荐执行顺序

1. 优先梳理登录/注册/终端等入口，确定是否接入同一 Vite 管线（或建立微前端），以减少维护双套脚本的成本。
2. 视资源投入文件管理器与终端 UI 的模块化，同时复用现有样式变量与组件库，保证视觉一致。
3. 补充自动化测试与监控脚本，再收集性能/稳定性数据，作为后续优化的基线。
4. 若全部卫星页面完成迁移，可考虑精简 `static/old_version_backup/` 并在文档中标注最终归档策略。
