fix: 使用响应式 Grid 展示 Alpha 详情并独立排列 JSON 分组

frontend/tests/alpha-management.spec.ts

@@ -95,11 +95,31 @@ test("submission tabs, day selection, local correlation and reload", async ({
   await page.route("**/api/v1/alphas/TEST0004", async (route) => {
     const response = await route.fetch();
     const detail = await response.json();
-    detail.is_metrics.nested = {
+    detail.is_metrics.glbAmer = {
       yearly: { sharpe: 1.25, status: "PASS" },
       samples: 120,
       enabled: false,
     };
+    detail.is_metrics.glbApac = {
+      pnl: 439696,
+      bookSize: 20000000,
+      longCount: 215,
+      turnover: 0.0242,
+      sharpe: 0.85,
+    };
+    detail.is_metrics.glbEmea = { pnl: 571980, fitness: 0.19, sharpe: 0.72 };
+    detail.is_metrics.investabilityConstrained = {
+      pnl: 3696382,
+      longCount: 890,
+      turnover: 0.0919,
+    };
+    detail.is_metrics.history = [
+      { status: "PASS", sharpe: 1.1 },
+      { status: "FAIL", sharpe: 0.2 },
+    ];
+    detail.is_metrics.emptyObject = {};
+    detail.is_metrics.emptyArray = [];
+    detail.is_metrics.unavailable = null;
     await route.fulfill({ response, json: detail });
   });
   await page.locator(".alpha-link").click();
@@ -123,31 +143,73 @@ test("submission tabs, day selection, local correlation and reload", async ({
   const metrics = sheet.locator(".detail-section").filter({
     has: page.getByRole("heading", { name: "IS 指标", exact: true }),
   });
-  await expect(metrics.locator(".nested-descriptions").first()).toContainText(
-    "1.25",
-  );
   await expect(
     metrics
-      .locator(".semi-descriptions-horizontal > table > tbody > tr")
-      .first()
-      .locator(":scope > th"),
-  ).toHaveCount(3);
+      .locator(".detail-field-group")
+      .filter({ has: page.locator("dt", { hasText: "yearly" }) })
+      .first(),
+  ).toContainText("1.25");
   await expect(
-    metrics.locator(".semi-tag").filter({ hasText: "PASS" }),
+    metrics.locator(".semi-tag").filter({ hasText: "PASS" }).first(),
   ).toBeVisible();
   await expect(
     metrics.locator(".semi-tag").filter({ hasText: "否" }),
   ).toBeVisible();
-  expect(
-    await metrics
-      .locator("th, td")
-      .evaluateAll((cells) =>
-        cells.every((cell) => getComputedStyle(cell).textAlign === "left"),
-      ),
-  ).toBe(true);
-  await page.screenshot({
-    path: "../output/playwright/alpha-detail-metrics.png",
-  });
+  await expect(metrics).toContainText("[]");
+  await expect(metrics).toContainText("{}");
+  await expect(metrics).toContainText("未提供");
+  for (const [viewportWidth, columns] of [
+    [1440, 3],
+    [900, 2],
+    [600, 1],
+    [390, 1],
+  ]) {
+    await page.setViewportSize({ width: viewportWidth, height: 1000 });
+    const grid = metrics.locator(
+      ":scope > .detail-field-container > .detail-field-grid",
+    );
+    await expect
+      .poll(() =>
+        grid.evaluate(
+          (element) =>
+            getComputedStyle(element).gridTemplateColumns.split(" ").length,
+        ),
+      )
+      .toBe(columns);
+    const layout = await metrics.evaluate((element) => {
+      const groups = Array.from(
+        element.querySelectorAll<HTMLElement>(".detail-field-group"),
+      );
+      return {
+        fullRows: groups.every((group) => {
+          const box = group.getBoundingClientRect();
+          const parent = group.parentElement!.getBoundingClientRect();
+          return (
+            Math.abs(box.x - parent.x) < 1 &&
+            Math.abs(box.width - parent.width) < 1
+          );
+        }),
+        leftAligned: Array.from(element.querySelectorAll("dt, dd")).every(
+          (cell) => getComputedStyle(cell).textAlign === "left",
+        ),
+        noOverflow: Array.from(
+          element.querySelectorAll<HTMLElement>(
+            ".detail-field-container, dt, dd",
+          ),
+        ).every((cell) => cell.scrollWidth <= cell.clientWidth + 1),
+      };
+    });
+    expect(layout).toEqual({
+      fullRows: true,
+      leftAligned: true,
+      noOverflow: true,
+    });
+    await page.screenshot({
+      path: `../output/playwright/alpha-grid-${viewportWidth}.png`,
+      animations: "disabled",
+    });
+  }
+  await page.setViewportSize({ width: 1440, height: 1000 });
   await sheet.getByRole("tab", { name: "变体关系", exact: true }).click();
   await expect(
     sheet.getByRole("button", { name: "研究此 Alpha 的变体" }),