feat: add workspace layout and window swapping

2026-08-19 13:52:44 +08:00
parent f58e0a70f4
commit 1068304da5
5 changed files with 936 additions and 132 deletions
@@ -92,6 +92,101 @@ test("temporary documents survive a mobile breakpoint round trip", async ({ page
  await expect(page.locator("#workspace-map")).toBeHidden();
 });

+test("layout presets arrange transient windows and keep the map visible", async ({ page }) => {
+  await prepareMainFrame(page);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  const testButton = page.getByRole("button", { name: "测试打开 Agent 多图表窗口" }).first();
+
+  await testButton.click();
+  await testButton.click();
+  await testButton.click();
+  await page.getByRole("button", { name: "设置窗口布局，当前自由排列" }).click();
+  await page.getByRole("menuitemradio", { name: /主次/ }).click();
+
+  const workspace = page.locator("#main-workspace");
+  await expect(workspace).toHaveAttribute("data-layout-mode", "primary");
+  await expect(page.locator("#workspace-map")).toBeVisible();
+  await expect(page.locator("section[aria-label='低压事件调度处置流程']")).toBeVisible();
+  await expect(page.locator("section[aria-label='北辰分区压力异常诊断']")).toBeHidden();
+
+  const workspaceBox = await workspace.boundingBox();
+  const primaryBox = await page.locator("section[aria-label='低压事件调度处置流程']").boundingBox();
+  expect(workspaceBox).not.toBeNull();
+  expect(primaryBox).not.toBeNull();
+  expect(primaryBox!.width).toBeGreaterThan(workspaceBox!.width * 0.6);
+
+  await testButton.click();
+  await expect(page.locator("section[aria-label='北辰分区压力异常诊断']").last()).toBeVisible();
+  const newPrimaryBox = await page.locator("section[aria-label='北辰分区压力异常诊断']").last().boundingBox();
+  expect(newPrimaryBox).not.toBeNull();
+  expect(newPrimaryBox!.width).toBeGreaterThan(workspaceBox!.width * 0.6);
+});
+
+test("dragging a small window onto the primary window swaps their complete slots", async ({ page }) => {
+  await prepareMainFrame(page);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.getByRole("button", { name: "测试打开 Agent 多图表窗口" }).first().click();
+  await page.getByRole("button", { name: "设置窗口布局，当前自由排列" }).click();
+  await page.getByRole("menuitemradio", { name: /主次/ }).click();
+
+  const mapWindow = page.locator("#workspace-map");
+  const analysisWindow = page.locator("section[aria-label='北辰分区压力异常诊断']");
+  const mapBefore = await mapWindow.boundingBox();
+  const analysisBefore = await analysisWindow.boundingBox();
+  expect(mapBefore).not.toBeNull();
+  expect(analysisBefore).not.toBeNull();
+  expect(mapBefore!.width).toBeLessThan(analysisBefore!.width);
+
+  await page.mouse.move(mapBefore!.x + 72, mapBefore!.y + 22);
+  await page.mouse.down();
+  await page.mouse.move(
+    analysisBefore!.x + analysisBefore!.width / 2,
+    analysisBefore!.y + analysisBefore!.height / 2,
+    { steps: 10 }
+  );
+  await expect(page.getByText("释放以交换")).toBeVisible();
+  await page.mouse.up();
+
+  const mapAfter = await mapWindow.boundingBox();
+  const analysisAfter = await analysisWindow.boundingBox();
+  expect(mapAfter).not.toBeNull();
+  expect(analysisAfter).not.toBeNull();
+  expect(mapAfter!.width).toBeGreaterThan(analysisAfter!.width);
+  expect(Math.abs(mapAfter!.x - analysisBefore!.x)).toBeLessThanOrEqual(2);
+  expect(Math.abs(analysisAfter!.x - mapBefore!.x)).toBeLessThanOrEqual(2);
+  await expect(page.getByText("供水管网地图与北辰分区压力异常诊断已交换位置")).toBeAttached();
+});
+
+test("dropping on blank workspace exits auto layout and Escape cancels a drag", async ({ page }) => {
+  await prepareMainFrame(page);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.getByRole("button", { name: "测试打开 Agent 多图表窗口" }).first().click();
+  await page.getByRole("button", { name: "设置窗口布局，当前自由排列" }).click();
+  await page.getByRole("menuitemradio", { name: /双栏/ }).click();
+
+  const workspace = page.locator("#main-workspace");
+  const analysisWindow = page.locator("section[aria-label='北辰分区压力异常诊断']");
+  const before = await analysisWindow.boundingBox();
+  const workspaceBox = await workspace.boundingBox();
+  expect(before).not.toBeNull();
+  expect(workspaceBox).not.toBeNull();
+
+  await page.mouse.move(before!.x + 80, before!.y + 22);
+  await page.mouse.down();
+  await page.mouse.move(workspaceBox!.x + 4, workspaceBox!.y + 4, { steps: 8 });
+  await page.keyboard.press("Escape");
+  await expect(workspace).toHaveAttribute("data-layout-mode", "split");
+  const afterCancel = await analysisWindow.boundingBox();
+  expect(Math.abs(afterCancel!.x - before!.x)).toBeLessThanOrEqual(2);
+
+  await page.mouse.move(before!.x + 80, before!.y + 22);
+  await page.mouse.down();
+  await page.mouse.move(workspaceBox!.x + 4, workspaceBox!.y + 4, { steps: 8 });
+  await page.mouse.up();
+  await expect(workspace).toHaveAttribute("data-layout-mode", "free");
+  await expect(page.getByText("北辰分区压力异常诊断已转为自由排列")).toBeAttached();
+});
+
 async function prepareMainFrame(page: Page) {
  await mockAgentApi(page);
  await page.route("**/runtime-config.js", async (route) => {