8111471e93
- 从 HMS 基座复制 apps/web/ (React + Ant Design + Vite + TypeScript) - 管理端自动代理 API 到 localhost:3000 (vite.config.ts) - 更新 scripts/dev.sh 支持三端启动: backend/admin/app - 登录验证通过, 用户管理/角色权限/审计日志等页面正常 - 添加 .gitignore 排除 node_modules/dist
282 lines
12 KiB
Markdown
282 lines
12 KiB
Markdown
# 暖记设计规格 vs 实际实现 — 逐页审核报告
|
||
|
||
> 审核日期：2026-06-02
|
||
> 设计规格文档：`docs/opendesign/warm-notes-design-spec.md`
|
||
> 审核范围：14 个移动端页面
|
||
|
||
---
|
||
|
||
## 总览
|
||
|
||
| # | 页面 | 路由 | 总模块数 | ✅ 完整 | ⚠️ 部分 | ❌ 缺失 |
|
||
|---|------|------|---------|---------|---------|---------|
|
||
| 01 | 启动页 | `/splash` | 8 | **8** | 0 | 0 |
|
||
| 02 | 引导页 | `/onboarding` | 3 | **3** | 0 | 0 |
|
||
| 03 | 登录/注册 | `/login` | 4 | 1 | 1 | **2** |
|
||
| 04 | 首页日记流 | `/home` | 8 | 5 | **2** | 0 |
|
||
| 05 | 手账编辑器 | `/editor` | 7 | 0 | **5** | **2** |
|
||
| 06 | 日历视图 | `/calendar` | 6 | 1 | **4** | **1** |
|
||
| 07 | 心情追踪 | `/mood` | 5 | 0 | **2** | **3** |
|
||
| 08 | 周视图 | `/weekly` | 4 | **4** | 0 | 0 |
|
||
| 09 | 月度统计 | `/monthly` | 4 | 3 | **1** | 0 |
|
||
| 10 | 贴纸素材 | `/stickers` | 6 | 0 | **3** | **3** |
|
||
| 11 | 模板库 | `/templates` | 3 | 0 | **2** | **1** |
|
||
| 12 | 发现页 | `/discover` | 5 | **5** | 0 | 0 |
|
||
| 13 | 搜索页 | `/search` | 7 | 0 | **3** | **4** |
|
||
| 14 | 个人中心 | `/profile` | 5 | 0 | **2** | **3** |
|
||
| | **合计** | | **75** | **30** (40%) | **25** (33%) | **19** (25%) |
|
||
|
||
---
|
||
|
||
## 缺失页面：无
|
||
|
||
所有 14 个设计规格页面都有对应的 Flutter 路由和页面文件。
|
||
|
||
**额外路由（不在设计规格中）：**
|
||
- `/role-selection` — 角色选择页（学生/老师/家长）
|
||
- `/class-code` — 班级码加入页
|
||
- `/class` — 班级管理页
|
||
- `/teacher` — 老师视图
|
||
- `/parent` — 家长视图
|
||
- `/achievements` — 成就页
|
||
- `/settings` — 设置页
|
||
|
||
---
|
||
|
||
## 逐页审核详情
|
||
|
||
### ✅ 页面 01：启动页 (Splash) — 完整度 100%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 渐变背景 (bg→tertiary-soft→accent) | ✅ | 三段渐变，深浅模式均支持 |
|
||
| 装饰元素 (3星+2圆, 浮动动画) | ✅ | `_FloatingStar` + `_FloatingCircle` CustomPainter |
|
||
| App 图标 (120×120, 渐变, 阴影, 高光) | ✅ | `_NotebookIconPainter` 绘制 |
|
||
| App 名称 "暖记" (42px Quicksand) | ✅ | |
|
||
| 标语 (17px Nunito, muted) | ✅ | |
|
||
| 手写标语 (22px Caveat, accent) | ✅ | |
|
||
| "开始记录" 按钮 (accent, 阴影, 箭头) | ✅ | |
|
||
| 提示文字 (13px, meta) | ✅ | |
|
||
|
||
---
|
||
|
||
### ✅ 页面 02：引导页 (Onboarding) — 完整度 100%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| "跳过" 按钮 | ✅ | |
|
||
| 3 页滑动 (圆形插图 260×260 + 标题 + 描述) | ✅ | 使用 emoji 代替自定义插图，布局完全匹配 |
|
||
| 底部控制 (圆点指示器 8/28px + 按钮) | ✅ | 最后一页文字变"开始使用" |
|
||
|
||
---
|
||
|
||
### ⚠️ 页面 03：登录/注册 (Login) — 完整度 50%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 品牌区域 (渐变背景, Logo, 装饰) | ❌ | 缺少渐变背景、5 个装饰元素，Logo 样式简化 |
|
||
| 表单 (手机号/验证码/密码/昵称/协议) | ⚠️ | 使用用户名+密码而非手机号+验证码；**缺少验证码倒计时、协议勾选** |
|
||
| 第三方登录 (微信/Apple/Google 56px 圆形) | ❌ | 完全缺失 |
|
||
| 登录/注册切换 | ✅ | 文字链接切换模式 |
|
||
|
||
**关键问题：** 登录模型与设计规格根本不同 — 设计要求手机号+验证码，实现用用户名+密码。
|
||
|
||
---
|
||
|
||
### ⚠️ 页面 04：首页日记流 (Home Daily) — 完整度 85%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 问候区 (日期+问候语+搜索按钮) | ✅ | 44px 搜索按钮，问候语名字 accent 色 |
|
||
| 连续记录徽章 | ✅ | tertiary-soft 背景，金色，火焰图标 |
|
||
| 心情选择器 (5 种心情+天气+Caveat 标题) | ⚠️ | 5 种心情正确，但**缺少心形容器**；天气**硬编码**为"☀ 晴 26°" |
|
||
| 今日卡片 (渐变+写按钮) | ✅ | |
|
||
| 三栏统计 | ✅ | 注意：`totalCount` 受限于分页大小 (最多 10 条) |
|
||
| "最近记录" 标题+"查看全部" | ✅ | |
|
||
| 日记卡片列表 | ⚠️ | **摘录显示标签而非正文内容**（架构限制）；无图片预览 |
|
||
| 空状态 | ✅ | |
|
||
|
||
---
|
||
|
||
### ⚠️ 页面 05：手账编辑器 (Editor) — 完整度 35%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 顶部工具栏 (日期/撤销重做/自动保存/标签/保存) | ⚠️ | 有返回+完成按钮；**缺少日期显示、顶部撤销重做、绿点自动保存、标签按钮** |
|
||
| 日期+心情条 | ❌ | 完全缺失 |
|
||
| 画布区域 (点阵背景+标题+格式栏+正文) | ⚠️ | 有涂鸦/贴纸/照片；**缺少点阵背景、内联标题输入、格式栏(B/I/U/对齐)、内联文本编辑** |
|
||
| 底部工具栏 (6 工具, 72px) | ⚠️ | 8 工具 160px；**缺少模板和更多工具**；画笔被拆分为 4 个独立按钮 |
|
||
| 贴纸面板 (260px, 7 分类, 5 列) | ⚠️ | 用 Modal 底部面板而非内嵌展开；6 分类而非 7；无分类筛选 |
|
||
| 画笔面板 (280px 抽屉, 滑块) | ⚠️ | 4 种画笔+8 色+预设宽度存在；**缺少独立面板、连续粗细滑块、透明度滑块** |
|
||
| 标签面板 (200px, 已选+输入+推荐) | ❌ | 完全缺失 |
|
||
|
||
---
|
||
|
||
### ⚠️ 页面 06：日历视图 (Calendar) — 完整度 60%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 月份标题+导航 (44×44 圆形) | ⚠️ | 有标题+导航，但按钮非 44×44 圆形轮廓 |
|
||
| 视图切换 (月/周/时间轴 pill) | ⚠️ | 有 3 选项，但用 Material SegmentedButton 而非 pill 样式；标签简写 |
|
||
| 心情概览柱状图 | ❌ | **完全缺失** — 设计规格要求 5 根柱状图 |
|
||
| 星期行 | ✅ | |
|
||
| 日历网格 (心情圆点+日记指示器) | ⚠️ | 有网格+今日高亮+选中态；圆点 4×4 (规格 6×6)；**缺日记指示器** |
|
||
| 时间线 (40×40 圆点+卡片) | ⚠️ | 有时间线但圆点 36×36；**卡片缺时间和摘要** |
|
||
|
||
---
|
||
|
||
### ⚠️ 页面 07：心情追踪 (Mood Tracker) — 完整度 30%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 今日心情卡片 (渐变+大 emoji+文字) | ⚠️ | 有概览卡片，但非渐变背景，emoji 不大，非"今日选择"交互 |
|
||
| 天气卡片 (5 种天气按钮) | ❌ | 完全缺失 |
|
||
| 心情趋势图 (柱状图+7天/30天/3月) | ⚠️ | 有饼图 (非柱状图)；有周期选择但标签不同 (周/月/季) |
|
||
| 2×2 统计网格 | ❌ | 完全缺失 |
|
||
| 心情洞察 (3 项洞察卡片) | ⚠️ | 仅有连续天数单卡，非 3 项洞察 |
|
||
|
||
---
|
||
|
||
### ✅ 页面 08：周视图 (Weekly) — 完整度 100%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 周标题+导航 | ✅ | 44×44 圆形按钮 |
|
||
| 7 天横向卡片 (星期+日期+emoji+指示器) | ✅ | |
|
||
| 周总结卡片 (3 统计+心情分布条) | ✅ | 8px pill 分布条 |
|
||
| 日期卡片 (×3, 正文+标签+照片) | ✅ | 3 行省略 + 彩色标签 pills |
|
||
|
||
---
|
||
|
||
### ✅ 页面 09：月度统计 (Monthly) — 完整度 90%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 月份标题+导航 | ✅ | |
|
||
| 月度热力图 (7 列, 5 色心情映射) | ⚠️ | 有热力图但用模拟数据；周起始日(周日)与日历页(周一)不一致 |
|
||
| 月度统计 2×2 网格 | ✅ | |
|
||
| 本月精选 (3 卡片+徽章) | ✅ | |
|
||
|
||
---
|
||
|
||
### ⚠️ 页面 10：贴纸素材 (Stickers) — 完整度 30%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 顶部导航 (返回+标题) | ⚠️ | 用默认 AppBar，非设计系统样式 |
|
||
| 搜索框 | ❌ | 完全缺失 |
|
||
| 分类标签 (8 类横向滚动) | ⚠️ | 有分类但动态加载，非固定 8 类；用 FilterChip 而非设计样式 |
|
||
| 精选贴纸包 (渐变卡+限时免费) | ❌ | 完全缺失 |
|
||
| 贴纸包列表 (2 列, 预览+价格) | ⚠️ | 2 列网格存在，但无价格显示 |
|
||
| 单贴纸选择 (4 列网格+收藏) | ❌ | 完全缺失 — 只显示贴纸包，无包内贴纸浏览 |
|
||
|
||
---
|
||
|
||
### ⚠️ 页面 11：模板库 (Templates) — 完整度 40%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 顶部导航 | ⚠️ | 默认 AppBar |
|
||
| 视图选择 (日/周/月视图) | ❌ | 完全缺失 — 用分类标签代替 |
|
||
| 模板列表 (200px 预览+使用按钮+标签) | ⚠️ | 有网格卡片但预览仅 72px (规格 200px)；**缺"使用"按钮、标签 pills** |
|
||
|
||
---
|
||
|
||
### ✅ 页面 12：发现页 (Discover) — 完整度 100%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 搜索栏 (pill) | ✅ | |
|
||
| 灵感卡片 (渐变+装饰圆+缩略图) | ✅ | |
|
||
| 热门话题 (横向滚动 chips) | ✅ | 8 个话题完全匹配 |
|
||
| 精选模板 (2 列网格) | ✅ | |
|
||
| 达人日记 (纵向列表) | ✅ | |
|
||
|
||
---
|
||
|
||
### ⚠️ 页面 13：搜索页 (Search) — 完整度 25%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 搜索头部 (返回+输入+取消) | ⚠️ | 有搜索框但**无"取消"按钮** |
|
||
| 搜索前：搜索历史+热门搜索 | ⚠️ | 有常用标签但**非搜索历史/热门搜索**；额外加了心情筛选器 |
|
||
| 结果分类 tabs (全部/日记/模板/标签) | ❌ | 完全缺失 |
|
||
| 日记结果 (关键词高亮) | ⚠️ | 有结果卡片但**无关键词高亮** |
|
||
| 模板结果网格 | ❌ | 完全缺失 — 只搜日记 |
|
||
| 标签结果 pills | ❌ | 完全缺失 |
|
||
|
||
---
|
||
|
||
### ⚠️ 页面 14：个人中心 (Profile) — 完整度 25%
|
||
|
||
| 模块 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| 头像+用户名+签名 | ⚠️ | 头像 64px (规格 80px)；显示角色标签而非签名 |
|
||
| 统计条 (4 项彩色数字) | ❌ | 完全缺失 |
|
||
| 成就徽章 (横向滚动) | ❌ | 有链接到成就页但**无内联徽章滚动** |
|
||
| 设置列表 (emoji 图标+toggle/箭头) | ⚠️ | 有菜单列表但用 Material Icons 而非 36px emoji；**无 toggle 开关** |
|
||
| 更多设置 (导出/反馈/关于) | ❌ | 完全缺失 |
|
||
|
||
---
|
||
|
||
## 关键发现与优先建议
|
||
|
||
### 🔴 高优先（核心体验缺失）
|
||
|
||
| # | 问题 | 影响页面 | 建议 |
|
||
|---|------|---------|------|
|
||
| 1 | **编辑器标签面板缺失** | 编辑器 | 添加标签面板 (200px 抽屉) + BLoC 标签状态 |
|
||
| 2 | **编辑器日期+心情条缺失** | 编辑器 | 添加日期时间+心情快速选择条 |
|
||
| 3 | **日历心情概览柱状图缺失** | 日历 | 添加 5 根心情柱状图卡片 |
|
||
| 4 | **搜索结果无分类 tabs** | 搜索 | 添加全部/日记/模板/标签分页 |
|
||
| 5 | **个人中心统计条缺失** | 个人中心 | 添加 4 项彩色统计 |
|
||
|
||
### 🟡 中优先（功能不完整）
|
||
|
||
| # | 问题 | 影响页面 | 建议 |
|
||
|---|------|---------|------|
|
||
| 6 | **登录用用户名/密码而非手机号/验证码** | 登录 | 改为手机号+验证码登录流程 |
|
||
| 7 | **第三方登录缺失** | 登录 | 添加微信/Apple/Google 登录按钮 |
|
||
| 8 | **天气硬编码** | 首页 | 接入天气 API 或使用设备定位 |
|
||
| 9 | **日记卡片摘录显示标签而非正文** | 首页 | JournalEntry 模型需添加 content 摘要字段 |
|
||
| 10 | **贴纸页无包内贴纸浏览** | 贴纸 | 添加点击贴纸包进入详情页 |
|
||
| 11 | **心情追踪用饼图而非柱状图** | 心情 | 改为柱状图 + 添加天气卡片 |
|
||
| 12 | **模板预览仅 72px (规格 200px)** | 模板 | 增大预览区域，添加"使用"按钮 |
|
||
|
||
### 🟢 低优先（样式偏差）
|
||
|
||
| # | 问题 | 影响页面 | 建议 |
|
||
|---|------|---------|------|
|
||
| 13 | 编辑器底部工具栏 160px (规格 72px) | 编辑器 | 考虑整合画笔类型为单按钮 |
|
||
| 14 | 部分页面用默认 AppBar 而非设计系统 | 贴纸/模板 | 统一使用设计系统组件 |
|
||
| 15 | 月度热力图周起始不一致 | 月度 | 统一为周一起始 |
|
||
| 16 | 日记卡片数量未限制为 4 条 | 首页 | 可考虑限制或保持动态 |
|
||
|
||
---
|
||
|
||
## Tab 栏对照
|
||
|
||
| 设计规格 Tab | 实现方式 | 匹配度 |
|
||
|---|---|---|
|
||
| 首页 (房屋图标) | ✅ `home_outlined`/`home` | 匹配 |
|
||
| 日历 (日历图标) | ✅ `calendar_month_outlined`/`calendar_month` | 匹配 |
|
||
| 写日记 (加号, **中央凸出**) | ✅ FAB 48×48 圆形, accent 色, -16px margin | 匹配 |
|
||
| 发现 (放大镜图标) | ✅ `explore_outlined`/`explore` | 匹配 |
|
||
| 我的 (人像图标) | ✅ `person_outline`/`person` | 匹配 |
|
||
|
||
Tab 栏结构与设计规格一致。
|
||
|
||
---
|
||
|
||
## 多端适配对照
|
||
|
||
| 特性 | 设计规格 | 实际实现 | 匹配度 |
|
||
|------|---------|---------|--------|
|
||
| 手机底部 Tab 栏 | 5 Tab + 中央 FAB | ✅ `ResponsiveScaffold` mobile 模式 | 匹配 |
|
||
| 平板侧边导航栏 | 240px NavigationRail | ✅ `NavigationRail` | 匹配 |
|
||
| 桌面扩展导航 | 侧边栏+macOS 风格 | ✅ `extended NavigationRail` + 3:2 flex | 部分匹配 |
|
||
|
||
---
|
||
|
||
*报告生成于 2026-06-02，基于设计规格 v3.0 文档与 Flutter 前端代码的逐行对比。*
|