diff --git a/TEST.md b/TEST.md index 05127d94..c856832c 100644 --- a/TEST.md +++ b/TEST.md @@ -14,7 +14,7 @@ ## T4 前端控制台连通 -阅读 `AGENTS.md`(本项目 `AGENTS.md` 同时承担 `SKILL.md` 对 `scripts/cli.ts` 的解释职责),然后用 cli 手动测试以下内容:先用 `bun scripts/cli.ts server status` 获取 frontend URL,再用浏览器访问该 URL,使用默认账号 `admin` 和默认密码 `Liang6516.` 登录,确认左侧主模块、顶部当前模块子标签、核心指标、Provider 控件和事件流可见;页面布局应紧凑、信息密度高、字体不过大,且移动端宽度下左侧栏转为高度一致、较窄、单行不换行的横向模块条。 +阅读 `AGENTS.md`(本项目 `AGENTS.md` 同时承担 `SKILL.md` 对 `scripts/cli.ts` 的解释职责),然后用 cli 手动测试以下内容:先用 `bun scripts/cli.ts server status` 获取 frontend URL,再用浏览器访问该 URL,使用默认账号 `admin` 和默认密码 `Liang6516.` 登录,确认左侧主模块、顶部当前模块子标签、核心指标、Provider 控件和事件流可见;页面布局应紧凑、信息密度高、字体不过大,且移动端宽度下左侧栏转为高度一致、较窄、单行不换行的横向模块条,内容较少的主内容页和空状态也必须从顶部向下排列,不得上下居中留白。 ## T5 真实任务下发链路 @@ -62,4 +62,4 @@ ## T15 待处理任务可追溯 -阅读 `AGENTS.md`(本项目 `AGENTS.md` 同时承担 `SKILL.md` 对 `scripts/cli.ts` 的解释职责),然后用 cli 手动测试以下内容:运行 `bun scripts/cli.ts e2e run`,确认 `frontend:pending-task-drilldown` 和 `frontend:mobile-nav-fixed-height` passed;再登录 frontend,点击 `态势总览` 的 `待处理任务` 指标,确认会进入 `任务调度 / 待处理任务` 子标签,并能看到每个 queued、dispatched、running 任务的 Provider、已等待时间、payload 摘要和 `查看原始JSON` 按钮。backend-core 超过 `TASK_PENDING_TIMEOUT_MS` 的待处理任务必须自动转为 failed,避免总览数字长期卡住。 +阅读 `AGENTS.md`(本项目 `AGENTS.md` 同时承担 `SKILL.md` 对 `scripts/cli.ts` 的解释职责),然后用 cli 手动测试以下内容:运行 `bun scripts/cli.ts e2e run`,确认 `frontend:pending-task-drilldown`、`frontend:mobile-nav-fixed-height` 和 `frontend:mobile-content-top-aligned` passed;再登录 frontend,点击 `态势总览` 的 `待处理任务` 指标,确认会进入 `任务调度 / 待处理任务` 子标签,并能看到每个 queued、dispatched、running 任务的 Provider、已等待时间、payload 摘要和 `查看原始JSON` 按钮。backend-core 超过 `TASK_PENDING_TIMEOUT_MS` 的待处理任务必须自动转为 failed,避免总览数字长期卡住。 diff --git a/docs/reference/frontend.md b/docs/reference/frontend.md index d8e86577..031c7bd8 100644 --- a/docs/reference/frontend.md +++ b/docs/reference/frontend.md @@ -8,7 +8,7 @@ frontend 应用源码必须使用 TypeScript + React,禁止在 `src/components ## Layout -左侧边栏只切换主模块:运行总览、资源节点、任务调度、系统配置。顶部标签只切换当前主模块内的子功能;例如资源节点下的节点清单、资源标签、心跳状态只属于资源节点,和运行总览、任务调度、系统配置没有重复或共享语义。移动端左侧边栏会转为顶部横向主模块条,但高度必须在不同主模块之间保持一致,并保持窄条、单行、不换行。 +左侧边栏只切换主模块:运行总览、资源节点、任务调度、系统配置。顶部标签只切换当前主模块内的子功能;例如资源节点下的节点清单、资源标签、心跳状态只属于资源节点,和运行总览、任务调度、系统配置没有重复或共享语义。移动端左侧边栏会转为顶部横向主模块条,但高度必须在不同主模块之间保持一致,并保持窄条、单行、不换行;主内容区无论内容多少都必须从顶部向下排列,空状态也不得上下居中制造大块留白。 ## Overview Task Drilldown diff --git a/scripts/src/e2e.ts b/scripts/src/e2e.ts index 28e0af10..8b2f1218 100644 --- a/scripts/src/e2e.ts +++ b/scripts/src/e2e.ts @@ -279,6 +279,19 @@ async function frontendCheck(config: UniDeskConfig, urls: PublicUrls, checks: E2 } const mobileRailMax = Math.max(...mobileRailHeights); const mobileRailMin = Math.min(...mobileRailHeights); + await page.getByRole("button", { name: /任务调度/ }).click(); + await page.getByRole("button", { name: /待处理任务/ }).click(); + await page.waitForSelector('[data-testid="pending-task-page"]', { timeout: 5000 }); + const mobileContentMetrics = await page.locator('[data-testid="pending-task-page"]').evaluate((element) => { + const pageTop = element.getBoundingClientRect().top; + const empty = element.querySelector(".empty-state"); + const emptyBox = empty?.getBoundingClientRect(); + const emptyStrong = empty?.querySelector("strong")?.getBoundingClientRect(); + return { + pageTop: Math.round(pageTop), + emptyTextOffset: emptyBox && emptyStrong ? Math.round(emptyStrong.top - emptyBox.top) : 0, + }; + }); await page.setViewportSize({ width: 1440, height: 920 }); await page.getByRole("button", { name: /运行总览/ }).click(); await page.getByRole("button", { name: /态势总览/ }).click(); @@ -320,6 +333,7 @@ async function frontendCheck(config: UniDeskConfig, urls: PublicUrls, checks: E2 const dockerText = await page.locator('[data-testid="docker-status-page"]').innerText({ timeout: 5000 }); addCheck(checks, "frontend:login-provider-visible", bodyText.includes(config.providerGateway.id) && bodyText.includes(config.providerGateway.name) && bodyText.includes("核心在线"), { screenshotPath }); addCheck(checks, "frontend:mobile-nav-fixed-height", mobileRailMax - mobileRailMin <= 1 && mobileRailMax <= 44, { mobileRailHeights }); + addCheck(checks, "frontend:mobile-content-top-aligned", mobileContentMetrics.pageTop <= 190 && mobileContentMetrics.emptyTextOffset <= 14, { mobileContentMetrics }); addCheck(checks, "frontend:pending-task-drilldown", pendingTaskText.includes("待处理任务") && (pendingTaskText.includes("当前无待处理任务") || (pendingTaskText.includes("Provider") && pendingTaskText.includes("已等待"))), { pendingTaskPreview: pendingTaskText.slice(0, 600) }); addCheck(checks, "frontend:no-naked-json-before-click", rawBlocksBefore === 0 && !nakedJsonText, { rawBlocksBefore, nakedJsonText }); addCheck(checks, "frontend:raw-json-explicit-button", rawText.includes('"providerId"') && rawText.includes(config.providerGateway.id), { rawTextPreview: rawText.slice(0, 400) }); diff --git a/src/components/frontend/public/style.css b/src/components/frontend/public/style.css index 839fd86b..b8bbff1d 100644 --- a/src/components/frontend/public/style.css +++ b/src/components/frontend/public/style.css @@ -770,12 +770,14 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); } .empty-state { display: grid; - gap: 4px; - min-height: 88px; - place-content: center; + gap: 5px; + min-height: 52px; + align-content: start; + justify-items: start; + padding: 9px; border: 1px dashed var(--line); color: var(--muted); - text-align: center; + text-align: left; } .empty-state strong { color: var(--text); } .muted { color: var(--muted); } @@ -851,7 +853,11 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); } @media (max-width: 760px) { body { font-size: 12px; } - .shell { grid-template-columns: 1fr; } + .shell { + grid-template-columns: 1fr; + grid-template-rows: auto minmax(0, 1fr); + align-content: start; + } .rail { position: static; height: 42px; @@ -893,8 +899,37 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); } .module-code { font-size: 9px; letter-spacing: 0.08em; } .module.active, .module:hover { border-bottom-color: var(--accent); } .workspace { padding: 10px; } - .topbar { align-items: flex-start; flex-direction: column; } - .status-strip { flex-wrap: wrap; white-space: normal; } + .topbar { + min-height: 36px; + align-items: center; + flex-direction: row; + padding-bottom: 6px; + } + .topbar > div:first-child { + min-width: 0; + flex: 0 0 auto; + } + .topbar .eyebrow { display: none; } + .topbar h1 { + font-size: 14px; + letter-spacing: 0.05em; + white-space: nowrap; + } + .status-strip { + min-width: 0; + flex: 1 1 auto; + justify-content: flex-end; + gap: 5px; + padding: 3px 4px; + overflow-x: auto; + flex-wrap: nowrap; + white-space: nowrap; + } + .status-strip span:not(.dot):not([data-testid="conn-text"]):not(.user-pill) { display: none; } + .status-strip .ghost-btn { + min-height: 24px; + padding: 2px 6px; + } .tabs { height: 38px; align-items: center; diff --git a/src/components/frontend/src/app.tsx b/src/components/frontend/src/app.tsx index 00f7638b..cb4545cf 100644 --- a/src/components/frontend/src/app.tsx +++ b/src/components/frontend/src/app.tsx @@ -1014,6 +1014,10 @@ function Shell({ session, onLogout }: AnyRecord) { return () => clearInterval(timer); }, []); + useEffect(() => { + window.scrollTo({ top: 0, left: 0, behavior: "auto" }); + }, [activeModule, activeTab]); + function setTab(tab: string): void { setActiveTabs((prev: any) => ({ ...prev, [activeModule]: tab })); }