feat: enhance table layout and interaction across various components

- Introduced a new `WorkspaceTable` component for consistent table styling and behavior.
- Updated `BacktestPage`, `DatasetPage`, and `DataPreparationPage` to utilize the new `WorkspaceTable`.
- Implemented compact row heights and ellipsis for long text in table cells.
- Added validation for online field queries to ensure at least one filter is provided.
- Enhanced error handling and user feedback for invalid input scenarios.
- Improved pagination controls with dynamic page size options.
- Documented table display specifications in `ui-tables.md`.
- Added tests to verify table layout, interaction, and error handling.

frontend/tests/dataset.spec.ts

@@ -94,6 +94,14 @@ test("数据集完整同步、使用、集合编辑与研究选择", async ({ pa
   await prep.getByRole("button", { name: "移除所选字段" }).click();
   await expect(prep).toContainText("122 字段");
   await page.keyboard.press("Escape");
+  const preparationRow = page
+    .getByRole("row")
+    .filter({ hasText: "浏览器准备集合" });
+  await expect(preparationRow).toBeVisible();
+  expect(
+    await preparationRow.evaluate((row) => row.getBoundingClientRect().height),
+  ).toBe(40);
+  await page.screenshot({ path: "test-results/preparation-table-layout.png" });
   await page
     .getByRole("navigation", { name: "主导航" })
     .getByRole("button", { name: "特征工程", exact: true })
@@ -111,7 +119,26 @@ test("在线字段跨页多选直接准备，本地只展示完整同步字段",
     .getByRole("navigation", { name: "主导航" })
     .getByRole("button", { name: "字段目录", exact: true })
     .click();
+  const queries: string[] = [];
+  page.on("request", (request) => {
+    if (request.url().includes("/catalog/worldquant/fields"))
+      queries.push(request.url());
+  });
+  await expect(
+    page.getByRole("tab", { name: "本地同步", exact: true }),
+  ).toHaveAttribute("aria-selected", "true");
+  await page.getByRole("tab", { name: "worldquant接口", exact: true }).click();
   const online = page.getByRole("tabpanel", { name: "worldquant接口" });
+  await expect(
+    online.getByRole("button", { name: "查询", exact: true }),
+  ).toBeDisabled();
+  await expect(
+    online.getByText("请输入关键词、数据集或其他筛选条件，然后点击查询。"),
+  ).toBeVisible();
+  expect(queries).toEqual([]);
+  await online.getByLabel("字段数据集").fill("TEST_FIN");
+  expect(queries).toEqual([]);
+  await online.getByRole("button", { name: "查询", exact: true }).click();
   await expect(online.getByText("TEST_FIN_001", { exact: true })).toBeVisible();
   await online
     .getByRole("row")
@@ -147,3 +174,84 @@ test("在线字段跨页多选直接准备，本地只展示完整同步字段",
     fullPage: true,
   });
 });
+
+test("目录表格保持紧凑行高、截断和固定分页", async ({ page }) => {
+  await setup(page);
+  await sync(page, null);
+  await sync(page, "TEST_FIN");
+  const longName = "超长数据集名称与描述".repeat(20);
+  await page.route("**/api/v1/catalog/datasets?*", async (route) => {
+    const response = await route.fetch();
+    const body = await response.json();
+    body.items = body.items.map((item: Record<string, unknown>) => ({
+      ...item,
+      name: longName,
+    }));
+    await route.fulfill({ response, json: body });
+  });
+  await page.reload();
+  const table = page.locator(".workspace-table:visible").first();
+  await expect(
+    table.getByRole("button", { name: longName }).first(),
+  ).toBeVisible();
+  const metrics = await table
+    .locator("tbody .workspace-cell")
+    .first()
+    .evaluate((el) => ({
+      rowHeight: el.closest("tr")!.getBoundingClientRect().height,
+      overflow: getComputedStyle(el).overflow,
+      cellWidth: el.getBoundingClientRect().width,
+      buttonWidth: el.querySelector("button")!.getBoundingClientRect().width,
+    }));
+  expect(metrics.rowHeight).toBe(40);
+  expect(metrics.overflow).toBe("hidden");
+  expect(metrics.buttonWidth).toBeLessThanOrEqual(metrics.cellWidth);
+  await expect(
+    table.locator(".semi-tag").filter({ hasText: "已同步字段" }),
+  ).toBeVisible();
+  await page.screenshot({ path: "test-results/catalog-table-layout.png" });
+  await page
+    .getByRole("navigation", { name: "主导航" })
+    .getByRole("button", { name: "字段目录", exact: true })
+    .click();
+  const local = page.getByRole("tabpanel", { name: "本地同步" });
+  await expect(local.getByText("TEST_FIN_001", { exact: true })).toBeVisible();
+  const checkLayout = async () => {
+    const box = await local.locator(".workspace-table-footer").boundingBox();
+    expect(box!.y + box!.height).toBeGreaterThan(
+      page.viewportSize()!.height - 40,
+    );
+    expect(box!.y + box!.height).toBeLessThanOrEqual(
+      page.viewportSize()!.height,
+    );
+    const rows = await local
+      .locator("tbody tr.semi-table-row")
+      .evaluateAll((rows) =>
+        rows.map((row) => row.getBoundingClientRect().height),
+      );
+    expect(rows.length).toBe(25);
+    expect(rows.every((height) => height === 40)).toBe(true);
+  };
+  await checkLayout();
+  await page.screenshot({ path: "test-results/field-table-layout.png" });
+  await page.setViewportSize({ width: 900, height: 760 });
+  await checkLayout();
+  await page.screenshot({ path: "test-results/field-table-layout-narrow.png" });
+  await page.getByRole("tab", { name: "worldquant接口", exact: true }).click();
+  const online = page.getByRole("tabpanel", { name: "worldquant接口" });
+  await online.getByLabel("字段数据集").fill("TEST_FIN");
+  await online.getByRole("button", { name: "查询", exact: true }).click();
+  await expect(online.getByText("TEST_FIN_001", { exact: true })).toBeVisible();
+  let queries = 0;
+  page.on("request", (req) => {
+    if (req.url().includes("/catalog/worldquant/fields")) queries++;
+  });
+  await online.getByRole("button", { name: "重置", exact: true }).click();
+  await expect(
+    online.getByRole("button", { name: "查询", exact: true }),
+  ).toBeDisabled();
+  await expect(online.getByText("TEST_FIN_001", { exact: true })).toHaveCount(
+    0,
+  );
+  expect(queries).toBe(0);
+});