099bf0e6aa
App.tsx: thread saveProfile/changePassword/uploadAvatar/generateImages handlers + assets prop to pages. - settings.tsx: profile save / password modal / avatar upload wired; notification/theme prefs -> localStorage - library.tsx + product-detail: asset thumbnails + grids render real TOS preview_url - ai-tools ImageWorkbenchPage: 生成图片 wired to /api/ai/generate-image, renders returned assets - pipeline.tsx stage2-5: base_assets/storyboard/video_segments(adopted_asset)/timeline(clips/subtitles/bgm) rendered from real project data; graceful empty states - types.ts: +VideoSegment.adopted_asset, +Timeline.subtitle_tracks/bgm_tracks verified: tsc --noEmit clean; screenshots confirm pipeline stages 2-5 + product-detail render real data+images (demo asset object_keys re-pointed to image objects so thumbnails resolve) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Visual Parity QA
这个目录用于逐页校对 电商AI平台 设计稿代码和 core/frontend 实现页的像素差。
原则
- 每开发完一个页面,先截设计稿,再截实现页。
- 两张图使用同一浏览器、同一视口、同一 deviceScaleFactor。
- 输出
design.png、implementation.png、diff.png和report.json。 diffPixels必须逐轮下降; 页面验收目标是 0,如字体渲染造成非业务差异,必须在报告里单独记录。- 视频生成真实测试不进入这个阶段,只校对页面和普通交互。
实现层
core/frontend/public/exact/ 是从 电商AI平台/ 同步到 core 内的精确镜像实现层,用于保证每个设计稿页面都能在当前前端服务中以真实 URL 打开并进行像素验收。
已 React 化并直接接入主 SPA 的页面:
- 登录:
/ - 注册:
/#register - 工作台:
?visual=dashboard//#dashboard
其余页面先通过 /exact/*.html 达成 1:1 视觉还原,后续再按功能模块逐步替换为真实接口驱动的 React/Django 页面。替换时必须继续跑同名 visual parity 项,直到 diffPixels=0。
页面比对命令
先启动前端:
cd /Users/maidong/Desktop/zyc/qiyuan_gitea/AirShelf/core/frontend
npm run dev
再执行像素比对:
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
输出目录:
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 下旧稿默认不纳入复刻,除非后续明确要求恢复旧版本。