规范仿真模型库并完善前端交互

归档仿真模型并补充组件目录、建模规范与校验。

完善控制台、默认节点、视图适配及前端自动化测试。

frontend/tests/e2e/fit-view.spec.ts

@@ -0,0 +1,81 @@
+import { expect, test } from "@playwright/test";
+import {
+  expectAllNodesInsideCanvas,
+  prepareApp,
+  resultSnapshot,
+  wideProject,
+} from "./fixtures";
+
+test("加载本地工程后自动适配建模画布", async ({ page }) => {
+  await prepareApp(page);
+  await page.addInitScript((project) => {
+    window.localStorage.setItem(
+      "system-simulation-flow:project:demo-system",
+      JSON.stringify(project),
+    );
+  }, wideProject);
+
+  await page.goto("/");
+  await page.getByRole("button", { name: "加载工程" }).click();
+
+  await expectAllNodesInsideCanvas(page, ".flow-canvas");
+  const consolePanel = page.getByRole("complementary", {
+    name: "仿真控制台",
+    exact: true,
+  });
+  await expect(consolePanel).not.toContainText("工程已加载");
+  await page.getByRole("button", { name: "展开仿真控制台" }).click();
+  await expect(consolePanel).toContainText("工程已加载");
+});
+
+test("恢复自动保存工程后自动适配建模画布", async ({ page }) => {
+  await prepareApp(page);
+  await page.addInitScript((project) => {
+    window.localStorage.setItem(
+      "system-simulation-flow:autosave",
+      JSON.stringify(project),
+    );
+  }, wideProject);
+
+  await page.goto("/");
+  await page.getByRole("button", { name: "恢复" }).click();
+
+  await expectAllNodesInsideCanvas(page, ".flow-canvas");
+  const consolePanel = page.getByRole("complementary", {
+    name: "仿真控制台",
+    exact: true,
+  });
+  await expect(consolePanel).not.toContainText("已恢复上次自动保存的工程");
+  await page.getByRole("button", { name: "展开仿真控制台" }).click();
+  await expect(consolePanel).toContainText("已恢复上次自动保存的工程");
+});
+
+test("切换到结果页时自动适配只读系统图", async ({ page }) => {
+  await prepareApp(page);
+  await page.addInitScript((snapshot) => {
+    window.sessionStorage.setItem(
+      "system-simulation-flow:latest-result",
+      JSON.stringify(snapshot),
+    );
+  }, resultSnapshot);
+
+  await page.goto("/");
+  await page.getByRole("tab", { name: /^结果/ }).click();
+  await expectAllNodesInsideCanvas(page, ".results-system-canvas");
+  await expect(
+    page.getByRole("complementary", { name: "仿真控制台", exact: true }),
+  ).toHaveCount(0);
+
+  await page.getByRole("tab", { name: "建模" }).click();
+  await expect(
+    page.getByRole("complementary", { name: "仿真控制台", exact: true }),
+  ).toBeVisible();
+  await page.getByRole("tab", { name: /^结果/ }).click();
+  await expectAllNodesInsideCanvas(page, ".results-system-canvas");
+  await expect(
+    page.getByRole("complementary", { name: "仿真控制台", exact: true }),
+  ).toHaveCount(0);
+  await expect(page.locator(".results-system-canvas .react-flow__edge")).toHaveCount(
+    wideProject.edges.length,
+  );
+});

frontend/tests/e2e/fixtures.ts

@@ -0,0 +1,213 @@
+import { expect, type Page } from "@playwright/test";
+
+const physicalPort = (
+  name: string,
+  side: "left" | "right",
+  nominalRole: "inlet" | "outlet" | "bidirectional",
+) => ({
+  name,
+  kind: "physical",
+  domain: "pneumatic",
+  nominalRole,
+  positiveFlowDirection: "intoComponent",
+  side,
+  order: side === "left" ? 0 : 1,
+});
+
+export const componentCatalog = {
+  schemaVersion: 1,
+  libraries: [
+    {
+      id: "e2e-library",
+      label: "自动化测试组件库",
+      version: "1.0.0",
+      sourcePackage: "tests.e2e",
+      temporary: true,
+      order: 1,
+      components: [
+        {
+          type: "generic_sensor",
+          label: "通用测试元件",
+          modelType: "generic_sensor",
+          modelVersion: "1.0.0",
+          symbol: "symbol-not-registered",
+          order: 1,
+          category: {
+            id: "generic",
+            label: "通用组件",
+            order: 1,
+          },
+          ports: [
+            physicalPort("port_a", "left", "bidirectional"),
+            physicalPort("port_b", "right", "bidirectional"),
+          ],
+          parameters: [
+            {
+              name: "gain",
+              label: "增益",
+              quantity: "dimensionless",
+              unit: "",
+              default: 1,
+              minimumExclusive: false,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+const projectPort = (
+  name: string,
+  side: "left" | "right",
+  nominalRole: "inlet" | "outlet" | "bidirectional",
+) => ({
+  name,
+  kind: "physical",
+  domain: "pneumatic",
+  nominalRole,
+  positiveFlowDirection: "intoComponent",
+  side,
+});
+
+export const wideProject = {
+  name: "demo-system",
+  nodes: Array.from({ length: 4 }, (_, index) => ({
+    id: `generic_sensor_${index + 1}`,
+    type: "simulationComponent",
+    position: {
+      x: index * 620,
+      y: index % 2 === 0 ? 0 : 260,
+    },
+    data: {
+      label: `generic_sensor_${index + 1}`,
+      componentType: "generic_sensor",
+      modelType: "generic_sensor",
+      symbol: "symbol-not-registered",
+      ports: [
+        projectPort("port_a", "left", "bidirectional"),
+        projectPort("port_b", "right", "bidirectional"),
+      ],
+      parameters: { gain: 1 },
+      parameterUnits: { gain: "" },
+      rotation: 0,
+      mirrored: false,
+    },
+  })),
+  edges: Array.from({ length: 3 }, (_, index) => ({
+    id: `edge-${index + 1}`,
+    source: `generic_sensor_${index + 1}`,
+    target: `generic_sensor_${index + 2}`,
+    sourceHandle: "port_b",
+    targetHandle: "port_a",
+  })),
+  simulation: {
+    t_start: 0,
+    t_stop: 10,
+    step: 0.1,
+    max_step: 0.05,
+    method: "RK45",
+  },
+};
+
+export const resultSnapshot = {
+  id: "e2e-result",
+  createdAt: "2026-07-28T10:00:00.000Z",
+  project: wideProject,
+  result: {
+    success: true,
+    status: "completed",
+    partial: false,
+    message: "Simulation completed",
+    simulatedUntil: 10,
+    requestedStopTime: 10,
+    variables: [
+      {
+        key: "generic_sensor_1.value",
+        componentId: "generic_sensor_1",
+        componentType: "generic_sensor",
+        scope: "component",
+        portName: null,
+        name: "value",
+        label: "数值",
+        quantity: "dimensionless",
+        unit: "",
+        category: "state",
+        order: 1,
+      },
+    ],
+    final: { "generic_sensor_1.value": 1 },
+    series: {
+      time: [0, 5, 10],
+      "generic_sensor_1.value": [0, 0.5, 1],
+    },
+    diagnostics: {
+      pressureFlow: {
+        solveCount: 3,
+        maxScaledResidual: 0,
+        maxEvaluationsPerSolve: 1,
+      },
+      stream: {
+        maxIterationsPerSolve: 1,
+      },
+      stateCount: 1,
+      sampleCount: 3,
+    },
+  },
+};
+
+export async function prepareApp(page: Page) {
+  await page.addInitScript(() => {
+    window.localStorage.clear();
+    window.sessionStorage.clear();
+    window.location.hash = "#/modeling";
+  });
+  await page.route("**/api/components/catalog", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(componentCatalog),
+    });
+  });
+}
+
+export async function expectAllNodesInsideCanvas(
+  page: Page,
+  canvasSelector: string,
+  expectedCount = wideProject.nodes.length,
+) {
+  const canvas = page.locator(canvasSelector);
+  await expect(canvas).toBeVisible();
+  const nodes = canvas.locator(".react-flow__node");
+  await expect(nodes).toHaveCount(expectedCount);
+
+  await expect
+    .poll(
+      async () =>
+        page.evaluate(
+          ({ selector, count }) => {
+            const canvasElement = document.querySelector<HTMLElement>(selector);
+            const nodeElements = Array.from(
+              canvasElement?.querySelectorAll<HTMLElement>(".react-flow__node") ?? [],
+            );
+            if (!canvasElement || nodeElements.length !== count) {
+              return false;
+            }
+            const canvasBounds = canvasElement.getBoundingClientRect();
+            const tolerance = 3;
+            return nodeElements.every((node) => {
+              const bounds = node.getBoundingClientRect();
+              return (
+                bounds.left >= canvasBounds.left - tolerance &&
+                bounds.top >= canvasBounds.top - tolerance &&
+                bounds.right <= canvasBounds.right + tolerance &&
+                bounds.bottom <= canvasBounds.bottom + tolerance
+              );
+            });
+          },
+          { selector: canvasSelector, count: expectedCount },
+        ),
+      { message: `所有节点应完整显示在 ${canvasSelector} 内` },
+    )
+    .toBe(true);
+}

frontend/tests/e2e/modeling-actions.spec.ts

@@ -0,0 +1,46 @@
+import { expect, test } from "@playwright/test";
+import { prepareApp } from "./fixtures";
+
+test.beforeEach(async ({ page }) => {
+  await prepareApp(page);
+});
+
+test("未知图形元件使用带端口和名称的默认节点，并将动作结果写入控制台", async ({
+  page,
+}) => {
+  await page.goto("/");
+  const paletteItem = page.getByRole("button", { name: /通用测试元件/ });
+  await expect(paletteItem).toBeVisible();
+
+  await paletteItem.dragTo(page.locator(".flow-canvas .react-flow__pane"));
+
+  const node = page.locator('.flow-canvas .react-flow__node[data-id="generic_sensor_1"]');
+  await expect(node).toBeVisible();
+  await expect(node.locator(".sim-node")).toHaveClass(/generic-component/);
+  await expect(node.locator(".node-symbol-anchor")).toHaveCount(0);
+  await expect(node.locator(".node-label")).toHaveText("generic_sensor_1");
+  await expect(node.locator(".port-handle")).toHaveCount(2);
+
+  const consolePanel = page.getByRole("complementary", {
+    name: "仿真控制台",
+    exact: true,
+  });
+  await expect(consolePanel).not.toHaveClass(/has-unread/);
+  await expect(consolePanel.locator(".simulation-console-unread")).toHaveCount(0);
+  await expect(consolePanel).not.toContainText("已添加组件");
+
+  await page.getByRole("button", { name: "生成系统 XML" }).click();
+  await expect(consolePanel).toContainText("XML 已生成");
+  const xmlBlock = consolePanel.getByLabel("生成的系统 XML");
+  await expect(xmlBlock).toBeVisible();
+  await expect(xmlBlock).toContainText('<?xml version="1.0" encoding="UTF-8"?>');
+  await expect(xmlBlock).toContainText('<Component id="generic_sensor_1"');
+  await expect(page.locator(".properties .xml-output")).toHaveCount(0);
+  await expect(page.locator(".properties")).not.toContainText("系统 XML");
+
+  await page.getByRole("button", { name: "检查模型" }).click();
+  await expect(consolePanel).toContainText(/模型检查/);
+  await expect(page.locator(".status-strip")).toHaveCount(0);
+  await expect(page.locator(".validation-section")).toHaveCount(0);
+  await expect(page.locator(".properties")).not.toContainText("仿真结果");
+});