fix: top align mobile content
This commit is contained in:
Codex
@@ -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，避免总览数字长期卡住。
|
||||
|
||||
@@ -8,7 +8,7 @@ frontend 应用源码必须使用 TypeScript + React，禁止在 `src/components
|
||||
|
||||
## Layout
|
||||
|
||||
左侧边栏只切换主模块：运行总览、资源节点、任务调度、系统配置。顶部标签只切换当前主模块内的子功能；例如资源节点下的节点清单、资源标签、心跳状态只属于资源节点，和运行总览、任务调度、系统配置没有重复或共享语义。移动端左侧边栏会转为顶部横向主模块条，但高度必须在不同主模块之间保持一致，并保持窄条、单行、不换行。
|
||||
左侧边栏只切换主模块：运行总览、资源节点、任务调度、系统配置。顶部标签只切换当前主模块内的子功能；例如资源节点下的节点清单、资源标签、心跳状态只属于资源节点，和运行总览、任务调度、系统配置没有重复或共享语义。移动端左侧边栏会转为顶部横向主模块条，但高度必须在不同主模块之间保持一致，并保持窄条、单行、不换行；主内容区无论内容多少都必须从顶部向下排列，空状态也不得上下居中制造大块留白。
|
||||
|
||||
## Overview Task Drilldown
|
||||
|
||||
|
||||
@@ -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) });
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 }));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user