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/src/pages/DatasetPage.tsx

@@ -1,3 +1,4 @@
+import { WorkspaceTable as Table } from "../components/WorkspaceTable";
 import { useEffect, useState } from "react";
 import {
   Banner,
@@ -5,9 +6,9 @@ import {
   Input,
   Modal,
   Pagination,
-  Table,
   TextArea,
   Toast,
+  Tag,
 } from "@douyinfe/semi-ui-19";
 import {
   api,
@@ -78,6 +79,7 @@ export function DatasetPage({
   const [sort, setSort] = useState("name"),
     [direction, setDirection] = useState("asc"),
     [page, setPage] = useState(1),
+    [pageSize, setPageSize] = useState(25),
     [rev, setRev] = useState(0);
   const [data, setData] = useState<Result>({
     items: [],
@@ -129,7 +131,7 @@ export function DatasetPage({
     const c = new AbortController();
     setLoading(true);
     api<Result>(
-      `/catalog/datasets?${queryString({ ...scope, q, category, subcategory, sort, direction, offset: (page - 1) * 25 })}`,
+      `/catalog/datasets?${queryString({ ...scope, q, category, subcategory, sort, direction, limit: pageSize, offset: (page - 1) * pageSize })}`,
       { signal: c.signal },
     )
       .then(setData)
@@ -149,6 +151,7 @@ export function DatasetPage({
     sort,
     direction,
     page,
+    pageSize,
     version,
     rev,
   ]);
@@ -304,18 +307,21 @@ export function DatasetPage({
         <Button onClick={onChat}>AI 助手</Button>
       </div>
       <Table<Entry>
+        fill
         rowKey="id"
         size="small"
         dataSource={data.items}
         pagination={false}
         loading={loading}
-        scroll={{ x: 1050, y: "100%" }}
+        scroll={{ x: 1180, y: "100%" }}
         columns={[
           {
             title: "数据集",
+            width: 280,
             render: (_, r) => (
               <Button
                 theme="borderless"
+                title={r.name || r.id}
                 onClick={() => void work(() => view(r))}
               >
                 {r.name || r.id}
@@ -330,14 +336,17 @@ export function DatasetPage({
           { title: "价值评分", dataIndex: "value_score", render: displayValue },
           {
             title: "同步状态",
-            render: (_, r) =>
-              r.collection_version ? "已同步字段" : "待同步字段",
+            render: (_, r) => (
+              <Tag color={r.collection_version ? "green" : "grey"}>
+                {r.collection_version ? "已同步字段" : "待同步字段"}
+              </Tag>
+            ),
           },
           {
             title: "操作",
             width: 240,
             render: (_, r) => (
-              <div className="preparation-tools">
+              <div className="workspace-cell-actions">
                 <Button
                   theme="borderless"
                   disabled={busy}
@@ -365,7 +374,7 @@ export function DatasetPage({
           },
         ]}
       />
-      <div className="preparation-tools">
+      <div className="table-pagination workspace-table-footer">
         <span>
           {data.total} 个数据集 ·{" "}
           {formatTime(data.synced_at, account?.timezone)}
@@ -373,7 +382,13 @@ export function DatasetPage({
         <Pagination
           currentPage={page}
           total={data.total}
-          pageSize={25}
+          pageSize={pageSize}
+          showSizeChanger
+          pageSizeOpts={[25, 50, 100]}
+          onPageSizeChange={(size) => {
+            setPageSize(size);
+            setPage(1);
+          }}
           onPageChange={setPage}
         />
       </div>