feat: extend supply workbench demo and map navigation

tests/browser/workbench-visual.e2e.ts

@@ -44,6 +44,35 @@ test.describe("Main Frame workbench", () => {
     });
   });
 
+  test("desktop selector switches Tianditu vector and imagery layer pairs", async ({ page }) => {
+    await page.setViewportSize({ width: 1280, height: 800 });
+    await openWorkbench(page);
+
+    await selectBasemap(page, "天地图矢量");
+    await expectBaseLayerVisibility(page, {
+      "tianditu-vector": "visible",
+      "tianditu-vector-annotation": "visible",
+      "tianditu-image": "none",
+      "tianditu-image-annotation": "none"
+    });
+
+    await selectBasemap(page, "天地图影像");
+    await expectBaseLayerVisibility(page, {
+      "tianditu-vector": "none",
+      "tianditu-vector-annotation": "none",
+      "tianditu-image": "visible",
+      "tianditu-image-annotation": "visible"
+    });
+  });
+
+  test("mobile layer panel keeps Tianditu choices usable", async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 812 });
+    await openWorkbench(page);
+    await selectBasemap(page, "天地图矢量");
+
+    await expect(page.locator("main")).toHaveAttribute("data-basemap-tone", "light");
+  });
+
   test("wide desktop expands the map document when Agent is collapsed", async ({ page }) => {
     await page.setViewportSize({ width: 1920, height: 1080 });
     await openWorkbench(page);
@@ -58,7 +87,9 @@ test.describe("Main Frame workbench", () => {
     await page.getByRole("button", { name: "折叠 Agent 面板" }).click();
     await expect(page.getByLabel("Agent 折叠栏")).toBeVisible();
     await expect.poll(async () => Math.round((await workspace.boundingBox())?.x ?? 0)).toBe(0);
-    await expect.poll(async () => Math.round((await workspace.boundingBox())?.width ?? 0)).toBe(1920);
+    await expect
+      .poll(async () => Math.round((await workspace.boundingBox())?.width ?? 0))
+      .toBe(1920);
     expect((await workspace.boundingBox())!.width).toBeGreaterThan(expandedWorkspace!.width);
     await expect(page).toHaveScreenshot("workbench-desktop-wide-max-agent.png", {
       animations: "disabled",
@@ -123,6 +154,7 @@ async function prepareDeterministicWorkbench(page: Page) {
       body: `globalThis.__TJWATER_CONFIG__ = {
         TJWATER_AUTH_MODE: "disabled",
         TJWATER_MAPBOX_ACCESS_TOKEN: "visual-test-token",
+        TJWATER_TIANDITU_TOKEN: "visual-test-tianditu-token",
         TJWATER_MAP_URL: "https://visual-map.invalid/geoserver",
         TJWATER_GEOSERVER_WORKSPACE: "tjwater_next",
         TJWATER_SERVER_API_BASE_URL: "https://tjwater-api.invalid",
@@ -135,6 +167,9 @@ async function prepareDeterministicWorkbench(page: Page) {
   await page.route("https://api.mapbox.com/**", async (route) => {
     await route.fulfill({ contentType: "image/png", body: EMPTY_RASTER_TILE });
   });
+  await page.route("https://t0.tianditu.gov.cn/**", async (route) => {
+    await route.fulfill({ contentType: "image/png", body: EMPTY_RASTER_TILE });
+  });
   await page.route("https://visual-map.invalid/**", async (route) => {
     await route.fulfill({
       contentType: "application/vnd.mapbox-vector-tile",
@@ -182,19 +217,39 @@ async function openWorkbench(page: Page) {
   await page.evaluate(async () => {
     await document.fonts.ready;
   });
-  await page.waitForFunction(() => Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")));
+  await page.waitForFunction(() =>
+    Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit"))
+  );
 }
 
-async function selectBasemap(page: Page, label: "浅色" | "影像") {
+type BasemapLabel = "浅色" | "影像" | "天地图矢量" | "天地图影像";
+
+async function selectBasemap(page: Page, label: BasemapLabel) {
   await page.getByRole("button", { name: /图层：管理地图图层/ }).click();
   await page.getByRole("button", { name: label, exact: true }).click();
   await page.getByRole("button", { name: /图层：管理地图图层/ }).click();
   await expect(page.locator("main")).toHaveAttribute(
     "data-basemap-tone",
-    label === "影像" ? "satellite" : "light"
+    ["影像", "天地图影像"].includes(label) ? "satellite" : "light"
   );
 }
 
+async function expectBaseLayerVisibility(page: Page, expected: Record<string, "visible" | "none">) {
+  await expect
+    .poll(async () =>
+      page.evaluate((layerIds) => {
+        const map = window.__waterNetworkMap;
+        return Object.fromEntries(
+          layerIds.map((layerId) => [
+            layerId,
+            map?.getLayoutProperty(layerId, "visibility") ?? "visible"
+          ])
+        );
+      }, Object.keys(expected))
+    )
+    .toEqual(expected);
+}
+
 async function openDesktopAgent(page: Page) {
   await page.getByRole("button", { name: /展开 Agent 助手面板/ }).click();
   await expect(page.getByRole("complementary", { name: "Agent 命令面板" })).toBeVisible();