feat: Kinetic Dark 设计语言 + Lucide 图标迁移 + 首页轻量个性化
- 建立 Lucide 子集 iconfont（49 字形），全站 emoji 替换为 fc-icon 组件 - 重塑 Design Token（冷中性近黑底 + Volt 荧光绿 #B6F24E），消除硬编码颜色 - 首页登录后个性化：我的计划 / 我的收藏 / 今日推荐（纯前端复用现有 API） - 后端 DEFAULT_EMOJI→Lucide 名，PALETTE 对齐 Kinetic Dark 语义色板 - 修复 person-standing 缺失字形；14 个官方组合 seed emoji 全部映射到现有字形
This commit is contained in:
117
FITCOACH-OPTIMIZATION-PLAN.md
Normal file
117
FITCOACH-OPTIMIZATION-PLAN.md
Normal file
@@ -0,0 +1,117 @@
|
||||
# FITCOACH 系统优化 · 整合实施方案（待确认）
|
||||
|
||||
> 整合自三份调研：PM《优化 PRD》(PRD-FITCOACH优化方案.md)、设计师《动能暗色提案》(FITCOACH-DESIGN-PROPOSAL.md + design-system/design-tokens.json)、架构师技术方案（本文件第 2 节，由团队负责人据代码实测补齐）。
|
||||
> 已确认方向（用户 2026-07-22 拍板）：① 先出方案文档、确认后再开发；② 首页个性化两档都要（先轻量后完整）；③ UI 重塑设计语言。
|
||||
> P0 红线：禁止 emoji 当功能图标（统一 Lucide SVG iconfont）、禁止紫粉渐变、禁止硬编码颜色（一律走 Token）。
|
||||
|
||||
---
|
||||
|
||||
## 1. 现状诊断（代码实测结论）
|
||||
|
||||
| 问题 | 证据 | 影响 |
|
||||
|------|------|------|
|
||||
| 首页零个性化 | `pages/index/index.js` `loadData()` 只拉全局 stats/featured/collections，无 openid 维度；"今天，练点什么？"写死 | 登录与不登录完全一致，无归属感 |
|
||||
| emoji 图标系统性违规 | 首页 `🔍✨💪🏋️📋🗂️👤`、底部导航 `🏠📚📋👤`、profile `❤️🗂️⭐📋💪`、各空态、占位 `🏋️`；后端 `users.service.ts` 默认 avatar=`🏃`、`plans.service.ts` 默认 emoji=`📋` | 触发 P0-1 红线，全站廉价感 |
|
||||
| 加载/错误态缺失 | 首页 `loading` 是死代码（wxml 未引用）首屏空白；`request.js` 失败只 toast，网络失败与无数据无区分、无重试 | 弱网下体验差、无兜底 |
|
||||
| 响应速度 | `request.js` 无 timeout（wx.request 默认不强制超时）；首页 `Promise.all` 无缓存；底部导航 `reLaunch` 重置栈→切 tab 重拉 | 弱网挂起、切 tab 白屏 |
|
||||
| 硬编码颜色散落 | 13 个 wxss 裸写 `#0E1110`(8+处)、`#E5544B`/`rgba(229,84,75,…)`；`app.wxss` Token 命名偏金、缺语义色/字号阶梯/字距 | 改主题要改 N 处 |
|
||||
| 设计令牌基础尚在 | `app.wxss` 已定义 `--bg/--surface/--gold/--text/--line/--radius` | 重塑改一处 + 组件局部即可，不动业务 |
|
||||
|
||||
**关键利好**：个性化所需接口其实已就绪——`planSvc.listMine()`→`GET /api/plans`（按 openid 隔离，已验证 `plans.controller.ts:35`）、`favSvc.listExercises()`→`GET /api/favorites/exercises`（已验证 `favorites.controller.ts:26`）、`auth` 登录态。轻量档**零后端改动**即可上线。
|
||||
|
||||
---
|
||||
|
||||
## 2. 架构技术方案（补齐）
|
||||
|
||||
### 2.1 轻量档（P0，纯前端，零后端改动）
|
||||
- **首页 `index.js`** `onLoad`：若已登录（`wx.getStorageSync('access_token')` 存在且有效），并行拉：
|
||||
- `planSvc.listMine()` → 我的计划列表
|
||||
- `favSvc.listExercises()` → 我的收藏动作
|
||||
- 今日推荐（前端推导）：取 `GET /api/plans/official` 分级 + 用户收藏/浏览，按"未练过/匹配目标"排序取 top3（复用推荐页现有推导逻辑，无需新接口）
|
||||
- 用户资料：`auth.getProfile()` 或本地 `userInfo`
|
||||
- **渲染**：`isLogin` 为真 → 在 Hero 后插入"为你准备"区（时段问候 + 我的计划卡 + 收藏横滑 + 今日推荐）；否则保留原通用内容 + 轻引导登录。
|
||||
- **缓存**：用 `wx.setStorageSync` 缓存 listMine/favorites（key 带 openid）；切 tab(`onShow`) 优先读缓存、后台静默刷新，避免 `reLaunch` 重拉白屏。
|
||||
- 工作量：前端 2-3 人日。
|
||||
|
||||
### 2.2 完整档（P1，新增后端数据）
|
||||
沿用现有 `common/store.ts` 的 JsonStore 单例模式（已验证：`getStore(name)` 进程内单例、整体落盘 `data-store/<name>.json`）。
|
||||
|
||||
**新集合 `checkins`**（data-store/checkins.json）：
|
||||
```
|
||||
{ id, openid, date(YYYY-MM-DD, openid+date 唯一), planId?, exerciseIds[], durationMin?, completed(bool), createdAt }
|
||||
```
|
||||
**users 扩展字段**：`fitnessGoal`(减脂/增肌/塑形/保持健康)、`level`(beginner/intermediate/advanced)、`trainFreq`(每周次数)、`onboarded`、`avatar`(改 Lucide 图标名/URL，去掉 emoji)。
|
||||
|
||||
**打卡触发点**：plan-detail「完成训练」按钮 / 首页「今日打卡」按钮 → `POST /api/checkins`。
|
||||
|
||||
**派生计算**（无需单独存储，由 checkins 实时算）：
|
||||
- `streak`：按 date 倒序，从今天/昨天起连续有 checkin 的天数
|
||||
- `summary(range=7|30)`：训练次数、总时长、动作分布、完成率
|
||||
- 历史曲线：近 14 日每日 checkin 数/时长 → 前端 SVG 面积图
|
||||
|
||||
**新增 API**（均 `@UseGuards(AuthGuard)` + `CurrentUser` 取 openid，沿用 plans/favorites 模式）：
|
||||
| 方法 | 路径 | 说明 |
|
||||
|------|------|------|
|
||||
| POST | `/api/checkins` | 创建/更新当日打卡 |
|
||||
| GET | `/api/checkins/streak` | `{ streak, lastCheckinDate }` |
|
||||
| GET | `/api/checkins/summary?range=7\|30` | `{ count, totalDuration, byExercise[], byDay[] }` |
|
||||
| PATCH | `/api/users/me` | 扩展画像字段 |
|
||||
|
||||
- 工作量：后端 3-4 人日 + 前端 4-5 人日。需新建 `checkins.module/controller/service/(entity+dto)` + `users.service` 扩展。
|
||||
|
||||
### 2.3 UI Token 化改造（P0）
|
||||
- 以 `design-system/design-tokens.json` 为唯一真源，整体替换 `app.wxss` 的 `page` 变量：冷中性底(`#0B0F0E/#141A18/#1C2421`) + 珊瑚橙 accent(`#FF6A3D`) + 语义色(success/warn/danger/info) + 字号阶梯(22-72rpx) + 间距尺度(4px 网格) + 圆角(16/24/32) + 阴影(Hairline First) + 动效(150/200/300ms)。
|
||||
- 13 个页面/组件 wxss：把裸写 `#0E1110`/`#E5544B`/大阴影改为引用新 Token。
|
||||
- 图标落地：编译 Lucide 子集（约 30-40 个图标）为 `miniprogram/assets/fonts/fc-icon.ttf`，`app.wxss` `@font-face` 声明 `fc-icon`；提供 emoji→Lucide name→codepoint 映射表，全站 `<text class="fc-icon">` 替换 emoji 文本节点。
|
||||
- 风险：主包体积（iconfont ttf <50KB 可控）；个别 wxml 用 emoji 字符作图标需逐个替换；微信支持本地 ttf 自定义字体。
|
||||
|
||||
### 2.4 综合 UX 技术支撑（P0/P1）
|
||||
- **请求治理**：`request.js` 加 `timeout: 8000` + 失败类型区分(网络/业务/无数据) + 重试一次 + 可选缓存层，弱网不再挂起。
|
||||
- **骨架屏**：首页/列表页加 skeleton 占位（token 色块），替代当前首屏空白；接上原 index.wxml 死代码 `loading` 或换 skeleton。
|
||||
- **错误重试**：request 失败提供"重试"按钮（error 态），替代纯 toast。
|
||||
- **tab 保活**：bottom-nav `reLaunch` 重置栈→改 `switchTab` + 首页数据缓存 + `onShow` 静默刷新，切 tab 不白屏。
|
||||
- **常驻搜索**：首页 search-pill 换成 SVG 图标（或 navbar 常驻）。
|
||||
|
||||
### 2.5 技术约束与风险
|
||||
- JsonStore 单进程单例、整体落盘——打卡高频写 flush 阻塞；demo 量级 OK，生产前置足够。
|
||||
- 主包 2MB 限制：iconfont ttf <50KB 可控；不打包 CJK 字体（用系统字体，已确认）。
|
||||
- 图标库：**锁定 Lucide（MIT）**，与设计师提案一致 ✅；尺寸 16/20/24rpx；编译为 iconfont 子集。
|
||||
|
||||
---
|
||||
|
||||
## 3. 实施路线图（优先级）
|
||||
|
||||
| 优先级 | 项 | 档位 | 后端 | 前端 | 依赖 |
|
||||
|--------|----|------|------|------|------|
|
||||
| **P0** | emoji→Lucide SVG 图标替换（全站 18+ 处 + 后端默认 avatar/emoji） | UI | 小 | 中 | 无 |
|
||||
| **P0** | Design Token 重塑（Kinetic Dark，app.wxss + 13 wxss） | UI | 无 | 中 | 无 |
|
||||
| **P0** | 首页轻量个性化（问候+我的计划+收藏+今日推荐） | 个性化·轻 | 无 | 2-3人日 | 现有 API |
|
||||
| **P0** | 骨架屏 + 错误重试 + 请求 timeout | UX | 无 | 2-3人日 | 无 |
|
||||
| **P1** | 完整个性化后端（checkins store + 3 接口 + users 扩展） | 个性化·全 | 3-4人日 | — | 轻量档先上 |
|
||||
| **P1** | 首页完整档区块（进度环+连续天数+历史曲线） | 个性化·全 | — | 4-5人日 | 后端接口 |
|
||||
| **P1** | 导航重构 + 常驻搜索 + tab 保活 + 缓存 | UX | 无 | 中 | 请求治理 |
|
||||
| **P2** | 下拉刷新 / 长按手势 / 进入动画 | UX | 无 | 小 | 无 |
|
||||
|
||||
**MVP 切割**：P0 四项先上（验证假设、零风险、零后端）→ P1 完整档跟进（需打卡数据沉淀）→ P2 打磨。
|
||||
**上线顺序**：UI 重塑 + 轻量个性化 + 骨架屏 同批（都在前端，互不阻塞）；完整档独立一批（需后端发布）。
|
||||
|
||||
---
|
||||
|
||||
## 4. 已锁定决策（2026-07-22 用户确认）
|
||||
|
||||
1. **强调色 accent = Volt 荧光绿 `#B6F24E`**（用户选，非设计师默认珊瑚橙）。设计 Token 中 `accent` 系列全部替换为该绿：`accent:#B6F24E` / `accent-hover:#C7F56E` / `accent-active:#9EDB3A` / `accent-on:#0E1A05`(深绿字，对比>7:1) / `accent-soft:rgba(182,242,78,.12)` / `accent_ring:rgba(182,242,78,.38)` / `glow:0 8rpx 24rpx rgba(182,242,78,.28)`。每屏≤2处。
|
||||
2. **UGC emoji 选择器 → 现在就迁 Lucide 运动子集图标选择器**（dumbbell/run/bike/heart/flame/target/yoga/medal/trophy 等），不保留 emoji 入口。plan-edit/profile 的计划图标与用户头像图标均走 Lucide。
|
||||
|
||||
---
|
||||
|
||||
## 5. Out-of-Scope（本期不做）
|
||||
社交/社区、商城电商、课程直播跟练、饮食营养、硬件联动、i18n、SQL 迁移、生成式 AI 文案、付费会员。
|
||||
|
||||
---
|
||||
|
||||
## 附：交付物索引
|
||||
- `PRD-FITCOACH优化方案.md` — PM 优化 PRD（现状/竞品/三块方案/RICE/验收标准）
|
||||
- `FITCOACH-DESIGN-PROPOSAL.md` — 设计师动能暗色提案（审计/Token/图标/视觉草案）
|
||||
- `design-system/design-tokens.json` — 机读 Design Token 草案（唯一真源）
|
||||
- `home-personalization-mockup.svg` — 完整档首页个性化区视觉线框
|
||||
- 本文件 — 整合实施方案 + 架构补齐 + 路线图 + 待定项
|
||||
Reference in New Issue
Block a user