fix(workbench): refine agent dock and smooth map resizing
Unify dock surfaces, headers and dividers, and remove the visible context strip. Limit pointer resizing to 400-640px and reveal the edge grip on hover. Resize and redraw the map in the same layout cycle to prevent blanking and lag. Preserve horizontal centering during conversation control press feedback. Validation: isolated lint, typecheck, 21 focused unit tests, and 10 relevant browser checks passed. Snapshot baselines regenerated from the isolated change. The existing mobile alert summary test also fails on unchanged HEAD because the expected demo alert source is unavailable in this environment.
This commit is contained in:
@@ -53,12 +53,25 @@ test("desktop Agent docks beside the workspace with a solid reading surface", as
|
||||
await waitForAnimations(agentPanel);
|
||||
|
||||
await expectAcrylicSurface(topBar);
|
||||
await expect(agentPanel).toHaveCSS("background-color", "oklch(0.965 0.012 248)");
|
||||
await expect(agentPanel).toHaveCSS("background-color", "oklch(0.972 0.005 250)");
|
||||
await expect(agentPanel).toHaveCSS("backdrop-filter", "none");
|
||||
await expect(agentPanel).toHaveCSS("border-top-left-radius", "0px");
|
||||
await expect(agentPanel).toHaveCSS("border-top-right-radius", "16px");
|
||||
await expect(agentPanel).not.toHaveCSS("box-shadow", "none");
|
||||
await expect(agentPanel).toHaveCSS("border-radius", "0px");
|
||||
await expect(agentPanel).toHaveCSS("border-top-width", "0px");
|
||||
await expect(agentPanel).toHaveCSS("border-bottom-width", "0px");
|
||||
await expect(agentPanel).toHaveCSS("border-left-width", "0px");
|
||||
await expect(agentPanel).toHaveCSS("border-right-width", "1px");
|
||||
await expect(agentPanel).toHaveCSS("border-right-color", "oklch(0.905 0.009 250)");
|
||||
await expect(agentPanel).toHaveCSS("box-shadow", "none");
|
||||
await expect(agentControls).toHaveCSS("border-top-width", "1px");
|
||||
await expect(agentControls).toHaveCSS("background-color", "oklch(0.985 0.003 250)");
|
||||
await expect(agentPanel.locator("form.agent-panel-control")).toHaveCSS("background-color", "rgb(255, 255, 255)");
|
||||
const capabilities = agentPanel.getByRole("list", { name: "Agent 分析能力" });
|
||||
await expect(capabilities.getByRole("listitem")).toHaveCount(4);
|
||||
await expect(capabilities).toHaveCSS("box-shadow", "none");
|
||||
for (const item of await capabilities.getByRole("listitem").all()) {
|
||||
await expect(item).toHaveCSS("border-right-width", "0px");
|
||||
await expect(item).toHaveCSS("border-bottom-width", "0px");
|
||||
}
|
||||
await expect(
|
||||
agentPanel.getByText("直接说出你想调查的问题，我会整理监测与空间证据，并将分析结果带回地图。")
|
||||
).toHaveCSS("color", "rgb(51, 65, 85)");
|
||||
@@ -72,8 +85,21 @@ test("desktop Agent docks beside the workspace with a solid reading surface", as
|
||||
expect(conversationBox).not.toBeNull();
|
||||
expect(scrollBox).not.toBeNull();
|
||||
expect(panelBox!.x).toBe(0);
|
||||
const topBarBox = await topBar.boundingBox();
|
||||
expect(panelBox!.y).toBe(topBarBox!.y + topBarBox!.height);
|
||||
expect(panelBox!.y + panelBox!.height).toBe(page.viewportSize()!.height);
|
||||
expect(panelBox!.width).toBe(500);
|
||||
await expect.poll(async () => (await workspace.boundingBox())?.x).toBe(500);
|
||||
const headerBox = await agentHeader.boundingBox();
|
||||
const workspaceBox = await workspace.boundingBox();
|
||||
expect(headerBox!.height).toBe(topBarBox!.height);
|
||||
expect(headerBox!.y).toBe(workspaceBox!.y);
|
||||
await expect(topBar).toHaveCSS("box-shadow", "none");
|
||||
await expect(agentHeader).toHaveCSS("box-shadow", "none");
|
||||
await expect(agentHeader.locator(":scope > div").first()).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
|
||||
expect(await topBar.evaluate((element) => getComputedStyle(element).borderBottomColor)).toBe(
|
||||
await agentPanel.evaluate((element) => getComputedStyle(element).borderRightColor)
|
||||
);
|
||||
expect(Math.abs(conversationBox!.x - panelBox!.x)).toBeLessThanOrEqual(1);
|
||||
await expect(agentConversationScroll).toHaveCSS("scrollbar-gutter", "stable both-edges");
|
||||
|
||||
@@ -81,6 +107,57 @@ test("desktop Agent docks beside the workspace with a solid reading surface", as
|
||||
await page.getByPlaceholder("输入调度问题，Agent 将通过后端会话流式响应").focus();
|
||||
await expect.poll(() => getSurfacePresentation(agentPanel)).toEqual(beforeFocus);
|
||||
await page.screenshot({ path: "test-results/agent-history-ui/desktop-dock.png" });
|
||||
|
||||
for (const viewport of [
|
||||
{ width: 1024, height: 768, panelWidth: 500 },
|
||||
{ width: 1920, height: 1080, panelWidth: 540 }
|
||||
]) {
|
||||
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
||||
await expect(agentPanel).toHaveCSS("width", `${viewport.panelWidth}px`);
|
||||
await expect.poll(async () => (await workspace.boundingBox())?.x).toBe(viewport.panelWidth);
|
||||
const resizedPanelBox = await agentPanel.boundingBox();
|
||||
expect(resizedPanelBox!.x).toBe(0);
|
||||
expect(resizedPanelBox!.y).toBe(topBarBox!.y + topBarBox!.height);
|
||||
expect(resizedPanelBox!.y + resizedPanelBox!.height).toBe(viewport.height);
|
||||
await page.screenshot({
|
||||
path: `test-results/agent-history-ui/desktop-dock-${viewport.width}.png`
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test("desktop Agent portal menus keep local material and respect reduced transparency", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
|
||||
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
||||
await waitForAnimations(panel);
|
||||
|
||||
for (const name of ["选择 Agent 模型", "权限批准模式"]) {
|
||||
const trigger = panel.getByRole("button", { name });
|
||||
await trigger.click();
|
||||
const menu = page.getByRole("menu");
|
||||
await expect(menu).toHaveAttribute("data-agent-presentation", "desktop-dock");
|
||||
expect(await menu.evaluate((element) => element.closest("aside"))).toBeNull();
|
||||
await expect(menu).toHaveCSS("background-color", "rgba(255, 255, 255, 0.94)");
|
||||
await expect(menu).toHaveCSS("backdrop-filter", "blur(12px) saturate(1.03)");
|
||||
await expect(menu).toHaveCSS("background-image", "none");
|
||||
await page.keyboard.press("Escape");
|
||||
await expect(trigger).toBeFocused();
|
||||
}
|
||||
|
||||
const cdp = await page.context().newCDPSession(page);
|
||||
await cdp.send("Emulation.setEmulatedMedia", {
|
||||
features: [{ name: "prefers-reduced-transparency", value: "reduce" }]
|
||||
});
|
||||
expect(await page.evaluate(() => matchMedia("(prefers-reduced-transparency: reduce)").matches)).toBe(true);
|
||||
await panel.getByRole("button", { name: "选择 Agent 模型" }).click();
|
||||
const menu = page.getByRole("menu");
|
||||
await expect(menu).toHaveCSS("background-color", "rgb(255, 255, 255)");
|
||||
await expect(menu).toHaveCSS("backdrop-filter", "none");
|
||||
await page.keyboard.press("Escape");
|
||||
await panel.getByRole("button", { name: "打开 Agent 历史记录" }).click();
|
||||
const history = panel.getByRole("region", { name: "Agent 历史记录" });
|
||||
await expect(history).toHaveCSS("background-color", "rgb(255, 255, 255)");
|
||||
await expect(history).toHaveCSS("backdrop-filter", "none");
|
||||
});
|
||||
|
||||
test("desktop Agent history remains usable inside the docked navigation pane", async ({ page }) => {
|
||||
@@ -99,6 +176,8 @@ test("desktop Agent history remains usable inside the docked navigation pane", a
|
||||
await waitForAnimations(history);
|
||||
await expect(historyButton).toHaveAttribute("aria-expanded", "true");
|
||||
await expectUnifiedHistoryStructure(history);
|
||||
await expect(history).toHaveCSS("background-color", "rgba(255, 255, 255, 0.94)");
|
||||
await expect(history).toHaveCSS("backdrop-filter", "blur(12px) saturate(1.03)");
|
||||
|
||||
await history.getByRole("button", { name: "重命名对话" }).first().click();
|
||||
const renameInput = history.locator("input").first();
|
||||
@@ -118,6 +197,35 @@ test("desktop Agent history remains usable inside the docked navigation pane", a
|
||||
await expect(historyButton).toHaveAttribute("aria-expanded", "false");
|
||||
});
|
||||
|
||||
test("desktop Agent press feedback keeps pointer clicks and keyboard activation stable", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
|
||||
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
||||
await waitForAnimations(panel);
|
||||
const trigger = panel.getByRole("button", { name: "打开 Agent 历史记录" });
|
||||
const history = panel.getByRole("region", { name: "Agent 历史记录" });
|
||||
const before = await trigger.boundingBox();
|
||||
await page.mouse.move(before!.x + before!.width / 2, before!.y + before!.height / 2);
|
||||
await page.mouse.down();
|
||||
const pressed = await trigger.boundingBox();
|
||||
expect(pressed!.y).toBe(before!.y + 1);
|
||||
expect(pressed!.width).toBe(before!.width);
|
||||
await page.mouse.up();
|
||||
await expect(trigger).toHaveAttribute("aria-expanded", "true");
|
||||
await expect(history).toBeVisible();
|
||||
await waitForAnimations(panel);
|
||||
|
||||
await page.keyboard.press("Tab");
|
||||
await trigger.focus();
|
||||
expect(await trigger.evaluate((element) => element.matches(":focus-visible"))).toBe(true);
|
||||
const focused = await trigger.boundingBox();
|
||||
await page.keyboard.down("Space");
|
||||
expect(await trigger.boundingBox()).toEqual(focused);
|
||||
await page.keyboard.up("Space");
|
||||
await expect(history).toBeHidden();
|
||||
await expect(trigger).toBeFocused();
|
||||
});
|
||||
|
||||
test("mobile Agent mirrors the desktop floating history surface", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
@@ -192,6 +300,8 @@ test("docked Agent respects forced color mode", async ({ page }) => {
|
||||
await expect(navigation).toBeVisible();
|
||||
await expect(navigation).toHaveCSS("backdrop-filter", "none");
|
||||
await expect(navigation).toHaveCSS("box-shadow", "none");
|
||||
await expect(navigation).toHaveCSS("border-right-width", "1px");
|
||||
await expect(navigation).toHaveCSS("border-right-color", "rgb(0, 0, 0)");
|
||||
await expect(workspace).toBeVisible();
|
||||
await expect(page.getByRole("toolbar", { name: "工作区窗口任务栏" })).toHaveCount(0);
|
||||
await page.screenshot({ path: "test-results/agent-history-ui/forced-colors.png" });
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { expect, test, type Page } from "@playwright/test";
|
||||
import { mockAgentApi } from "./support/mock-agent-api";
|
||||
import { mockWorkbenchContext } from "./support/mock-workbench-context";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockAgentApi(page);
|
||||
@@ -35,6 +36,190 @@ test("the docked Agent collapses and restores the main workspace", async ({ page
|
||||
.toBe(expandedOffset);
|
||||
});
|
||||
|
||||
test("dragging the Agent edge keeps the workspace attached and preserves the draft", async ({ page }) => {
|
||||
await mockWorkbenchContext(page);
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await openAgentPanel(page);
|
||||
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
||||
const workspace = page.locator("#main-workspace");
|
||||
const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
|
||||
const prompt = panel.getByPlaceholder("输入调度问题，Agent 将通过后端会话流式响应");
|
||||
await expect(panel.getByText("当前上下文", { exact: true })).toHaveCount(0);
|
||||
await prompt.fill("保留尚未发送的诊断问题");
|
||||
await expect(panel).toHaveCSS("width", "500px");
|
||||
await page.waitForFunction(() =>
|
||||
Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")) &&
|
||||
!window.__waterNetworkMap?.isMoving()
|
||||
);
|
||||
const cameraBefore = await readCamera(page);
|
||||
expect(await handle.evaluate((element) => (element as HTMLElement).tabIndex)).toBe(-1);
|
||||
const grip = handle.locator(".agent-resize-grip");
|
||||
await expect(grip).toHaveCSS("opacity", "0");
|
||||
const box = (await handle.boundingBox())!;
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||
await expect(grip).toHaveCSS("opacity", "1");
|
||||
await page.screenshot({ path: "/tmp/nexttjwater-agent-resize-hover.png" });
|
||||
await page.mouse.down();
|
||||
await expect(handle).toHaveAttribute("data-resizing", "true");
|
||||
await expect(panel).toHaveCSS("width", "500px");
|
||||
for (const nextWidth of [540, 580, 620]) {
|
||||
await page.mouse.move(nextWidth, box.y + box.height / 2);
|
||||
await expect(panel).toHaveCSS("width", `${nextWidth}px`);
|
||||
const panelBox = (await panel.boundingBox())!;
|
||||
const workspaceBox = (await workspace.boundingBox())!;
|
||||
expect(workspaceBox.x).toBe(panelBox.x + panelBox.width);
|
||||
}
|
||||
await page.screenshot({ path: "test-results/agent-history-ui/desktop-resizing.png" });
|
||||
await page.mouse.up();
|
||||
await expect(handle).toHaveAttribute("data-resizing", "false");
|
||||
await expect(prompt).toHaveValue("保留尚未发送的诊断问题");
|
||||
await expect.poll(() => readCamera(page)).toEqual(cameraBefore);
|
||||
await page.mouse.move(1000, 450);
|
||||
await expect(grip).toHaveCSS("opacity", "0");
|
||||
await expect(panel).toHaveCSS("width", "620px");
|
||||
await page.getByRole("button", { name: "折叠 Agent 面板" }).click();
|
||||
await expect(page.getByLabel("Agent 折叠栏")).toBeVisible();
|
||||
await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
|
||||
await expect(panel).toHaveCSS("width", "620px");
|
||||
await expect(prompt).toHaveValue("保留尚未发送的诊断问题");
|
||||
});
|
||||
|
||||
async function readCamera(page: Page) {
|
||||
return page.evaluate(() => {
|
||||
const map = window.__waterNetworkMap!;
|
||||
return {
|
||||
center: map.getCenter().toArray(),
|
||||
zoom: map.getZoom(),
|
||||
bearing: map.getBearing(),
|
||||
pitch: map.getPitch()
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
test("Agent dragging stays within usable widths and adapts to the viewport", async ({ page }) => {
|
||||
await mockWorkbenchContext(page);
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await openAgentPanel(page);
|
||||
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
||||
const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
|
||||
const workspace = page.locator("#main-workspace");
|
||||
for (const [targetX, expectedWidth] of [[250, 400], [1000, 640], [620, 620]]) {
|
||||
const box = (await handle.boundingBox())!;
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(targetX, box.y + box.height / 2);
|
||||
await page.mouse.up();
|
||||
await expect(panel).toHaveCSS("width", `${expectedWidth}px`);
|
||||
await expect.poll(async () => (await workspace.boundingBox())?.x).toBe(expectedWidth);
|
||||
if (expectedWidth === 400) {
|
||||
await page.screenshot({ path: "test-results/agent-history-ui/desktop-resize-minimum.png" });
|
||||
}
|
||||
}
|
||||
await page.setViewportSize({ width: 1024, height: 768 });
|
||||
await expect(panel).toHaveCSS("width", "500px");
|
||||
await expect.poll(async () => (await workspace.boundingBox())?.x).toBe(500);
|
||||
await page.setViewportSize({ width: 1920, height: 1080 });
|
||||
await expect(panel).toHaveCSS("width", "620px");
|
||||
await expect.poll(async () => (await workspace.boundingBox())?.x).toBe(620);
|
||||
});
|
||||
|
||||
test("the map stays painted while the Agent and viewport change size", async ({ page }) => {
|
||||
await mockWorkbenchContext(page);
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await openAgentPanel(page);
|
||||
await page.waitForFunction(() =>
|
||||
Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")) &&
|
||||
!window.__waterNetworkMap?.isMoving()
|
||||
);
|
||||
const initialAlpha = await page.evaluate(() => {
|
||||
const map = window.__waterNetworkMap!;
|
||||
const canvas = map.getCanvas();
|
||||
const gl = canvas.getContext("webgl2") ?? canvas.getContext("webgl");
|
||||
if (!gl) throw new Error("The map has no WebGL context");
|
||||
const pixel = new Uint8Array(4);
|
||||
const readAlpha = () => {
|
||||
gl.readPixels(
|
||||
Math.floor(gl.drawingBufferWidth / 2), Math.floor(gl.drawingBufferHeight / 2),
|
||||
1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel
|
||||
);
|
||||
return pixel[3];
|
||||
};
|
||||
const state = window as typeof window & {
|
||||
__mapResizeProbe?: { samples: number; blankFrames: number; sameMap: boolean };
|
||||
};
|
||||
const probe = { samples: 0, blankFrames: 0, sameMap: true };
|
||||
state.__mapResizeProbe = probe;
|
||||
map.on("resize", () => queueMicrotask(() => {
|
||||
probe.samples += 1;
|
||||
if (readAlpha() === 0) probe.blankFrames += 1;
|
||||
probe.sameMap &&= window.__waterNetworkMap === map;
|
||||
}));
|
||||
map.redraw();
|
||||
return readAlpha();
|
||||
});
|
||||
expect(initialAlpha).toBe(255);
|
||||
const cameraBefore = await readCamera(page);
|
||||
const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
|
||||
const box = (await handle.boundingBox())!;
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(620, box.y + box.height / 2, { steps: 12 });
|
||||
await page.mouse.up();
|
||||
for (const viewport of [
|
||||
{ width: 1280, height: 800 }, { width: 1920, height: 1080 }
|
||||
]) {
|
||||
await page.setViewportSize(viewport);
|
||||
await expect.poll(async () => page.evaluate(() => {
|
||||
const canvas = window.__waterNetworkMap!.getCanvas();
|
||||
return canvas.clientWidth === document.querySelector("#workspace-map")!.clientWidth;
|
||||
})).toBe(true);
|
||||
}
|
||||
const probe = await page.evaluate(() => (window as typeof window & {
|
||||
__mapResizeProbe?: { samples: number; blankFrames: number; sameMap: boolean };
|
||||
}).__mapResizeProbe!);
|
||||
expect(probe.samples).toBeGreaterThan(0);
|
||||
expect(probe.sameMap).toBe(true);
|
||||
expect(probe.blankFrames).toBe(0);
|
||||
await expect.poll(() => readCamera(page)).toEqual(cameraBefore);
|
||||
});
|
||||
|
||||
test("the map canvas follows workspace resizing before the next paint", async ({ page }) => {
|
||||
await mockWorkbenchContext(page);
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await openAgentPanel(page);
|
||||
await page.waitForFunction(() =>
|
||||
Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")) &&
|
||||
!window.__waterNetworkMap?.isMoving()
|
||||
);
|
||||
await page.evaluate(() => {
|
||||
const map = window.__waterNetworkMap!;
|
||||
const container = map.getContainer();
|
||||
const probe = { samples: 0, mismatches: 0, maxWidthDifference: 0 };
|
||||
(window as typeof window & {
|
||||
__mapSizeProbe?: typeof probe;
|
||||
}).__mapSizeProbe = probe;
|
||||
new ResizeObserver(() => queueMicrotask(() => {
|
||||
const difference = Math.abs(container.clientWidth - map.getCanvas().clientWidth);
|
||||
probe.samples += 1;
|
||||
if (difference > 0) probe.mismatches += 1;
|
||||
probe.maxWidthDifference = Math.max(probe.maxWidthDifference, difference);
|
||||
})).observe(container);
|
||||
});
|
||||
const handle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
|
||||
const box = (await handle.boundingBox())!;
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||
await page.mouse.down();
|
||||
for (const width of [620, 420, 600]) {
|
||||
await page.mouse.move(width, box.y + box.height / 2, { steps: 12 });
|
||||
}
|
||||
await page.mouse.up();
|
||||
const probe = await page.evaluate(() => (window as typeof window & {
|
||||
__mapSizeProbe?: { samples: number; mismatches: number; maxWidthDifference: number };
|
||||
}).__mapSizeProbe!);
|
||||
expect(probe.samples).toBeGreaterThan(1);
|
||||
expect(probe.maxWidthDifference).toBe(0);
|
||||
});
|
||||
|
||||
test("the floating condition feed coordinates with the docked Agent", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 1280, height: 900 });
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
|
||||
@@ -311,7 +311,7 @@ test("stream completion and the plan card remain positionally stable", async ({
|
||||
await sendButton.click();
|
||||
const userMessage = page.locator(".agent-panel-user-message");
|
||||
const assistantMessage = page.locator(".agent-panel-message").first();
|
||||
await expect(userMessage).toHaveCSS("background-color", "rgba(224, 229, 249, 0.92)");
|
||||
await expect(userMessage).toHaveCSS("background-color", "oklch(0.965 0.018 255)");
|
||||
expect(
|
||||
await userMessage.evaluate((element) => getComputedStyle(element).backgroundColor)
|
||||
).not.toBe(
|
||||
@@ -319,7 +319,7 @@ test("stream completion and the plan card remain positionally stable", async ({
|
||||
);
|
||||
await expect
|
||||
.poll(() => userMessage.evaluate((element) => getComputedStyle(element).boxShadow))
|
||||
.not.toBe("none");
|
||||
.toBe("none");
|
||||
await expect
|
||||
.poll(() => assistantMessage.evaluate((element) => getComputedStyle(element).boxShadow))
|
||||
.toBe(await userMessage.evaluate((element) => getComputedStyle(element).boxShadow));
|
||||
@@ -331,7 +331,7 @@ test("stream completion and the plan card remain positionally stable", async ({
|
||||
await expect(operationalBrief.getByRole("button", { name: "预览影响" })).toBeDisabled();
|
||||
await expect(operationalBrief.getByRole("button", { name: "检查证据" })).toBeDisabled();
|
||||
await expect(operationalBrief).toHaveCSS("position", "static");
|
||||
await expect(operationalBrief).toHaveCSS("border-radius", "16px");
|
||||
await expect(operationalBrief).toHaveCSS("border-radius", "12px");
|
||||
// Desktop uses an inline brief above the conversation, not the legacy floating overlay.
|
||||
await expect(page.locator(".agent-panel-shell")).toHaveClass(/surface-dock/);
|
||||
await expect(page.locator(".agent-panel-operational-float")).toHaveCount(0);
|
||||
@@ -478,7 +478,14 @@ test("stream completion and the plan card remain positionally stable", async ({
|
||||
await expect(
|
||||
expandedLiveProgress.getByText("正在核对用水过程与供水分区响应关系", { exact: true })
|
||||
).toHaveCSS("white-space", "normal");
|
||||
await expandedLiveProgress.evaluate(async (element) => {
|
||||
const animations = element
|
||||
.getAnimations({ subtree: true })
|
||||
.filter((animation) => animation.effect?.getTiming().iterations !== Infinity);
|
||||
await Promise.all(animations.map((animation) => animation.finished.catch(() => undefined)));
|
||||
});
|
||||
await progressToggle.click();
|
||||
await expect(progressToggle).toHaveAttribute("data-state", "closed");
|
||||
await expect(page.getByRole("list", { name: "最近执行进度" }).locator("li")).toHaveCount(3);
|
||||
|
||||
triggerProgressFailure();
|
||||
@@ -603,7 +610,15 @@ test("stream completion and the plan card remain positionally stable", async ({
|
||||
await page.mouse.wheel(0, -2400);
|
||||
const scrollToLatestButton = page.getByRole("button", { name: "滚动到最新消息" });
|
||||
await expect(scrollToLatestButton).toBeVisible();
|
||||
await expect(scrollToLatestButton).toHaveCSS("background-color", "rgba(255, 255, 255, 0.86)");
|
||||
const scrollButtonBox = (await scrollToLatestButton.boundingBox())!;
|
||||
await page.mouse.move(scrollButtonBox.x + scrollButtonBox.width / 2, scrollButtonBox.y + scrollButtonBox.height / 2);
|
||||
await page.mouse.down();
|
||||
const pressedScrollButtonBox = (await scrollToLatestButton.boundingBox())!;
|
||||
expect(pressedScrollButtonBox.x).toBe(scrollButtonBox.x);
|
||||
expect(pressedScrollButtonBox.y).toBe(scrollButtonBox.y + 1);
|
||||
await page.mouse.move(scrollButtonBox.x - 20, scrollButtonBox.y);
|
||||
await page.mouse.up();
|
||||
await expect(scrollToLatestButton).toHaveCSS("background-color", "rgba(255, 255, 255, 0.94)");
|
||||
await expect
|
||||
.poll(() =>
|
||||
scrollToLatestButton.evaluate((element) => getComputedStyle(element).backdropFilter)
|
||||
@@ -693,10 +708,12 @@ test("stream completion and the plan card remain positionally stable", async ({
|
||||
expect(speechSelectionIconMotion.ySpread).toBeLessThanOrEqual(0.1);
|
||||
const speechSelectionButton = page.getByRole("button", { name: "从这里开始朗读" });
|
||||
await expect(speechSelectionButton).toBeVisible();
|
||||
await expect(speechSelectionButton).toHaveAttribute("data-agent-presentation", "desktop-dock");
|
||||
await expect(speechSelectionButton).toHaveCSS("border-top-width", "0px");
|
||||
expect(await speechSelectionButton.evaluate(readAcrylicMaterial)).toEqual(
|
||||
await scrollToLatestButton.evaluate(readAcrylicMaterial)
|
||||
);
|
||||
await page.screenshot({ path: "test-results/agent-history-ui/desktop-conversation.png" });
|
||||
});
|
||||
|
||||
function createLongMarkdownResponse() {
|
||||
|
||||
@@ -65,6 +65,27 @@ test.describe("Main Frame workbench", () => {
|
||||
});
|
||||
});
|
||||
|
||||
test("map focus keeps pointer interaction borderless and uses the app focus style", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await openWorkbench(page);
|
||||
await openDesktopAgent(page);
|
||||
const canvas = page.locator("#workspace-map .maplibregl-canvas");
|
||||
const box = (await canvas.boundingBox())!;
|
||||
await canvas.click({ position: { x: box.width / 2, y: box.height / 2 } });
|
||||
await expect(canvas).toBeFocused();
|
||||
await expect(canvas).toHaveCSS("outline-style", "none");
|
||||
await expect(canvas).toHaveCSS("border-width", "0px");
|
||||
await expect(page.locator("#main-workspace")).toHaveCSS("border-width", "0px");
|
||||
await page.keyboard.press("Tab");
|
||||
await canvas.focus();
|
||||
expect(await canvas.evaluate((element) => element.matches(":focus-visible"))).toBe(true);
|
||||
await expect(canvas).toHaveCSS("outline-style", "solid");
|
||||
await expect(canvas).toHaveCSS("outline-width", "1px");
|
||||
await expect(canvas).toHaveCSS("outline-color", "rgba(37, 99, 235, 0.34)");
|
||||
await expect(canvas).toHaveCSS("outline-offset", "-1px");
|
||||
await page.screenshot({ path: "test-results/agent-history-ui/map-pointer-focus.png" });
|
||||
});
|
||||
|
||||
test("mobile layer panel keeps Tianditu choices usable", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 812 });
|
||||
await openWorkbench(page);
|
||||
@@ -260,7 +281,8 @@ async function expectDesktopMainFrameGeometry(page: Page) {
|
||||
const mapWindow = page.locator("#workspace-map");
|
||||
const agentPanel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
||||
await expect(agentPanel).toHaveCSS("width", "500px");
|
||||
await expect(agentPanel).toHaveCSS("border-top-right-radius", "16px");
|
||||
await expect(agentPanel).toHaveCSS("border-radius", "0px");
|
||||
await expect(agentPanel).toHaveCSS("border-right-width", "1px");
|
||||
await expect(mapWindow).toHaveCSS("border-radius", "0px");
|
||||
|
||||
const workspaceBox = await workspace.boundingBox();
|
||||
@@ -286,8 +308,8 @@ async function expectSolidMainFrameMaterials(page: Page) {
|
||||
};
|
||||
});
|
||||
expect(materials.agentBackdrop).toBe("none");
|
||||
expect(materials.agentBackground).toBe("oklch(0.965 0.012 248)");
|
||||
expect(materials.agentShadow).not.toBe("none");
|
||||
expect(materials.agentBackground).toBe("oklch(0.972 0.005 250)");
|
||||
expect(materials.agentShadow).toBe("none");
|
||||
}
|
||||
|
||||
async function expectLoadedChineseFont(page: Page) {
|
||||
|
||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 227 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 262 KiB After Width: | Height: | Size: 244 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 112 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 96 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 94 KiB |
Reference in New Issue
Block a user