60b7df9015fea6413fcfca6c2c3354b0c7a96218
按用户要求「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 的视觉风格 + 元数据驱动。
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 schema(JSON Schema,存 platform_settings 表,key 前缀 {name}.*) |
| 菜单 | 每个子系统在 subsystems 表注册,平台层根据 category 分组渲染左侧导航 |
没有 JWT / SSO / iframe / 6 端点协议 / 独立 DB — 那些都是过度设计。
实施路线
当前阶段(W1 + W2 一并做)
server/migrations/019_platform.sql(subsystems + 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 改用
carlogApihelper(自动加/api/carlog/前缀) client/src/views/Platform/{GlobalSettings,SubsystemSettings,Subsystems}.vueclient/src/stores/platform.js+AppLayout.vue元数据驱动菜单- 测试(12-20 个平台测试)+ 手动 E2E 验证
暂不做(用户没决定)
- ❌ 加第二个子系统(健身 / 阅读 / 任何)
- ❌ CarLog 表前缀迁移(
carlog_*) - ❌ 跨子系统 dashboard widget
- ❌ 多用户 / RBAC / 多租户
路线原则
- 永远单用户:不要 RBAC / 多租户 / 权限 scope
- 一个进程一个 SPA:不分部署不分 iframe
- 元数据驱动 UI:subsystem 的 settings_schema / nav_items 走 JSON,不硬编码
- 物理目录隔离:subsystem 代码独立目录,加新子系统不会乱碰现有代码
- 永远向后兼容:CarLog 的现有功能不破
详细见 docs/ARCHITECTURE.md / docs/DEV-PLAN.md / docs/UI-STYLE.md(UI 规范 — 平台层 100% 复用 CarLog UI)。
Git 仓库
- 仓库:https://gitea.img2img.com/wsh5485/i.git
- 平台:Gitea
- 推送:osxkeychain 自动记住 token
- 推送:osxkeychain 自动记住 token
Description
Languages
JavaScript
52.8%
Vue
46.2%
CSS
0.7%
HTML
0.3%