diff --git a/UI_REFACTOR_FRONTEND.md b/UI_REFACTOR_FRONTEND.md index 5ab9a6c..cd85bd7 100644 --- a/UI_REFACTOR_FRONTEND.md +++ b/UI_REFACTOR_FRONTEND.md @@ -2,7 +2,7 @@ > 目标:重构“用户前台界面”(优先 `/app`,可选包含 `/login`、`/register`、`/reset_password` 等页面)的视觉与交互,使其更现代、美观、易用、可维护;**后端接口与业务流程保持不变**。 > -> 实现方式:前台前端改为 **Vue3(含暗色模式)**(Vite 构建产物部署到 `static/app/`),所有接口继续使用现有 `/api/...`,不改后端功能。 +> 实现方式:前台前端改为 **Vue3 单页应用**(Vite 构建产物部署到 `static/app/`),所有接口继续使用现有 `/api/...`,不改后端功能。 --- @@ -181,7 +181,6 @@ - 请求:Axios(统一错误处理;不改变接口) - 状态:Pinia(推荐,用于账号/定时/截图/用户信息等全局状态) - 实时:socket.io-client(对齐现有 Socket 事件) -- 主题:暗色模式(Element Plus 暗色变量 + 自定义 design tokens),支持“跟随系统/手动切换/记忆” ### 4.2 构建与部署方式(与后台一致) @@ -226,10 +225,9 @@ > 你之前希望“每个阶段提交到 git 方便回滚”,前台我也按同样方式推进。 -阶段 1:工程搭建 + 新布局 + 暗色模式底座(可访问可导航) +阶段 1:工程搭建 + 新布局(可访问可导航) - 新建 `app-frontend/`,跑通 Vue3 + 路由 + 基础布局(Header/Sidebar/Drawer) -- 落地暗色模式(跟随系统 + 手动切换 + 本地记忆) -- Flask 接入 manifest(先做“v2 预览入口”,不影响原 `/app`、`/login` 等) +- Flask 接入 manifest(按你的选择:开发完成后直接替换原路由;开发过程中可先保留旧版模板不切换) - 页面壳子可切换:账号/定时/截图;并提供登录/注册/重置/验证页的新版壳子 阶段 2:认证相关页面全量迁移(确保可登录可注册可找回) @@ -288,7 +286,7 @@ - 3)移动端导航:A(抽屉菜单) - 4)视觉风格:A(与后台一致:克制、浅色、卡片化) - 5)VIP 展示:A(保留升级 VIP 弹窗与入口,仍走反馈/联系管理员) -- 6)暗色模式:B(需要) +- 6)暗色模式:不开发(按你最新回复) - 7)部署方式:与后台一致(构建产物提交到仓库,运行时不依赖 Node) ## 9. 仍需你确认的小问题(避免返工) @@ -296,17 +294,9 @@ 1) **新版上线切换策略**(推荐 A,更稳): - A. 先加“v2 预览入口”(例如 `/app/v2`、`/login/v2`…),原路由保持旧版;最终验收后再切换原路由到新版 - B. 开发过程中直接替换原路由(出现问题用 git 回滚) - -2) **暗色模式默认行为**: -- A. 默认跟随系统(`prefers-color-scheme`),并提供手动切换(记忆) -- B. 默认浅色,并提供手动切换(记忆) - -3) **暗色模式开关放哪**(二选一即可): -- A. 放在 Header 右侧(全局随时可切) -- B. 放在“设置”里(不占 Header 空间) - -4) **VIP 升级弹窗的联系信息**: + +2) **VIP 升级弹窗的联系信息**: - A. 保持现状(只提示“通过反馈联系管理员”) - B. 你提供一个固定联系方式(例如微信/QQ/群号),我放到弹窗里 -> 你回复第 9 节的选项后,我就从阶段 1 开始开发,并按阶段提交/推送(方便你随时回滚)。 +> 你已回复:上线切换策略选 B;VIP 联系信息选 A。接下来我按阶段 1 开始开发,并按阶段提交/推送(方便你随时回滚)。