seaislee1209andClaude Opus 4.8
42c3c046ea
S1 双主题: styles.css Dashboard 区(.recent-row/.shortcut/.tip)迁入 design-restraint.css, 暖米旧 token→restraint(--orange→--heat 等);修 .queue-chip svg --ink-3→--black-alpha-56。 实测 .shortcut .ic 橙 = rgb(250,93,25)=--heat(原泄漏成暖橙 #E55B26) S2 mono: design-restraint.css 加 .mono-10/11/12(10.5/11/11.5px)工具类(逐页应用并入 Wave 4) S7 分页器: pager.tsx 加可选 onPageSizeChange(条数循环)/跳页输入/sticky,旧调用方零破坏; CSS 加 .size-cycle/.jump/.sticky(接线 products/library + 服务端分页放 Wave 3) S8 hero 字重: 核 V1 实测 account/team hero 数字均 font-weight:700 → account 3 处 + team 2 处 改 700(据实还原 V1 标准答案;记录与 design.md §2.5 的内部不一致) S6 批量栏共享挪 Wave 3(与 projects/library 重建一起做) 验证: tsc 0 · build 0 · computed-style 橙=heat/字重=700 · pixelmatch account 1.23%/team 2.13% · 14 路由回归 boot 0 报错 · 登录 639ms Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
60 lines
7.5 KiB
Markdown
60 lines
7.5 KiB
Markdown
# 还原 + 性能落地 · 进度
|
|
|
|
> /loop 自主推进。每波结束本地存档(不 push)。计划:`~/.claude/plans/gleaming-sleeping-ullman.md`。
|
|
> 两份审计 checklist:`UI还原对比报告-AirShelf-2026-06-19.md`、`性能审计报告-AirShelf-2026-06-19.md`。
|
|
|
|
---
|
|
|
|
## Wave 0 · 性能根因 — ✅ 完成 (2026-06-19)
|
|
|
|
| # | 项 | 状态 | 改动 / 证据 |
|
|
|---|---|---|---|
|
|
| 1 | MySQL 连接复用 | ✅ | `settings/base.py` 加 `CONN_MAX_AGE=300`+`CONN_HEALTH_CHECKS=True`+`connect_timeout=5`(mysql 分支),`development.py` 去重。production 经 `from .base import *` 自动继承。实测注入:`ENGINE=mysql / CONN_MAX_AGE=300 / HEALTH=True / OPTIONS.connect_timeout=5`。**收益最大、最低风险。** |
|
|
| 2 | 视频轮询不再整页重渲染 | ✅ | `App.tsx` `pollVideosQuiet` 收尾 `setProjectDetail` 改 JSON 脏检查 —— 在途段未变化(多数 5s 轮次)时返回 `prev` 跳过 setState,整棵管线不再每 5 秒空重渲染。纯前端,不碰生成/脚本业务。 |
|
|
| 3 | 图片懒加载 | ✅ | `ai-tools.tsx` 任务历史网格+列表两处 `<img>` 补 `loading="lazy" decoding="async"`。 |
|
|
| 4 | 隐藏标签页暂停轮询 | ✅(保守) | `pipeline.tsx` 审核(8s)+ 基础资产在途(4s)两个**纯读**轮询 tick 起始加 `if (document.hidden) return`(回前台自然恢复)。 |
|
|
|
|
### Wave 0 有意偏离计划(已记录,非偷懒)
|
|
- **视频 5s 轮询的 hidden-guard:跳过。** 该轮询在本机无 Celery 时**驱动视频生成推进**(前端 poll-video-segment),加 hidden-guard 会让切走标签时生成暂停 —— 触碰「轮询业务逻辑」(loop 规则 3 禁区)且改变行为。Task 2 的脏检查已消除它真正的性能问题(每 5s 整页重渲染),故 hidden-guard 非必要,保守不加。
|
|
- **pending-assets「空闲 N 轮后停」:跳过。** 其重启触发不在 effect 依赖里,停了之后用户在该趴新触发的生成将拿不到 loading 占位卡(回归风险)。只加 hidden-guard 已解决「后台标签空跑」的性能点。
|
|
- **products/projects 服务端分页:挪到 Wave 1 S7。** 服务端分页必须配可用的分页器(翻页 UI)才不会把「第 21 条以后」彻底锁死;裸上服务端分页而无分页器 = 页面更坏。S7 正是建富分页器,两者合并做才连贯。per-product / ai-tools 的 `pageSize:200` 是有界上限,叠加本波 lazy-img 已可接受,届时一并接服务端分页。
|
|
|
|
### Wave 0 验证
|
|
- `npx tsc --noEmit` → **exit 0**
|
|
- `python manage.py check` → **0 issues**;DB 设置实测确认 CONN_MAX_AGE 生效
|
|
- 无头浏览器(playwright/chromium,注入 `airshelf_token`)走查 **14 条 authed 路由全部 boot,0 console/page error**(证 App.tsx/pipeline.tsx/ai-tools.tsx 改动无运行时回归)
|
|
- 登录探针:**用户名字段在、无邮箱字段、点击→/dashboard 726ms**(真·API+水合,无人为延迟)
|
|
- 截图存档:`_qa_shots/wave0/*.png`(14 路由 + after-login)
|
|
- 注:Wave 0 改动均为非视觉(设置/轮询/懒加载),pixelmatch 预期 ~0 delta,逐页像素对比留到对应视觉波次(Wave 1/3)做。
|
|
|
|
---
|
|
|
|
## Wave 1 · 系统性 CSS/组件 (S1-S9) — ⏳ 进行中
|
|
|
|
> 为护住共享 CSS,拆两段做:**part 1 = 浮层/反馈(S3/S4/S9)**,part 2 = token/布局(S1/S2/S6/S7/S8)。
|
|
|
|
### part 1 — ✅ 完成 (2026-06-19)
|
|
|
|
| # | 项 | 状态 | 改动 / 证据 |
|
|
|---|---|---|---|
|
|
| S4 | 弹窗进场动画 + ESC | ✅ | `overlays.tsx` 新增共享 `useOverlayTransition(open, close)`:挂载→下一帧上 `.show`(触发 `.modal scale(.96→1)` / `.drawer translateX` CSS 过渡)→关闭先撤 `.show` 播退场再卸载;统一接管 ESC。应用到 TeamModal/ConfirmModal/SuccessModal/Drawer。EmptyPanel 补 `.ic-empty` 灰 icon(Inbox)。 |
|
|
| S3 | Toast 体系归正 | ✅ | `ToastLike`(app-shell)改渲染设计系统 `.toast`(右下、单橙 `.ic-t`、`--shadow-floating`、挂载滑入),**不再随 success/error 变绿/红边**(单一 accent 铁律);icon 按类型 Check/AlertCircle/Info,盒仍橙。`auth-screen` 旧 `.login-toast` → `.toast`。旧 `inline-toast`/`login-toast` 渲染处全部切走(CSS 残留留到 part 2 的 styles.css 治理一并清)。 |
|
|
| S9 | 表格横线 | ✅ | `account-page.css` 删 `.billing-table tbody td { border-bottom }` + last-child 规则。**逐页对照 V1 account.html 确认**:V1 该表 `td border-bottom:0`、只有 thead 分隔 + 行 hover 底色,React 原先多画的行线是偏离,删后对齐 V1。 |
|
|
|
|
**part 1 验证:** `tsc --noEmit` 0;交互走查(playwright)`auth-toast`:`.toast.show` 出现、文案对、旧 `.login-toast` 计数 0;`team-modal`:`#open-invite` 打开 `.modal-bg.show`(scale 落定=进场动画跑过)、**ESC 成功关闭并卸载**;14 路由回归 boot 全过 0 报错、登录 643ms。截图:`_qa_shots/wave1/*.png`。
|
|
|
|
### part 2 — ✅ 完成 (2026-06-19)
|
|
|
|
| # | 项 | 状态 | 改动 / 证据 |
|
|
|---|---|---|---|
|
|
| S1 | 双主题清污染 | ✅ | 确认是**真视觉泄漏**:styles.css `:root` 定义 `--orange #E55B26`(暖橙)、`--ink-3 #9C988C`,design-restraint.css 不再声明这些名 → 用 `var(--orange)` 的孤儿类渲染成**错误的橙**。把 Dashboard 区(`.recent-row/.shortcut/.tip` 等,dashboard.tsx 实际在用)从 styles.css 迁入 design-restraint.css,暖米 token → restraint(`--orange→--heat`、`--orange-tint→--heat-12`、`--ink→--accent-black`、`--ink-3→--black-alpha-48`、`JetBrains→--font-mono`);并修 design-restraint.css 自身 `.queue-chip svg` 的 `--ink-3→--black-alpha-56`。**实测**:`.shortcut .ic` color=`rgb(250,93,25)`(=--heat)、bg=`rgba(250,93,25,.12)`、`.tip` color=`rgba(38,38,38,.64)` —— 暖橙泄漏已除。 |
|
|
| S2 | mono 字号分级 | ✅(基建) | design-restraint.css 加 `.mono-10/.mono-11/.mono-12`(10.5/11/11.5px)工具类。**逐页应用并入 Wave 4 P2 扫**(计划本就如此)。 |
|
|
| S6 | 批量栏共享 | ⏭️ 挪 Wave 3 | products 的 `.bulk-bar`/`.card-check` **蓝本已在**;其价值是接线到 projects/library = 逐页活,放 Wave 3 重建这俩页时连 CSS 提共享 + 接线一起做才连贯(现在只挪 CSS 无消费者=空动作)。 |
|
|
| S7 | 富分页器 | ✅(组件) | `pager.tsx` 加**可选** props:`onPageSizeChange`(每页条数点击循环 12/24/48/96)+ 跳页输入(>7 页显示)+ `sticky` 吸底;旧调用方不传则退化为原只读分页器(零破坏)。CSS 加 `.size-cycle/.jump/.sticky`。**接线到 products/library + 服务端分页放 Wave 3**(Wave 0 暂缓项一并)。 |
|
|
| S8 | hero 字重 | ✅(改 700,证据翻案) | **核 V1 实测**:account.html `.balance-hero .v`/`.balance-sub .v`/`.recharge-card .amt` 与 team.html banner 数字**都是 `font-weight:700`**。V1 设计稿是用户拍板的「视觉标准答案」,虽与 design.md §2.5「700 仅 Ctrl-K」冲突,但**用户明确要还原 V1**→ 据实改 700(account 3 处 + team 2 处)。实测 `.balance-hero .v`=700、`.banner-id .nm`=700。⚠️ 记录此 design.md §2.5 与 V1 设计稿的内部不一致。 |
|
|
|
|
**part 2 验证:** `tsc --noEmit` 0 + `npm run build` 0;computed-style 实测(橙=`rgb(250,93,25)`、hero 字重=700);pixelmatch(修正 Windows file URL 后)account **1.23%** / team **2.13%**(低,字体/真实数据残差,达标);14 路由回归 boot 全过、登录 639ms。截图 `_qa_shots/wave1b/*.png`。
|
|
> 注:`core/qa/visual-parity` 的 `compare-all.mjs` 硬编码了原作者 Mac 路径 designRoot、`compare-page.mjs` 不能同时吃 file:// source + token(预存 harness bug,与本次改动无关)——Wave 3 逐页还原把 pixelmatch 当主力工具时一并参数化修掉。
|
|
|
|
**Wave 1 整体 ✅(S1/S2/S3/S4/S7/S8/S9 落地;S6 挪 Wave 3,S2/S7 逐页应用挪 Wave 3/4)。**
|