Build and Deploy / build-and-deploy (push) Successful in 2m2s

Details

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>

2026-06-10 09:41:30 +08:00

7.8 KiB

Raw Blame History

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):

消息中心 messages.tsx → 对齐 messages.html(收件箱/详情双栏)。
设置 settings.tsx → 对齐 settings.html(左导航 + 各 section 表单)。
图片生成入口 assetFactory → 对齐 asset-factory.html(hero 卡 + 任务中心)。
图片创作/模特图/平台套图 ImageWorkbenchPage → 对齐 image-optimize.html / model-photo.html / platform-cover.html(三者布局相近,工作室壳)。
模特图方案 A/B → 对齐 model-photo-demo-a.html / -b.html。
上传创建商品 productCreateUpload → 对齐 product-create-upload.html(或 product-create.html)。
新建视频项目 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. 建议优先级

P0 接口接入(后端已就绪,纯前端工作):team 成员管理全套 + 充值 + messages 通知 + 铃铛计数。投入小、价值高、消除「假按钮」。
P1 像素还原剩余页:messages → settings → assetFactory → 图片三页 → create/wizard 两页 → demoA/B。
P2 真实数据替换 mock:pipeline stage2-5、product-detail 网格(依赖 TOS / 真实资产)。
P3 缺失后端:独立生图接口、设置保存、头像上传、TOS 配置。
P4:死代码清理、shell 尾差打磨。

7.8 KiB Raw Blame History