feat: expand intelligent investigation workspace

2026-10-30 17:30:19 +08:00
parent ddd03dbff6
commit c0e4231b83
223 changed files with 13155 additions and 5304 deletions
@@ -0,0 +1,68 @@
+import { expect, test } from "@playwright/test";
+import { mockAgentApi } from "./support/mock-agent-api";
+import { mockWorkbenchContext } from "./support/mock-workbench-context";
+
+for (const kind of ["peripheral", "dev"] as const) {
+  test(`${kind} panel keeps outside clicks, dragging and wheel navigation available`, async ({ page }) => {
+    await mockWorkbenchContext(page);
+    await mockAgentApi(page);
+    await page.route("**/runtime-config.js", (route) => route.fulfill({
+      contentType: "application/javascript",
+      body: `globalThis.__TJWATER_CONFIG__ = ${JSON.stringify({
+        TJWATER_AUTH_MODE: "disabled", TJWATER_ENABLE_DEV_PANEL: "true",
+        TJWATER_SERVER_API_BASE_URL: "https://tjwater-api.invalid",
+        TJWATER_AGENT_URL: "http://127.0.0.1:8787",
+        TJWATER_MAP_URL: "https://workbench-map.invalid/geoserver",
+        TJWATER_GEOSERVER_WORKSPACE: "tjwater_next",
+        TJWATER_MAPBOX_ACCESS_TOKEN: "", TJWATER_TIANDITU_TOKEN: "", TJWATER_ENABLE_MSW: "false"
+      })};`
+    }));
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    await page.waitForFunction(() => Boolean(window.__waterNetworkMap));
+    const trigger = page.getByRole("button", { name: kind === "peripheral" ? "外围系统" : "切换地图 Dev Panel", exact: true });
+    await trigger.click();
+    const panel = page.getByRole("complementary", { name: kind === "peripheral" ? "外围系统" : "地图开发面板", exact: true });
+    await expect(panel).toBeVisible();
+    await page.locator(".maplibregl-canvas-container").evaluate((element) => {
+      element.setAttribute("data-pointer-probe", "0");
+      for (const type of ["pointerdown", "wheel"]) element.addEventListener(type, () => {
+        element.setAttribute("data-pointer-probe", String(Number(element.getAttribute("data-pointer-probe")) + 1));
+      }, true);
+    });
+    // Controls inside a floating panel consume their own pointer input.
+    const heading = panel.getByRole("heading", { level: 2 });
+    await heading.click();
+    await page.mouse.wheel(0, 100);
+    await expect(page.locator(".maplibregl-canvas-container")).toHaveAttribute("data-pointer-probe", "0");
+
+    const canvas = page.locator(".maplibregl-canvas");
+    const bounds = (await canvas.boundingBox())!;
+    const point = { x: bounds.x + 150, y: bounds.y + 340 };
+    await expect.poll(() => page.evaluate(({ x, y }) => document.elementFromPoint(x, y)?.classList.contains("maplibregl-canvas") ?? false, point)).toBe(true);
+    await page.mouse.click(point.x, point.y);
+    await expect(page.locator(".maplibregl-canvas-container")).toHaveAttribute("data-pointer-probe", "1");
+    const center = await page.evaluate(() => window.__waterNetworkMap!.getCenter().toArray());
+    await page.mouse.move(point.x, point.y);
+    await page.mouse.down();
+    await page.mouse.move(point.x + 100, point.y + 30, { steps: 8 });
+    await page.mouse.up();
+    await expect.poll(() => page.evaluate(() => window.__waterNetworkMap!.getCenter().toArray())).not.toEqual(center);
+    const zoom = await page.evaluate(() => window.__waterNetworkMap!.getZoom());
+    await page.mouse.wheel(0, -200);
+    await expect.poll(() => page.evaluate(() => window.__waterNetworkMap!.getZoom())).toBeGreaterThan(zoom);
+    await expect(panel).toBeVisible();
+    await expect(trigger).toHaveAttribute("aria-pressed", "true");
+    // Opening and closing the other panel must not leave an invisible input shield.
+    if (kind === "dev") {
+      await page.getByRole("button", { name: "外围系统", exact: true }).click();
+      await expect.poll(() => page.evaluate(({ x, y }) => document.elementFromPoint(x, y)?.classList.contains("maplibregl-canvas") ?? false, point)).toBe(true);
+      await page.getByRole("button", { name: "关闭外围系统", exact: true }).click();
+      await panel.getByRole("tab", { name: "地图调试", exact: true }).click();
+      await expect(panel.getByRole("button", { name: "定位并高亮", exact: true })).toBeEnabled();
+    }
+    await panel.getByRole("button", { name: kind === "peripheral" ? "关闭外围系统" : "关闭 Dev Panel", exact: true }).click();
+    await expect(panel).toBeHidden();
+    await expect.poll(() => page.evaluate(({ x, y }) => document.elementFromPoint(x, y)?.classList.contains("maplibregl-canvas") ?? false, point)).toBe(true);
+  });
+}