AirShelf/core/frontend/EXACT_REACT_CONVERSION.md

Exact Design To React Conversion

日期：2026-05-29
目标：先把 电商AI平台 / public/exact 设计稿完整纳入正式 React 路由，确保视觉还原优先于业务接口继续扩展。

当前实现

• public/exact/*.html：保留为设计对照基线和截图 diff 来源。
• src/routes/exact-html.ts：由脚本生成，内嵌 21 个 exact 页面文档。
• src/routes/exact-document.tsx：React 承载层，负责加载 exact 文档、隔离页面样式、接管页面间导航和登录注册提交。
• src/routes/exact-pages/*.tsx：每个页面对应一个正式 TSX 包装文件。
• scripts/generate-exact-html.mjs：从 public/exact 重新生成 React exact 文档与页面包装。

已覆盖页面

登录、注册、工作台、商品库、商品详情、商品创建入口、项目列表、新建项目、Pipeline、资产库、账户、团队、消息、图片工具、图片优化、模特图、模特图方案 A/B、平台套图、设置。

验收结果

验证命令：

npm run build

Playwright 真实浏览器截图对照输出：

output/playwright/exact-react-final-20260529103829/

关键结果：

• 登录 / 注册：0 像素差。
• Dashboard / 商品库 / 项目列表 / Pipeline / 资产库 / 账户 / 团队 / 消息 / AI 工具页：与 exact 基线基本一致，差异为 0 到极低比例。
• product-create-upload.html 是原型里的跳转 stub，实际落到商品库 drawer，因此差异高于其他页面，但属于原型跳转页本身的动态行为差异。

后续规则

1. 修改页面前先改 public/exact 或确认设计基线，再运行生成脚本。
2. 业务 API 接入时，不直接破坏 exact 视觉层；先在承载层或组件层做数据替换。
3. 生视频真实测试仍放最后，不在页面还原阶段触发。