2.5 KiB
2.5 KiB
前端重构续办说明（next_steps_5 · 收官阶段）
本节点总结 Phase 3 之后的“收官阶段”成果，并给出后续可选任务。经过本轮，主 Web UI 已完全由 Vite + Vue 3 + Pinia + Sass 驱动，旧版 HTML/JS/CSS 迁入
static/old_version_backup/仅作对照。
最新状态
- 连接与 Socket：
useConnectionStore+useLegacySocket()统一处理令牌、事件绑定、Stop/Quota 行为，App 仅负责引导。 - 全局壳层：
AppShell.vue+QuotaToast/ToastStack/ConfirmDialog/EasterEggOverlay/FileContextMenu负责所有 overlay，useUiStore托管 Toast/Confirm/Quota/EasterEgg 状态。 - 上传与聊天链路：
useUploadStore、useChatStore、useToolStore、useMarkdownRenderer、useToolActions等 composable 已覆盖 Quick Menu、工具禁用、压缩、复制代码、思考/文本/工具流式渲染。 - 样式体系：
static/src/styles/分层 SCSS 已上线，static/style.css仅@import /static/dist/assets/main.css；旧 CSS 备份移动到static/old_version_backup/前端备份/。 - 构建验证：
npm run build（Vite 5 + TS + Sass）稳定输出，static/dist/产物即为运行真值。
后续待办 / 可选方向
- 卫星页面模块化：
static/old_version_backup/中的登录、注册、终端、resource busy 等页面仍为旧式 HTML/JS，可仿照主工程拆分为独立 Vue 入口或合并到现有 app。 - 文件管理器重构：
static/file_manager/仍在使用 jQuery 风格脚本，建议逐步迁移 API/DOM 再并入 Vite 构建。 - 终端 UI 统一：CLI/Web 终端尚未使用 Pinia/组件化，若需一致体验，可复用现有 stores/composables。
- 自动化测试：目前缺少组件/端到端测试，优先覆盖高风险链路（上传、工具禁用、对话压缩、彩蛋）。
- 性能与监控：在构建稳定后，可加入 bundle 分析、错误上报、Socket 事件日志等观测手段，为后续扩展留余地。
推荐执行顺序
- 优先梳理登录/注册/终端等入口，确定是否接入同一 Vite 管线（或建立微前端），以减少维护双套脚本的成本。
- 视资源投入文件管理器与终端 UI 的模块化，同时复用现有样式变量与组件库，保证视觉一致。
- 补充自动化测试与监控脚本，再收集性能/稳定性数据，作为后续优化的基线。
- 若全部卫星页面完成迁移，可考虑精简
static/old_version_backup/并在文档中标注最终归档策略。