xinyouhe/photo-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
683e19bdc1ca3c98aa66e29f2c08f3f6f2674bb2
photo-live/docs/plans/2026-09-21-UI03-实施计划.md
T
浅念 18c4c3cfbc docs(plan): UI-03 app redesign implementation plan 
Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-09-21 23:45:34 +08:00

7.6 KiB
Raw Blame History

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 方案和 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
Reference in New Issue View Git Blame Copy Permalink