seaislee1209andClaude Opus 4.8
856a93b8a9
- 新增 UI 还原对比报告 / 性能审计报告(2026-06-19,14 块页面 + 6 块性能,逐项 file:line) - auth-screen: 删除登录成功后 ~1.5s 人为进度动画延迟,凭证验过即进 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
314 lines
27 KiB
Markdown
314 lines
27 KiB
Markdown
# AirShelf · UI 还原度对比报告
|
||
|
||
> **对比对象:** V1 设计稿(`电商AI平台/` 纯 HTML+CSS,UI 完全调好的金标准) ↔ 张业昌 React 实现(`core/frontend/src/`)
|
||
> **目的:** 不同技术栈重写后,逐页找出 React 没有还原到位 / 做错 / 缺失的地方
|
||
> **日期:** 2026-06-19
|
||
> **方法:** 13 路并行审计,每页两边源码完整读一遍(含 inline `<style>`、inline 弹窗 markup),以 V1 HTML 为首要参照、`design.md` 为规范准则
|
||
> **严重度:** P0 = 整块功能/区块缺失或完全不还原 · P1 = 一眼可见的视觉/布局/字段偏差 · P2 = 细节(间距/字号/mono/准星/状态)
|
||
|
||
---
|
||
|
||
## 一、总览评分表
|
||
|
||
| 页面 | 还原度 | 一句话结论 |
|
||
| ---- | :----: | ---- |
|
||
| 生产管线 pipeline | **8.5** | 五阶段结构/编辑器忠实且功能更强,只差 3 处 mono 信息密度 + 额度预检弹窗评估 |
|
||
| 消息中心 messages | **8.5** | CSS 几乎逐行照搬,缺「查看日志」整链 + 详情多动作按钮收敛 |
|
||
| 设置 settings | **8.5** | 视觉高度还原,缺「保存所有变更」dirty-state 引擎(顶栏保存按钮形同虚设) |
|
||
| 全局外壳 shell | **8.5** | 侧栏/搜索/命令面板/顶栏照搬,缺**账户下拉菜单整块** + 命令面板底栏 |
|
||
| 项目+新建向导 projects | **7.0** | 列表骨架到位,网格卡缺进度条、失败 pill 失色、**批量管理栏整块缺** |
|
||
| 全局浮层 overlays | **6.5** | CSS 对,但**弹窗进场动画/ESC 集体失效** + **Toast 体系被换** |
|
||
| 工作台 dashboard | **6.5** | KPI 还原,但右栏三块吃了**废弃暖米主题**(错橙 #E55B26)+ KPI 假数据 |
|
||
| 商品库+详情 products | **6.5** | 卡片主体忠实,缺视图切换/多选分类/分页器,详情砍掉「任务记录」Tab |
|
||
| 商品创建 drawer | **6.5** | 字段/卖点对,但**多图上传砍成单图**、拖拽缺失、必填校验被吞 |
|
||
| 账户 account | **6.0** | banner/充值卡好,但**三大表格砍成裸表 + 充值扫码弹窗整个没做** |
|
||
| AI 图片工具 ai-tools | **5.5** | 图片创作骨架在,但**模特库/商品库选择弹窗、gen-card 三接口大面积砍掉** |
|
||
| 团队 team | **5.0** | 骨架在,**5 个定制弹窗全降级成通用裸输入框** + 凭据分享缺失 |
|
||
| 资产库 library | **4.5** | **批量栏 + 资产详情弹窗 + 上传动态字段三大件全换成简化件** |
|
||
| **登录/注册 auth** | **4.0** | **整张注册页 0 实现** + 第三方登录/切换链全删 + 邮箱字段错改用户名 |
|
||
|
||
---
|
||
|
||
## 二、系统性问题(跨页面 · 改一处惠及多页 · 最高优先级)
|
||
|
||
> 这些不是单页 bug,是贯穿全站的根因。优先修这几条,大半页面的「观感不对」会同时被拉回。
|
||
|
||
### S1 · 双 CSS 主题打架 — 旧暖米调色板污染(根因级)
|
||
`main.tsx` 先引 `styles.css`(旧「流·Studio」**暖米主题**:`--orange #E55B26`、`--bg-soft #F4F2EC`、`--ink-3 #9C988C`、`JetBrains Mono`),再引 `design-restraint.css`(**冷灰 restraint 主题**:`--heat #fa5d19`)。但 design-restraint.css **不重定义** `--orange / --bg-soft / --ink* / --card / --border` 等旧 token。
|
||
**后果:** 凡是只在 styles.css 里定义、没被 restraint.css 覆盖的类,全部吃到**错误的暖米色 + 错橙**。已确认受害:工作台 `.shortcut/.recent-row/.tip`、登录页品牌区、`.queue-chip`、Toast。
|
||
**修复:** 把这些残留类迁入 design-restraint.css 并改用 `--heat / --black-alpha-* / --font-mono`;或在 restraint 主题里把旧 token 重映射到新值。
|
||
|
||
### S2 · Mono 装饰字号被全局抬到 12px(几乎每一页)
|
||
V1 的 mono 装饰是**分级精细**的(10.5 / 11 / 11.5px),这是「图纸感/调试视图感」品牌签名的关键。React 几乎把所有 mono 小字统一抬到 **12px**。
|
||
**后果:** 全站 mono 装饰偏粗一档、层级感被抹平,「克制」气质下降。已确认:products / projects / account / team / settings / auth / ai-tools 全中。
|
||
**修复:** 恢复 V1 的分级 mono 字号(可抽一组 `.mono-10 / .mono-11 / .mono-12` 工具类统一管理)。
|
||
|
||
### S3 · Toast 体系被替换 + 就地反馈丢失
|
||
V1 主反馈是 `.toast`(右下、橙 icon-box、`--shadow-floating`、300ms 弹性进入、2400ms 自动消失)。React 用 legacy `inline-toast`(**右上**、灰重阴影、直角无圆角、走暖米 token)顶替,且 `.toast` 整套在 React 里**零引用(死代码)**。
|
||
**后果:** ① 位置/动画/配色全偏且违反「单橙锚点」(toast 随成功/失败变绿/红边);② V1 大量就地轻反馈(已删除/已上传/已达上限/已采用…)被丢失或被升级成模态弹窗。§4.18 明确禁止「用全局 toast 通知已采用」,但 ai-tools 正是这么做的。
|
||
**修复:** 弃用 inline-toast,改渲染已存在的 `.toast`;gen-card 采用反馈改回就地 `.gen-image-feedback`。
|
||
|
||
### S4 · 弹窗/抽屉进场动画 + ESC 集体失效
|
||
`overlays.tsx` 的 `TeamModal / ConfirmModal / SuccessModal / Drawer` 全部 `if(!open) return null` 后直接渲染带 `.show` 的节点 → CSS 过渡两帧无变化,**进入动画完全不触发,瞬现瞬隐**;且除 Lightbox 外**全部不支持 ESC 关闭**。(对照:`ProductCreateDrawer` 常驻挂载 + 切 `.show`,是唯一会动的。)
|
||
**修复:** 改成常驻挂载用 `open` 切 `.show`(或 mount 后下一帧加 `.show`);4 个组件补 `keydown` Escape→close。
|
||
|
||
### S5 · 定制弹窗被降级成通用弹窗(功能塌缩)
|
||
V1 多个页面有**专属定制弹窗**,React 大量塞进通用 `TeamModal/ConfirmModal` 的裸输入框,丢了结构与交互:
|
||
- **团队:** 创建账户 / 编辑成员 / 重置密码 / 月限额 / 全部动态 —— 5 个定制 modal 全降级;角色选择 `.role-choice` 双卡 pill → `<select>`;**账户创建成功的「分享凭据」弹窗整个缺失**。
|
||
- **资产库:** 上传 Modal(类型选择 + 按类型动态字段 + 拖拽预览)→ 裸 Drawer 只剩「文件 + 名称」;**资产详情弹窗(立绘+三视图+版本历史+属性)整套缺失**。
|
||
- **账户:** **充值扫码 modal 完全没做**(点支付直接提交)。
|
||
- **AI 图片工具:** **模特库全屏弹窗、商品库选择器弹窗(`pl-card`)、编辑商品 drawer 全缺**。
|
||
|
||
### S6 · 批量多选 + 吸底操作栏(`.bulk-bar`)整体缺失
|
||
V1 的 `products / projects / library` 都有「进编辑态 → 卡片勾选圈 `.card-check` → 选中橙边 → 吸底 `.bulk-bar`(已选 N 项 / 清空 / 删除所选 / 移动到 / 完成)」整套。React 三页**全部只做了 editMode + 单卡删除**,无多选、无勾选圈、无 bulk-bar、无「移动到」。
|
||
|
||
### S7 · 分页器降级
|
||
V1 的 `.pagination` 是富控件:mono「共 N 条」+ **每页条数循环(12/24/48/96)** + 页码窗口 + **「跳至 __ 页」输入框**,吸底。React 用通用 `Pager`(无每页条数切换、无跳页输入、不吸底),且**默认每页 10,V1 是 12**。已确认:products / library。
|
||
|
||
### S8 · banner/hero 大数字字重 700→600
|
||
V1 规范里 banner 大标题/KPI 大数是 **700**(唯一例外重档)。React 多处降到 **600**,大数字偏轻。已确认:account 余额 hero、team banner、auth 品牌 h1。
|
||
|
||
### S9 · 表格 tbody 画了横向分割线(违反铁律)
|
||
design.md §4.7.1 铁律「tbody 行与行之间不画横线」。account-page.css 自加了 `tbody td { border-bottom: 1px solid var(--border-faint) }`。
|
||
**修复:** 去掉 tbody 行间 border,靠 padding + hover 区分行。
|
||
|
||
---
|
||
|
||
## 三、分页面详单
|
||
|
||
### 1. 全局外壳(shell.js → app-shell.tsx) — 8.5/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | 账户下拉菜单 `shell.js:172-188` | 点侧栏 `.user`/顶栏头像弹账户菜单(头像+店名+邮箱 / 个人设置·消息·团队·消费·退出 6 项) | 完全没做。`.user` 无 onClick;头像改成**双击退出**;`.shell-account-menu` 样式在但无组件渲染 | 新建 AccountMenu 组件接 `.user` 与头像 click |
|
||
| P1 | 命令面板底栏 `.shell-command-foot` | 底部 mono 装饰栏:`COMMAND` · `// Enter 打开 · Ctrl K 唤起` · `N 项`计数 | 没渲染;计数被挪到输入框头部 | 补底栏,计数移回底部 |
|
||
| P1 | 顶栏任务队列 chip `.queue-chip` | 右侧有 queue-chip(默认 hidden,样式齐全) | 缺(CSS 死代码) | 保留占位以备开启 |
|
||
| P2 | 命令面板 ESC 按钮 / placeholder / 图标 | `ESC` 全大写 / `搜索页面、动作、项目入口` / image·plus 图标 | `Esc` / `搜索页面、动作…` / images·clapperboard | 文案与图标对齐 V1 |
|
||
|
||
**React 自加:** 移动端汉堡键+抽屉(合理增强);头像双击退出;`.user` 走真实数据。
|
||
> 注:`route-config.ts` 的 `mainNav/supplementNav` 是**死代码**(外壳实际用 app-shell 内自带的 NAV),易误导,建议清理。
|
||
|
||
---
|
||
|
||
### 2. 全局浮层组件(restraint.css → overlays.tsx) — 6.5/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | `TeamModal/ConfirmModal/SuccessModal/Drawer` | Modal `scale(.96→1)` 250ms 弹性 / Drawer `translateX(100%→0)`，靠常驻+切 `.show` | 条件卸载后带 `.show` 挂载 → **进场动画完全不触发,瞬现瞬隐** | 常驻挂载用 open 切 `.show` |
|
||
| P0 | 同上 4 组件 | Modal/Drawer 支持 **ESC 关闭** | 仅 Lightbox 监听 Escape,4 个全无 | 补 keydown Escape→close |
|
||
| P0 | `inline-toast` / `ToastLike` | Toast 右下 / translateX 弹性 / `--shadow-floating` / 橙 icon-box 8px 圆角 / 2400ms | 右上 / 直线淡入 / 灰重阴影 / 直角 icon / 走 legacy token | 改用已存在的 `.toast`(见 S3) |
|
||
| P1 | `.toast`(design-restraint.css:1695) | 整套类已移植 | **零引用(死代码)**,被 inline-toast 顶替 | 启用 `.toast` 即零成本对齐 |
|
||
| P1 | `EmptyPanel` | 空状态含 `.ic-empty` 48×48 灰 icon-box | 只有 h3+p+按钮,**缺灰 icon 占位框** | 补 `.ic-empty` |
|
||
|
||
**React 自加:** `useBodyScrollLock`、`createPortal`、Lightbox 扩 video/audio(均合理)。
|
||
|
||
---
|
||
|
||
### 3. 工作台(index.html → dashboard.tsx) — 6.5/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P1 | `.shortcut .ic` 快捷入口图标盒 | 32×32 / `--heat-12` 淡橙底 / `--heat` icon / 8px / 无边框 | 30×30 / **`--orange-tint #FFF4ED` 暖米底 / `--orange #E55B26` 错橙** / 4px / 加了边框 | 迁入 restraint,用 heat token(S1) |
|
||
| P1 | KPI delta 文案 | 四格真实 delta + 余额「已用 ¥162.60/¥500」mini progress | **占位假值**(把总数当增量)+ 余额写死 38%「已冻结」 | 接真实统计 |
|
||
| P1 | `.recent-meta .sub / .shortcut .d` | mono 用 `--font-mono` | **`JetBrains Mono`(项目未声明,退化系统等宽)** | 改 `var(--font-mono)`(S2) |
|
||
| P1 | `.recent-row:hover` | hover 冷灰 `--background-lighter` | **`--bg-soft #F4F2EC` 暖米 hover** | 改 `--black-alpha-4`(S1) |
|
||
| P2 | tip 内 `[ 确认通过 ]` | `.tip .mono` 橙字+橙底高亮 chip | React 无该规则,退化纯文字 | 补 `.tip .mono` |
|
||
| P2 | 日期 mono / 最近项目镜数 | `// 05.14 · 周三` / 真实镜数 | `2026/6/19` 斜杠 / 写死「4 镜」 | 格式化对齐 + 接真实值 |
|
||
|
||
---
|
||
|
||
### 4. 商品库 + 商品详情(products/product-detail → products.tsx) — 6.5/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | 商品库·工具栏 | 网格/列表**视图切换**(`.view-tog` 黑激活)+ 列表态横排卡 | 整块不存在,只有网格态(CSS 已移植但无 JSX) | 加视图切换+list-view |
|
||
| P0 | 商品库·分页 | 富分页(每页条数 12/24/48/96 + 跳页输入),默认 12 | 通用 Pager,无条数切换/跳页,默认 10 | 见 S7 |
|
||
| P0 | 商品详情·任务记录 Tab | 第三 Tab:4 格 KPI + 8 列任务表格(CSS 全在) | Tab 被 `hidden`,**pane 整个不渲染** | 实现或与产品确认删除 |
|
||
| P0 | 商品详情·素材卡状态 | 三态 pill(通过/不通过/归档)可循环切换 | **写死 `"pass"`**,全恒绿不可点 | 接真实 review_status |
|
||
| P1 | 商品库·分类筛选 | **多选** chip + 菜单计数 + 多选橙计数徽标 | 退化**单选**,无计数 | 改回多选 Set |
|
||
| P1 | 商品库·删除引用拦截 | 被项目引用则禁止强删 / 分组「N 个已跳过」 | 通用确认,固定文案,**无拦截** | 接软删除规则 |
|
||
| P1 | 创建主图上传 | **多图(≤5)+ 拖拽 + 缩略网格 + 删除** | **单图,无拖拽,无网格** | 见「商品创建」 |
|
||
| P1 | 商品详情·采用版本联动 | 采用后联动素材卡 pass/fail + prepend 新卡 | 只本地标记,**不联动** | 采用后同步素材卡状态 |
|
||
| P1 | 商品详情·素材区 | 视图切换 + 状态筛选 chip + 空筛选「重置」入口 | 无视图切换/状态筛选/重置入口 | 补回 |
|
||
| P2 | 商品库·素材 stat | hover 切文案 + 点击弹「模特/平台套图」生成选择 modal | 仅视频 stat 可点,无 hover/弹窗 | 还原 |
|
||
| P2 | 缺三视图徽标 | 新建商品卡缺三视图角标 + tooltip | 无 | 视需要补 |
|
||
|
||
---
|
||
|
||
### 5. 商品创建抽屉(products.html#pc-drawer → product-create-drawer.tsx) — 6.5/10
|
||
|
||
> V1 真正金标准是 `products.html` 内的 `#pc-drawer`(`product-create.html`/`-upload.html` 已是重定向 stub)。V1 仅「手填」一种模式,不存在「上传识别」向导缺失问题。
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | `pickImage` / 上传区 | 主图**多图(≤5)** + 拖拽 + `.pf-grid` 缩略网格 + 单张删除 + 上限/计数 toast | 只取 `files?.[0]` **单图**;input 无 `multiple`;`.pf-grid` 永远空 | 改 `File[]` + multiple + 缩略网格 |
|
||
| P0 | `submit` 校验 | 主图为空/卖点为空两条必填 toast + 自动收编未回车卖点 | 只校验 title;主图/卖点静默放行;**未回车卖点被丢** | 补必填校验 + 收编 bulletDraft |
|
||
| P1 | 上传区拖拽 | dragover/drop 边框变橙 | 只 click,文案写「拖拽到此处」却不可拖 | 加拖拽事件 |
|
||
| P1 | 卖点序号字重 / 输入字号 | num 700 / input 13.5px / uz-d 11.5px | num 600 / input 14px / uz-d 12px | 对齐 V1(S2) |
|
||
| P2 | 删除卖点动画 | 淡出位移 150ms | 瞬时移除 | 补过渡 |
|
||
|
||
**React 自加:** 「使用指南」改内联展开框(违反 inline style 禁令,建议挪进 css);主按钮 loading;校验红字(应抽 css 类);真实 mock 图替换线框 SVG。
|
||
|
||
---
|
||
|
||
### 6. 项目列表 + 新建向导(projects/projects-new → projects.tsx) — 7.0/10
|
||
|
||
> V1 的 `projects-new.html` 运行时已收敛为 2 步单页(step2/4/preview 是 dead code),React 的 2 步实现与 V1 实际运行态一致,**向导主体不算缺失**。
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | 列表·网格卡 | 含 `.prog` 5 段进度条 + `N/5` 计数 | **网格卡完全无进度条** | 补进度条 |
|
||
| P0 | 列表+网格·失败态 | 失败用 `.pill.err`(crimson) + 进度 `.fail` 红段 | `projPillClass` 返回 `"fail"` 但**无 `.pill.fail` 定义 → 失败 pill 退化无色** | 改返回 `"err"` |
|
||
| P0 | 批量管理 | 编辑态 `.bulk-bar` + `.card-check` 勾选圈 + 选中橙边 + 批量删除 | **全缺**(只有 editMode + 单卡删) | 见 S6 |
|
||
| P1 | 列表行·镜数副标题 | `6 镜 · 0-15s` 真实时长 | **硬编码 `0-60s`** | 用真实档 |
|
||
| P1 | 列表行·删除入口 | 行末常驻 `.row-more` 气泡删除 | row-more 在,但又加了仅 editMode 的 `.row-del`(重复) | 去掉 row-del |
|
||
| P2 | 空状态 / 向导时长档文案 | `.empty-state` 放大镜+mono / 「标准短片」 | 通用 EmptyPanel / 「精准短片」 | 对齐 V1 |
|
||
|
||
**React 自加:** mock 封面图、Pager 分页、骨架屏(合理增强)。
|
||
|
||
---
|
||
|
||
### 7. 生产管线(pipeline.html → pipeline.tsx) — 8.5/10
|
||
|
||
> 用户已认可脚本编辑块功能 OK,以下偏差以视觉/信息密度为主。技术栈未伤骨架,restraint 共享类全复用。
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P1 | 阶段1·脚本助手头 | mono 模型签名 `· GPT-4o`(品牌签名) | **删掉了模型 mono 签名**(改放输入框下 picker) | 头部补回 `· {模型名}` mono |
|
||
| P1 | 阶段4·视频卡 meta | `15s · 1080×1920 · ¥0.45`(三段 mono) | 只剩 `{duration}s`,**丢分辨率+单价** | 补回三段式 meta |
|
||
| P1 | 阶段4·queue-bar 文案 | `每场 Seedance 约 15 秒`(带预估) | `生成 · {statusText}`,去掉「约 N 秒」 | 补预估秒数 |
|
||
| P2 | 阶段5·时间轴 zoom | `min=50 max=200`(可缩到 50%) | `min=100 max=300` | 统一到 50-200 |
|
||
|
||
**V1 有 React 没做(需产品决策):** 阶段2「新增人物」轻量 modal(改走演员库工作台);**额度预检 modal(`quota-bg` 四层预检)全流程缺失**;阶段5 BGM 常驻波形装饰轨(无 BGM 时整轨消失)。
|
||
**React 自加(大量真功能增强):** 模型 picker / 停止键 / 流式思考时间轴 / 字幕烧入 / TTS 配音 / 转场 / BGM 上传 / 片段拖拽重排 / 双缓冲预览 / 审核绿红盾 —— 均 V1 mock 没有。
|
||
|
||
---
|
||
|
||
### 8. 资产库(library.html → library.tsx) — 4.5/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | 批量栏 | `card-check` 选框 + 吸底 bulk-bar(删除/移动到↑/清空/完成) + 拖卡到 Tab | **全无多选**,仅 editMode + 单卡删 | 见 S6 |
|
||
| P0 | 资产详情弹窗 | 点卡开 `.asset-modal`(立绘+三视图版本历史+AI生成三视图+简介/标签/属性+商品媒体画廊) | 点卡只开 `MediaLightbox` 纯放大,**整套详情缺失** | 还原 asset-detail modal |
|
||
| P0 | 上传入口 | 居中 Modal + 资产类型下拉 + **按类型动态字段** + 拖拽预览 + mono 脚注 | 侧拉 Drawer,只「文件+名称」两栏 | 改 Modal + 动态字段 |
|
||
| P0 | 缺三视图徽标 | 人物卡 `tri-missing-badge`「缺三视图」+ hover tooltip | 完全没有 | 补徽标+popover |
|
||
| P1 | 排序 / 分页 / 清空筛选 | 3 档(最近使用默认/最近添加/引用次数) / 富分页 / 工具栏清空按钮 | 2 档(最近添加默认/最早添加) / 简化 Pager / 无清空按钮 | 对齐(S7) |
|
||
| P1 | 卡片下载按钮 | hover `card-dl-btn` | 无 | 补 |
|
||
| P2 | 空状态 / 使用次数 | `.empty-state` 图标+mono / meta 含「用过 N 次」 | 裸一行文字 / 无使用次数 | 补回 |
|
||
|
||
> V1 library 本身无视图切换(grid/list),React 缺它不算偏离。
|
||
|
||
---
|
||
|
||
### 9. AI 图片工具(asset-factory/image-optimize/model-photo/platform-cover → ai-tools.tsx) — 5.5/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | 模特上身图 | 全屏**模特库弹窗**(来源/性别/年龄 chip + 12 卡 + 添加模特画布) | 完全没做(`actor-library.tsx` 存在却未被引入);「全部模特→」只内联展开 | 接入模特库弹窗 |
|
||
| P0 | 模特/平台 | 全屏**商品库选择器弹窗**(`pl-card` 多选 + hover 编辑删 + 右上勾 + 已选汇总) | 无 `pl-card`、无弹窗,只在最左列 slice 12 个 | 实现 `pl-modal` |
|
||
| P0 | 模特/平台·gen-card | 单图**再生成**按钮 + 中央**就地反馈**遮罩 + 左上**已采用绿角标**(§4.18 三件套) | 只有下载+更多;采用用**全局 SuccessModal**(违反 §4.18) | 补三件套,采用改就地反馈 |
|
||
| P0 | 平台套图 | 平台**多选**(出多平台分组结果) | 改成**单选**(功能性退化) | 恢复多选+分组 section |
|
||
| P1 | 编辑商品 drawer / 比例默认 | 有编辑 drawer;模特默认 **3:4** | 无编辑 drawer;模特默认 `1:1` | 补 drawer;默认改 3:4 |
|
||
| P1 | 顶部 toolbar / 折叠侧栏 | 折叠+搜索+三筛选 chip + 回到底部 + 会话归档 | 整条 toolbar 缺失;无 fold/回到底部/归档 | 补回 |
|
||
| P1 | 图片创作输入栏 | 模型胶囊 + 7 风格(含 cyber) + 多张参考图(≤3,64×64) | 无模型胶囊 / 6 风格(缺 cyber) / 单参考图 | 补齐 |
|
||
|
||
**React 自加:** 左栏塞了提示词 textarea(V1 无);采用用全局弹窗(应禁);平台/模特改单选(退化)。
|
||
|
||
---
|
||
|
||
### 10. 消息中心(messages.html → messages.tsx) — 8.5/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P1 | 详情底栏动作 | 每条消息带 `actions[]`(进入项目/查看成片/重跑/调整权限…首个 primary)+ 固定「归档」「静音同类」 | 只剩 归档 + 标已读 + 单个「进入X」;**静音同类 + 多动作丢失** | 后端下发 actions[] 或前端按 type 推断 |
|
||
| P1 | 查看日志 | err/ok 消息带 `log`,详情「查看日志」展开黑底 mono `.msg-log` | **完全没接**(`.msg-log` 死样式) | 加 log 字段 + 展开块 |
|
||
| P2 | 关联资源行 / 面板高度 | `<a>{project}→</a>`,无则「无」 / `min-height:640` | 写死目标页 label / `calc(100vh-280px)` | 用项目名;高度确认 |
|
||
|
||
**React 自加:** 真分页/滚动加载、搜索去抖、「刚刚」时间(均合理)。
|
||
|
||
---
|
||
|
||
### 11. 设置页(settings.html → settings.tsx) — 8.5/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | 顶栏「保存所有变更」 | **全局 dirty-state 引擎**:无改动 disabled,改动后激活+「· N 项」计数,保存 toast「N 项/M 分区」,离开 beforeunload 提醒 | 取消/保存只管个人信息;偏好/通知/安全是即时单字段 PUT,**与顶栏按钮脱钩**;按钮永远 enabled、无计数、语义骗人 | 实现 dirty 引擎,或明确改即时保存模型并降级顶栏按钮 |
|
||
| P1 | nav badge / dirty-dot | badge 动态联动(通知 4/4→3/4、安全 N 设备);改过的区 nav 亮橙点 | **写死字符串**,切开关不变;橙点死代码 | 由 state 计算 |
|
||
| P2 | URL hash 同步 / 校验红边 | 切 tab 改 hash + hashchange;邮箱/名称/手机 blur 校验红边 | 仅本地 state;仅原生 email 校验,无 `.invalid` 红边 | 补回 |
|
||
|
||
**React 自加:** 修改密码 modal(真表单)、真实会话渲染(合理增强)。
|
||
|
||
---
|
||
|
||
### 12. 账户页(account.html → account.tsx) — 6.0/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | 充值流程 | 微信/支付宝 → **扫码充值 modal**(二维码+金额+赠送+5分钟有效+双按钮)+ toast | **整个充值 modal 没做**,点支付直接提交 | 移植 `.topup-modal` |
|
||
| P0 | 三大表格筛选条 | 项目/成员/流水表均有 `.filter-bar`(阶段/成员/范围 select + 清除 + 计数) | **筛选条整条缺失** | 补 filter-bar |
|
||
| P0 | 按项目/成员表 | 项目 6 列(商品/成员+角色pill/阶段 progress-mini/状态 pill);成员 5 列(完成数/额度百分比+进度条/最近活跃) | 砍成裸表(项目 4 列、成员缺完成数/活跃/角色 pill/进度条),状态是裸英文 | 按 V1 列重排 + pill/progress |
|
||
| P1 | 趋势图 / 金额格式 | 14 柱有 mock 兜底;`fmtMoney` 带千分位 | 接口空则**整图空白**;`money()` **无千分位** | 加空态兜底 + toLocaleString |
|
||
| P1 | 流水状态/正负色 | status-tag 三态 + 金额 +/- 三色 | **写死全绿「成功」+ 全 neg**,无 ¥/正负/千分位 | 按真实状态映射 |
|
||
| P1 | 表格 tbody 横线 | **无横线**(铁律) | 自加 `border-bottom` | 去掉(S9) |
|
||
| P2 | mono 字号 / hero 字重 | 分级 9-11.5px / hero 数 700 | 统一 12px / 600 | 对齐(S2/S8) |
|
||
|
||
---
|
||
|
||
### 13. 团队页(team.html → team.tsx) — 5.0/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | 创建账户弹窗 | 专属 modal:用户名/密码+生成按钮、角色 `.role-choice` 双卡、每日/每月/总额三额度 | 通用 TeamModal:角色 `<select>`、只有月度额度一格、无生成按钮 | 重建专属 modal |
|
||
| P0 | 分享凭据弹窗 | 创建成功弹绿勾 + cred-card(地址/用户名/密码)+ 单项/一键复制 | **完全缺失**(创建后无凭据回显) | 新建分享凭据 modal |
|
||
| P0 | 编辑成员 / 重置密码 / 月限额弹窗 | 各有专属结构(角色卡/警示框/快捷预设 pill + 实时剩余) | 全降级成通用裸输入框 | 重建三个定制 modal |
|
||
| P1 | 全部动态弹窗 | `feed-all-modal` + 4 筛选 chip + 计数 | 直接跳 messages 页 | 建动态弹窗或确认产品决策 |
|
||
| P1 | 成员表·每日额度列 / 创建者标 / pending 态 | 真实每日额度 / 「· 创建者」mono / pending 行 .65 透明 | 整列硬编码「不限」/ 无创建者标 / 无 pending 态 | 接数据+补态 |
|
||
| P1 | 弹窗准星 / 行可点击 | SVG 十字准星 / 整行可点进编辑+hover | TeamModal 用字面 `+` / 行不可点 | 改 SVG 准星 + 行 hover |
|
||
| P2 | banner 字重 / mono 字号 | 700 / 10.5px | 600 / 12px | 对齐(S8/S2) |
|
||
|
||
---
|
||
|
||
### 14. 登录 + 注册(login/register → auth-screen.tsx) — 4.0/10
|
||
|
||
| 严重度 | 位置 | V1 设计 | React 现状 | 修复建议 |
|
||
|---|---|---|---|---|
|
||
| P0 | **整张注册页** | 团队名/超管邮箱/密码/确认密码/邀请码 5 字段 + 一致性校验 + 协议勾选 + 左侧 4 价值点 + 「创建团队」CTA | **0 实现**;`AuthMode` 只有 `"login"`;`/register` 被强制改回 `/login` | 新建注册态/组件,放开 AuthMode |
|
||
| P0 | 第三方登录 | OR 分割线 + 微信扫码 / 飞书 SSO 双按钮 | **整块缺失** | 补 `.divider` + `.sso-row` |
|
||
| P0 | 切换注册行 | 底部「还没账号? 注册团队 →」 | **完全没有**(无入口去注册) | 补切换行 |
|
||
| P1 | 第一字段 | 「**邮箱** *」type=email 信封 icon `name@company.com` | 错改成「**用户名** *」type=text 人形 icon | 改回邮箱(除非后端确认改用户名) |
|
||
| P1 | lead 引导 / mono 副标 / 返回链 | 引导文案 / `// /auth/login` / 「← 返回工作台」 | 无 lead / `// LOGIN` / 无返回链 | 补回 |
|
||
| P2 | 品牌字号字重 / h-row 布局 | h1 30px/700、h2 22px/600、h-row 横排 baseline | 36px/500、28px/500、改竖排 | 对齐 V1 |
|
||
|
||
**React 自加:** 三段进度动画 + spinner;字段级红边校验(登录页 V1 本无 error 态参照)。
|
||
|
||
---
|
||
|
||
## 四、按优先级的修复清单(建议执行顺序)
|
||
|
||
### 第一波 · 系统性根因(改一次,全站受益)
|
||
1. **S1 双主题** — 把残留 styles.css 类迁入 restraint 体系,消灭暖米错橙(工作台/登录/Toast 一起好)
|
||
2. **S3 Toast 体系** — 启用已存在的 `.toast`,弃用 inline-toast,恢复就地反馈
|
||
3. **S4 弹窗动画+ESC** — overlays.tsx 4 组件改常驻挂载 + 补 ESC
|
||
4. **S2 mono 字号** — 抽工具类统一回 10.5/11/11.5 分级
|
||
|
||
### 第二波 · 各页 P0 功能补全
|
||
5. **登录/注册** — 把注册页做出来(目前 0 实现) + 登录第三方/切换链/邮箱字段
|
||
6. **资产库** — 批量栏 + 资产详情弹窗 + 上传动态字段三大件
|
||
7. **团队** — 5 个定制弹窗重建 + 分享凭据弹窗
|
||
8. **账户** — 充值扫码弹窗 + 三表筛选条 + 表格列补全
|
||
9. **AI 图片工具** — 模特库/商品库选择弹窗 + gen-card 三接口 + 平台多选
|
||
10. **商品** — 视图切换 + 多选分类 + 任务记录 Tab + 多图上传;**项目** — 网格卡进度条 + 失败 pill + 批量栏
|
||
|
||
### 第三波 · 细节回补(P1/P2)
|
||
11. S6 批量多选(products/projects/library 统一)· S7 分页器升级 · S8 hero 字重 · S9 表格横线
|
||
12. 各页字号/文案/mono/准星等逐项对齐(见分页面详单 P2 行)
|
||
|
||
---
|
||
|
||
## 五、客观说明
|
||
|
||
- **不是所有差异都是「做错」:** React 侧有大量 V1 mock 没有的**真功能增强**(管线的 TTS/字幕/转场/拖拽、骨架屏 loading 态、真实数据绑定、修改密码/会话管理),这些是加分项,不应回退。
|
||
- **本报告只盘「视觉/交互还原度」**,不评判后端功能正确性。
|
||
- **优先级排序的逻辑:** 系统性根因 > 整页缺失(登录/资产/团队)> 单页 P0 > 细节。先打根因,能用最小改动把「整体观感不对」拉回最多。
|
||
- **建议:** 这份报告可作为给张业昌的还原 checklist;逐条认领、改完对照 design.md §8 Don't List 自检。
|