wsh5485 60b7df9015 docs: add UI-STYLE.md — platform must reuse CarLog UI
按用户要求「UI 统一」新建 UI 设计规范 docs/UI-STYLE.md (623 行):

- §0 不做的事 (不引新 UI 库 / 不写新 CSS 变量 / 不另起设计)
- §1 设计令牌 (CSS 变量速查: bg/card/text/accent/brand/green/warn/danger)
- §2 工具类速查 (btn/card/input/pill/text-*/flex/gap/mt-*/mobile-only)
- §3 布局组件 (AppLayout / AppHeader / StatCard / MobileCardList / ChartBlock)
- §4 4 个平台 view 完整模板 (GlobalSettings / SubsystemSettings / Subsystems / Dashboard)
- §5 错误 / 消息样式
- §6 标题层级
- §7 主题色使用规则
- §8 移动端注意事项
- §9 Trae 自检清单 (4 条 grep 命令)
- §10 Mavis review 验收点 (12 项)

DEV-PLAN.md 更新:
- Task 2.4 / 2.5 / 2.6 / 2.7 顶部加 ⚠️ UI-STYLE.md 引用 + 强制要求清单
- 6.2.6b 新增「平台前端 UI 规范」子节 (12 项检查 + 3 条 grep 自检)

ARCHITECTURE.md 更新:
- 新增 §7.5 UI 设计原则 + 引用 UI-STYLE.md

README.md:
- 文档列表加 UI-STYLE.md

核心原则: 平台层新页面 = Settings.vue 的视觉风格 + 元数据驱动。
2026-06-20 22:53:37 +08:00

i — 个人生活操作系统

一个单 Vue + 单 Express + 单 MySQL 的生活操作系统平台,按子系统分代码目录和 API 路径,永远单用户。

第一个子系统是 CarLog(洗车管理系统),将来可能加:健身、阅读、健康等(用户还没决定下一子系统,本阶段不做)。

架构核心

┌────────────────────────────────────────────────────────┐
│  Vue SPA (一个壳子)                                       │
│                                                            │
│  ┌──────────────────────────────────────────────────────┐│
│  │ 总设置 / 子系统管理 / Dashboard  (平台层)              ││
│  └──────────────────────────────────────────────────────┘│
│                                                            │
│  ┌──────────────────────────────────────────────────────┐│
│  │ 🚗 CarLog     | 未来子系统                              ││
│  └──────────────────────────────────────────────────────┘│
│                                                            │
└────────────────────────────────────────────────────────┘
                          │
                          ▼
┌────────────────────────────────────────────────────────┐
│  Express (一个进程)                                       │
│  ├── /api/platform/*    (总设置 / 子系统管理 / Dashboard) │
│  ├── /api/carlog/*      (CarLog 子系统, 全部带前缀)      │
│  └── /api/{future}/*    (将来加的子系统)                  │
└────────────────────────────────────────────────────────┘
                          │
                          ▼
┌────────────────────────────────────────────────────────┐
│  MySQL @ 162.14.110.130:33306 / carlog                     │
│                                                            │
│  平台表 (无前缀):                                          │
│    subsystems / platform_settings                         │
│                                                            │
│  子系统表 (有前缀):                                        │
│    carlog_vehicles / carlog_wash_records / ...            │
│                                                            │
│  (将来加):                                              │
│    fitness_workouts / fitness_plans / ...                  │
│    reading_books / reading_notes / ...                    │
└────────────────────────────────────────────────────────┘

物理隔离靠什么

维度 做法
数据 表前缀 {subsystem}_*(同一 DB 内;CarLog 还没加前缀,留给将来加第二个子系统时)
路由 子系统自己的路径空间(/api/carlog/*
代码 子系统独立目录(server/src/subsystems/{name}/client/src/views/subsystems/{name}/
设置 每个子系统有自己的 settings schemaJSON Schema,存 platform_settings 表,key 前缀 {name}.*
菜单 每个子系统在 subsystems 表注册,平台层根据 category 分组渲染左侧导航

没有 JWT / SSO / iframe / 6 端点协议 / 独立 DB — 那些都是过度设计。

实施路线

当前阶段(W1 + W2 一并做)

  • server/migrations/019_platform.sqlsubsystems + platform_settings 表 + seed CarLog
  • server/src/routes/platform/{subsystems,settings,dashboard}.js
  • CarLog 代码移到 server/src/subsystems/carlog/13 个路由文件)
  • CarLog 路由全部 mount 到 /api/carlog/*(不再是 /api/vehicles
  • CarLog 前端 view 移到 client/src/views/subsystems/carlog/
  • 前端 API 改用 carlogApi helper(自动加 /api/carlog/ 前缀)
  • client/src/views/Platform/{GlobalSettings,SubsystemSettings,Subsystems}.vue
  • client/src/stores/platform.js + AppLayout.vue 元数据驱动菜单
  • 测试(12-20 个平台测试)+ 手动 E2E 验证

暂不做(用户没决定)

  • 加第二个子系统(健身 / 阅读 / 任何)
  • CarLog 表前缀迁移(carlog_*
  • 跨子系统 dashboard widget
  • 多用户 / RBAC / 多租户

路线原则

  • 永远单用户:不要 RBAC / 多租户 / 权限 scope
  • 一个进程一个 SPA:不分部署不分 iframe
  • 元数据驱动 UIsubsystem 的 settings_schema / nav_items 走 JSON,不硬编码
  • 物理目录隔离:subsystem 代码独立目录,加新子系统不会乱碰现有代码
  • 永远向后兼容CarLog 的现有功能不破

详细见 docs/ARCHITECTURE.md / docs/DEV-PLAN.md / docs/UI-STYLE.md(UI 规范 — 平台层 100% 复用 CarLog UI)。

Git 仓库

S
Description
No description provided
Readme 535 KiB
Languages
JavaScript 52.8%
Vue 46.2%
CSS 0.7%
HTML 0.3%