diff --git a/core/backend/airshelf/settings/base.py b/core/backend/airshelf/settings/base.py index f1b7baf..51bec7c 100644 --- a/core/backend/airshelf/settings/base.py +++ b/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 = [ diff --git a/core/backend/airshelf/settings/development.py b/core/backend/airshelf/settings/development.py index d4909bc..b3cc813 100644 --- a/core/backend/airshelf/settings/development.py +++ b/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 共用,此处不再重复设置。 diff --git a/core/frontend/src/App.tsx b/core/frontend/src/App.tsx index bb993df..dcd8f2e 100644 --- a/core/frontend/src/App.tsx +++ b/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。 diff --git a/core/frontend/src/routes/ai-tools.tsx b/core/frontend/src/routes/ai-tools.tsx index c2c4dce..07e926a 100644 --- a/core/frontend/src/routes/ai-tools.tsx +++ b/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 (
-
{img ? {typeLabel} : {task.id.slice(0, 4)}}
+
{img ? {typeLabel} : {task.id.slice(0, 4)}}
{typeLabel}
// {task.task_type}
@@ -346,7 +346,7 @@ export function AssetFactoryPage({ navigate }: { navigate: (page: Page) => void
- {img ? {typeLabel} : {task.id.slice(0, 4)}} + {img ? {typeLabel} : {task.id.slice(0, 4)}}
{typeLabel}
diff --git a/core/frontend/src/routes/pipeline.tsx b/core/frontend/src/routes/pipeline.tsx index aa1031c..84001c3 100644 --- a/core/frontend/src/routes/pipeline.tsx +++ b/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; @@ -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; diff --git a/core/qa/visual-parity/_wave0-smoke.mjs b/core/qa/visual-parity/_wave0-smoke.mjs new file mode 100644 index 0000000..1555be9 --- /dev/null +++ b/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)); diff --git a/docs/todo/还原性能落地-进度.md b/docs/todo/还原性能落地-进度.md new file mode 100644 index 0000000..db86268 --- /dev/null +++ b/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` 任务历史网格+列表两处 `` 补 `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) — ⏳ 进行中 + +(待补)