# 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、平台套图、设置。

## 验收结果

验证命令：

```bash
npm run build
```

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

```text
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. 生视频真实测试仍放最后，不在页面还原阶段触发。