浅念
107 lines
8.2 KiB
Markdown
107 lines
8.2 KiB
Markdown
# 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 线记录
|
||
|
||
（待执行）
|