# Visual Parity QA

这个目录用于逐页校对 `电商AI平台` 设计稿代码和 `core/frontend` 实现页的像素差。

## 原则

1. 每开发完一个页面,先截设计稿,再截实现页。
2. 两张图使用同一浏览器、同一视口、同一 deviceScaleFactor。
3. 输出 `design.png`、`implementation.png`、`diff.png` 和 `report.json`。
4. `diffPixels` 必须逐轮下降; 页面验收目标是 0,如字体渲染造成非业务差异,必须在报告里单独记录。
5. 视频生成真实测试不进入这个阶段,只校对页面和普通交互。

## 实现层

`core/frontend/public/exact/` 是从 `电商AI平台/` 同步到 `core` 内的精确镜像实现层,用于保证每个设计稿页面都能在当前前端服务中以真实 URL 打开并进行像素验收。

已 React 化并直接接入主 SPA 的页面:

- 登录: `/`
- 注册: `/#register`
- 工作台: `?visual=dashboard` / `/#dashboard`

其余页面先通过 `/exact/*.html` 达成 1:1 视觉还原,后续再按功能模块逐步替换为真实接口驱动的 React/Django 页面。替换时必须继续跑同名 visual parity 项,直到 `diffPixels=0`。

## 页面比对命令

先启动前端:

```bash
cd /Users/maidong/Desktop/zyc/qiyuan_gitea/AirShelf/core/frontend
npm run dev
```

再执行像素比对:

```bash
cd /Users/maidong/Desktop/zyc/qiyuan_gitea/AirShelf/core/qa/visual-parity
npm install
npm run compare:login
npm run compare:register
npm run compare:dashboard
npm run compare:all
```

输出目录:

```text
core/qa/visual-parity/output/
```

## 页面复刻队列

| 优先级 | 页面 | 设计稿 | 关键子页面/交互 | 实现入口 | 状态 |
| --- | --- | --- | --- | --- | --- |
| P0 | 登录 | `电商AI平台/login.html` | 密码可见、忘记密码 toast、SSO toast、注册入口 | `/` 未登录态 | `1440x900 diffPixels=0` |
| P0 | 注册 | `电商AI平台/register.html` | 团队注册、返回登录 | `/#register` 未登录态 | `1440x900 diffPixels=0` |
| P0 | 工作台 | `电商AI平台/index.html` | 侧栏、顶部余额/消息、快捷入口、最近项目 | `?visual=dashboard` / `/#dashboard` | `1440x900 diffPixels=0` |
| P0 | 商品库 | `电商AI平台/products.html` | 列表/卡片、新建商品 drawer、删除/筛选 | `/exact/products.html` | `1440x900 diffPixels=0` |
| P0 | 商品详情 | `电商AI平台/product-detail.html` | 编辑、素材区、创建视频项目入口 | `/exact/product-detail.html` | `1440x900 diffPixels=0` |
| P0 | 上传创建商品 | `电商AI平台/product-create-upload.html` | 跳转商品库并自动打开新建商品 drawer | `/exact/product-create-upload.html` | `1440x900 diffPixels=0` |
| P0 | 视频项目 | `电商AI平台/projects.html` | 表格/卡片视图、删除确认 modal、进入 pipeline | `/exact/projects.html` | `1440x900 diffPixels=0` |
| P0 | 新建视频项目 | `电商AI平台/projects-new.html` | 商品选择、模板选择、素材库 modal、创建确认 | `/exact/projects-new.html` | `1440x900 diffPixels=0` |
| P0 | 生产管线 | `电商AI平台/pipeline.html` | Stage 1-5、资产详情、演员/场景库、额度预检、视频详情、导出 | `/exact/pipeline.html#stage-1..5` | `5/5 stages diffPixels=0`,不测真实生视频 |
| P1 | 资产库 | `电商AI平台/library.html` | 上传、筛选、预览/删除 | `/exact/library.html` | `1440x900 diffPixels=0` |
| P1 | 账户/额度 | `电商AI平台/account.html` | 充值、交易流水、充值 modal | `/exact/account.html` | `1440x900 diffPixels=0` |
| P1 | 团队 | `电商AI平台/team.html` | 成员、角色、月限额 modal | `/exact/team.html` | `1440x900 diffPixels=0` |
| P1 | 消息中心 | `电商AI平台/messages.html` | 消息详情、日志展开、通知设置跳转 | `/exact/messages.html` | `1440x900 diffPixels=0` |
| P1 | 图片工具入口 | `电商AI平台/asset-factory.html` | 三类工具入口、任务列表 | `/exact/asset-factory.html` | `1440x900 diffPixels=0` |
| P1 | 图片创作 | `电商AI平台/image-optimize.html` | 参数面板、重复任务 modal、返回 | `/exact/image-optimize.html` | `1440x900 diffPixels=0` |
| P1 | 模特上身图 | `电商AI平台/model-photo.html` | 模特选择、方案入口、生成参数 | `/exact/model-photo.html` | `1440x900 diffPixels=0` |
| P1 | 模特方案 A | `电商AI平台/model-photo-demo-a.html` | 方案预览/采用 | `/exact/model-photo-demo-a.html` | `1440x900 diffPixels=0` |
| P1 | 模特方案 B | `电商AI平台/model-photo-demo-b.html` | 方案预览/采用 | `/exact/model-photo-demo-b.html` | `1440x900 diffPixels=0` |
| P1 | 平台套图 | `电商AI平台/platform-cover.html` | 平台规格、批量生成 | `/exact/platform-cover.html` | `1440x900 diffPixels=0` |
| P1 | 设置 | `电商AI平台/settings.html` | 资料、安全、通知策略 `#sec-notify` | `/exact/settings.html#sec-profile/security/notify/pref/display` | `5/5 sections diffPixels=0` |

`电商AI平台/design-system.html` 作为 token/component 参考,不作为业务页面验收目标。`电商AI平台/_archive` 下旧稿默认不纳入复刻,除非后续明确要求恢复旧版本。