修复界面：统一九页列表密度并保留移动业务布局
This commit is contained in:
cieanyau committed
1 parent
016d223673
commit
ba094275ec
10 files changed
+316
-439
No files matched your search
@@ -0,0 +1,315 @@
|
||||
/**
|
||||
* 列表视觉回归补齐迁移后的盲区：实际页面密度、主题、空态和手机卡片。
|
||||
* 只控制既有外部 HTTP 边界；登录、路由、OpenVue 和 CSS 层叠使用生产构建。
|
||||
*/
|
||||
import assert from "node:assert/strict";
|
||||
import { test } from "node:test";
|
||||
import { backendOrigin, login, scenario } from "./helpers/console-browser.mjs";
|
||||
|
||||
const created = 1730000000;
|
||||
const title = "本地列表验收";
|
||||
const list = (row, empty) => ({
|
||||
list: empty ? [] : [row],
|
||||
count: Number(!empty),
|
||||
});
|
||||
const pages = [
|
||||
["SSH keys", "/security/ssh-keys", "table", "audit-key"],
|
||||
["logbook", "/logbook", "table", title],
|
||||
["domains", "/security/domains", "table", "example.invalid"],
|
||||
["groups", "/security/groups", "table", title],
|
||||
["messages", "/messages", "table", title],
|
||||
["news", "/news", "article", title],
|
||||
["notices", "/notices", "article", title],
|
||||
["tickets", "/tickets", "table", title],
|
||||
["transfer", "/transfer", "table", title],
|
||||
["embedded news", "/resources?section=news", "article", title],
|
||||
["embedded notices", "/resources?section=notices", "article", title],
|
||||
];
|
||||
|
||||
async function listBoundary(page, state) {
|
||||
await page.route(`${backendOrigin}/console/v1/**`, async (route) => {
|
||||
const path = new URL(route.request().url()).pathname.replace(
|
||||
/^\/console\/v1/,
|
||||
"",
|
||||
);
|
||||
const rows = {
|
||||
"/ssh_key": {
|
||||
id: 7,
|
||||
name: "audit-key",
|
||||
public_key: `ssh-ed25519 ${"A".repeat(180)}`,
|
||||
finger_print: "SHA256:local-list-check",
|
||||
},
|
||||
"/log": {
|
||||
id: 7,
|
||||
create_time: created,
|
||||
description: title,
|
||||
ip: "192.0.2.7",
|
||||
},
|
||||
"/domain_whitelist/record": {
|
||||
id: 7,
|
||||
host_id: 5,
|
||||
host_name: title,
|
||||
product_name: "本地云产品",
|
||||
domains: ["example.invalid"],
|
||||
status: 1,
|
||||
create_time: created,
|
||||
can_remove: 0,
|
||||
},
|
||||
"/security_group": {
|
||||
id: 7,
|
||||
name: title,
|
||||
description: "规则说明",
|
||||
rule_num: 2,
|
||||
host_num: 1,
|
||||
create_time: created,
|
||||
},
|
||||
"/client_care/mail/list": {
|
||||
id: 7,
|
||||
title,
|
||||
type: "product",
|
||||
read: 0,
|
||||
create_time: created,
|
||||
},
|
||||
"/news": {
|
||||
id: 7,
|
||||
title,
|
||||
excerpt: "文章摘要",
|
||||
type: "产品",
|
||||
create_time: created,
|
||||
},
|
||||
"/announcement": { id: 7, title, create_time: created },
|
||||
"/ticket": {
|
||||
id: 7,
|
||||
ticket_num: "AUDIT-7",
|
||||
title,
|
||||
name: "产品支持",
|
||||
status: "待回复",
|
||||
color: "#0284c7",
|
||||
create_time: created,
|
||||
post_time: created,
|
||||
last_reply_time: created,
|
||||
},
|
||||
"/host_transfer/host": {
|
||||
id: 7,
|
||||
name: title,
|
||||
product_name: "本地云产品",
|
||||
dedicate_ip: "192.0.2.7",
|
||||
renew_amount: "20.00",
|
||||
billing_cycle_name: "月付",
|
||||
due_time: created,
|
||||
},
|
||||
};
|
||||
const staticResponses = {
|
||||
"/domain_whitelist/host": {
|
||||
list: [{ id: 5, name: title, product_name: "本地云产品" }],
|
||||
},
|
||||
"/certification/info": { is_certification: true },
|
||||
"/account/notification-preferences": {
|
||||
email_enabled: false,
|
||||
sms_enabled: false,
|
||||
email_available: true,
|
||||
sms_available: false,
|
||||
},
|
||||
"/news/type": {
|
||||
list: [{ id: 1, name: "产品", news_num: Number(!state.empty) }],
|
||||
},
|
||||
"/announcement/type": { list: [{ id: 1, name: "平台公告" }] },
|
||||
"/ticket/status": { list: [{ id: 1, name: "待回复", color: "#0284c7" }] },
|
||||
"/ticket/type": { list: [{ id: 1, name: "产品支持" }] },
|
||||
"/ticket/statistic": { 1: Number(!state.empty) },
|
||||
"/host_transfer/config": { certification: false },
|
||||
"/host_transfer/transfer_code": { transfer_code: "LOCAL-ONLY-TRANSFER" },
|
||||
};
|
||||
const data = Object.hasOwn(rows, path)
|
||||
? list(rows[path], state.empty)
|
||||
: staticResponses[path];
|
||||
if (data === undefined) return route.fallback();
|
||||
return route.fulfill({ json: { status: 200, msg: "", data } });
|
||||
});
|
||||
}
|
||||
|
||||
async function measure(page) {
|
||||
return page.evaluate(() => {
|
||||
const read = (selector) => {
|
||||
const element = document.querySelector(selector);
|
||||
if (!element) return null;
|
||||
const style = getComputedStyle(element);
|
||||
return {
|
||||
gap: style.gap,
|
||||
padding: style.padding,
|
||||
background: style.backgroundColor,
|
||||
color: style.color,
|
||||
weight: style.fontWeight,
|
||||
fontSize: style.fontSize,
|
||||
shadow: style.boxShadow,
|
||||
display: style.display,
|
||||
};
|
||||
};
|
||||
const row = document.querySelector(
|
||||
".p-datatable-tbody > tr:not(.p-datatable-empty-message)",
|
||||
);
|
||||
return {
|
||||
dark: document.documentElement.classList.contains("app-dark"),
|
||||
shell: Boolean(document.querySelector(".deni-layout")),
|
||||
page: read(".list-page"),
|
||||
toolbar: read(".list-toolbar"),
|
||||
table: read(".list-table"),
|
||||
article: read(".news-card, .notice-item"),
|
||||
header: read(".p-datatable-header-cell"),
|
||||
cell: read(
|
||||
".p-datatable-tbody > tr:not(.p-datatable-empty-message) > td",
|
||||
),
|
||||
empty: read(".list-empty"),
|
||||
emptyIcon: read(".list-empty > i"),
|
||||
emptyTitle: read(".list-empty-title"),
|
||||
articleCount: document.querySelectorAll(".news-card, .notice-item")
|
||||
.length,
|
||||
tableCount: document.querySelectorAll(".list-table .p-datatable").length,
|
||||
rowDisplay: row ? getComputedStyle(row).display : null,
|
||||
actionLabelLines: [
|
||||
...document.querySelectorAll(".row-actions .p-button-label"),
|
||||
].map((label) => {
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(label);
|
||||
return [...range.getClientRects()].filter((rect) => rect.width > 0)
|
||||
.length;
|
||||
}),
|
||||
visibleCells: row
|
||||
? [...row.querySelectorAll("td")]
|
||||
.filter((cell) => getComputedStyle(cell).display !== "none")
|
||||
.map((cell) => ({
|
||||
label: cell.getAttribute("data-label"),
|
||||
text: cell.innerText.trim(),
|
||||
}))
|
||||
: [],
|
||||
horizontalOverflow: document.documentElement.scrollWidth > innerWidth + 1,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function luminance(color) {
|
||||
const channels = color
|
||||
.match(/[\d.]+/g)
|
||||
.slice(0, 3)
|
||||
.map((value) => {
|
||||
const channel = Number(value) / 255;
|
||||
return channel <= 0.04045
|
||||
? channel / 12.92
|
||||
: ((channel + 0.055) / 1.055) ** 2.4;
|
||||
});
|
||||
return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
|
||||
}
|
||||
|
||||
for (const [name, routePath, kind, visibleText] of pages) {
|
||||
for (const width of [1440, 390]) {
|
||||
for (const theme of ["light", "dark"]) {
|
||||
test(
|
||||
`${name} keeps shared list density at ${width}px in ${theme}`,
|
||||
{ timeout: 30000 },
|
||||
(t) =>
|
||||
scenario(t, { loginMode: "password-only" }, async (page) => {
|
||||
await page.setViewportSize({ width, height: 1000 });
|
||||
await page.emulateMedia({
|
||||
colorScheme: theme,
|
||||
reducedMotion: "reduce",
|
||||
});
|
||||
const state = { empty: true };
|
||||
await listBoundary(page, state);
|
||||
await login(page, routePath);
|
||||
await page.locator(".list-empty").waitFor();
|
||||
await page
|
||||
.locator(".p-datatable-mask")
|
||||
.waitFor({ state: "hidden" });
|
||||
await page.waitForFunction(
|
||||
() =>
|
||||
!document
|
||||
.querySelector(".list-empty-title")
|
||||
?.textContent.includes("加载"),
|
||||
);
|
||||
const empty = await measure(page);
|
||||
state.empty = false;
|
||||
await page.reload();
|
||||
const content = page.locator(
|
||||
kind === "table"
|
||||
? ".p-datatable-tbody > tr:not(.p-datatable-empty-message)"
|
||||
: ".news-card, .notice-item",
|
||||
);
|
||||
await content.first().waitFor();
|
||||
await page
|
||||
.locator(".p-datatable-mask")
|
||||
.waitFor({ state: "hidden" });
|
||||
const filled = await measure(page);
|
||||
const violations = [];
|
||||
for (const [stateName, observed] of [
|
||||
["empty", empty],
|
||||
["filled", filled],
|
||||
]) {
|
||||
if (!observed.shell)
|
||||
violations.push(`${stateName}: missing shell`);
|
||||
if (observed.dark !== (theme === "dark"))
|
||||
violations.push(`${stateName}: wrong theme`);
|
||||
if (observed.page?.gap !== "16px")
|
||||
violations.push(`${stateName}: page gap`);
|
||||
if (observed.toolbar?.gap !== "8px")
|
||||
violations.push(`${stateName}: toolbar gap`);
|
||||
if (observed.horizontalOverflow)
|
||||
violations.push(`${stateName}: document overflow`);
|
||||
}
|
||||
if (empty.empty?.gap !== "6px") violations.push("empty: gap");
|
||||
if (empty.empty?.padding !== "48px 24px")
|
||||
violations.push("empty: padding");
|
||||
if (empty.emptyIcon?.fontSize !== "16px")
|
||||
violations.push("empty: icon density");
|
||||
if (kind === "table") {
|
||||
if (filled.tableCount !== 1)
|
||||
violations.push("filled: missing actual table");
|
||||
if (filled.header?.background !== "rgba(0, 0, 0, 0)")
|
||||
violations.push("filled: opaque header");
|
||||
if (filled.header?.weight !== "500")
|
||||
violations.push("filled: header weight");
|
||||
if (filled.header?.padding !== "12px 16px")
|
||||
violations.push("filled: header padding");
|
||||
if (filled.table?.shadow !== "none")
|
||||
violations.push("filled: panel shadow");
|
||||
if (width > 640 && filled.cell?.padding !== "12px 16px")
|
||||
violations.push("filled: cell density");
|
||||
if (width < 640 && !["block", "grid"].includes(filled.rowDisplay))
|
||||
violations.push("filled: mobile card missing");
|
||||
const visibleData = filled.visibleCells
|
||||
.map((cell) => cell.text)
|
||||
.join(" ");
|
||||
if (!visibleData.includes(visibleText))
|
||||
violations.push("filled: card data hidden");
|
||||
if (filled.actionLabelLines.some((lines) => lines > 1))
|
||||
violations.push("filled: row action label wraps");
|
||||
} else {
|
||||
if (filled.tableCount !== 0)
|
||||
violations.push("filled: article page became a table");
|
||||
if (filled.articleCount !== 1)
|
||||
violations.push("filled: missing article card");
|
||||
}
|
||||
const surface = kind === "table" ? filled.table : filled.article;
|
||||
const background = luminance(surface.background);
|
||||
const foreground = luminance(surface.color);
|
||||
if (theme === "light" ? background < 0.5 : background > 0.1)
|
||||
violations.push("filled: surface ignores theme");
|
||||
if (
|
||||
(Math.max(background, foreground) + 0.05) /
|
||||
(Math.min(background, foreground) + 0.05) <
|
||||
4.5
|
||||
)
|
||||
violations.push("filled: unreadable theme contrast");
|
||||
assert.equal(
|
||||
await content
|
||||
.getByText(visibleText, { exact: true })
|
||||
.first()
|
||||
.isVisible(),
|
||||
true,
|
||||
);
|
||||
assert.deepEqual(violations, [], JSON.stringify({ empty, filled }));
|
||||
return { routePath, width, theme, kind, empty, filled };
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user