feat: expand intelligent investigation workspace

tests/browser/peripheral-sample-panel.e2e.ts

@@ -1,5 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { mockAgentApi } from "./support/mock-agent-api";
+import { expectThemeColor, readRenderedContrast } from "./support/theme-colors";
 
 test.describe("外围系统", () => {
   test.beforeEach(async ({ page }) => {
@@ -37,7 +38,7 @@ test.describe("外围系统", () => {
     await page.route("http://map.test/**", (route) => route.fulfill({ status: 204 }));
   });
 
-  test("外围面板只读取工单能力，不再请求监测回放与测试数据", async ({ page }) => {
+  test("外围面板只读取工单能力，不再请求监测回放与测试数据", async ({ page }, testInfo) => {
     const requestedPaths: string[] = [];
     await page.route("**/runtime-config.js", (route) =>
       route.fulfill({
@@ -74,7 +75,7 @@ test.describe("外围系统", () => {
         return route.fulfill({
           json: {
             protocol_version: "tjwater-peripheral-sample@1",
-            origin: "synthetic",
+            origin: "system_data",
             project_id: projectId,
             user_id: "50000000-0000-4000-8000-000000000001",
             can_write: true,
@@ -99,13 +100,19 @@ test.describe("外围系统", () => {
     await page.getByRole("button", { name: "外围系统", exact: true }).click();
     const panel = page.getByRole("complementary", { name: "外围系统" });
     await expect(panel).toBeVisible();
-    await expect(panel.getByText("工单接口测试", { exact: true })).toBeVisible();
+    await expect(panel.getByText("工单管理", { exact: true })).toBeVisible();
+    await expect(panel.getByText("外围工单系统", { exact: true })).toBeVisible();
+    await expect(panel.getByText("合成工单环境", { exact: true })).toHaveCount(0);
     await expect(panel.getByText("历史监测回放", { exact: true })).toHaveCount(0);
     await expect(panel.getByText("测试数据", { exact: true })).toHaveCount(0);
     const appointmentList = panel.getByLabel("预约工单列表");
     const complaintList = panel.getByLabel("投诉工单列表");
     const burstList = panel.getByLabel("爆管上报工单列表");
     await expect(appointmentList).toContainText("合成通信核查");
+    await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
+    await testInfo.attach("peripheral-work-orders", {
+      body: await page.screenshot({ path: testInfo.outputPath("work-orders.png") }), contentType: "image/png"
+    });
     await expect(appointmentList).toContainText("合成压力偏差复核");
     await expect(appointmentList).toContainText("合成零流量样本确认");
     await expect(appointmentList).toContainText("待处理");
@@ -113,6 +120,11 @@ test.describe("外围系统", () => {
     await expect(appointmentList).toContainText("已完成");
     await expect(appointmentList.getByText("工单报告", { exact: true })).toHaveCount(3);
     await expect(appointmentList.getByText("暂无现场反馈", { exact: true })).toHaveCount(3);
+    const appointmentDetails = appointmentList.getByLabel("工单详情 合成通信核查", { exact: true });
+    await expect(appointmentDetails.getByText("工单报告", { exact: true })).toBeHidden();
+    await appointmentDetails.locator(":scope > summary").click();
+    await expect(appointmentDetails.getByText("工单报告", { exact: true })).toBeVisible();
+    await appointmentDetails.locator(":scope > summary").click();
     await expect(complaintList).toContainText("水质投诉：演示小区");
     await expect(complaintList.getByRole("region", { name: "投诉工单信息" })).toContainText("发生时间");
     await expect(complaintList.getByText("工单报告", { exact: true })).toHaveCount(0);
@@ -142,7 +154,7 @@ test.describe("外围系统", () => {
     await expect(
       page
         .getByRole("complementary", { name: "外围系统" })
-        .getByText("仅用于验证外围工单接口与同步过程，不代表真实现场处置", { exact: true })
+        .getByText("录入业务工单并跟踪处理反馈，事件调查依据实际查询和现场记录开展。", { exact: true })
         .last()
     ).toBeVisible();
     await expect(page.getByText(/当前不会连接外围工单服务/)).toBeVisible();
@@ -167,7 +179,7 @@ test.describe("外围系统", () => {
       const request = route.request();
       const path = new URL(request.url()).pathname;
       if (path.endsWith("/context")) return route.fulfill({ json: {
-        protocol_version: "tjwater-peripheral-sample@1", origin: "synthetic", project_id: projectId,
+        protocol_version: "tjwater-peripheral-sample@1", origin: "system_data", project_id: projectId,
         user_id: "50000000-0000-4000-8000-000000000001", can_write: true,
         scenarios: ["normal"], managed_resources: { work_orders: "available", test_data: "available" },
         state_transitions: { pending: [], processing: [], pending_review: [], completed: [] }
@@ -183,7 +195,7 @@ test.describe("外围系统", () => {
           record_id: "50000000-0000-4000-8000-000000000017",
           project_id: projectId,
           revision: 1,
-          origin: "synthetic",
+          origin: body.origin,
           created_at: "2026-10-22T02:03:01Z",
           updated_at: "2026-10-22T02:03:01Z",
           created_by: "tester",
@@ -244,6 +256,11 @@ test.describe("外围系统", () => {
     await expect(panel.getByLabel("SCADA 最新数据概览")).toContainText(/1\s*\/\s*2 个设备/);
     expect(latestRequests).toEqual(["324ff7ee-c2d4-5184-a84b-48fb14a2933e"]);
 
+    await expect(panel.getByPlaceholder("输入需要演练的异常值")).toHaveCount(0);
+    await testInfo.attach("scada-overview", {
+      body: await page.screenshot({ path: testInfo.outputPath("scada-overview.png") }), contentType: "image/png"
+    });
+
     await panel.getByRole("textbox", { name: "筛选 SCADA 设备" }).fill("pressure");
     await expect(panel.getByText("PRESSURE-17", { exact: true })).toBeVisible();
     await expect(panel.getByText("FLOW-09", { exact: true })).toHaveCount(0);
@@ -255,12 +272,14 @@ test.describe("外围系统", () => {
       await panel.getByPlaceholder("输入需要演练的异常值").scrollIntoViewIfNeeded();
       expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
       await testInfo.attach(`scada-peripheral-anomaly-${width}`, {
-        body: await page.screenshot(),
+        body: await page.screenshot({ path: testInfo.outputPath(`scada-${width}.png`) }),
         contentType: "image/png"
       });
     }
     await panel.getByPlaceholder("输入需要演练的异常值").fill("0.08");
     await panel.getByPlaceholder("例如：压力突降，偏离近一小时稳定区间").fill("压力突降");
+    await expectThemeColor(panel.getByPlaceholder("输入需要演练的异常值"), "color", "--ink");
+    await expectThemeColor(panel.getByPlaceholder("例如：压力突降，偏离近一小时稳定区间"), "color", "--ink");
     await panel.getByRole("button", { name: "保存模拟读数", exact: true }).click();
     await expect(panel.getByLabel("SCADA 模拟异常列表")).toContainText("PRESSURE-17");
     await expect(panel.getByLabel("SCADA 模拟异常列表")).toContainText("0.08 MPa");
@@ -272,7 +291,7 @@ test.describe("外围系统", () => {
     });
   });
 
-  test("管理面板打开时阻止地图接收鼠标行为", async ({ page }) => {
+  test("项目分析成果打开时保留地图遮挡", async ({ page }) => {
     await page.goto("/");
 
     await page.locator(".maplibregl-canvas-container").evaluate((element) => {
@@ -317,11 +336,6 @@ test.describe("外围系统", () => {
         .toEqual([]);
     };
 
-    await page.getByRole("button", { name: "外围系统", exact: true }).click();
-    await expect(page.getByRole("complementary", { name: "外围系统" })).toBeVisible();
-    await expectMapInteractionBlocked("外围系统");
-    await page.getByRole("button", { name: "外围系统", exact: true }).click();
-
     await page.getByRole("button", { name: "项目分析成果" }).click();
     await expect(page.getByRole("complementary", { name: "项目分析成果" })).toBeVisible();
     await expectMapInteractionBlocked("项目分析成果");
@@ -345,7 +359,7 @@ test.describe("外围系统", () => {
         return route.fulfill({ status: 503, json: {} });
       }
       if (path.endsWith("/context")) return route.fulfill({ json: {
-        protocol_version: "tjwater-peripheral-sample@1", origin: "synthetic", project_id: projectId,
+        protocol_version: "tjwater-peripheral-sample@1", origin: "system_data", project_id: projectId,
         user_id: "50000000-0000-4000-8000-000000000001", can_write: true,
         scenarios: ["normal"], managed_resources: {
           work_orders: "not_configured", test_data: "not_configured"
@@ -366,7 +380,7 @@ test.describe("外围系统", () => {
     await page.goto("/");
     await page.getByRole("button", { name: "外围系统" }).click();
     const panel = page.getByRole("complementary", { name: "外围系统" });
-    await expect(panel.getByText("测试工单存储待供给", { exact: true })).toBeVisible();
+    await expect(panel.getByText("工单服务未就绪", { exact: true })).toBeVisible();
     await expect(panel.getByText("测试数据存储待供给", { exact: true })).toHaveCount(0);
     await expect(panel.getByText("历史监测回放", { exact: true })).toHaveCount(0);
     expect(managedRequests).toEqual([]);
@@ -387,7 +401,7 @@ test.describe("外围系统", () => {
       const url = new URL(request.url());
       const path = url.pathname;
       const now = "2026-09-18T00:00:00Z";
-      if (path.endsWith("/context")) return route.fulfill({ json: { protocol_version: "tjwater-peripheral-sample@1", origin: "synthetic", project_id: projectId, user_id: "50000000-0000-4000-8000-000000000001", can_write: true, scenarios: ["normal"], managed_resources: { work_orders: "available", test_data: "available" }, state_transitions: { pending: ["processing"], processing: ["pending_review"], pending_review: ["processing", "completed"], completed: [] } } });
+      if (path.endsWith("/context")) return route.fulfill({ json: { protocol_version: "tjwater-peripheral-sample@1", origin: "system_data", project_id: projectId, user_id: "50000000-0000-4000-8000-000000000001", can_write: true, scenarios: ["normal"], managed_resources: { work_orders: "available", test_data: "available" }, state_transitions: { pending: ["processing"], processing: ["pending_review"], pending_review: ["processing", "completed"], completed: [] } } });
       if (path.endsWith("/work-orders") && request.method() === "GET") return route.fulfill({ json: { items: workOrders, next_cursor: null } });
       if (path.endsWith("/work-orders") && request.method() === "POST") {
         const body = request.postDataJSON();
@@ -397,7 +411,7 @@ test.describe("外围系统", () => {
           : body.work_order_type === "burst_report"
             ? "爆管上报工单已创建。"
             : "预约工单已创建。";
-        const item = { ...body, work_order_id: "50000000-0000-4000-8000-000000000001", project_id: projectId, revision: 1, origin: "synthetic", created_at: now, updated_at: now, created_by: "tester", updated_by: "tester", activity: [{ sequence: 1, occurred_at: now, actor: "tester", kind: "created", title: "工单创建", detail: createdDetail }] };
+        const item = { ...body, work_order_id: "50000000-0000-4000-8000-000000000001", project_id: projectId, revision: 1, origin: body.origin, created_at: now, updated_at: now, created_by: "tester", updated_by: "tester", activity: [{ sequence: 1, occurred_at: now, actor: "tester", kind: "created", title: "工单创建", detail: createdDetail }] };
         delete item.request_id; workOrders = [item]; return route.fulfill({ status: 201, json: item });
       }
       if (path.includes("/work-orders/") && request.method() === "PATCH") {
@@ -419,7 +433,9 @@ test.describe("外围系统", () => {
     await page.goto("/");
     await page.getByRole("button", { name: "外围系统" }).click();
     const panel = page.getByRole("complementary", { name: "外围系统" });
-    await expect(panel.getByText("工单接口测试", { exact: true })).toBeVisible();
+    await expect(panel.getByText("工单管理", { exact: true })).toBeVisible();
+    await expect(panel.getByText("外围工单系统", { exact: true })).toBeVisible();
+    await expect(panel.getByText("合成工单环境", { exact: true })).toHaveCount(0);
     await expect(panel.getByLabel("预约工单列表")).toContainText("暂无预约工单");
     await expect(panel.getByLabel("投诉工单列表")).toContainText("暂无投诉工单");
     await expect(panel.getByRole("textbox", { name: "标题" })).toBeHidden();
@@ -430,6 +446,22 @@ test.describe("外围系统", () => {
     await editor.getByRole("textbox", { name: "负责人", exact: true }).fill("测试班组甲");
     await editor.getByRole("textbox", { name: "位置", exact: true }).fill("联调测试点西侧");
     await editor.getByRole("textbox", { name: "场景编号" }).fill("APPOINTMENT-TEST-001");
+    // Portaled calendar and select menus keep the solid panel theme and keyboard focus.
+    await editor.getByRole("button", { name: "预约时间", exact: true }).click();
+    const calendar = page.getByRole("dialog", { name: "选择预约时间", exact: true });
+    await expect(calendar).toBeVisible();
+    await expectThemeColor(calendar.getByRole("textbox", { name: "年份", exact: true }), "color", "--ink");
+    await expect(calendar).toHaveCSS("background-color", "rgb(255, 255, 255)");
+    await calendar.getByRole("combobox", { name: "月份", exact: true }).click();
+    await expect(page.getByRole("listbox")).toHaveCSS("background-color", "rgb(255, 255, 255)");
+    await page.keyboard.press("Escape");
+    await expect(calendar.getByRole("combobox", { name: "月份", exact: true })).toBeFocused();
+    await testInfo.attach("peripheral-calendar", {
+      body: await page.screenshot({ path: testInfo.outputPath("peripheral-calendar.png") }),
+      contentType: "image/png"
+    });
+    await page.keyboard.press("Escape");
+    await expect(editor.getByRole("button", { name: "预约时间", exact: true })).toBeFocused();
     await editor.getByRole("textbox", { name: "回执要求（每行一项）" }).fill("回传现场处理结果\n上传照片");
     await editor.getByRole("button", { name: "创建预约工单" }).click();
     await expect(panel.getByText("合成预约维修", { exact: true })).toBeVisible();
@@ -444,6 +476,20 @@ test.describe("外围系统", () => {
     await panel.getByRole("button", { name: "编辑工单 合成预约维修" }).click();
     editor = panel.getByRole("region", { name: "编辑工单 合成预约维修" });
     await expect(panel.getByLabel("预约工单列表").getByRole("region", { name: "编辑工单 合成预约维修" })).toBeVisible();
+    await testInfo.attach("work-order-editor-text", {
+      body: await editor.screenshot({ path: testInfo.outputPath("work-order-editor.png") }), contentType: "image/png"
+    });
+    console.log("work-order-title-contrast", await readRenderedContrast(editor.getByRole("textbox", { name: "标题" })));
+    for (const field of await editor.getByRole("textbox").all()) {
+      await expectThemeColor(field, "color", "--ink");
+      await expect(field).toHaveCSS("opacity", "1");
+    }
+    await page.setViewportSize({ width: 375, height: 900 });
+    await testInfo.attach("work-order-editor-text-narrow", {
+      body: await editor.screenshot({ path: testInfo.outputPath("work-order-editor-375.png") }), contentType: "image/png"
+    });
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(375);
+    await page.setViewportSize({ width: 1440, height: 900 });
     await expect(editor.locator("xpath=ancestor::article")).toContainText("合成预约维修");
     await expect(editor.getByRole("textbox", { name: "标题" })).toBeFocused();
     await expect(panel.getByRole("button", { name: "编辑工单 合成预约维修" })).toHaveCount(0);
@@ -469,7 +515,7 @@ test.describe("外围系统", () => {
     expect(workOrders[0]).toMatchObject({ work_order_type: "general", scenario_code: "APPOINTMENT-TEST-001" });
 
     workOrders = [{ ...workOrders[0], title: "外部系统更新后的预约维修", revision: 3 }];
-    await panel.getByRole("button", { name: "刷新外围工单" }).click();
+    await panel.getByRole("button", { name: "刷新工单" }).click();
     await expect(panel.getByText("外部系统更新后的预约维修", { exact: true })).toBeVisible();
     await panel.getByRole("button", { name: "编辑工单 外部系统更新后的预约维修" }).click();
     const refreshedEditor = panel.getByRole("region", { name: "编辑工单 外部系统更新后的预约维修" });
@@ -483,7 +529,7 @@ test.describe("外围系统", () => {
       await refreshedEditor.locator("xpath=ancestor::article").evaluate((element) => element.scrollIntoView({ block: "start" }));
       expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
       await testInfo.attach(`peripheral-work-order-process-${width}`, {
-        body: await page.screenshot({ path: `/tmp/tjwater-operational-ui-review/peripheral-work-order-edit-${width}.png` }),
+        body: await page.screenshot({ path: testInfo.outputPath(`peripheral-work-order-edit-${width}.png`) }),
         contentType: "image/png"
       });
     }
@@ -527,13 +573,16 @@ test.describe("外围系统", () => {
     await page.getByRole("option", { name: "爆管上报", exact: true }).click();
     await panel.getByRole("textbox", { name: "事件位置" }).fill("演示路与样板路交叉口");
     await panel.getByRole("textbox", { name: "现场描述" }).fill("路面积水并伴随压力突降");
+    await expectThemeColor(panel.getByRole("textbox", { name: "事件位置" }), "color", "--ink");
+    await expectThemeColor(panel.getByRole("textbox", { name: "现场描述" }), "color", "--ink");
     await panel.getByRole("button", { name: "创建事件工单" }).click();
     await expect(panel.getByText("爆管上报工单", { exact: true }).last()).toBeVisible();
     await expect(panel.getByLabel("爆管上报工单列表")).toContainText("爆管上报：演示路与样板路交叉口");
     await expect(panel.getByLabel("爆管上报工单列表")).toContainText("爆管上报工单已创建。");
     expect(workOrders[0]).toMatchObject({
       work_order_type: "burst_report",
-      scenario_code: "BURST-REPORT-001",
+      scenario_code: null,
+      origin: "system_data",
       title: "爆管上报：演示路与样板路交叉口",
       status: "open",
       priority: "urgent"
@@ -541,6 +590,59 @@ test.describe("外围系统", () => {
 
   });
 
+  for (const [kind, label] of [["water_quality_complaint", "水质投诉"], ["burst_report", "爆管上报"]]) {
+    test(`${label}业务录入使用真实来源且不附加演练场景`, async ({ page }) => {
+      const projectId = "324ff7ee-c2d4-5184-a84b-48fb14a2933e";
+      const orders: Record<string, unknown>[] = [];
+      await page.route("**/runtime-config.js", (route) => route.fulfill({
+        contentType: "text/javascript",
+        body: `globalThis.__TJWATER_CONFIG__=${JSON.stringify({
+          TJWATER_AUTH_MODE: "disabled", TJWATER_SERVER_API_BASE_URL: "http://server.test",
+          TJWATER_PERIPHERAL_SAMPLE_API_BASE_URL: "http://peripheral.test"
+        })}`
+      }));
+      await page.route("http://peripheral.test/api/sample/v1/**", async (route) => {
+        const request = route.request();
+        const path = new URL(request.url()).pathname;
+        if (path.endsWith("/context")) return route.fulfill({ json: {
+          protocol_version: "tjwater-peripheral-sample@1", origin: "system_data", project_id: projectId,
+          user_id: "50000000-0000-4000-8000-000000000001", can_write: true, scenarios: ["normal"],
+          managed_resources: { work_orders: "available", test_data: "available" }, state_transitions: {}
+        } });
+        if (path.endsWith("/work-orders") && request.method() === "POST") {
+          const body = request.postDataJSON() as Record<string, unknown>;
+          expect(body).toMatchObject({ work_order_type: kind, origin: "system_data", scenario_code: null });
+          const order = { ...body, work_order_id: "50000000-0000-4000-8000-000000000001",
+            project_id: projectId, revision: 1, created_at: "2026-10-29T01:00:00Z", updated_at: "2026-10-29T01:00:00Z",
+            created_by: "operator", updated_by: "operator", activity: [] };
+          delete order.request_id;
+          orders.push(order);
+          return route.fulfill({ status: 201, json: order });
+        }
+        if (path.endsWith("/work-orders")) return route.fulfill({ json: { items: orders, next_cursor: null } });
+        return route.fulfill({ status: 404, json: {} });
+      });
+      // Keep this check bounded to peripheral intake; investigation presentation has separate coverage.
+      await page.route("http://server.test/api/v1/operational-tasks", (route) =>
+        route.fulfill({ status: 503, json: { detail: "investigation unavailable in intake test" } }));
+      await page.goto("/");
+      await page.getByRole("button", { name: "外围系统", exact: true }).click();
+      const panel = page.getByRole("complementary", { name: "外围系统" });
+      await panel.getByRole("button", { name: "投诉与爆管上报" }).click();
+      if (kind === "burst_report") {
+        await panel.getByRole("combobox", { name: "事件类型" }).click();
+        await page.getByRole("option", { name: label, exact: true }).click();
+      }
+      await panel.getByRole("textbox", { name: "事件位置" }).fill("供水小区");
+      await panel.getByRole("textbox", { name: "现场描述" }).fill("用户上报异常，待实际数据核查");
+      await panel.getByRole("button", { name: "创建事件工单" }).click();
+      await expect(panel.getByRole("heading", { name: `${label}：供水小区`, exact: true })).toBeVisible();
+      await expect(panel.getByText("工单已创建，调查任务待触发", { exact: true })).toBeVisible();
+      await expect(panel.getByText("合成工单环境", { exact: true })).toHaveCount(0);
+      expect(orders).toHaveLength(1);
+    });
+  }
+
   test("创建水质投诉工单后进入结构化工况任务并由用户打开 Agent", async ({ page }, testInfo) => {
     test.setTimeout(90_000);
     const projectId = "324ff7ee-c2d4-5184-a84b-48fb14a2933e";
@@ -601,7 +703,7 @@ test.describe("外围系统", () => {
       const request = route.request();
       const path = new URL(request.url()).pathname;
       if (path.endsWith("/context")) return route.fulfill({ json: {
-        protocol_version: "tjwater-peripheral-sample@1", origin: "synthetic",
+        protocol_version: "tjwater-peripheral-sample@1", origin: "system_data",
         project_id: projectId, user_id: "50000000-0000-4000-8000-000000000001",
         can_write: true, scenarios: ["normal"],
         managed_resources: { work_orders: "available", test_data: "available" },
@@ -618,7 +720,7 @@ test.describe("外围系统", () => {
           work_order_id: workOrderId,
           project_id: projectId,
           revision: 1,
-          origin: "synthetic",
+          origin: body.origin,
           created_at: "2026-09-22T02:00:00Z",
           updated_at: "2026-09-22T02:00:00Z",
           created_by: "tester",
@@ -782,7 +884,8 @@ test.describe("外围系统", () => {
     await expect(page.getByRole("complementary", { name: "Agent 命令面板" })).toBeVisible();
     expect(workOrders[0]).toMatchObject({
       work_order_type: "water_quality_complaint",
-      scenario_code: "WQ-SECONDARY-SUPPLY-001",
+      scenario_code: null,
+      origin: "system_data",
       status: "open"
     });
     expect(agentRequests.filter((body) => "trigger_context" in body)).toHaveLength(0);