Files
cmbone/docs/routes.md
T

3.9 KiB

前端路由

路由定义文件: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 指标和近期任务入口
#/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 登录页 已接入本地固定账号登录;真实后端登录待后续接入
#/image-optimizer 商品图片 AI 优化 已接入页面任务列表、状态、结果和失败原因
#/logs 操作日志 后端审计日志和运行日志服务已接入;页面列表待后续扩展
#/statistics 数据统计 后端 MetricsService 已接入趋势、成功率、耗时和失败任务;页面展示待后续扩展
#/settings 设置中心 已接入统一设置 schema,窗口配置已用于主窗口尺寸恢复
#/components 组件示例 T-030 扩充输入框、多选框、下拉框、多行文本、表格、筛选、分页

主窗口布局

目标主窗口使用三段式布局:

  • 侧边导航:模块入口。
  • 顶部区域:当前用户、运行状态、快捷动作。
  • 内容区:路由页面,填满剩余空间。

Windows 10+ 是主要体验目标。主窗口策略已经实现到当前代码:

  • 默认不最大化。
  • 初始宽高:1280x800。
  • 最小宽高:1024x720。
  • 启动时居中。
  • 允许用户调整大小。
  • 保存主窗口尺寸和最大化状态,下次启动恢复用户上次选择。
  • 页面根容器使用 width: 100% 和 height: 100vh。
  • 主布局内部使用 flex 或 grid,让侧边导航、顶部区域和内容区稳定填满窗口。
  • 阅读型内容使用最大宽度,建议 max-width: 960px 并居中。
  • 列表、仪表盘、设置页等工作型页面自适应拉伸,占满可用内容区。
  • 第二窗口保持小窗,不参与主窗口最大化、尺寸恢复和布局填充逻辑。

页面规则

  • 新增页面必须先确认属于模板能力、业务样例还是开发者示例。
  • 主业务页面放在主窗口,不放在第二窗口。
  • 第二窗口保持轻量快捷功能,不承载长期复杂业务流程。
  • 页面内容不得只占左上角小块;除阅读型内容外,默认应填满主内容区域。
  • 路由变化必须同步本文和相关任务验收。
  • 主窗口模块页默认放在 frontend/src/modules/,只把跨模块复用 UI 放到 frontend/src/components/。