浅念
141 lines
14 KiB
Markdown
141 lines
14 KiB
Markdown
# UI-03 App 全页面视觉重构 验收记录
|
||
|
||
基线：方案 commit `18c4c3c` · A00 基线 commit `9d521ff`（父提交即 `ui02` 标签指向的 `2a489aa`）· 日期：2026-09-22 · 环境：Windows 11 + MuMu 模拟器（Android 15，540×960 @240dpi）+ Flutter 3.44（仓库固定版本）· 基线时工作树干净（除本目录截图产物）。
|
||
|
||
## 1. 任务完成表
|
||
|
||
| 任务 | 内容 | Commit | 状态 |
|
||
|---|---|---|---|
|
||
| Task 1 (A00) | 基线截图 + 验收骨架 + 20 页面差距核对 | `9d521ff` | 完成 |
|
||
| Task 2 (A01) | 主题校准 + 账号与设置（页面 01-04） | `95e8417` | 完成 |
|
||
| Task 3 (A03) | 相册工作台（页面 05-08） | `5715c60` | 完成 |
|
||
| Task 4 (A04) | 表单与协作（页面 09-12） | `8bd09ee` | 完成 |
|
||
| Task 5 (A05) | 拍摄与上传（页面 13-16） | `ab51616` | 完成 |
|
||
| Task 6 (A06) | 照片与分享（页面 17-20） | `8ee6959` | 完成 |
|
||
| Task 7 (A07+A08) | 回归验收 + 交接（本记录 + 总纲注记 + tag `ui03`） | 本提交 | 完成 |
|
||
|
||
## 2. 20 页面映射
|
||
|
||
| # | 页面 | 代码入口 | Task | 状态 | after 截图 |
|
||
|---|---|---|---|---|---|
|
||
| 01 | 登录 | lib/pages/login_page.dart | Task 2 | Done | 01-login.png |
|
||
| 02 | 设置 | lib/pages/home_page.dart (SettingsTab) | Task 2 | Done | 02-settings.png |
|
||
| 03 | 修改密码 | lib/pages/password_change_page.dart | Task 2 | Done | 运行检查（widget 测试覆盖） |
|
||
| 04 | 语言选择 | lib/ui/language_sheet.dart | Task 2 | Done | 04-language-sheet.png |
|
||
| 05 | 相册列表 | lib/pages/albums_tab.dart | Task 3 | Done | 05-albums.png（zh）/ 05b-albums-en.png（en） |
|
||
| 06 | 相册详情 | lib/pages/album_detail_page.dart | Task 3 | Done | 06-album-detail.png |
|
||
| 07 | 操作菜单 | album_detail_page.dart:413 AlbumActionSheet | Task 3 | Done | 运行检查（widget 测试覆盖） |
|
||
| 08 | 空相册 | album_detail_page.dart 空态分支 | Task 3 | Done | 运行检查（widget 测试覆盖） |
|
||
| 09 | 创建相册 | lib/pages/album_form_page.dart | Task 4 | Done | 运行检查（widget 测试覆盖） |
|
||
| 10 | 编辑相册 | album_form_page.dart（edit 模式，Details/Access 页签） | Task 4 | Done | 运行检查（widget 测试覆盖） |
|
||
| 11 | 成员 | lib/pages/album_members_page.dart | Task 4 | Done | 运行检查（widget 测试覆盖） |
|
||
| 12 | 分类 | lib/pages/album_categories_page.dart（新提取） | Task 4 | Done | 运行检查（widget 测试覆盖） |
|
||
| 13 | 拍摄 | lib/pages/capture_page.dart | Task 5 | Done | 运行检查（深色界面 widget 测试覆盖；模拟器无摄像头，不冒充预览） |
|
||
| 14 | 上传中心 | lib/pages/queue_tab.dart | Task 5 | Done | 14-uploads.png |
|
||
| 15 | 异常任务 | queue_tab.dart Needs attention 筛选视图 | Task 5 | Done | 运行检查（widget 测试覆盖） |
|
||
| 16 | 服务端历史 | lib/pages/server_history_page.dart | Task 5 | Done | 运行检查（widget 测试覆盖） |
|
||
| 17 | 照片网格 | lib/pages/album_photos_page.dart | Task 6 | Done | 17-photos.png |
|
||
| 18 | 管理大图 | lib/pages/album_photo_viewer_page.dart | Task 6 | Done | 18-viewer.png |
|
||
| 19 | 分享卡 | lib/pages/share_qr_dialog.dart | Task 6 | Done | 19-share.png |
|
||
| 20 | 隐藏确认 | album_photo_viewer_page.dart:619 HidePhotoConfirmSheet | Task 6 | Done | 运行检查（widget 测试覆盖） |
|
||
|
||
说明：07/08/15/20 为其它页面的状态或弹层（BottomSheet / 空态 / 筛选视图），无独立路由；13 拍摄页 MuMu 模拟器无可用摄像头，按方案 §8.2「无相机设备时不冒充预览」以深色样式与逻辑测试覆盖。
|
||
|
||
## 3. APP-A 验收矩阵（方案 §8.1）
|
||
|
||
| 编号 | 状态 | 证据 |
|
||
|---|---|---|
|
||
| APP-A01 20 页面均有实现/入口映射 | ✅ | 上表 20/20 Done；无「只做首页」情况 |
|
||
| APP-A02 卡片/分组表单/底部操作/摄影深色接近设计板 | ✅ | AlbumCard 16:9 封面+底部暗色渐变叠字（albums_tab.dart:189）；分组表单（album_form_page.dart）；底部固定 Take/Choose photos；摄影深色 kColorPhotoBackdrop=0xFF10161E（tokens.dart:56）、capture_page.dart 深色界面；截图 01/05/06/14/17/18/19 |
|
||
| APP-A03 根导航仅三主页面，返回/路由正确 | ✅ | home_page.dart:41 IndexedStack 三页签（相册/上传/设置），内部 Navigator push；viewer 关闭返回网格原滚动位置（album_photo_viewer_test.dart） |
|
||
| APP-A04 登录/密码无注册飞书入口，错误与提交反馈真实 | ✅ | login_page.dart / password_change_page.dart 无注册、无飞书入口（负面项由代码走查确认）；错误提示来自真实 API 响应（login_page_test.dart 5 项、password_change_page_test.dart 4 项） |
|
||
| APP-A05 语言 Done 提交、取消不改变、中英文持久化 | ✅ | language_sheet.dart 临时选中 + Done 提交；account_pages_ui03_test.dart 覆盖取消/提交/持久化；实机验证：截图 04（zh 面板）→ 切 English 后 05b 全英文 |
|
||
| APP-A06 相册状态/角色入口/封面缺省正确，无伪造计数 | ✅ | 状态角标与计数全部来自 API；无封面同尺寸占位（albums_tab.dart:30）；AlbumActionSheet 按角色过滤（album_detail_page.dart:413）；截图 05（占位封面）/06（状态徽章） |
|
||
| APP-A07 创建/编辑必填、跨页签草稿、语言字段和时区不丢失 | ✅ | album_form_page.dart:326-337 Details/Access 页签共享草稿；时区显式选择；album_form_page_test.dart 14 项（必填/草稿/时区保留） |
|
||
| APP-A08 邀请为内部账号选择；成员分类权限、失败状态可用 | ✅ | album_members_page.dart:365 BottomSheet 搜索选择器（内部账号，防抖 :420）；album_categories_page.dart 权限分支；成员 6 项 + 分类 7 项测试 |
|
||
| APP-A09 相机方向/权限/连拍/入队反馈，无多余拍摄模式 | ✅ | capture_page.dart 单一拍摄模式、快门 76dp（:757）、连拍轻反馈、退出不取消已入队；capture_page_test.dart 14 项（含分类切换归属不变） |
|
||
| APP-A10 上传状态和操作匹配，移除本机记录不删云图 | ✅ | queue_tab.dart:82 摘要、:219/:388 异常分类重试（Retry/Select again 按真实可恢复性）；移除记录仅本地（queue_tab_test.dart 20 项） |
|
||
| APP-A11 服务端历史与本机队列不混淆，账号隔离正确 | ✅ | server_history_page.dart 独立页「Server records · All devices」，按账号/权限拉取；server_history_page_test.dart 7 项 |
|
||
| APP-A12 预览受控、签名刷新有限、分页和回位正确 | ✅ | 签名 URL 失败 → 一次受控刷新不无限重试（album_photo_viewer_test.dart）；三列网格极窄两列（album_photos_page.dart:535）；关闭返回原滚动位置 |
|
||
| APP-A13 隐藏/恢复/删除权限真实，确认绑定正确 photoId | ✅ | HidePhotoConfirmSheet（album_photo_viewer_page.dart:619），photoId 在打开瞬间捕获防错位；权限沿用服务端校验未放宽 |
|
||
| APP-A14 QR 真实生成、公开关闭提示、复制失败回退 | ✅ | QrImageView 由真实 viewer 链接生成（share_qr_dialog.dart:127）；未公开琥珀提示（:8 注释/:152）；share_qr_page_test.dart 4 项；截图 19 |
|
||
| APP-A15 320/390/430、平板、横屏及文字缩放可达 | ⚠️ 部分 | 350/390/800/900 逻辑宽度已由 widget 测试覆盖；320/430、文字缩放 1.3/2.0、平板、横屏未系统化截验，随 G2 真机关口补（同 UI-01 UI-A07 处理先例） |
|
||
| APP-A16 浅深色、减少动画、Semantics、点击目标达标 | ✅* | 工作台浅色 + 摄影界面深色为方案既定双风格（非系统暗色切换）；快门 76dp、详情四入口 ≥44dp；Semantics/减少动画未逐一核验（*见偏差表） |
|
||
| APP-A17 上传恢复、凭证续签、原生桥接回归未受影响 | ✅ | lib/features 引擎/桥零改动；147 项引擎/桥测试全绿，含凭证续签（test/features/uploads/upload_engine_test.dart:648/:983） |
|
||
| APP-A18 截图与测试证据真实，未完成关口明确标注 | ✅ | 本记录 + 10 张 after 截图（MuMu 实机截取，demo-seed 合成数据）；iOS/真机关口在 §8 明确标注未完成 |
|
||
|
||
## 4. 截图索引
|
||
|
||
目录：`docs/plans/progress/ui03-screenshots/`（按任务指令与基线约定存放；方案 §8.2 原文路径 `docs/designs/ui03-implementation/` 未采用，见偏差表）。数据为 `scripts/demo-seed.mjs` 合成（双语演示相册、12 张 sharp 生成照片、点赞/浏览），无真实账号与私人照片。
|
||
|
||
| 文件 | 页面 | 说明 |
|
||
|---|---|---|
|
||
| after/01-login.png | 01 登录 | 冷启动，摄影拼贴 + 品牌主标题 |
|
||
| after/02-settings.png | 02 设置 | 账号摘要卡 + 分组 + 退出 |
|
||
| after/04-language-sheet.png | 04 语言选择 | 拖柄 BottomSheet，三选项各以自身语言书写 |
|
||
| after/05-albums.png | 05 相册列表 | 中文；16:9 封面卡 + 底部导航 |
|
||
| after/05b-albums-en.png | 05 相册列表（en） | 切换 English 后全英文界面 |
|
||
| after/06-album-detail.png | 06 相册详情 | 封面资料 + 四入口 + Recent photos 三列预览 |
|
||
| after/14-uploads.png | 14 上传中心 | 摘要 + 筛选 + 历史入口 |
|
||
| after/17-photos.png | 17 照片网格 | 三列网格 + All/Published/Hidden 筛选 |
|
||
| after/18-viewer.png | 18 管理大图 | 深色背景 contain + 资料条 + Hide/Publish again/Delete |
|
||
| after/19-share.png | 19 分享卡 | 真实二维码 + 链接 + Copy link + 公开状态提示 |
|
||
| baseline/01-login.png 等 5 张 | 01/02/05/06/14 | A00 基线（commit `9d521ff`） |
|
||
|
||
未截图页面（03/07-13/15/16/20）：全部有 widget 测试覆盖并做模拟器运行检查；§8.2 要求的「20 页英文全量 + 320/430/平板/横屏/文字缩放 + 深色全组」未在本轮完成，登记于 §7 剩余事项。
|
||
|
||
## 5. 测试命令与真实结果
|
||
|
||
Web/Turbo 关（2026-09-22，UI-03 全部代码合入后）：
|
||
|
||
| 命令 | 结果 |
|
||
|---|---|
|
||
| `pnpm lint` | 10/10 通过（缓存命中，web 输入自 ui02 未变） |
|
||
| `pnpm typecheck` | 13/13 通过 |
|
||
| `pnpm test`（单测） | 426 通过：viewer 222/28 文件、admin 77/14、embed-loader 27、contracts 29、storage 6、api-cn 51、worker 14 |
|
||
| `pnpm build` | 10/10 通过 |
|
||
| `pnpm e2e` | 364 通过：api-cn 257/257（24 套件，全量新跑 131.54s）、sync 27/27、worker 13/13、admin 23、viewer 44/44 |
|
||
|
||
Flutter 关（`source scripts/flutter-env.sh && cd apps/mobile`）：
|
||
|
||
| 命令 | 结果 |
|
||
|---|---|
|
||
| `flutter analyze` | 0 issues |
|
||
| `flutter test` | 397/397 全绿（UI-02 时为 341，+56；含 account_pages_ui03/album_workspace_ui03 及 16 个页面级套件） |
|
||
|
||
首轮波动的诚实记录（均为同一根因，已复核非产品缺陷）：
|
||
|
||
1. viewer e2e 首轮 7 失败/16 未跑：失败全部为 seed 辅助的 `content-batches` 超时（http://127.0.0.1:8081）——当时我并行执行 flutter test + APK 构建，把 sync flush 挤到超时。停止并行负载后单独重跑 viewer e2e：44/44 通过（1.7m）。
|
||
2. flutter test 首轮 396 过 1 挂（capture_page_test「分类切换」），同样发生在并行构建期间；单独重跑全量：397/397 全绿（00:21s）。
|
||
|
||
## 6. 既有改动保护与不触碰范围
|
||
|
||
- 改动面仅 `apps/mobile`（pages/theme/tokens/l10n/language_sheet/config.dart 的 viewer 链接 lang 参数）与 `docs/`；`git diff ui02..HEAD --stat` 验证无 Web/服务端代码改动。
|
||
- 上传引擎、原生桥、任务状态机、权限校验、幂等、凭证续签、API 契约、Web 观众页、embed 组件全部未动；147 项引擎/桥测试全绿。
|
||
- UI-01 成果（tokens/components/PhotoThumbnail/StateBadge）为校准复用而非重建；未放宽隐藏预览/恢复发布权限；二维码由真实链接生成，未写死设计图数字。
|
||
|
||
## 7. 方案偏差与剩余事项
|
||
|
||
| # | 偏差/剩余 | 处理 |
|
||
|---|---|---|
|
||
| 1 | 截图目录用 `docs/plans/progress/ui03-screenshots/`（任务指令 + 基线约定），非 §8.2 的 `docs/designs/ui03-implementation/` | 已在本记录声明；内容要求（合成数据、无假预览）均已遵守 |
|
||
| 2 | §8.2 全量截图矩阵（20 页英文全量、中文 8 页全、320/430/平板/横屏、深色全组、代表性错误态截图）未完整执行；本轮交付任务要求的 8 页 + 2 张补充 | 剩余随 G2 真机/平板关口补拍，不宣称已通过 |
|
||
| 3 | APP-A15 部分通过：350/390/800/900 已测；320/430、文字缩放 1.3/2.0、平板、横屏待真机 | 与 UI-01 UI-A07 同口径标注 ⚠️，不虚报 |
|
||
| 4 | APP-A16 的 Semantics 标签与「减少动画」适配未逐项核验；点击目标（快门 76dp、四入口 ≥44dp）已达标 | 登记，后续无障碍专项跟进 |
|
||
| 5 | 部分负面项为代码走查而非自动化断言：A03 导航缺失项、A04 注册/飞书入口缺失、A06 长标题截断、A07 键盘遮挡、A08 邀请分页、A10 百分比文案、A14 复制失败回退 | 低风险（缺失类负面项），已列后续补测清单 |
|
||
| 6 | 方案 commit `18c4c3c` 误含 21 个 `.playwright-mcp/*.yml` 会话残留（与 UI-02 偏差 6 同源） | 已入库无法单独摘除；后续统一清理 |
|
||
| 7 | 首轮 e2e/flutter test 并行负载下的超时波动 | 见 §5，隔离重跑全绿，根因为验收执行方式而非代码 |
|
||
|
||
## 8. 外部关口（未完成，不隐瞒）
|
||
|
||
- iOS 构建/运行：未执行（无 Mac 环境）。
|
||
- Android 真机（后台/锁屏/强退重启、相机实拍）：未执行；MuMu 无摄像头，拍摄页以逻辑测试 + 深色样式覆盖。
|
||
- 平板/横屏系统化验证、无障碍（TalkBack）走查：未执行。
|
||
|
||
## 9. 交付文件清单
|
||
|
||
- 本记录：`docs/plans/progress/UI03-验收记录.md`
|
||
- after 截图 10 张 + baseline 5 张：`docs/plans/progress/ui03-screenshots/{after,baseline}/`
|
||
- 总纲注记：`docs/plans/2026-09-17-实施总纲.md`（UI-03 条目）
|
||
- 标签：`ui03`（指向本提交）
|