chore(core/qa): function-audit toolchain + parity/audit reports + pixel-perfect skill

- qa/function-audit: playwright 行为审计工具(audit.mjs/verify-modals.mjs/pages.json)
  + 18 页审计产出(*.audit.md/json、summary、运行日志)
- qa/visual-parity: 调试/测量辅助脚本(_dbg*.mjs/_measure.mjs/_off.mjs)
- core/还原度核对报告.md: 18 页 pixelmatch 核对结果(含 vite 代理陈旧坑记录)
- core/还原与接口待办.md: 逐页还原度/真实数据/交互接入待办总表
- .claude/skills/pixel-perfect-react: 像素级还原 React 的 SKILL 文档
- frontend/public/_devlogin.html: 临时本地登录辅助页(可删)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
zyc
2026-06-10 09:41:30 +08:00
co-authored by Claude Fable 5
parent 3fac38c5ef
commit 890cb9ab67
66 changed files with 11610 additions and 0 deletions
+110
View File
@@ -0,0 +1,110 @@
# AirShelf / core 前端 · 还原度 & 接口接入待办
> 生成时间:2026-06-05 · 逐页扫描 `frontend/src/routes/*` + `frontend/src/api.ts` + `backend/apps/*/urls.py` 后汇总。
> 「还原度」指像素对齐设计稿(`public/exact/*.html`)的程度;「真实数据」指是否接后端;「功能」指交互按钮是否真的调接口。
---
## 0. 总览状态表
| 页面 | 路由 | 像素还原 | 真实数据 | 交互功能 | 主要缺口 |
|---|---|---|---|---|---|
| 登录/注册 | login/register | ✅ 100% | ✅ | ✅ | — |
| 工作台 | dashboard | 🟡 98.8% | ✅ | ✅(只读) | KPI 副标签/最近项目 pill 文案微差 |
| 商品库 | products | ✅ 99.97% | ✅ | 🟡 | 「管理商品」编辑模式未实现;素材/视频数恒为 0 |
| 商品详情 | productDetail | ✅ 99.9% | 🟡 | 🟡 | 图片网格/AI素材/视频项目 全是静态 mock;三视图弹窗未接生成;编辑保存已接 |
| 上传创建商品 | productCreateUpload | ❌ 未还原 | 🟡 | 🟡 | 无 -page.css;图片上传未接 TOS;仅 createProduct 已接 |
| 视频项目 | projects | ✅ 99.99% | ✅ | 🟡 | 筛选 chip 下拉(品类/来源/时间)未实现;管理项目编辑模式未实现 |
| 新建视频项目 | projectWizard | ❌ 未还原 | ✅ | ✅ | 无 -page.css,需对齐 projects-new.html |
| 生产管线 | pipeline | 🟡 99.8%(5阶段) | 🟡 | ✅(脚本/资产/视频/导出已接) | stage2-5 大量 mock(人物/场景/故事板/片段/字幕/BGM 全假);仅 stage1 + 阶段动作接真 |
| 资产库 | library | ✅ 99.98% | ✅ | 🟡 | 筛选 chip 下拉未实现;管理资产编辑模式未实现 |
| 消费 | account | 🟡 95.8% | ✅ | ❌ 充值未接 | 趋势图空;充值/设置月限额按钮无接口 |
| 团队 | team | ✅ 99.98% | 🟡 | ❌ | 团队动态是占位;创建账户/编辑成员/重置密码/移除成员/设月限额 全未接(后端已有接口) |
| 消息中心 | messages | ❌ 未还原 | ❌ 全 mock | ❌ | 2 条硬编码消息;未接 ops/notifications |
| 图片生成(入口) | assetFactory | ❌ 未还原 | 🟡 | 🟡 | 任务中心读真 aiTasks;hero 卡可跳转;无 -page.css |
| 图片创作 | imageOptimize | ❌ 未还原 | 🟡 | ❌ 生成假 | 结果区 4 张静态占位;「生成图片/重跑/采用」全 no-op;后端无独立生图接口 |
| 模特上身图 | modelPhoto | ❌ 未还原 | 🟡 | ❌ 生成假 | 同上(复用 ImageWorkbench) |
| 平台套图 | platformCover | ❌ 未还原 | 🟡 | ❌ 生成假 | 同上 |
| 模特图方案 A/B | modelPhotoDemoA/B | ❌ 未还原 | ❌ | ❌ | 纯静态占位 demo |
| 设置 | settings | ❌ 未还原 | 🟡 只读 | ❌ | 保存/改密/双因素/通知开关/头像上传 全 no-op |
图例:✅ 完成 · 🟡 部分 · ❌ 未做
---
## 1. 像素还原待办(无 -page.css / 仍是粗还原的页面)
按设计稿逐字转写 + scoped CSS,沿用已验证打法(见 `.claude/skills/pixel-perfect-react`):
1. **消息中心** `messages.tsx` → 对齐 `messages.html`(收件箱/详情双栏)。
2. **设置** `settings.tsx` → 对齐 `settings.html`(左导航 + 各 section 表单)。
3. **图片生成入口** `assetFactory` → 对齐 `asset-factory.html`(hero 卡 + 任务中心)。
4. **图片创作/模特图/平台套图** `ImageWorkbenchPage` → 对齐 `image-optimize.html` / `model-photo.html` / `platform-cover.html`(三者布局相近,工作室壳)。
5. **模特图方案 A/B** → 对齐 `model-photo-demo-a.html` / `-b.html`
6. **上传创建商品** `productCreateUpload` → 对齐 `product-create-upload.html`(或 `product-create.html`)。
7. **新建视频项目** `projectWizard` → 对齐 `projects-new.html`
> 已还原页的尾差(可选打磨):account 趋势图空 + 95.8%;dashboard 98.8% KPI 副标签;product-detail 的素材/项目网格目前是 mock(见 §2)。
---
## 2. 真实数据接入待办(页面用 mock / 静态,需接后端)
- **消息中心**:整页 2 条硬编码消息 → 接 `GET /api/ops/notifications/`
- **生产管线 stage 2-5**:人物/场景卡、故事板 3 场、视频 3 片段、拼接时间轴(片段/字幕/BGM)全是设计稿 mock。stage 1(脚本)+ 各阶段「生成」动作已接真接口,但展示数据未接。需把 `project``base_assets / storyboard / video_segments / 字幕` 真实结构渲染出来。
- **商品详情**:商品图 6 格、AI 素材卡(7/12)、视频项目卡 全是静态 mock(镜像 api-bridge 同样留 mock,故当前像素对齐)。若要真应用,需接 `GET /api/assets/?product=` + 该商品关联项目。
- **商品库卡片**:素材数 / 视频数恒显示 0(无 per-product 计数接口)。
- **图片生成/模特图/平台套图**:结果区静态占位,无真实生成(见 §4 缺失接口)。
- **dashboard**:已接真实数据,仅文案微差。
---
## 3. 后端已有、但前端未接的接口(优先级高,接了就能用)
`api.ts` 里**缺**以下方法,后端均已实现:
| 功能 | 后端接口 | 用在哪页 |
|---|---|---|
| 创建团队账户 | `POST /api/auth/team/members/` | team「创建账户」 |
| 编辑成员(角色/额度) | `PATCH /api/auth/team/members/<id>/` | team「编辑成员」 |
| 移除成员 | `DELETE /api/auth/team/members/<id>/` | team 成员行「移出」 |
| 重置成员密码 | `POST /api/auth/team/members/<id>/password/` | team「重置密码」 |
| 团队/账户充值 | `POST /api/billing/recharge/` | account「充值」、team「充值」 |
| 通知列表 | `GET /api/ops/notifications/` | messages 收件箱、topbar 铃铛计数 |
| 全部标记已读 | `POST /api/ops/notifications/mark-all-read/` | messages |
| 单条标记已读 | `PATCH /api/ops/notifications/<id>/` | messages |
| 采用基础资产 | `POST /api/projects/<id>/adopt-base-asset/`(api.ts 已声明 `adoptBaseAsset` 但 App 未调用) | pipeline stage 2 |
---
## 4. 缺失的后端接口(前端有 UI 但后端无对应端点)
- **独立图片生成**:`图片创作 / 模特上身图 / 平台套图` 三个工作室页的「生成图片」需要一个不绑定 project 的生图接口(当前后端只有 `projects/<id>/generate-base-asset` 这种项目内的)。需后端新增,或产品上把这三页改为「必须在项目内生成」。
- **头像上传**:settings 头像上传(代码注释已写「接口待后端补充」)。
- **设置保存**:个人资料/安全/通知/偏好/显示 的保存端点(改密、双因素、通知策略、主题等)。
- **资产文件预览 URL(TOS)**:本地未配 TOS,生成图 `preview_url` 为空 → 全站缩略图只能用 mock-media 占位图。配好 TOS 后商品图/资产/三视图才有真图。
---
## 5. 共享 shell(topbar / sidebar)待办
- **铃铛计数**硬编码 `12`(`App.tsx:447` + `pipeline.tsx:135`)→ 接 notifications 未读数。
- **面包屑**:productDetail 等详情页 crumb 显示「商品详情」,设计镜像显示具体实体名(且镜像是 mock 名)→ 可选:crumb 末级显真实名。
- **侧栏徽标**:商品库/视频项目 已接真实 `products.length / projects.length`(✅)。
---
## 6. 死代码可清理(不影响功能,体积/整洁)
- `routes/exact-document.tsx`(349 行)、`routes/exact-html.ts`(1.6MB)、`routes/exact-dashboard.tsx``routes/exact-pages/`:codex iframe 时代遗留,现已无人 import(`index.ts` 仍 export `ExactDashboardApp`,但 App.tsx 用的是真 `Dashboard`)。确认后可删。
- `public/exact/` 保留(作设计基线,勿删)。
---
## 7. 建议优先级
1. **P0 接口接入(后端已就绪,纯前端工作)**:team 成员管理全套 + 充值 + messages 通知 + 铃铛计数。投入小、价值高、消除「假按钮」。
2. **P1 像素还原剩余页**:messages → settings → assetFactory → 图片三页 → create/wizard 两页 → demoA/B。
3. **P2 真实数据替换 mock**:pipeline stage2-5、product-detail 网格(依赖 TOS / 真实资产)。
4. **P3 缺失后端**:独立生图接口、设置保存、头像上传、TOS 配置。
5. **P4**:死代码清理、shell 尾差打磨。