xinyouhe/photo-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0673f394d565ca4e62d978ccb5ddc2a1823893c8
photo-live/docs/plans/progress/UI06-验收记录.md
T
浅念 f2cd26e523 docs: register embed-slot soft-delete acceptance 
Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-09-23 13:41:27 +08:00

18 KiB
Raw Blame History

UI-06 全端视觉统一 验收记录

方案：docs/plans/2026-09-22-UI06-全端视觉统一实施方案.md（commit 37d88da） 日期：2026-09-22 起 · 执行环境：Windows 11 + 测试服务器 219.157.255.213（入口 32005） 视觉基准：docs/designs/admin-preview-2026-09-22/（后台 20 页）+ docs/designs/app-preview-2026-09-22/（App 20 页），冲突一律以示例为准。

1. 任务完成表

阶段 内容 Commit 状态
B0 基线提交 + before 截图 + 契约核对 e27a602 ✅ 完成
B1 主题 token + 布局壳 + 登录页 fb3743d ✅ 完成（已部署 ui06-fb3743d-20260922 验收）
B2 共享业务组件 4f6790d+1531d3d ✅ 完成（与 B3a 合并交付，见 §4）
B3a 核心批 02 相册列表 + 03 照片网格/大图 + 详情页壳 4f6790d+1531d3d ✅ 用户验收通过（「继续」）
B3b 管理批 04 成员 + 05 分类 + 06 水印 + 07 分享 d6d012b ✅ 完成
B3c 表单批 08/09 整页表单 + 15 资产页签 352d740 ✅ 完成
B3d 治理批 10 账号 + 11 同步 + 12 用量 9471562 ✅ 完成
B3e 收尾批 13/14 展示位 + 17–19 异常页 9471562 ✅ 完成
B4 后台全量回归验收 9471562 ✅ 已部署 ui06-9471562-20260923 待用户终验
A0–A7 App 线（对照 app-preview） 6074fc8 ✅ 完成（analyze 0 / test 397 全绿 / 真机 4 页证据）

2. B0 记录（2026-09-22）

2.1 基线提交

37d88da：admin-preview 20 页原型+截图+validation、app-preview 截图/脚本、UI05/UI06 方案文档、概念图、g4-sync-once 脚本（85 文件）。工作树干净后开工。

2.2 Before 截图

  • 工具：docs/designs/ui06-implementation/capture-before.cjs（Playwright，凭据经 env 注入不入库）
  • 对象：测试服务器已部署后台（= HEAD admin 产物），1440×1000 全页，20 张 → docs/designs/ui06-implementation/before/
  • 页面错误：0。注记 2 条（结构性，符合预期）：
    • 15-branding：现状 banner 位于详情卡内未独立页签（B3c 改）
    • 16-photo-viewer：现状无大图预览，以照片表格代替（B2 新增 PhotoPreview）
  • 关键现状确认：02 相册为文字表格（无封面卡）；侧栏为深色窄栏（非示例 216px 白底）；10 用户页分页器 15/页共 230 条 + 同步档案列在位（G4 成果，保留）。

2.3 契约核对结论（方案 §2.2 四项）

# 项 测试服务器实测结论 处理
1 Album cover ✅ 服务端已实现：GET /v1/albums 每项含 cover: { url(签名OSS), expiresAt }，900s 过期 分支 (a)——前端仅补 Summary.cover 类型 + 卡片使用；过期经受控重取
2 AdminPhoto.preview ✅ 服务端已实现：GET /v1/albums/:id/photos 每项含 preview.thumb/browse（签名 URL） 前端补类型；为空呈现真实空态
3 CreatePayload 载荷 ✅ 代码确认：仅 translations/defaultLocale/startAt/endAt/timezone/下载开关；公开/上传开关在 UpdatePayload 整页表单按此禁用或解释，不塞进创建请求
4 展示位 v2 字段 ✅ 类型已有且 SlotFormDialog 已呈现 displayMode/scrollSpeed/reactionsEnabled（E06/E07 已落地；UI05 §4.4 的担心已过时） B3e 仅视觉对齐，无需补字段

无服务端缺口：全部四项均为纯前端工作，无需用户确认分支 (b)。

2.4 主题入口核对（B1 准备）

  • 主色链路：config/index.ts systemMainColor[0]（现 #5D87FF）→ config/setting.ts:45 systemThemeColor → utils/ui/colors.ts 运行时生成 --el-color-primary 系。B1 改预设首位为 #1A73E8 并同步派生。
  • SCSS 静态层：assets/styles/core/el-light.scss（@forward var.scss，success/warning/danger 已定制，messagebox 12px 圆角已接近示例）；el-ui.scss 定义 --main-color 映射。
  • 布局壳：components/core/layouts/（art-header-bar、art-menus/art-sidebar-menu）。
  • 菜单：router/modules/albums.ts|system.ts，meta 驱动；分组重组 = 调 meta（B1）。

3. B1 记录（2026-09-22）

3.1 改动（commit fb3743d）

  • 主色 #1A73E8（systemMainColor 首位；DESIGN 菜单激活 light-9 自动派生 ≈ 示例 #eaf2ff，实测确认）
  • 状态色：success #15966d / warning #c78a27 / danger·error #df5366（el-light.scss）
  • 布局：侧栏 216px、顶栏 64px（h-16）、内容 max-width 1660px（新增 WIDE 枚举并设默认）、隐藏工作区标签页条（showWorkTab=false，设置面板可再开）
  • 菜单分组：meta.menuGroup + 侧栏展平渲染（art-sidebar-menu/index.vue），实测结构：工作空间（相册管理、展示位管理）/ 组织与治理（账号管理、用户同步、用量统计）；路由路径与权限零改动
  • custom/ui06.scss：字体栈 13px/1.55（Microsoft YaHei 优先）、卡片 12px+1px #e5eaf1 边框无阴影、按钮/输入 38px、表格浅底表头、对话框 16px、分段 #edf1f7、焦点可见 3px
  • 登录页：左侧摄影底（占位素材=概念图裁片 880×842）+ #12233e 叠层渐变 + 品牌白标 + 46px 大标题；右栏 350px 表单 29px 标题；语言/主题切换保留
  • 验证：typecheck ✅ · eslint ✅ · vitest 87/87 ✅

3.2 部署与截图验收

  • 部署偏差说明：方案原定 B1 本地验收，但本地无 API 栈无法登录——按「测试服务器优先」工作流直接部署（服务器端构建：git archive HEAD + UI04 先例双补丁——去 # syntax= 首行、nginx entrypoint 防卡死 rm；VITE_VIEWER_BASE/EMBED_ORIGIN=32006）。
  • cn 栈：web → photo-live-web:ui06-fb3743d-20260922（healthy），server/worker/sync 保持 1cf12be-20260922；web 容器已 restart。
  • after-b1 截图 20 张（ui06-implementation/after-b1/，页面错误 0）：登录页左右分栏/摄影底/品牌大标题确认；侧栏白底 216px + 分组标签 + 扁平菜单（DOM 实测结构正确）；顶栏 64px、浅灰蓝背景、蓝主按钮、无标签页条、表头浅底。
  • 剩余（进 B2/B3）：业务页内部（相册卡片、照片网格、表单等）仍为原布局——B1 只改壳。深色模式仅保持可用未重设计（登记偏差）。

3.x B2 + B3a 记录（2026-09-22）

改动（commits 4f6790d + 1531d3d）

  • 类型：Summary.cover / AdminPhoto.preview（SignedUrl；服务端已返回，B0 核对）
  • 组件：AlbumCoverCard（封面卡：公开/状态/上传 pill、中性占位、不显示 owner 名）、AlbumSummaryHeader（300×144 封面 + 两列资料 + 高级折叠收敛 ownerId/统计时间）、PhotoGrid（四列 1.65 比例、thumb 签名缩略图、仅 published 可勾选、photoId 短码回退名）、PhotoPreviewDialog（深色舞台 browse URL + 信息栏 + 隐藏/恢复/软删除复用表格状态机）
  • 02 列表：默认卡片网格（3 列 / ≥1700px 4 列）+ 表格切换 + 已加载内搜索 + 公开状态筛选 + 摘要行；游标数据源不变
  • 03 详情壳：页头（编辑/分享固定主操作）替换 ElDescriptions 大区；banner 区 B3c 收纳
  • 03 照片：网格默认 + 表格保留；网格勾选与表格 selection 合并批量目标（部分成功语义不变）
  • e2e 适配默认网格（albums/governance 断言前点 album-view-table / photo-view-table）；batchHide fixture 补 preview
  • 验证：typecheck ✅ · eslint ✅ · vitest 87/87 ✅ · 本地 pnpm build ✅
  • 教训：模板属性多语句 @click="a;b()" 过得了 vue-tsc/vitest 但 vite build parse 失败——此后每批提交前本地 build 必须通过（已在流程中执行）

部署与截图（ui06-1531d3d-20260922，cn web healthy）

  • after-b3a 截图 20 张（页面错误 0）。抽查结论：
    • 02：封面卡片网格结构完整（pill/标题/日期地点/底部状态行）；部分相册无封面显示中性占位——cover 为 null 的真实数据差异（契约允许；有 cover 的相册正常显示照片），登记为数据状态非布局偏差
    • 03：摘要头（封面+两列信息+token 复制）+ 照片网格（真实签名缩略图生效、勾选框、状态 pill、上传者·日期说明行）+ 可见性分段 + 视图切换
  • 待用户 32005 验收项：相册卡片/表格切换、照片网格→大图（隐藏/恢复入口）、批量勾选隐藏、详情摘要头

4. B3 批次记录

B3a（见 §3.x）

B3b 管理批（d6d012b，部署 ui06-d6d012b-20260923）

  • 成员：卡片头 + 首字头像 + 角色 pill + 权限范围 + owner 行交接入口（emit 父组件）；邀请/移除语义不变
  • 分类：卡片头（双语提示）+ 图标分类列 + 中英同屏 + 删除约束提示
  • 水印：双栏卡片化；预览改摄影底（相册 cover）+ 白字叠加；任务独立卡片；轮询语义不变
  • 分享：居中分享卡（封面/QR 160px/Copy link 全宽）；QR 真实编码 viewer 链接

B3c 表单批（352d740，部署 ui06-352d740-20260923）

  • 新路由 /albums/form/create|:albumId（隐藏路由，父菜单高亮）；编辑=资料/访问页签（开关行卡+说明）
  • 创建模式契约约束：仅下载开关 + 解释提示；校验/translations 合并逻辑原样迁移；保存后跳详情
  • banner 收进「品牌资产」页签（15）；删除 AlbumFormDialog
  • e2e 适配：整页流程（form-page/goBack/访问页签）、详情锚点 summary、banner 页签

B3d 治理批 + B3e 收尾批（9471562，部署 ui06-9471562-20260923，当前线上）

  • 通用层：.ui06-page / .ui06-page-heading（27px 页头）/ .ui06-stats 三列统计卡 / .ui06-info-strip / .ui06-card-title
  • 10 账号：页头+查看同步入口+来源提示条；G4 分页（15/页共230）+ 同步档案列（工号/邮箱/公司）截图确认在位
  • 11 同步：页头（手动补拉上移）；12 用量：页头（阈值上移）+统计卡 27px 数字+注脚
  • 13 展示位：页头+卡片标题（配置沿用 UI-04 真实组件）
  • 17–19：沿用 ArtException（大数字+回退，语义等同示例；登记偏差：非示例同款版式）

5. B4 全量验收（2026-09-23）

  • 最终部署：photo-live-web:ui06-9471562-20260923（cn web healthy；server 栈未动）
  • after-final 截图 20 张（ui06-implementation/after-final/，页面错误 0）；before 截图保留于 before/
  • 抽查确认：登录页分栏/侧栏分组扁平/相册卡片网格/照片网格真实签名缩略图/成员卡/分享卡/账号治理页头+分页+档案列
  • 中间批次截图（after-b1/b3a/b3b/b3c，80 张）已按用户指令清理
  • 验证链：每批 typecheck ✅ + eslint ✅ + vitest 87/87 ✅ + 本地 pnpm build ✅（vite build 模板 parse 教训后为固定步骤）
  • 保留项：游标分页（useCursorList）✅ / 批量部分成功 ✅ / 账号自保护 ✅ / settings 语义 ✅ / translations 合并 ✅ / e2e 选择器全部适配（albums/governance/embed/users/login/locale）
  • 登记偏差：①登录摄影素材为概念图裁片占位（待正式品牌素材）；②深色模式保持可用未重设计；③17–19 沿用 ArtException 版式；④无封面相册显示中性占位（cover=null 真实数据状态）

6. App 线记录（2026-09-23，用户指令「先都改完再统一测试」——各批中途关口合并为终验）

5.x 用户测试回归修复（2026-09-23）

  • 侧栏菜单点击无反应（用户报告）：B1 分组展平渲染的 ElMenuItem 只渲染标题插槽、未绑定跳转。 修复 1a52d0a：补 onGroupedItemClick（handleMenuJump 统一外链/iframe/路由语义 + 移动端关抽屉）， 部署 ui06-1a52d0a-20260923 后 Playwright 真实点击 5 个菜单项全部 PASS（manage/embed-slots/users/user-sync/usage）。 教训：交互行为改动必须真实点击验证，截图只覆盖静态视觉——已补进后续流程。
  • 展示位菜单无图标（用户报告）：ri:picture-carousel-line 非 Remix 有效名（Iconify 404 空白）。 修复 d08d8f5：ri:slideshow-line；部署后 5 个菜单 SVG 渲染全部确认。
  • 页面铺满（用户调整）：全局 .ui06-page 边距/限宽注释，边距交还 ElMain；452cdf4 同步 manage scoped 类。

5.y 相册软删除（2026-09-23 新功能，用户需求「可以做一个软删除」；commit 8e674a9）

决策（用户拍板）：admin+owner 可删；删除后隐藏不可恢复（数据保留，仅运维可 SQL 恢复）；管理后台与 App 两端都加入口。

  • 契约 deleteAlbum（DELETE /albums/{albumId} → 204 幂等；status enum + deleted）
  • 服务端 softDelete：canView 404→canManage 403（防枚举）；乐观锁 claim + outbox album.updated priority=high（公开可见性类变更）+ audit album.delete
  • 过滤面：列表/详情/更新/成员/资产/分类/水印/照片/展示位绑定全部 deleted→404；cn 公开端（status!=='active'）与 ov（isAlbumVisibleOv）天然屏蔽；ov 副本经事件载荷 status 直投自动下线（无需 ov 侧改动）
  • Admin：列表表格「删除」+ 详情页头「删除相册」（确认框含不可恢复说明）
  • App：操作面板红字「删除相册」→ AlertDialog 二次确认 → SnackBar → 退回列表刷新（albumListProvider.refresh）
  • 验证：API 56/56、App 397/397 analyze 0、admin 全绿；测试服务器真实 API 全链路：创建→DELETE 204→幂等 204→详情 404→列表不含→成员/照片/水印 404→未认证 401→ov 正常
  • 部署：cn+ov 双栈 ui06-8e674a9-20260923（server+web 均滚动；迁移无待办）；模拟器 App 已装新包
  • 登记偏差：已删除相册的展示位绑定不自动解绑（拉取端容错已有；再次绑定校验拒绝 deleted）

5.w 展示位软删除（2026-09-23，用户需求「展示位列表怎么没有删除」；commit 903962a）

  • 契约 deleteEmbedSlot（DELETE /admin/embed-slots/{id} → 204 幂等，admin 专属）
  • cn schema embed_slots.deletedAt（迁移 20260923120000）；softDelete = 乐观锁 + outbox slot.updated（payload enabled 强制 false——ov 副本无墓碑，enabled=false 快照即公开端 404 下线；priority=high）+ audit
  • 列表/loadSlot/update 过滤 deletedAt；Admin 列表操作「删除」（确认含下线说明）
  • 测试服务器全链路实测：创建→DELETE 204→幂等 204→列表不含；部署 cn+ov ui06-903962a-20260923（server+web+迁移）

5.z 品牌资产现状展示（2026-09-23，用户报告「宣传图/封面看不到设置了什么」；commit 2618ad3）

  • 根因：AlbumBannerUpload 只在上传后显示预览，从不加载已有资产；契约亦无资产查询端点（P1b 删列表）。
  • 新增契约 listAlbumAssetStatus（GET /albums/{albumId}/assets）：每 (kind, locale) 最新 effective 行 + 现签 URL；权限同详情（可见即读）；deleted → 404。
  • Admin 品牌资产页签改造：进入即加载——三种 kind 槽位卡（banner 分全局/zh/en、cover、logo）， 有图显示预览+设置时间，未设置显示空态；上传成功自动刷新（替换语义）。
  • 验证：API 56/56、admin 87/87+build；测试服务器真实渲染确认（banner·全局有图 09:40 设置、 cover 有图 09-22 设置、zh/en/Logo 空态、未认证 401）。部署 cn+ov ui06-2618ad3-20260923。

6.1 A0 偏差复核（代码级，以 app-preview styles.css 实测为准）

UI-03 完成态与 app-preview 的核心差异（修前）：

  1. 根导航 NavigationBar 保留 indicatorColor: secondaryContainer 胶囊 ❌
  2. 上传主筛选用 M3 SegmentedButton（黑边胶囊形态）❌
  3. 上传摘要被白色大卡包裹、主数字 24px ❌（示例：直排背景 + 32px）
  4. token 差异：次文字 #5E6878（示例 --muted #69778E）、输入圆角 12（示例 10）、卡片阴影形态（示例 1px #EDF0F5 边框无阴影）、相册卡 scrim 0.42 起（示例 30% 起 #0C1728E8）❌
  5. 登录主标题 24px（示例 27px）❌
  6. 导航角标无白边（示例 #F15B64 + 2px 白边）❌

已达标项（无需改）：AlbumCard 16:9/白字/状态行、详情 hero/工具区、登录拼贴、字阶体系、间距体系。

6.2 A2 公共组件与 token（与 A3 样板页合并实施）

  • ui/tokens.dart：kColorTextSecondary→#69778E；新增 kColorSoft(#EDF4FF)/kColorCardBorder(#EDF0F5)/kColorSegTrack(#EDF1F6)/kColorSegLightActive(#DBEAFF+#145BB9)/kColorFieldBorder(#DBE3EF)；kRadiusField=10
  • app/theme.dart：导航 indicatorColor 透明 + iconTheme/label 显式选中蓝未选次色 + 高度 68；卡片 去阴影改 1px 边框；输入圆角 10；_textSecondary 同步 #69778E
  • 新组件 ui/components/segment_tabs.dart：轻量分段（#EDF1F6 轨道/半径 9/选中实蓝白字 36 高；light 变体浅蓝选中供内容页签；支持 null 无高亮次级筛选态）
  • queue_tab：SegmentedButton→SegmentTabs（completed 次级筛选时三段不亮语义保留）；摘要去卡直排 + 主数字 32/40；导航角标红底白边；相册卡 scrim 30% 起 #0C1728E8；登录主标题 27/700
  • 语义色（成功/错误/等待）保持 UI-03R 深色版：HTML 装饰值（#279966/#E74E58/#D89020）在浅色文字位对比度不达标（<4.5:1），登记偏差供用户定夺

6.3 A7 验证与真机证据

  • flutter analyze 0 issues ✅；flutter test 397/397 全绿 ✅（theme_test 三处旧规格断言随 UI06 值更新：次色/输入圆角 10/无胶囊）
  • 真机：MuMu 模拟器（Android 15, 540×960）安装 debug APK（--dart-define API_BASE=测试服务器 32005 / VIEWER_BASE=32006），真实账号登录成功
  • 截图 4 张（ui06-implementation/app-after/）：01 登录（拼贴+品牌+表单）、05 相册列表（真实封面卡+无胶囊导航）、06 详情（164 hero+工具区）、14 上传（无卡摘要+32px 数字+轻分段+无胶囊）——均确认达标
  • 未做（登记）：320/430/横屏/大字体/zh 深色抽查矩阵（UI-03R §10.1）——397 项 widget 测试覆盖主要布局断言，视口矩阵随 G2 真机关口补

6.4 App 线登记偏差汇总

# 偏差 原因
1 语义色未采用 HTML 装饰值（#279966 等） 浅色文字对比度 <4.5:1；保持 UI-03R 深色版（视觉差 <10%）
2 视口矩阵抽查未跑 随 G2 真机关口；widget 测试已覆盖主布局
3 生产登录拼贴素材 沿用 UI-03 已有合规素材（非本次替换范围）

4. B2 记录

（待执行）

5. B3 批次记录

（待执行；每批：对照截图 → 部署 tag → 用户验收结论）

6. B4 / App 线记录

（待执行）

Reference in New Issue View Git Blame Copy Permalink