OrgTJWater/next-tjwater-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(workbench): refine notification cards and hit targets

Browse Source
This commit is contained in:
jiang
2026-11-07 20:04:28 +08:00
parent ea3b62573c
commit e0436217a8
3 changed files with 64 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/browser/alert-removal.e2e.ts
+23 -6
View File
@@ -42,13 +42,30 @@ for (const { width, reducedMotion } of [{ width: 1280, reducedMotion: false }, {
await expect(removeTask).toBeVisible();
const openTask = page.getByRole("menuitem", { name: `打开通知：${notification.title}` });
await expect(openTask).toHaveText("");
const actions = await openTask.evaluate((element) => {
const open = element.getBoundingClientRect();
const remove = element.previousElementSibling!.getBoundingClientRect();
return { centerDifference: Math.abs((open.left + open.width / 2) - (remove.left + remove.width / 2)), gap: open.top - remove.bottom };
const notificationRow = page.locator(`[data-alert-id="operational-task-notification:${notification.notification_id}"]`);
const titleBounds = await notificationRow.locator("p").first().boundingBox();
const rowBounds = await notificationRow.boundingBox();
expect(rowBounds!.height).toBeLessThanOrEqual(82);
const hit = await page.evaluate(({ x, y }) => document.elementFromPoint(x, y)?.closest("button")?.getAttribute("aria-label"),
{ x: titleBounds!.x + titleBounds!.width / 2, y: titleBounds!.y + titleBounds!.height / 2 });
expect(hit).toBe(`打开通知：${notification.title}`);
await openTask.hover();
await expect(notificationRow).toHaveCSS("background-color", "rgb(218, 229, 253)");
await expect(notificationRow).toHaveCSS("border-color", "rgb(66, 99, 199)");
for (const action of [removeTask]) {
await action.hover();
await expect(action).toHaveCSS("background-color", "rgb(66, 99, 199)");
await expect(action).toHaveCSS("color", "rgb(255, 255, 255)");
}
await testInfo.attach(`alert-hover-${width}`, { body: await page.screenshot({ path: testInfo.outputPath("alert-hover.png"), style: "[data-sonner-toaster] { visibility: hidden !important; }" }), contentType: "image/png" });
await page.mouse.move(0, 0);
const removePosition = await removeTask.evaluate((element) => {
const remove = element.getBoundingClientRect();
const row = element.closest("[data-alert-id]")!.getBoundingClientRect();
return { top: remove.top - row.top, right: row.right - remove.right };
});
expect(actions.centerDifference).toBeLessThan(1);
expect(actions.gap).toBeGreaterThanOrEqual(0);
expect(removePosition.top).toBeLessThanOrEqual(6);
expect(removePosition.right).toBeLessThanOrEqual(6);
const box = await menu.boundingBox();
expect(box!.x).toBeGreaterThanOrEqual(0);
expect(box!.x + box!.width).toBeLessThanOrEqual(width);
tests/browser/scada-notifications.e2e.ts
+6 -1
View File
@@ -93,7 +93,12 @@ for (const width of [1280, 375, 320]) {
await expect(page.getByRole("region", { name: "工况任务", exact: true }).getByRole("heading", { name: task.title })).toBeVisible();
await expect(popup).toBeVisible();
await menu.click();
await page.getByRole("menuitem", { name: `打开通知：${alert.title}` }).click();
const alertRow = page.locator(`[data-alert-id="${alert.id}"]`);
const titleBox = await alertRow.locator("p").first().boundingBox();
const rowBox = await alertRow.boundingBox();
await alertRow.click({ position: { x: titleBox!.x - rowBox!.x + titleBox!.width / 2,
y: titleBox!.y - rowBox!.y + titleBox!.height / 2 } });
await expect(page.getByRole("menu")).toHaveCount(0);
await expect(page.getByRole("region", { name: "工况任务", exact: true }).getByRole("heading", { name: task.title })).toBeVisible();
await emit();
await expect(popup).toBeVisible();