feat: add main app route skeleton

This commit is contained in:
QiuSW
2026-07-08 23:06:48 +08:00
parent 4c1de99d65
commit 811a9c889f
16 changed files with 849 additions and 30 deletions
+6 -4
View File
@@ -60,8 +60,9 @@ frontend/src
- `frontend/src/modules/settings/`:目标目录,放设置页和设置项。
- `frontend/src/modules/image-optimizer/`:目标目录,放商品图片 AI 优化样例。
- `frontend/src/modules/logs/`:目标目录,放审计日志和运行日志页面。
- `frontend/src/modules/metrics/`:目标目录,放统计卡片和趋势图。
- `frontend/src/modules/statistics/`:放统计卡片和趋势图。
- `frontend/src/modules/components-demo/`:目标目录,放常用组件示例。
- `frontend/src/components/template/`:放当前模块占位页共享壳。
- `frontend/src/components/`:通用展示组件和组合控件。
- `frontend/src/utils/`:国际化、主题、OS、热键等工具函数。
- `frontend/bindings/`:由 Wails 生成或按 Wails 合约维护,不写业务逻辑。
@@ -189,9 +190,10 @@ image_task_results(
## 窗口与页面
- 主窗口路由:`/#/`
- 主窗口路由:`/#/` 重定向到 `/#/dashboard`
- 第二窗口路由:`/#/second`
- 目标主应用路由:登录页、Dashboard、图片优化、日志、统计、设置、组件示例。
- 已实现主应用骨架路由:`/#/login`、`/#/dashboard`、`/#/image-optimizer`、`/#/logs`、`/#/statistics`、`/#/settings`、`/#/components`。
- 兼容目标文档路由:`/#/business/image-optimizer`、`/#/logs/audit`、`/#/logs/app` 会重定向到当前主入口。
- 托盘菜单由 `AppService` 配置。
- 热键触发目标可以是打开主窗口、打开快捷功能或创建快速任务。
@@ -206,7 +208,7 @@ image_task_results(
- 第二窗口保持当前小窗定位,不参与最大化、尺寸恢复和主布局填充逻辑。
- 后续增强再保存主窗口尺寸和最大化状态,下次启动恢复用户选择。
实现状态:主窗口初始尺寸、居中、可调整大小、根容器和主布局填充已落地;下一步是主应用路由骨架。窗口尺寸持久化依赖设置 schema 后续实现。
实现状态:主窗口初始尺寸、居中、可调整大小、根容器和主布局填充已落地;主应用路由骨架已落地。窗口尺寸持久化依赖设置 schema 后续实现。
## 关键风险
+1 -1
View File
@@ -28,7 +28,7 @@
| --- | --- | --- | --- | --- |
| T-010 | 确定 Windows-first 窗口与布局策略 | T-002 | 主窗口默认不最大化,初始 `1280x800`,最小 `1024x720`,居中,可调整大小;页面根容器 `width: 100%`、`height: 100vh`;内部用 flex/grid 填满窗口;第二窗口保持小窗 | DONE |
| T-011 | 实现主窗口启动参数与根布局策略 | T-010 | Go 侧设置主窗口初始宽高、居中、可调整大小;前端根容器和主布局填满窗口;阅读型内容有最大宽度,列表/仪表盘/设置页可自适应拉伸 | DONE |
| T-012 | 搭建主应用路由骨架 | T-011 | `login`、`dashboard`、`image-optimizer`、`logs`、`statistics`、`settings`、`components` 路由可访问 | TODO |
| T-012 | 搭建主应用路由骨架 | T-011 | `login`、`dashboard`、`image-optimizer`、`logs`、`statistics`、`settings`、`components` 路由可访问 | DONE |
| T-013 | 实现登录 provider 边界 | T-012 | 支持本地固定账号 provider;预留 remote provider;账号密码不写死在前端;登录事件写审计日志 | TODO |
| T-014 | 收敛设置模块 schema | T-012 | 主题、语言、窗口行为、快捷键、数据目录、日志策略都有统一配置定义和默认值 | TODO |
| T-015 | 持久化窗口尺寸和最大化状态 | T-014 | 保存主窗口尺寸和最大化状态;下次启动恢复用户上次选择;第二窗口不参与该逻辑 | TODO |
+13 -3
View File
@@ -6,7 +6,7 @@
项目处于可复用桌面应用模板的产品定位校准阶段。目标已经从迁移后的基础工程调整为“Windows-first、可扩展到其他平台的桌面端应用模板”。
当前代码仍是迁移后的 Wails/Vue/SQLite 基线,已具备设置、多语言、主题、本地配置、热键、托盘和 OCR 示例。登录、商品图片 AI 优化、审计日志、运行日志和数据统计仍是目标模块,尚未落地实现。
当前代码已从迁移后的 Wails/Vue/SQLite 基线推进到主应用路由骨架阶段,已具备设置、多语言、主题、本地配置、热键、托盘、OCR 示例和模板级模块入口。登录、商品图片 AI 优化、审计日志、运行日志和数据统计仍是骨架页面,尚未接入真实后端服务和数据模型。
## 已确认事实
@@ -24,7 +24,9 @@
- 前端框架:Vue 3、Vite、TypeScript、Tailwind CSS、Ant Design Vue
- 当前 Wails 前端 bindings:由 `wails3 build` / `wails3 generate bindings` 生成的 `.js` 文件。
- 本地数据库:SQLite,用户配置目录下 `cmbone/cmbone.db`
- 当前主窗口路由:`/#/`,已保留为主应用入口,不再自动跳转到第二窗口。
- 当前主窗口路由:`/#/` 重定向到 `/#/dashboard`。
- 当前主应用模块路由:`/#/login`、`/#/dashboard`、`/#/image-optimizer`、`/#/logs`、`/#/statistics`、`/#/settings`、`/#/components`。
- 当前兼容重定向路由:`/#/business/image-optimizer`、`/#/logs/audit`、`/#/logs/app`。
- 当前第二窗口路由:`/#/second`
- 已实现主窗口策略:默认不最大化,初始 `1280x800`,最小 `1024x720`,居中,可调整大小。
- 已实现页面布局策略:根容器 `width: 100%`、`height: 100vh`,内部 flex/grid 填满窗口。
@@ -114,9 +116,17 @@ wails3 build
- 新增 `npm run typecheck`,正式质量门禁仍由 `npm run build` 覆盖类型检查和生产构建。
- 已验证 `dev.bat` 能进入 `windows:run`,拉起 `bin/cmbone.exe`,并创建可见主窗口。
同日完成主应用路由骨架:
- 新增 `frontend/src/layouts/MainLayout.vue`,主窗口改为侧边导航、顶部窗口区和路由内容区。
- 新增登录、工作台、商品图片 AI 优化、操作日志、数据统计、设置、组件示例模块页。
- 新增 `frontend/src/components/template/ModulePageShell.vue`,用于模块标题、状态和摘要卡片。
- `frontend/src/router/index.ts` 已切换为主应用模块路由,第二窗口继续保留 `/#/second`。
- `npm run typecheck`、`npm run build`、`npm run build:dev`、`go test ./...`、`go build -o bin\cmbone.exe .`、`cmd /c build.bat` 和 `dev.bat` 烟测通过。
## 下一步
从 [`06-tasks.md`](06-tasks.md) 领取第一个 `TODO` 任务。目前建议先做 `T-012`:搭建主应用路由骨架。
从 [`06-tasks.md`](06-tasks.md) 领取第一个 `TODO` 任务。目前建议先做 `T-013`:实现登录 provider 边界。
## 当前 blocker
+11 -3
View File
@@ -48,8 +48,16 @@
| 文件 | 方法 / 内容 | 说明 |
| --- | --- | --- |
| `frontend/src/main.ts` | Vue 入口 | 注册应用、路由和国际化 |
| `frontend/src/router/index.ts` | routes | `#/` 和 `#/second` 路由 |
| `frontend/src/components/Main/Index.vue` | 主窗口入口 | 设置页面总布局 |
| `frontend/src/router/index.ts` | routes | 登录、主应用模块和第二窗口路由 |
| `frontend/src/layouts/MainLayout.vue` | 主窗口布局 | 侧边导航、顶部窗口区和 `RouterView` 内容区 |
| `frontend/src/components/template/ModulePageShell.vue` | 模块页共享壳 | 模块标题、状态和摘要卡片 |
| `frontend/src/modules/auth/LoginPage.vue` | 登录页骨架 | 后续接入 AuthProvider |
| `frontend/src/modules/dashboard/DashboardPage.vue` | 工作台骨架 | P0 指标和近期任务入口 |
| `frontend/src/modules/image-optimizer/ImageOptimizerPage.vue` | 主业务骨架 | 商品图片 AI 优化任务入口 |
| `frontend/src/modules/logs/LogsPage.vue` | 日志页骨架 | 审计日志和运行日志入口 |
| `frontend/src/modules/statistics/StatisticsPage.vue` | 统计页骨架 | P0 指标和 7 天趋势入口 |
| `frontend/src/modules/settings/SettingsPage.vue` | 设置页骨架 | 复用存量主题、语言和快捷键设置 |
| `frontend/src/modules/components-demo/ComponentsDemoPage.vue` | 组件示例骨架 | 常用表单、筛选、表格和状态标签 |
| `frontend/src/pages/Home/Index.vue` | 第二窗口入口 | OCR 示例页面 |
| `frontend/src/utils/ThemeManager.ts` | 主题工具 | 主题切换和持久化协作 |
| `frontend/src/utils/i18n.ts` | 国际化工具 | 语言资源和切换 |
@@ -63,5 +71,5 @@
| `frontend/src/modules/settings/` | 设置中心 |
| `frontend/src/modules/image-optimizer/` | 商品图片 AI 优化业务样例 |
| `frontend/src/modules/logs/` | 审计日志和运行日志 |
| `frontend/src/modules/metrics/` | 数据统计 |
| `frontend/src/modules/statistics/` | 数据统计 |
| `frontend/src/modules/components-demo/` | 常用组件示例 |
+19 -11
View File
@@ -8,22 +8,29 @@
| 路由 | 组件 | 窗口 | 职责 |
| --- | --- | --- | --- |
| `#/` | `frontend/src/components/Main/Index.vue` | 主窗口 | 当前设置中心、导航、主题、语言、快捷键、标签、关于等 |
| `#/` | `frontend/src/layouts/MainLayout.vue` | 主窗口 | 重定向到 `#/dashboard` |
| `#/login` | `frontend/src/modules/auth/LoginPage.vue` | 主窗口 | 登录入口骨架,后续接入本地固定账号 provider 和真实后端 provider |
| `#/dashboard` | `frontend/src/modules/dashboard/DashboardPage.vue` | 主窗口 | 工作台,展示 P0 指标和近期任务入口 |
| `#/image-optimizer` | `frontend/src/modules/image-optimizer/ImageOptimizerPage.vue` | 主窗口 | 商品图片 AI 优化业务样例骨架 |
| `#/logs` | `frontend/src/modules/logs/LogsPage.vue` | 主窗口 | 审计日志和运行日志统一入口骨架 |
| `#/statistics` | `frontend/src/modules/statistics/StatisticsPage.vue` | 主窗口 | 第一批统计指标和趋势骨架 |
| `#/settings` | `frontend/src/modules/settings/SettingsPage.vue` | 主窗口 | 设置中心,当前复用存量主题、语言和快捷键设置 |
| `#/components` | `frontend/src/modules/components-demo/ComponentsDemoPage.vue` | 主窗口 | 常用输入、选择、文本域、表格、筛选和状态标签示例 |
| `#/second` | `frontend/src/pages/Home/Index.vue` | 第二窗口 | 当前 OCR 示例和轻量快捷功能 |
| `#/business/image-optimizer` | redirect | 主窗口 | 兼容目标路由,重定向到 `#/image-optimizer` |
| `#/logs/audit` | redirect | 主窗口 | 兼容目标路由,重定向到 `#/logs` |
| `#/logs/app` | redirect | 主窗口 | 兼容目标路由,重定向到 `#/logs` |
## 目标路由
## 目标路由演进
| 路由 | 页面 | 职责 |
| --- | --- | --- |
| `#/login` | 登录页 | 本地固定账号登录或真实后端登录 |
| `#/dashboard` | 工作台 | 展示 P0 统计指标和最近任务 |
| `#/business/image-optimizer` | 商品图片 AI 优化 | 创建优化任务、查看任务列表、状态、结果和失败原因 |
| `#/logs/audit` | 审计日志 | 查询用户操作记录 |
| `#/logs/app` | 运行日志 | 查询系统错误和排错信息 |
| `#/statistics` | 数据统计 | 查看趋势、成功率、耗时和失败任务 |
| `#/settings` | 设置中心 | 主题、语言、窗口、快捷键、数据目录、日志策略 |
| `#/components` | 组件示例 | 输入框、多选框、下拉框、多行文本、表格、筛选、分页 |
| `#/about` | 关于 | 应用版本、运行环境和文档入口 |
| `#/login` | 登录页 | `T-013` 接入本地固定账号登录或真实后端登录 |
| `#/image-optimizer` | 商品图片 AI 优化 | `T-020` / `T-023` 接入任务模型、任务列表、状态、结果和失败原因 |
| `#/logs` | 操作日志 | `T-021` 接入审计日志和运行日志查询 |
| `#/statistics` | 数据统计 | `T-022` 接入趋势、成功率、耗时和失败任务 |
| `#/settings` | 设置中心 | `T-014` 接入统一设置 schema |
| `#/components` | 组件示例 | `T-030` 扩充输入框、多选框、下拉框、多行文本、表格、筛选、分页 |
## 主窗口布局
@@ -55,3 +62,4 @@ Windows 10+ 是主要体验目标。主窗口策略已经实现到当前代码
- 第二窗口保持轻量快捷功能,不承载长期复杂业务流程。
- 页面内容不得只占左上角小块;除阅读型内容外,默认应填满主内容区域。
- 路由变化必须同步本文和相关任务验收。
- 主窗口模块页默认放在 `frontend/src/modules/`,只把跨模块复用 UI 放到 `frontend/src/components/`。