浅念
126 lines
7.6 KiB
Markdown
126 lines
7.6 KiB
Markdown
# UI-03 App 全页面新版效果图落地 实施计划
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans. Implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** 按 [UI03 方案](2026-09-21-UI03-App全页面新版效果图落地实施方案.md)和 5 张设计板重构 Flutter App 全部 20 个页面的视觉效果——蓝白工作台风格 + 深色摄影界面，保持全部业务逻辑不变。
|
||
|
||
**Architecture:** 纯 Flutter 视觉改造。复用 UI-01 已建的 theme/tokens/components；不修改上传引擎/原生桥/数据流/API 契约/Web 观众页/embed 组件。视觉冲突以 UI-03 方案为准。
|
||
|
||
**Tech Stack:** Flutter 3.44 + Material 3 + Riverpod（已有），零新依赖。
|
||
|
||
**对应验收:** APP-A01 至 APP-A18（方案 §8.1）。
|
||
|
||
**依赖基线:** 当前 HEAD（含 UI-01 tag `ui01` + UI-02 tag `ui02`）。
|
||
|
||
---
|
||
|
||
## 方案分析
|
||
|
||
| 维度 | 评估 |
|
||
|---|---|
|
||
| 范围 | 20 个页面/弹层全覆盖，是 UI-01 的视觉全面升级版 |
|
||
| 与 UI-01 的关系 | UI-01 建了主题/组件/业务逻辑——UI-03 在此基础上重做视觉细节（卡片 overlay、封面沉浸、深色摄影等） |
|
||
| 复杂度 | 高——每张设计板 4 个页面，涉及页面重写、新弹层、深色摄影模式 |
|
||
| 风险 | ① 20 页面改动量大 ② 业务逻辑不能退化 ③ 需保护 UI-01/UI-02 成果 |
|
||
| 不变项 | 上传引擎/原生桥/任务状态机/权限校验/API 契约/账号隔离/Web viewer/embed |
|
||
|
||
---
|
||
|
||
## Task 1: A00 基线与覆盖表
|
||
|
||
- [ ] Git 状态核对；记录 HEAD
|
||
- [ ] 打开 5 张设计板，逐页核对当前实现差距
|
||
- [ ] 采集当前 App 代表页面截图（MuMu）
|
||
- [ ] 创建 `docs/plans/progress/UI03-验收记录.md` 骨架 + 20 页面映射表
|
||
- [ ] Commit `docs(ui03): baseline screenshots and acceptance skeleton`
|
||
|
||
---
|
||
|
||
## Task 2: A01 主题校准 + A02 账号与设置（页面 01-04）
|
||
|
||
**Files:** theme.dart, tokens.dart, ui/components/, login_page.dart, home_page.dart (SettingsTab), password_change_page.dart, l10n
|
||
|
||
- [ ] 主题校准：确保字号/字重/间距/圆角与方案 §3 精确一致
|
||
- [ ] **页面 01 登录**：摄影拼贴顶部（25-32%高度，短屏/键盘时压缩+滚动）→ 品牌 → 主标题("Your event. In focus.") → 说明 → 账号/密码(带显示/隐藏) → Sign in → 管理员说明；右上语言选择
|
||
- [ ] **页面 02 设置**：账号摘要卡（头像占位/首字母+显示名+账号+角色）→ 分组（Language/Change password/Upload help/App version）→ 退出（低强调红色）
|
||
- [ ] **页面 03 修改密码**：返回标题+安全提示+三字段+Save；确认不匹配即时提示
|
||
- [ ] **页面 04 语言选择**：BottomSheet 带拖柄；Follow device/English/中文各以自身语言书写；临时选中+Done 提交（取消不改）
|
||
- [ ] flutter analyze 0 + widget 测试（~12）
|
||
- [ ] Commit `feat(mobile): UI-03 theme calibration and account pages (01-04)`
|
||
|
||
---
|
||
|
||
## Task 3: A03 相册工作台（页面 05-08）
|
||
|
||
**Files:** albums_tab.dart, album_detail_page.dart, l10n
|
||
|
||
- [ ] **页面 05 相册列表**：16:9 封面卡（标题/时间地点/状态叠在底部暗色渐变上，非卡片外独立行）；无封面同尺寸占位；保留分页/刷新/空态/角标
|
||
- [ ] **页面 06 相册详情**：顶部返回+更多；封面/标题/时间地点/状态；次级四入口(Photos/Members/Categories/Share ≥44dp)；Recent photos 三列预览(6-9张)+See all；底部固定 Take photos(主)+Choose photos(次)
|
||
- [ ] **页面 07 操作菜单**：BottomSheet (Edit/Members/Categories/Share/Cancel)；按角色过滤；先关面板再导航
|
||
- [ ] **页面 08 空相册**：保留真实封面和资料；中心安静占位+"Ready for your first photo"；有上传权限才显示底部按钮
|
||
- [ ] flutter analyze 0 + widget 测试（~12）
|
||
- [ ] Commit `feat(mobile): UI-03 album workspace pages (05-08)`
|
||
|
||
---
|
||
|
||
## Task 4: A04 表单与协作（页面 09-12）
|
||
|
||
**Files:** album_form_page.dart, album_members_page.dart, album_categories_page.dart（新提取）, album_detail_page.dart（移除旧分类区块）
|
||
|
||
- [ ] **页面 09 创建**：分组表单（标题/开始结束/时区/地点/Description&languages）；时区显式可见；底部 Create album 不被键盘挡住
|
||
- [ ] **页面 10 编辑**：Details/Access 页签共享草稿；Access 含 4 开关（upload/public/download/original）各配说明
|
||
- [ ] **页面 11 成员**：Owner 单独组+Collaborators 列表；Invite colleague 打开搜索选择器（BottomSheet）；保留分页/防抖/竞态
|
||
- [ ] **页面 12 分类**：提取为独立 Categories 页面（或可管理 BottomSheet）；CRUD+语言字段；无权限用户只可选择
|
||
- [ ] 未保存退出确认；重复邀请/接口失败处理
|
||
- [ ] flutter analyze 0 + widget 测试（~15）
|
||
- [ ] Commit `feat(mobile): UI-03 forms and collaboration pages (09-12)`
|
||
|
||
---
|
||
|
||
## Task 5: A05 拍摄与上传（页面 13-16）
|
||
|
||
**Files:** capture_page.dart, queue_tab.dart, server_history_page.dart, l10n
|
||
|
||
- [ ] **页面 13 拍摄**：深色摄影界面；顶部返回/目标相册/分类/上传状态；底部快门(≥72dp)+最近缩略图+前后切换；连拍轻反馈；退出不取消已入队
|
||
- [ ] **页面 14 上传中心**：标题+History 入口；摘要(突出已完成数+附异常)；All/Active/Needs attention 主要筛选；行=缩略图+文件名+状态+操作；百分比进度
|
||
- [ ] **页面 15 异常任务**：Needs attention 筛选视图；网络失败=Retry、文件缺失=Select again、限速/权限=按真实可恢复性；"Retry eligible"只重试可重试
|
||
- [ ] **页面 16 服务端历史**："Server records · All devices"；按账号/权限；真实服务端状态+时间+设备来源；安全回退
|
||
- [ ] 行级进度不整页刷新
|
||
- [ ] flutter analyze 0 + widget 测试（~12）
|
||
- [ ] Commit `feat(mobile): UI-03 capture and upload pages (13-16)`
|
||
|
||
---
|
||
|
||
## Task 6: A06 照片与分享（页面 17-20）
|
||
|
||
**Files:** album_photos_page.dart, album_photo_viewer_page.dart, share_qr_dialog.dart, l10n
|
||
|
||
- [ ] **页面 17 照片网格**：返回+相册副标题+筛选(All/Published/Hidden)；三列(极窄两列)；cover 裁切+必要状态角标
|
||
- [ ] **页面 18 管理大图**：摄影深色背景+contain+左右切换；底部资料(上传者/时区时间/尺寸/可见性)；操作=Hide photo/Publish again(权限)+Delete；深色确认不虚
|
||
- [ ] **页面 19 分享卡**：全屏分享页或全高Sheet；真实封面+名称+日期地点+真生成二维码+Copy link 主操作；公开关闭时提示链接不可浏览
|
||
- [ ] **页面 20 隐藏确认**：轻量 BottomSheet；标题+缩略图+影响说明+Hide photo/Cancel；photoId 捕获防错
|
||
- [ ] 删除确认说明软删除语义
|
||
- [ ] flutter analyze 0 + widget 测试（~12）
|
||
- [ ] Commit `feat(mobile): UI-03 photos and share pages (17-20)`
|
||
|
||
---
|
||
|
||
## Task 7: A07+A08 回归验收 + 交接
|
||
|
||
- [ ] 全量回归：`flutter analyze && flutter test` + `pnpm lint && typecheck && test && build && e2e`（web 不降级）
|
||
- [ ] 截图：20 个页面英文 + 至少 8 个中文 + 深色/320/平板代表
|
||
- [ ] APP-A01 至 APP-A18 逐项验证
|
||
- [ ] 完成 `UI03-验收记录.md`
|
||
- [ ] 总纲注记 + tag `ui03`
|
||
- [ ] Commit `docs: UI-03 acceptance record`
|
||
|
||
---
|
||
|
||
## 执行注意
|
||
|
||
- **保护已有工作**：不覆盖 UI-01/UI-02 改动；不修改 Web viewer/embed/admin
|
||
- **业务红线**：上传引擎/原生桥/状态机/权限/幂等/续签全部不动
|
||
- **素材规则**：登录拼贴用项目素材或中性占位（不裁设计图为背景）；二维码真实生成；头像用首字母
|
||
- **UI-01 复用**：tokens.dart/components/PhotoThumbnail/StateBadge 等已建——校准而非重建
|
||
- 每任务 TDD + Co-Authored-By trailer
|