perf(core): Wave 0 性能根因 — 连接复用/视频轮询脏检查/图懒加载/隐藏tab停轮询

- settings/base.py: MySQL 加 CONN_MAX_AGE=300 + 健康检查 + connect_timeout=5
  (development/production 共用,production 经 from .base import * 继承);development 去重
- App.tsx pollVideosQuiet: 收尾 setProjectDetail 改 JSON 脏检查,在途段未变化时
  跳过 setState,整棵管线不再每 5 秒空重渲染(纯前端,不碰生成业务)
- ai-tools.tsx: 任务历史网格+列表两处 img 补 loading=lazy/decoding=async
- pipeline.tsx: 审核(8s)+在途资产(4s)纯读轮询加 document.hidden 守卫
  (视频5s轮询驱动生成,保守不加;详见进度文档)

验证: tsc 0 · django check 0 · 14 路由 headless boot 0 报错 · 登录 726ms 无假延迟无邮箱

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

core/backend/airshelf/settings/base.py

@@ -107,6 +107,14 @@ else:
         }
     }
 
+# 连接复用(development + production 共用):连远程 MySQL 时,默认每请求重开连接
+# (CONN_MAX_AGE=0),一次 TCP 握手 ~1.6s,登录时前端并发十几个接口逐个重握手 = 卡几十秒。
+# 复用连接 + 健康检查 + 连接超时,放在 base 让两套环境都生效(sqlite 测试库不受影响)。
+if DATABASES["default"]["ENGINE"].endswith("mysql"):
+    DATABASES["default"]["CONN_MAX_AGE"] = 300
+    DATABASES["default"]["CONN_HEALTH_CHECKS"] = True
+    DATABASES["default"].setdefault("OPTIONS", {})["connect_timeout"] = 5
+
 AUTH_USER_MODEL = "accounts.User"
 
 AUTH_PASSWORD_VALIDATORS = [

core/backend/airshelf/settings/development.py

@@ -1,13 +1,7 @@
 from .base import *  # noqa: F403
-from .base import DATABASES
 
 
 DEBUG = True
 
-# 本地连云端 MySQL 时,默认每请求都重开连接(CONN_MAX_AGE=0),
-# 而到远程库一次 TCP 握手就 ~1.6s,登录时前端并发 ~12 个接口 → 每个都重握手 = 卡几十秒。
-# 复用连接 + 连接超时,本地体感立刻顺滑(仅 development 生效,不影响线上)。
-if DATABASES.get("default", {}).get("ENGINE", "").endswith("mysql"):
-    DATABASES["default"]["CONN_MAX_AGE"] = 300
-    DATABASES["default"]["CONN_HEALTH_CHECKS"] = True
-    DATABASES["default"].setdefault("OPTIONS", {})["connect_timeout"] = 5
+# MySQL 连接复用(CONN_MAX_AGE / 健康检查 / connect_timeout)已上移到 base.py,
+# development 与 production 共用,此处不再重复设置。

core/frontend/src/App.tsx

@@ -330,7 +330,10 @@ export function App() {
     await Promise.all(active.map((segment) => api.pollVideo(activeProjectId, segment.id).catch(() => undefined)));
     const next = await api.project(activeProjectId).catch(() => null);
     // 晚到的旧项目轮询结果不要冲掉已切换的当前项目详情
-    if (next && next.id === activeProjectIdRef.current) setProjectDetail(next);
+    if (next && next.id === activeProjectIdRef.current) {
+      // 视频生成动辄数分钟,多数 5s 轮次状态没变 —— 内容一致时跳过 setState,避免整棵管线每 5 秒空重渲染。
+      setProjectDetail((prev) => (prev && JSON.stringify(prev) === JSON.stringify(next) ? prev : next));
+    }
   }, [activeProjectId]);
 
   // 静默刷新导出任务状态(进入拼接页 / 导出后回填成片),不弹 toast。

core/frontend/src/routes/ai-tools.tsx

@@ -311,7 +311,7 @@ export function AssetFactoryPage({ navigate }: { navigate: (page: Page) => void
             const img = taskImage[task.id];
             return (
               <article className="task-card history-card" key={task.id}>
-                <div className={`placeholder${img ? " has-img" : ""}`}>{img ? <img src={img} alt={typeLabel} /> : <span className="ph-frame">{task.id.slice(0, 4)}</span>}</div>
+                <div className={`placeholder${img ? " has-img" : ""}`}>{img ? <img src={img} alt={typeLabel} loading="lazy" decoding="async" /> : <span className="ph-frame">{task.id.slice(0, 4)}</span>}</div>
                 <div className="history-body">
                   <div className="history-name">{typeLabel}</div>
                   <div className="history-type">// {task.task_type}</div>
@@ -346,7 +346,7 @@ export function AssetFactoryPage({ navigate }: { navigate: (page: Page) => void
                     <td>
                       <div className="task-name-cell">
                         <div className={`placeholder task-thumb${img ? " has-img" : ""}`}>
-                          {img ? <img src={img} alt={typeLabel} /> : <span className="ph-frame">{task.id.slice(0, 4)}</span>}
+                          {img ? <img src={img} alt={typeLabel} loading="lazy" decoding="async" /> : <span className="ph-frame">{task.id.slice(0, 4)}</span>}
                         </div>
                         <div>
                           <div className="task-name">{typeLabel}</div>

core/frontend/src/routes/pipeline.tsx

@@ -802,6 +802,7 @@ export function PipelinePage(props: {
     let sawProcessing = false;
     let timer = 0;
     const tick = async () => {
+      if (document.hidden) return; // 标签页切走时不空跑审核轮询(纯读,回前台自然恢复)
       const r = await api.pollReviews(project.id).catch(() => null);
       if (!alive) return;
       const map = (r?.reviews || {}) as Record<string, string>;
@@ -2078,6 +2079,7 @@ export function PipelinePage(props: {
     let stopped = false;
     let timer = 0;
     const tick = async () => {
+      if (document.hidden) { if (!stopped) timer = window.setTimeout(tick, 4000); return; } // 后台不空跑(纯读),保留心跳回前台即恢复
       try {
         const res = await api.pendingAssets(project.id);
         if (stopped) return;

core/qa/visual-parity/_wave0-smoke.mjs

@@ -0,0 +1,74 @@
+// Wave 0 boot-integrity smoke (scratch). Visits every authed route with an injected
+// airshelf_token, captures console/page errors + a screenshot per route, then runs a
+// login-latency probe (proves the fake-delay removal + username-not-email field).
+import { chromium } from "playwright";
+import fs from "node:fs";
+import path from "node:path";
+
+const BASE = process.env.BASE || "http://localhost:5173";
+const TOKEN = process.env.TOKEN || "";
+const OUT = path.resolve(process.env.OUT || "../../../_qa_shots/wave0");
+fs.mkdirSync(OUT, { recursive: true });
+
+const ROUTES = [
+  "/", "/dashboard", "/products", "/projects", "/messages",
+  "/account", "/team", "/settings", "/asset-factory",
+  "/model-photo", "/image-optimize", "/platform-cover", "/library", "/pipeline"
+];
+
+const NOISE = /favicon|net::ERR_|Failed to load resource.*(png|ico|svg|jpg|woff)|ResizeObserver/i;
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: "light" });
+
+const seed = await ctx.newPage();
+await seed.goto(BASE + "/", { waitUntil: "domcontentloaded" });
+await seed.evaluate((t) => localStorage.setItem("airshelf_token", t), TOKEN);
+await seed.close();
+
+const results = [];
+for (const route of ROUTES) {
+  const page = await ctx.newPage();
+  const errs = [];
+  page.on("console", (m) => { if (m.type() === "error") errs.push(m.text()); });
+  page.on("pageerror", (e) => errs.push("PAGEERROR: " + (e.message || e)));
+  let ok = true;
+  try {
+    await page.goto(BASE + route, { waitUntil: "load", timeout: 20000 });
+    await page.waitForTimeout(1500);
+  } catch (e) { ok = false; errs.push("NAV: " + e.message); }
+  const name = route === "/" ? "root" : route.replace(/\//g, "");
+  await page.screenshot({ path: path.join(OUT, `${name}.png`), fullPage: false }).catch(() => {});
+  results.push({ route, ok, errors: errs.filter((e) => !NOISE.test(e)) });
+  await page.close();
+}
+
+// login-latency probe (fresh context, no token)
+const lctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+const lp = await lctx.newPage();
+let login = { error: null };
+try {
+  await lp.goto(BASE + "/login", { waitUntil: "load" });
+  await lp.waitForTimeout(500);
+  const hasUser = await lp.locator("#auth-username").count();
+  const hasEmail = await lp.locator('input[type="email"]').count();
+  await lp.fill("#auth-username", "airshelf");
+  await lp.fill("#auth-pwd", "Restraint2026");
+  const t0 = Date.now();
+  await lp.click("button.btn-cta");
+  let ms = -1;
+  try {
+    await lp.waitForFunction(() => !location.pathname.replace(/\/+$/, "").endsWith("/login") && location.pathname !== "/login", { timeout: 15000 });
+    ms = Date.now() - t0;
+  } catch { ms = -1; }
+  await lp.waitForTimeout(800);
+  await lp.screenshot({ path: path.join(OUT, "after-login.png") }).catch(() => {});
+  login = { hasUsernameField: !!hasUser, hasEmailField: !!hasEmail, clickToLeaveLoginMs: ms, landedPath: lp.url() };
+} catch (e) { login = { error: e.message }; }
+await lctx.close();
+
+await browser.close();
+
+const summary = { base: BASE, routes: results, login };
+fs.writeFileSync(path.join(OUT, "summary.json"), JSON.stringify(summary, null, 2));
+console.log(JSON.stringify(summary, null, 2));

docs/todo/还原性能落地-进度.md

@@ -0,0 +1,34 @@
+# 还原 + 性能落地 · 进度
+
+> /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) — ⏳ 进行中
+
+(待补)