photo-live/docs/plans/progress/UI06-验收记录.md

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	✅ 已部署 ui06-1531d3d-20260922 待用户验收
B3b–B3e	其余页面批次		待执行
B4	后台全量回归验收		待执行
A0–A7	App 线（B4 后启动）		待执行

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–B3e（待执行）

4. B2 记录

（待执行）

5. B3 批次记录

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

6. B4 / App 线记录

（待执行）