Files
photo-live/docs/plans/2026-09-21-UI03-App全页面新版效果图落地实施方案.md
T
2026-09-21 23:45:34 +08:00

30 KiB
Raw Blame History

UI-03:App 全页面新版效果图落地实施方案

版本:1.0
日期:2026-09-21
状态:待执行。所有任务与验收项需实施后填写,不代表已完成。
执行对象:Claude 或其他接手本仓库的开发者。

1. 执行目标与依据

将现有 Flutter 工作人员 App 调整为新版五张设计板的视觉效果,覆盖 20 个页面与关键状态。以真实可运行 App 为交付物,不将效果图铺成背景假装实现,不只改首页或返回另一份计划。

1.1 设计图(执行前必须打开查看)

图号 设计板 对应页面
01 账号与设置 01 登录、02 设置、03 修改密码、04 语言选择
02 相册工作台 05 相册列表、06 相册详情、07 操作菜单、08 空相册
03 创建与协作 09 新建、10 编辑、11 成员、12 分类
04 拍摄与上传 13 拍摄、14 上传中心、15 异常任务、16 服务端历史
05 照片与分享 17 照片网格、18 管理大图、19 分享卡、20 隐藏确认

设计索引及原始提示词。

图为英文概念稿,实际 App 保留中英文。图片外的板号、标题、灰色画布、手机外轮廓不属于 App 页面。

1.2 与已有方案的关系

  • UI-01继续约束业务、数据、权限、上传恢复与公共组件。
  • UI-03 是新版 App 视觉落地规范;对卡片、导航、表单、弹层布局的冲突,以本文为准。
  • UI-02负责 Web 观众页,本阶段不修改它。
  • 当前代码已有 ui/tokens.dart、公共组件、相册封面/预览模型和 album_photo_viewer_page.dart。先复用并检查,不重新造一套主题、照片控制器或 API。
  • 编制时仅静态检查了最新代码;执行者仍需核对当前提交和运行行为,不能把旧阶段测试记录当本阶段证据。

优先级:实际业务权限与接口语义 > 本文明确规则 > 效果图。未在图中显示的真实必填字段不能删除;效果图中看似存在的功能不能自动当作已实现。

2. 范围和执行保护

必须交付

  1. 五张设计板对应的全部页面/弹层。
  2. 相册与照片图片化展示、清晰的拍摄和上传入口。
  3. 成员邀请选择、分类编辑、图片隐藏/删除等配套交互。
  4. 中英文、键盘、系统安全区、大字体、浅深色适配。
  5. 对照截图、针对性回归、UI03 验收记录。

不在本轮范围

  • 重写原生上传桥接、上传状态机、国内海外同步、数据库队列。
  • 新增飞书登录、自助注册、社交关注、视频、修图、全景拍摄。
  • 修改 Web 观众页、JS 悬浮组件、管理后台布局。
  • 变更账号权限、放宽隐藏照片读取、增加未授权原图下载。
  • 自动部署、推送、创建正式标签、修改云资源。

执行规则

  • 开始记录 Git 状态,保护 UI-01/UI-02 等已有改动和未跟踪文件,不执行清理或重置。
  • 按本文默认值自主实施;仅实际业务冲突、外部资源缺失等需要明确记录,不为每个圆角重复询问。
  • 任务数据、账号隔离、幂等 ID、重试/取消、续签、原生事件确认机制保持不变。
  • 不将任务完成改成已公开;文件传完、确认完成、处理完成和公开是不同状态。
  • 不手改生成的本地化文件,修改 ARB 后运行生成工具。
  • 不把用户上传图片或签名 URL 写入源码/日志/截图测试仓库。
  • 测试可能重置数据库,运行前检查目标和脚本,只使用专用测试环境。
  • 本文不要求安装指定插件或使用子代理;按当前授权和仓库规则执行。

3. 统一视觉与交互规范

元素 默认规格
主色 #1A73E8;主要按钮实色,不使用生成图中偶然出现的渐变
页面背景 #F6F8FB
卡片/输入表面 #FFFFFF
主文字 #172033
次文字 #5E6878
分隔 #E5EAF1
等待/成功/错误 复用 tokens.dart 中语义色和深色变体
页面标题 24sp,字重 600–700
分组标题 17–18sp
正文/字段 14–16sp
辅助文字 12–13sp,不承担唯一关键操作说明
左右边距 通常 16dp
间距 4、8、12、16、24、32dp
圆角 卡片16、输入/按钮12、标签8dp
主按钮 高度至少48dp,文字放大时允许增高
图标 20–24dp,同一种线型,触控区至少44×44dp
相机/大图背景 #10161E 或现有语义等价深色
动效 复用 motion(context),减少动画时关闭非必要过渡
  • 按系统字体比例缩放,禁止全局锁定 textScale。对比度目标正文至少4.5:1。
  • 保留 Flutter Material 体系;通过 ThemeData 与现有组件统一,不引入第二个大型 UI 库。
  • 根页面只有 Albums / Uploads / Settings 三个底部入口。相册详情、照片页、历史等内页不显示根导航。
  • 保持 IndexedStack 和页面状态,切换页签不重启上传引擎。
  • 深色主题不是把白色 token 直接硬编码进去;普通页面遵守现有系统主题,拍摄/大图始终采用摄影深色。
  • 图标和状态同时带文字语义;所有图标按钮具备 Tooltip/Semantics。
  • 设置项用轻分隔,减少重阴影;每个操作区域最多一个蓝色主要动作。
  • Loading/Error/Empty 优先复用现有 ui/components,允许精修外观,不复制多套。

3.1 素材规则

  • 品牌沿用当前产品英文名称;已有正式 Logo 优先。不要因设计板装饰文字创建多个 slogan 或替换应用包名。
  • 登录摄影拼贴使用项目已有可使用素材,或由用户提供的品牌图片。可从此次生成板提取的素材必须有清晰可用来源和质量;不能将整块含表单的设计图裁作真实背景。无可用素材时用可替换的中性摄影占位并标注未完成视觉项,不偷偷依赖远程图库。
  • 相册封面、照片、头像从真实数据读取。头像缺失用姓名首字母,不给所有用户配同一示例人物。
  • 图中分类缩略图只是装饰建议;现有接口无分类封面时使用统一分类图标,本轮不扩展分类资产体系。
  • 图片采用正确解码尺寸/缓存,列表不用原图。缩略图签名过期遵守既有受控刷新。
  • 示例二维码不扫描、不复制为业务资产,必须按真实相册链接生成。

4. 20 个页面的落地规格

01 登录(图01,login_page.dart)

结构:摄影拼贴 → 品牌 → 主标题 → 简短说明 → 账号/密码 → Sign in → 管理员提供账号说明。

  • 手机正常高度时顶部拼贴约占可用高度25%–32%;短屏/键盘开启时压缩图片并允许整页滚动。
  • 页面右上提供语言选择;账号和密码标签清晰,密码支持显示/隐藏。
  • 主标题示例可使用“Your event. In focus.”及中文对应文案,不能把英文直接写在 Dart 中。
  • 登录中禁用重复提交,失败在表单附近显示稳定错误码对应文案。
  • 不增加注册、飞书或不存在的找回密码流程;保留现有账号登录与会话恢复。
  • 返回键、键盘 Next/Done、自动填充等沿用合理平台行为。

02 设置(图01,home_page.dart 中 SettingsTab)

  • 顶部 Settings,账号摘要卡含头像占位、显示名、账号、真实角色。
  • 账号卡不是未实现的“个人资料编辑”入口;没有编辑功能不画导航箭头。
  • 分组:Language、Change password、Upload help、App version;退出单独低强调红色。
  • 语言显示语言自身名称;版本来自已有版本配置,不写死截图版本。
  • 上传帮助使用本地说明页/底部面板,解释网络、系统后台限制、强制退出后恢复;不承诺锁屏后百分百持续。
  • 退出若存在进行中任务,明确任务如何保留;遵守现有引擎停止和账号隔离,不删除队列。

03 修改密码(图01,password_change_page.dart)

  • 返回标题、简短安全提示、当前/新/确认密码三个字段、Save password。
  • 输入框统一样式,确认密码不匹配即时提示;后端规则仍是最终依据。
  • 不将生成图“字母数字符号”等提示当新增强制密码政策,文案需与真实校验一致。
  • 提交中防重复、成功反馈、会话撤销/重登录按原接口行为处理。

04 语言选择(图01,现有语言选择面板)

  • 带拖柄的 BottomSheet:Follow device / English / 中文。
  • 本版采用临时选中 + Done 提交;滑动关闭/取消不改变原选择,提交后统一刷新语言。
  • 各语言以自身语言书写。保留系统跟随与持久化,切换后页面/上传任务不重建丢失。
  • 同一面板复用于登录与设置,避免两套选择行为。

05 相册列表(图02,albums_tab.dart)

  • 顶部品牌/标题、右上新建。次标题可使用“Organize and manage event photos”。
  • 图片卡片约16:9,标题、时间地点和 Public/Uploads on 状态叠在底部暗色渐变上,贴近新版图。
  • overlay 文字保持对比度;长标题最多两行,卡片不足时增高文字区域,不截掉必要操作。
  • 不显示虚假的上传数;正常/下线、公开开关、上传开关是不同事实。
  • 无封面使用同尺寸占位,不能拿他人的相册图片补齐。
  • 保留分页、下拉刷新、空/错状态;不对每卡发一次详情请求。
  • 平板可两列卡片,手机默认单列;不要把所有卡片塞进嵌套滚动。
  • 上传角标复用当前账号未完成任务计算;不跨账号,也不把全部历史当未完成。

06 相册详情(图02,album_detail_page.dart)

  • 顶部返回与更多;封面、标题、时间地点、公开/上传状态。
  • 次级四入口 Photos / Members / Categories / Share,44dp以上有效点击区。
  • Recent photos 三列少量预览(最多6–9张)与 See all,复用有权限数据;无预览权限用真实状态占位。
  • 底部固定 Take photos(主)与 Choose photos(次),带SafeArea,正文留足底部空间。
  • 关闭上传时禁用入口并说明原因;公开关闭不自动禁用上传。
  • 协作者的照片/操作按已有接口范围,不能为凑预览读取他人管理照片。
  • 内页不显示根底部导航。

07 相册操作菜单(图02)

  • BottomSheet:Edit album、Manage members、Categories、Share album、Cancel。
  • 根据角色过滤动作;不能前端显示可管理后端再统一报403作为正常体验。
  • 入口不复制另一套编辑/成员/分享实现;与详情四入口共享导航方法。
  • 点击动作先关闭面板再进入目标,避免叠层路由错乱。

08 空相册(图02)

  • 保留真实相册封面和活动资料(如有),中心安静图片占位,Ready for your first photo。
  • 底部拍摄/选图仅有上传权限时出现;只读成员显示适当说明。
  • 空相册不得出现“32 uploads”或示例照片数。
  • 网络失败与空数据分开;真实有处理中照片时提供“正在处理”说明,不把它当绝对空白。

09 创建相册(图03,album_form_page.dart)

  • 表单分组:标题、开始/结束、时区、地点、Description & languages。
  • 图未展示的真实字段如地址仍保留,可放在展开分组;所有必填项继续校验。
  • 日期时间用系统/现有选择器,时区显式可见,禁止静默取设备时区。
  • 默认语言必填,其他语言可选;编辑某语言不覆盖其他语言内容。
  • 表单可滚动,底部 Create album 不被键盘挡住;保存失败保留输入。
  • 不新加未实现的封面上传控件;封面配置若已有能力可保留到实际支持的入口。

10 编辑相册(图03,同一 AlbumFormPage)

  • 顶部 Details / Access 页签,共享同一个表单草稿。
  • Details 复用新建字段;Access 展示 Allow uploads、Public access、Allow downloads、Original downloads。
  • 每个开关说明准确,不将公众浏览与公众上传混淆。
  • 原图下载受总下载开关约束;保持现有保存语义,不能切页签就丢草稿或立刻写服务器。
  • Save changes 一次提交验证后的变更;离开未保存表单需要可理解的放弃确认。
  • 创建者/管理员与协作者的编辑边界沿用现有权限。

11 成员(图03,album_members_page.dart)

  • Owner 单独组,Collaborators 列表;头像/首字母、显示名、账号、角色。
  • Invite colleague 打开现有企业账号搜索选择器(可改为底部面板),不生成公众注册或外部邮件邀请。
  • 搜索保留分页/防抖/竞态处理,空结果、已加入、接口失败均明确反馈。
  • 邀请和移除按后端权限;所有者不可当普通协作者直接移除。
  • 不硬编码示例邮箱,不新增没有源数据的邮箱字段。
  • 成员列表底部按钮与安全区避让,内页不显示根导航。

12 分类(图03,现有详情内分类管理)

  • 可从详情提取为独立 Categories 页面,以符合设计图;复用现有 CRUD 和语言字段。
  • 列表展示真实分类名、编辑/更多入口;无需伪造分类照片。
  • New category/Edit category 使用BottomSheet,语言页签、名称、保存。
  • 必填和删除关联照片处理沿用既有接口,删除前提示真实影响。
  • 无权限用户只可选择可用分类,不展示管理操作。
  • 代码提取后移除旧重复区块/入口,避免两份状态不同步。

13 拍摄(图04,capture_page.dart)

  • 深色摄影界面,顶部返回、目标相册、分类选择、真实上传状态。
  • 取景按相机方向/比例正确显示,不拉伸;底部快门、最近拍摄缩略图、前后摄像头切换(设备支持时)。
  • 不增加 Square/Pano 等没有实现的模式。
  • 每次入队成功给轻量反馈,允许继续连拍;准备/存储失败需可理解提示。
  • 退出相机不取消已入队上传;保留权限拒绝、相机初始化失败、生命周期暂停恢复。
  • 快门触控区至少72dp;摄像头权限按钮不能被系统导航栏遮挡。

14 上传中心(图04,queue_tab.dart)

  • 标题 Uploads,右上 History。
  • 摘要标注 Today · This device 或真实筛选范围;突出已上传数量,附上传中/等待/需处理。
  • All / Active / Needs attention 为主要入口,同时保留既有相册、日期与完成记录筛选(可放筛选菜单)。
  • 行内容:本机缩略图、文件名、相册/分类、状态、行级操作。
  • 正在上传用百分比与蓝色进度,确认中用不确定进度,等网络橙色,完成绿色。
  • 进度回调只刷新相关行;不要为摘要反复扫描全部任务或刷新全部缩略图。
  • 上传角标口径固定为未完成任务;completed 与公开完全不同。

15 异常任务(图04,同一上传页状态)

  • 这是上传中心 Needs attention 筛选,不新增重复的任务存储。
  • 网络失败:Retry;源文件缺失/准备失败:Select again;限速/权限等按真实可恢复性给动作。
  • Retry eligible tasks 只重试允许重试的任务,不对所有错误一律重试。
  • “Today · This device”摘要可继续显示这个范围全部任务,但筛选列表仅显示异常;文案解释清楚,不能称摘要为“筛选结果”却包含其他状态。
  • 移除本机记录文案与删除云端照片分开;本轮不新增没有引擎支持的暂停全部按钮。
  • 页面为空时显示没有待处理任务,不显示模拟错误。

16 服务端上传历史(图04,server_history_page.dart)

  • 明确 Server records · All devices;列表按当前账号和权限返回,不是全公司所有用户。
  • 相册/时间筛选、真实服务端状态、上传时间、设备来源。
  • 后端没有文件名/设备名称时用现有安全回退,不虚构 IMG_x 或硬件型号。
  • 无缩略图能力则用一致占位;不能为了展示历史绕过权限取图。
  • 不将本机任务和服务端记录相加成总数;保留分页、下拉刷新、加载更多失败。
  • 内页不显示根导航。

17 照片管理(图05,album_photos_page.dart)

  • 返回 Photos、相册副标题,All / Published / Hidden 等筛选。
  • 手机三列,极窄屏两列,平板按最小格宽扩列。网格gap约4dp,图片cover;真实纵横比保留到大图。
  • Processing/Hidden等必要状态用图标+短标签,不每张叠多个冗余徽章。
  • 当前版不新增批量管理,沿用单张大图操作。
  • 只请求可访问的管理列表;隐藏预览是否可见必须遵循当前后端能力,不能因为图里可见就放宽。
  • 留存分页与滚动位置,签名过期采用既有一次受控刷新。
  • 页面无根底部导航。

18 照片管理大图(图05,album_photo_viewer_page.dart)

  • 摄影深色背景、关闭/更多、contain完整图片、左右切换。
  • 底部资料:上传者、相册时区时间、尺寸大小、真实可见性状态。
  • 操作区 Hide photo / Publish again(有权限才出现)与 Delete。
  • 这是工作人员管理页,不加入公众点赞、点赞气泡、分享下载工具栏。
  • 双指缩放、切图、分页、关闭回位优先保留当前已实现机制,禁止另建独立序列。
  • 无预览权限、已删除、处理失败给真实占位;不能拿公开原图绕过管理权限。
  • 删除使用单独确认,说明当前实际软删除语义,不声称立即物理删除 OSS。

19 相册分享(图05,share_qr_dialog.dart)

  • 将当前分享对话框整理为手机全屏分享页或全高Sheet;平板可保留居中卡片。避免同一设备两个分享入口外观不同。
  • 卡片:真实封面(可缺省)、名称、日期地点、现场生成二维码、扫描说明。
  • Copy link 为主要动作,保留已存在的浏览器打开功能作为次级入口。
  • 链接包含正确相册token和语言,不能使用设计示例二维码或 OSS URL。
  • 相册未公开时必须明确提示当前链接不可公开浏览,不能仍写“Anyone … can view”。
  • 复制失败提供可选择文本;未支持系统分享时不画无效 Share 按钮。
  • 用户可长按查看/复制链接,但不要把公开token作为主视觉编号。

20 隐藏确认(图05)

  • 轻量BottomSheet,标题 Hide this photo?、当前图缩略图(有权限才显示)、影响说明、Hide photo / Cancel。
  • 文案建议“Viewers will no longer see this photo. Authorized album managers can publish it again.”,避免向所有协作者承诺其能恢复。
  • 确认时捕获photoId,防止切图后隐藏了另一张。
  • 提交中防重复;失败保留可重试提示;成功关闭面板并更新真实状态。
  • 取消不请求接口、不改变状态。删除不复用这段隐藏说明。

5. 跨页面业务规则与数据适配

项目 执行要求
模型 先检查当前 cover/preview 等字段;已有则直接复用,不重复造字段
隐藏预览 当前模型注释限制隐藏照片预览给管理员/创建者,需核实后端并保持;协作者可管理自己的照片不自动等于可读所有隐藏预览
角色 当前账号权限决定入口,后端最终裁决;成员变更后403使用友好刷新提示
统计 只显示真实可得数据,封面卡片用开关状态不造照片总数
时间 日期时区使用现有 album_format.dart;示例2024/2026不是产品默认
图片 网格thumb,大图browse,签名过期有限刷新,头像/缺图有回退
上传 不动task_state、task_store、upload_engine及原生回调语义
多语言 英文设计不是英文限定;ARB双语与占位符一致
分享 正确公开路由、二维码真实生成,不更改观众访问策略
断网 保留已有内容,错误与空态分开;不能恢复网络后重新重复入队

本轮原则上不需要后端大规模修改。若UI缺必要字段,先列实际缺口与可用回退;只有真正阻塞必做页面时进行兼容扩展,记录契约和权限验证。不能为一处图标或示例统计增加无关数据表。

6. 文件改动地图

以下以 apps/mobile 为根:

文件/目录 修改内容
lib/app/theme.dart 统一字体、导航、输入、按钮、BottomSheet/Card主题
lib/ui/tokens.dart 复用与校准颜色、间距、圆角,避免新增同义常量
lib/ui/components/ 完善状态、空错态、缩略图;可新增封面卡与共享操作条
lib/pages/login_page.dart 页面01
lib/pages/home_page.dart 根导航、页面02/04、帮助入口
lib/pages/password_change_page.dart 页面03
lib/pages/albums_tab.dart 页面05
lib/pages/album_detail_page.dart 页面06/07/08,分类入口调整
lib/pages/album_form_page.dart 页面09/10,共享草稿和分组
lib/pages/album_members_page.dart 页面11及邀请选择器
lib/pages/album_categories_page.dart(按需新增) 页面12,提取现有分类逻辑
lib/pages/capture_page.dart 页面13
lib/pages/queue_tab.dart 页面14/15,不复制任务引擎
lib/pages/server_history_page.dart 页面16
lib/pages/album_photos_page.dart 页面17
lib/pages/album_photo_viewer_page.dart 页面18/20
lib/pages/share_qr_dialog.dart 页面19,保留调用兼容或统一迁移调用方
lib/l10n/app_en.arb、app_zh.arb 全部新文案和语义标签
pubspec.yaml 与 assets/(如需) 合规本地登录素材,不引入不必要依赖
test/pages/、test/ui/、integration_test/ 关键行为与视觉回归

页面名移动时追踪引用更新,不保留两个功能重复的入口。共享组件对当前调用者保持合理兼容。

7. 可执行任务与出口

A00 基线与覆盖表

  • 检查当前Git状态、UI-01落实情况、实际运行入口和设备。
  • 打开五张设计板,记录20项当前实现差距。
  • 采集当前App代表页面截图,记录commit/设备/系统/主题。
  • 新建 docs/plans/progress/UI03-验收记录.md。 出口:明确复用组件和实际缺口,保护已有工作。

A01 主题与共用组件

  • 校准theme/tokens、卡片、表单、图标、状态与Sheet。
  • 完成安全区、大字体、深色及减少动画基础。
  • 确定可用品牌/摄影素材,登记来源;不得用网络假素材掩盖交付缺口。 出口:一套公共规范,后续页面不各写一套。

A02 账号与设置

  • 页面01–04、上传帮助及退出提示。
  • 键盘、语言持久化、密码错误/提交状态、登录返回行为。 出口:登录到设置完整真实链路符合图01。

A03 相册工作台

  • 页面05–08、封面、主次操作、菜单及空态。
  • 角色可见性、上传关闭、公开关闭、缺封面、长标题验证。 出口:相册列表→详情→拍摄/选图入口清晰,图02一致。

A04 表单与协作

  • 页面09–12、Details/Access草稿、成员搜索邀请、分类提取。
  • 未保存退出、语言内容、权限拒绝、重复邀请与分页处理。 出口:创建、编辑、成员、分类是完整可用交互,非仅静态表单。

A05 拍摄与上传

  • 页面13–16样式、摘要与筛选、错误动作和历史。
  • 连拍入队、网络等待/恢复、重试、账号切换及记录清理回归。
  • 检查行级进度更新,不引入上传期间整页抖动。 出口:图04视觉落地,原有上传机制不退化。

A06 照片与分享

  • 页面17–20、网格、管理大图、隐藏/删除确认及分享卡。
  • 预览过期、权限撤回、左右切换、返回原位置、复制失败。 出口:图05完整落地,管理操作真实且受权限控制。

A07 双语、视觉与功能回归

  • 补齐中英文词条、语义标签、空错态及小屏适配。
  • 执行第8节验收,保存优化后截图与差异说明。
  • Android可用设备检查;没有macOS/iOS设备时明确待验,不能用Android结果代表iOS。 出口:各页面可用,未执行的外部验证清晰。

A08 交接

  • 完成UI03验收记录及页面对应索引。
  • 总纲可新增UI-03状态,不覆盖UI-01/UI-02或把P5标为完成。
  • 报告实际修改、测试结果、设计偏差与剩余素材/真机关口。 出口:接手者无需翻聊天即可核查。

顺序A00→A01→A02/A03/A04/A05/A06→A07→A08。分支关系仅说明工作依赖,不要求启动多个代理。

8. 验收矩阵

8.1 页面与状态验收

编号 通过标准
APP-A01 20个页面/关键状态均有实现或明确入口映射,没有只做首页
APP-A02 图片卡片、分组表单、底部操作、摄影深色风格接近设计板
APP-A03 根导航仅三个主页面,内部返回/路由状态正确
APP-A04 登录/密码无注册飞书入口;错误与提交反馈真实
APP-A05 语言Done提交、取消不改变偏好,中英文持久化有效
APP-A06 相册状态、角色入口和封面缺省正确,无伪造计数
APP-A07 创建/编辑必填、跨页签草稿、语言字段和时区不丢失
APP-A08 邀请为内部账号选择;成员与分类权限、失败状态可用
APP-A09 相机方向、权限、连拍与入队反馈正常,无多余拍摄模式
APP-A10 上传状态和操作匹配,移除本机记录不删除云图
APP-A11 服务端历史与本机队列不混淆,账号隔离正确
APP-A12 图片预览受控、签名刷新有限、网格/大图分页和回位正确
APP-A13 隐藏/恢复/删除权限真实,确认绑定正确photoId
APP-A14 QR真实生成,公开关闭有提示,复制失败有回退
APP-A15 320/390/430逻辑宽度、平板、横屏及1.0/1.3/2.0文字缩放主要操作可达
APP-A16 浅深色、减少动画、Semantics、点击目标达标
APP-A17 既有上传恢复、凭证续签、原生桥接回归未受影响
APP-A18 截图与测试证据真实,iOS/真机关口未完成时明确标注

8.2 截图要求

保存到 docs/designs/ui03-implementation/,与AI设计板分开:

  • 标准尺寸390×844(或最近设备逻辑尺寸):页面01–20英文截图/面板状态各一。
  • 中文至少覆盖登录、列表、详情、编辑、成员、上传、大图、分享;其余页面做运行检查并登记。
  • 320宽短屏、430宽、平板;重点检查登录键盘、长标题、上传错误长文案、BottomSheet。
  • 深色模式至少设置、相册列表、表单、上传。
  • 相机与大图横屏、安全区;无相机设备时不能使用静态示例冒充真实预览成功。
  • 拍摄权限拒绝、空相册、网络失败、上传关闭、无预览权限、分享关闭等代表状态。
  • 截图使用合成测试数据,不提交真实公司账号和私人照片。

允许差异:真实内容、操作系统控件、权限导致的动作隐藏、缺省头像/分类图标、素材比例、大字体重排。不允许省略整页、用假数据代替接口、去掉业务权限或留无效按钮。

8.3 自动化与运行入口

使用仓库固定Flutter版本。在 apps/mobile 执行:

flutter gen-l10n
flutter analyze
flutter test
  • 测试前检查现有 scripts 和 integration_test 引导;从实际脚本运行设备集成,不猜命令或执行未知清库。
  • 单元/widget聚焦行为:语言提交取消、表单草稿、权限入口、重试分类、删除/隐藏绑定、签名刷新和分享。
  • 对稳定环境下的首页/上传/表单/大图建立少量golden;不为每个间距写脆弱断言。
  • 截图测试固定时钟、样本图片、语言与动画,不拿随机AI画板作为像素级golden。
  • 保留原有任务/桥接测试;若仅样式变化仍要做拍摄入队和上传队列的实际冒烟。
  • 真机后台/锁屏/强退重启验证记录设备、系统与结果;资源不可用列待验证,不重复宣称已通过。
  • 若触及API契约或服务端,另跑对应生成、类型和权限测试;本方案不授权对生产环境执行测试。
  • 完成时报告实际命令、结果、失败和跳过原因,不沿用旧验收数字。

9. 验收记录模板

docs/plans/progress/UI03-验收记录.md 至少包含:

  1. 基线commit、时间、设备/系统、Flutter版本与原有工作树改动。
  2. 页面01–20:代码入口、完成状态、截图路径。
  3. A00–A08任务状态与APP-A01–APP-A18逐项证据。
  4. 真实测试命令与结果、未运行项及原因。
  5. 与图差异、素材来源、接口缺口与处理。
  6. 与UI-01复用关系、未触碰的Web/组件范围。
  7. 真机、iOS、外部资源剩余关口。
  8. 交付文件清单及下一步。

完成定义:页面视觉与设计方向一致、20项覆盖清楚、关键操作真实可用、业务回归有证据、剩余验证不隐瞒。仅代码编译通过不能替代截图和交互验收。

10. 可直接复制给 Claude 的执行指令

请执行 docs/plans/2026-09-21-UI03-App全页面新版效果图落地实施方案.md。先打开 docs/designs/app-redesign-2026-09-21/ 下五张PNG,核对最新App和UI-01已有实现,按A00–A08完成20个页面与关键状态的真实改造。优先复用现有主题、模型、管理大图和上传机制,按本文默认设计自主实施,不重复询问常规样式选择。保护已有改动,不修改观众Web或悬浮组件,不放宽隐藏预览/恢复发布权限,不写死图里的日期账号数字和二维码。完成中英文、窄屏、深色和必要测试,交付真实运行截图及UI03验收记录,不只返回计划。缺真机或素材时记录具体影响并继续可完成工作;未经额外授权不部署、不推送、不操作云资源。