完善建模交互、组件图标与系统协议

frontend/tests/e2e/palette-display.spec.ts

@@ -28,18 +28,116 @@ async function expectFixedIconCardSize(
   expect(iconBox!.height).toBeLessThanOrEqual(49);
 }
 
-test("组件库可切换详细与仅图标显示，并在刷新后保留选择", async ({ page }) => {
+test("组件库标题、库分组和类别分组保持清晰的三级字号", async ({ page }) => {
+  await page.goto("/");
+
+  const paletteTitle = page.locator(".palette-panel-title > span");
+  const libraryTitle = page.locator(".palette-library-heading strong").first();
+  const categoryTitle = page.locator(".palette-category-title > span").first();
+
+  await expect(paletteTitle).toHaveCSS("font-size", "16px");
+  await expect(paletteTitle).toHaveCSS("font-weight", "700");
+  await expect(libraryTitle).toHaveCSS("font-size", "14px");
+  await expect(libraryTitle).toHaveCSS("font-weight", "700");
+  await expect(categoryTitle).toHaveCSS("font-size", "12px");
+  await expect(categoryTitle).toHaveCSS("font-weight", "600");
+
+  const [paletteSize, librarySize, categorySize] = await Promise.all(
+    [paletteTitle, libraryTitle, categoryTitle].map((locator) =>
+      locator.evaluate((element) => parseFloat(getComputedStyle(element).fontSize)),
+    ),
+  );
+  expect(paletteSize).toBeGreaterThan(librarySize);
+  expect(librarySize).toBeGreaterThan(categorySize);
+});
+
+test("组件目录成功时显示绿色状态且隐藏临时测试组件库", async ({ page }) => {
+  await page.goto("/");
+
+  const status = page.locator(".catalog-source");
+  await expect(status).toHaveClass(/ready/);
+  await expect(status).toHaveText("已加载 1 个组件库");
+  await expect(status).toHaveAttribute("title", "已加载 1 个组件库");
+  await expect(status.locator(".catalog-source-dot")).toHaveCSS(
+    "background-color",
+    "rgb(25, 135, 84)",
+  );
+  await expect(page.getByText("临时测试组件库", { exact: true })).toHaveCount(0);
+  await expect(
+    page.getByRole("button", { name: "自动化测试组件库", exact: true }),
+  ).toBeVisible();
+});
+
+test("组件目录失败时不显示兜底库并在状态悬停时说明失败范围", async ({
+  page,
+}) => {
+  await page.unroute("**/api/components/catalog");
+  await page.route("**/api/components/catalog", async (route) => {
+    await route.fulfill({
+      status: 503,
+      contentType: "application/json",
+      body: JSON.stringify({ detail: "catalog unavailable" }),
+    });
+  });
+  await page.goto("/");
+
+  const status = page.locator(".catalog-source");
+  await expect(status).toHaveClass(/error/);
+  await expect(status).toContainText("加载失败");
+  await expect(status.locator(".catalog-source-dot")).toHaveCSS(
+    "background-color",
+    "rgb(197, 48, 48)",
+  );
+  await expect(page.locator("aside.palette .palette-library")).toHaveCount(0);
+  await expect(page.locator("aside.palette .palette-item")).toHaveCount(0);
+  await expect(page.getByText("临时测试组件库", { exact: true })).toHaveCount(0);
+
+  await status.hover();
+  const detail = page.getByRole("tooltip");
+  await expect(detail).toBeVisible();
+  await expect(detail).toContainText("AMESim 组件库");
+  await expect(detail).toContainText("503");
+});
+
+test("组件目录格式错误时在悬停详情中指出失败的组件库", async ({ page }) => {
+  await page.unroute("**/api/components/catalog");
+  await page.route("**/api/components/catalog", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        schemaVersion: 1,
+        libraries: [
+          {
+            id: "broken-library",
+            label: "损坏组件库",
+            components: [],
+          },
+        ],
+      }),
+    });
+  });
+  await page.goto("/");
+
+  const status = page.locator(".catalog-source");
+  await expect(status).toHaveClass(/error/);
+  await status.hover();
+  await expect(page.getByRole("tooltip")).toContainText(
+    "加载失败的组件库：损坏组件库",
+  );
+  await expect(page.locator("aside.palette .palette-library")).toHaveCount(0);
+});
+
+test("组件库始终使用图标布局并忽略旧的列表模式设置", async ({ page }) => {
+  await page.addInitScript(() => {
+    window.localStorage.setItem(
+      "system-simulation-flow:palette-display-mode",
+      "detailed",
+    );
+  });
   await page.goto("/");
 
   const palette = page.locator("aside.palette");
-  const detailedButton = page.getByRole("button", {
-    name: "详细显示",
-    exact: true,
-  });
-  const iconsButton = page.getByRole("button", {
-    name: "仅图标显示",
-    exact: true,
-  });
   const airItem = palette.getByRole("button", {
     name: "空气介质定义",
     exact: true,
@@ -49,9 +147,13 @@ test("组件库可切换详细与仅图标显示，并在刷新后保留选择",
     exact: true,
   });
 
-  await expect(palette).toHaveAttribute("data-view-mode", "detailed");
-  await expect(detailedButton).toHaveAttribute("aria-pressed", "true");
-  await expect(iconsButton).toHaveAttribute("aria-pressed", "false");
+  await expect(palette).not.toHaveAttribute("data-view-mode");
+  await expect(
+    page.getByRole("group", { name: "组件库显示方式" }),
+  ).toHaveCount(0);
+  await expect(page.getByRole("button", { name: "详细显示" })).toHaveCount(0);
+  await expect(page.getByRole("button", { name: "仅图标显示" })).toHaveCount(0);
+  await expect(page.getByText("临时测试组件库", { exact: true })).toHaveCount(0);
   await expect(airItem.locator(".palette-item-copy")).toBeVisible();
 
   const airSymbol = airItem.locator(
@@ -76,22 +178,19 @@ test("组件库可切换详细与仅图标显示，并在刷新后保留选择",
     .locator('[data-component-symbol="generic"]');
   await expect(unknownSymbol.locator("svg")).toBeVisible();
 
-  await iconsButton.click();
-  await expect(palette).toHaveAttribute("data-view-mode", "icons");
-  await expect(detailedButton).toHaveAttribute("aria-pressed", "false");
-  await expect(iconsButton).toHaveAttribute("aria-pressed", "true");
   await expect(airItem).toBeVisible();
   await expect(airItem.locator(".palette-item-name")).toBeVisible();
   await expect(airItem.locator(".palette-item-name")).toHaveText("空气介质定义");
-  await expect(airItem.locator(".palette-item-meta")).toBeHidden();
+  await expect(airItem.locator(".palette-item-meta")).toHaveCount(0);
   await expect(airItem).not.toHaveAttribute("title");
+  await expectFixedIconCardSize(airItem);
 
   await page.reload();
 
-  await expect(palette).toHaveAttribute("data-view-mode", "icons");
-  await expect(iconsButton).toHaveAttribute("aria-pressed", "true");
+  await expect(palette).not.toHaveAttribute("data-view-mode");
+  await expect(page.getByRole("button", { name: "详细显示" })).toHaveCount(0);
   await expect(airItem.locator(".palette-item-name")).toBeVisible();
-  await expect(airItem.locator(".palette-item-meta")).toBeHidden();
+  await expect(airItem.locator(".palette-item-meta")).toHaveCount(0);
 });
 
 test("组件库和分类支持独立折叠并同步可访问状态", async ({ page }) => {
@@ -146,11 +245,8 @@ test("组件库和分类支持独立折叠并同步可访问状态", async ({ pa
   ).toHaveAttribute("aria-expanded", "true");
 });
 
-test("仅图标模式名称截断且卡片尺寸不随侧栏和视口改变", async ({ page }) => {
+test("图标名称截断且卡片尺寸不随侧栏和视口改变", async ({ page }) => {
   await page.goto("/");
-  await page
-    .getByRole("button", { name: "仅图标显示", exact: true })
-    .click();
 
   const palette = page.locator("aside.palette");
   const longNameItem = palette.getByRole("button", {
@@ -162,7 +258,7 @@ test("仅图标模式名称截断且卡片尺寸不随侧栏和视口改变", as
 
   await expect(name).toBeVisible();
   await expect(name).toHaveText("AMESim 气动测试元件");
-  await expect(meta).toBeHidden();
+  await expect(meta).toHaveCount(0);
   await expect(longNameItem).not.toHaveAttribute("title");
   const truncation = await name.evaluate((element) => {
     const style = window.getComputedStyle(element);
@@ -204,11 +300,8 @@ test("仅图标模式名称截断且卡片尺寸不随侧栏和视口改变", as
   await expectFixedIconCardSize(longNameItem);
 });
 
-test("仅图标模式悬停后显示完整名称和图标预览并在移开后关闭", async ({ page }) => {
+test("图标悬停后显示完整名称和预览并在移开后关闭", async ({ page }) => {
   await page.goto("/");
-  await page
-    .getByRole("button", { name: "仅图标显示", exact: true })
-    .click();
 
   const item = page.locator("aside.palette").getByRole("button", {
     name: "AMESim 气动测试元件",
@@ -234,13 +327,9 @@ test("仅图标模式悬停后显示完整名称和图标预览并在移开后
   await expect(item).not.toHaveAttribute("aria-describedby", "palette-icon-preview");
 });
 
-test("仅图标模式仍可拖入氦气介质并在画布显示专用图标", async ({ page }) => {
+test("图标布局仍可拖入氦气介质并在画布显示专用图标", async ({ page }) => {
   await page.goto("/");
 
-  await page
-    .getByRole("button", { name: "仅图标显示", exact: true })
-    .click();
-
   const palette = page.locator("aside.palette");
   const heliumItem = palette.getByRole("button", {
     name: "氦气介质定义",
@@ -292,7 +381,7 @@ test("从组件库拖入时使用工作区图标作为待拖入预览", async ({
           __componentDragPreview?: {
             backgroundColor: string;
             borderTopWidth: string;
-            hasLegacyCardLabel: boolean;
+            hasCardLabel: boolean;
             height: number;
             hotspotX: number;
             hotspotY: number;
@@ -305,7 +394,7 @@ test("从组件库拖入时使用工作区图标作为待拖入预览", async ({
       ).__componentDragPreview = {
         backgroundColor: style.backgroundColor,
         borderTopWidth: style.borderTopWidth,
-        hasLegacyCardLabel: Boolean(
+        hasCardLabel: Boolean(
           image.querySelector(".component-drag-preview-label"),
         ),
         height: bounds.height,
@@ -336,7 +425,7 @@ test("从组件库拖入时使用工作区图标作为待拖入预览", async ({
           __componentDragPreview?: {
             backgroundColor: string;
             borderTopWidth: string;
-            hasLegacyCardLabel: boolean;
+            hasCardLabel: boolean;
             height: number;
             hotspotX: number;
             hotspotY: number;
@@ -352,7 +441,7 @@ test("从组件库拖入时使用工作区图标作为待拖入预览", async ({
   expect(preview!.rootClassName).toContain("component-drag-preview");
   expect(preview!.symbolClassName).toContain("component-symbol-canvas");
   expect(preview!.symbolClassName).not.toContain("component-symbol-palette");
-  expect(preview!.hasLegacyCardLabel).toBe(false);
+  expect(preview!.hasCardLabel).toBe(false);
   expect(preview!.borderTopWidth).toBe("0px");
   expect(preview!.backgroundColor).toBe("rgba(0, 0, 0, 0)");
   expect(Math.abs(preview!.hotspotX - preview!.width / 2)).toBeLessThanOrEqual(0.5);