seaislee1209andClaude Opus 4.8
74e3c818c5
S4 浮层: overlays.tsx 新增共享 useOverlayTransition(挂载→下一帧上 .show 触发 scale(.96→1)/translateX 进场过渡;关闭先撤 .show 播退场再卸载)+ 统一 ESC 关闭, 应用 TeamModal/ConfirmModal/SuccessModal/Drawer;EmptyPanel 补 .ic-empty 灰 icon S3 Toast: ToastLike 改用设计系统 .toast(右下/单橙 ic-t/shadow-floating/滑入), 不再随 success/error 变绿红边;auth login-toast → .toast S9 表格: account-page.css 删 tbody td border-bottom(对照 V1 account.html 确认应无行线) 验证: tsc 0 · 交互走查 toast出现+ESC关弹窗 · 14 路由回归 boot 0 报错 · 登录 643ms Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
5.5 KiB
5.5 KiB
还原 + 性能落地 · 进度
/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 0python 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 — ⏳ 待做(下一拍)
- S1 styles.css 旧暖米 token 孤儿类迁入 design-restraint.css(改前做孤儿分析,护住 shell);顺手清 part1 留下的
inline-toast/login-toast死 CSS。 - S2 抽
.mono-10/11/12工具类(逐页应用并入 Wave 4 P2 扫)。 - S6 把
.bulk-bar/.card-check从 products-page.css 提到 design-restraint.css(变共享,projects/library 的接线在 Wave 3)。 - S7 扩
pager.tsx富分页器(条数循环 12/24/48/96 + 跳页 + 吸底)+ CSS;Wave 0 暂缓的 products/projects 服务端分页在此合并。 - S8 hero 大数字字重 —— ⚠️ 计划写 600→700,但 design.md §2.5/§2.6 铁律「字重仅 400/500/600,700 仅 Ctrl-K 徽标」。part 2 逐页核 V1 实际字重,上限封 600,不引入 700(铁律优先于报告 S8)。