67 lines
4.2 KiB
Markdown
67 lines
4.2 KiB
Markdown
# 前端路由
|
|
|
|
路由定义文件：`frontend/src/router/index.ts`
|
|
|
|
当前使用 hash history，适配 Wails 桌面窗口。
|
|
|
|
## 当前路由
|
|
|
|
| 路由 | 组件 | 窗口 | 职责 |
|
|
| --- | --- | --- | --- |
|
|
| `#/` | `frontend/src/layouts/MainLayout.vue` | 主窗口 | 重定向到 `#/dashboard` |
|
|
| `#/login` | `frontend/src/modules/auth/LoginPage.vue` | 主窗口 | 登录入口，已接入本地固定账号 provider，真实后端 provider 保留边界 |
|
|
| `#/dashboard` | `frontend/src/modules/dashboard/DashboardPage.vue` | 主窗口 | 工作台，展示 P0 指标和近期任务入口 |
|
|
| `#/products` | `frontend/src/modules/products/ProductCenterPage.vue` | 主窗口 | 电商商品中心，支持商品草稿、筛选、列表和图片优化入口 |
|
|
| `#/image-optimizer` | `frontend/src/modules/image-optimizer/ImageOptimizerPage.vue` | 主窗口 | 商品图片 AI 优化业务样例，已接入任务创建、列表和结果预览 |
|
|
| `#/logs` | `frontend/src/modules/logs/LogsPage.vue` | 主窗口 | 审计日志和运行日志统一入口骨架 |
|
|
| `#/statistics` | `frontend/src/modules/statistics/StatisticsPage.vue` | 主窗口 | 第一批统计指标和趋势入口；后端 `MetricsService` 已可查询 |
|
|
| `#/settings` | `frontend/src/modules/settings/SettingsPage.vue` | 主窗口 | 设置中心，复用存量设置组件并展示统一设置 schema |
|
|
| `#/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` | 登录页 | 已接入本地固定账号登录；真实后端登录待后续接入 |
|
|
| `#/products` | 商品中心 | `ec` 分支起点，当前为前端本地示例数据；后续接入 ProductService |
|
|
| `#/image-optimizer` | 商品图片 AI 优化 | 已接入页面任务列表、状态、结果和失败原因 |
|
|
| `#/logs` | 操作日志 | 后端审计日志和运行日志服务已接入；页面列表待后续扩展 |
|
|
| `#/statistics` | 数据统计 | 后端 `MetricsService` 已接入趋势、成功率、耗时和失败任务；页面展示待后续扩展 |
|
|
| `#/settings` | 设置中心 | 已接入统一设置 schema，窗口配置已用于主窗口尺寸恢复 |
|
|
| `#/components` | 组件示例 | 已接入输入框、多选框、下拉框、多行文本、表格、筛选、分页和状态标签 |
|
|
|
|
## 主窗口布局
|
|
|
|
目标主窗口使用三段式布局：
|
|
|
|
- 侧边导航：模块入口。
|
|
- 顶部区域：当前用户、运行状态、快捷动作。
|
|
- 内容区：路由页面，填满剩余空间。
|
|
|
|
Windows 10+ 是主要体验目标。主窗口策略已经实现到当前代码：
|
|
|
|
- 默认不最大化。
|
|
- 初始宽高：`1280x800`。
|
|
- 最小宽高：`1024x720`。
|
|
- 启动时居中。
|
|
- 允许用户调整大小。
|
|
- 保存主窗口尺寸和最大化状态，下次启动恢复用户上次选择。
|
|
- 页面根容器使用 `width: 100%` 和 `height: 100vh`。
|
|
- 主布局内部使用 flex 或 grid，让侧边导航、顶部区域和内容区稳定填满窗口。
|
|
- 阅读型内容使用最大宽度，建议 `max-width: 960px` 并居中。
|
|
- 列表、仪表盘、设置页等工作型页面自适应拉伸，占满可用内容区。
|
|
- 第二窗口保持小窗，不参与主窗口最大化、尺寸恢复和布局填充逻辑。
|
|
|
|
## 页面规则
|
|
|
|
- 新增页面必须先确认属于模板能力、业务样例还是开发者示例。
|
|
- 主业务页面放在主窗口，不放在第二窗口。
|
|
- 第二窗口保持轻量快捷功能，不承载长期复杂业务流程。
|
|
- 页面内容不得只占左上角小块；除阅读型内容外，默认应填满主内容区域。
|
|
- 路由变化必须同步本文和相关任务验收。
|
|
- 主窗口模块页默认放在 `frontend/src/modules/`，只把跨模块复用 UI 放到 `frontend/src/components/`。
|