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

feat: refine workbench visuals and map controls

Browse Source 
Unify the Agent history extension with the header acrylic surface, preserve the full conversation body, and consolidate shared control and status styling.

Restore map flow and SCADA controller behavior, remove obsolete rendering paths, and extend regression coverage. Button press coverage now releases outside the target so state assertions cannot accidentally toggle the control.
This commit is contained in:
jiang
2026-07-28 16:39:36 +08:00
parent ade88b4fbf
commit f4318a9b9c
96 changed files with 5480 additions and 1875 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/browser/workbench-visual.e2e.ts
+28 -13
View File
@@ -1,4 +1,4 @@
import { expect, test, type Locator, type Page } from "playwright/test";
import { expect, test, type Locator, type Page } from "@playwright/test";
const EMPTY_RASTER_TILE = Buffer.from(
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
@@ -19,7 +19,8 @@ test.describe("neutral blue mist workbench", () => {
await expectDesktopFloatingGeometry(page);
await expectAcrylicAlphas(page, {
navigation: 0.64,
panel: 0.56,
agentPanel: 0.82,
conditionPanel: 0.56,
control: 0.74
});
await expectLoadedChineseFont(page);
@@ -39,7 +40,8 @@ test.describe("neutral blue mist workbench", () => {
await expectDesktopFloatingGeometry(page);
await expectAcrylicAlphas(page, {
navigation: 0.8,
panel: 0.72,
agentPanel: 0.88,
conditionPanel: 0.72,
control: 0.86
});
await expect(page).toHaveScreenshot("workbench-desktop-satellite.png", {
@@ -58,12 +60,13 @@ test.describe("neutral blue mist workbench", () => {
await resizeHandle.focus();
await page.keyboard.press("End");
await expect(agentPanel).toHaveCSS("width", "620px");
await expectMapCorridor(agentPanel, conditionPanel, 768);
await expect(agentPanel).toHaveCSS("width", "720px");
await expectMapCorridor(agentPanel, conditionPanel, 680);
await conditionPanel.getByRole("button", { name: "展开工况任务" }).click();
await expect(conditionPanel).toHaveCSS("width", "960px");
await expectMapCorridor(agentPanel, conditionPanel, 260);
await expect(agentPanel).toHaveCSS("width", "628px");
await expectMapCorridor(agentPanel, conditionPanel, 256);
await expect(page).toHaveScreenshot("workbench-desktop-wide-max-agent.png", {
animations: "disabled",
maxDiffPixelRatio: 0.01
@@ -185,11 +188,16 @@ async function selectBasemap(page: Page, label: "浅色" | "影像") {
async function expectDesktopFloatingGeometry(page: Page) {
const agentPanel = page.locator('aside[aria-label="Agent 命令面板"]');
const agentHeader = agentPanel.locator(".agent-panel-integrated-header");
const agentComposer = agentPanel.locator(".agent-panel-composer");
const conditionPanel = page.getByRole("region", { name: "工况任务", exact: true });
await expect(agentPanel).toHaveCSS("width", "460px");
await expect(agentPanel).toHaveCSS("width", "500px");
await expect(conditionPanel).toHaveCSS("width", "432px");
await expect(agentPanel).toHaveCSS("border-radius", "16px");
await expect(agentHeader).toHaveCSS("border-radius", "0px");
await expect(agentComposer).toHaveCSS("border-radius", "16px");
await expect(agentComposer).toHaveCSS("border-top-width", "0px");
await expect(conditionPanel).toHaveCSS("border-radius", "16px");
const agentBox = await agentPanel.boundingBox();
@@ -212,9 +220,7 @@ async function expectMapCorridor(
const conditionBox = await conditionPanel.boundingBox();
expect(agentBox).not.toBeNull();
expect(conditionBox).not.toBeNull();
expect(conditionBox!.x - (agentBox!.x + agentBox!.width)).toBeGreaterThanOrEqual(
minimumWidth
);
expect(conditionBox!.x - (agentBox!.x + agentBox!.width)).toBeGreaterThanOrEqual(minimumWidth);
}
async function expectLoadedChineseFont(page: Page) {
@@ -227,12 +233,20 @@ async function expectLoadedChineseFont(page: Page) {
async function expectAcrylicAlphas(
page: Page,
expected: { navigation: number; panel: number; control: number }
expected: {
navigation: number;
agentPanel: number;
conditionPanel: number;
control: number;
}
) {
const alphas = await page.evaluate(() => {
return {
navigation: alphaOf(document.querySelector(".acrylic-navigation")),
panel: alphaOf(document.querySelector(".acrylic-panel")),
agentPanel: alphaOf(
document.querySelector('aside[aria-label="Agent 命令面板"]')
),
conditionPanel: alphaOf(document.querySelector(".scheduled-feed-panel-shell")),
control: alphaOf(document.querySelector(".acrylic-control"))
};
@@ -247,7 +261,8 @@ async function expectAcrylicAlphas(
});
expect(alphas.navigation).toBeCloseTo(expected.navigation, 2);
expect(alphas.panel).toBeCloseTo(expected.panel, 2);
expect(alphas.agentPanel).toBeCloseTo(expected.agentPanel, 2);
expect(alphas.conditionPanel).toBeCloseTo(expected.conditionPanel, 2);
expect(alphas.control).toBeCloseTo(expected.control, 2);
}