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/components/WorkspaceTable.tsx

@@ -0,0 +1,35 @@
+import { Table } from "@douyinfe/semi-ui-19";
+import type { TableProps } from "@douyinfe/semi-ui-19/lib/es/table/interface";
+import "./workspace-table.css";
+
+/** Shared compact table boundary. Business pages retain selection, sorting and paging state. */
+export function WorkspaceTable<T extends Record<string, unknown>>({
+  columns = [],
+  className = "",
+  fill = false,
+  ...props
+}: TableProps<T> & { fill?: boolean }) {
+  return (
+    <Table<T>
+      {...props}
+      size="small"
+      pagination={false}
+      className={`workspace-table ${fill ? "workspace-table-fill" : ""} ${className}`}
+      columns={columns.map((column) => ({
+        width: 140,
+        ellipsis: true,
+        ...column,
+        render: (value, record, index, options) => (
+          <div
+            className="workspace-cell"
+            title={typeof value === "string" ? value : undefined}
+          >
+            {column.render
+              ? column.render(value, record, index, options)
+              : (value ?? "未提供")}
+          </div>
+        ),
+      }))}
+    />
+  );
+}

frontend/src/components/workspace-table.css

@@ -0,0 +1,117 @@
+/* Canonical table metrics; see docs/ui-tables.md. Values match Alpha management. */
+.workspace-table {
+  min-width: 0;
+  width: 100%;
+  --workspace-row-height: 40px;
+}
+.workspace-table table {
+  table-layout: fixed;
+}
+.workspace-table .semi-table-row-cell,
+.workspace-table .semi-table-row-head {
+  box-sizing: border-box;
+  height: var(--workspace-row-height);
+  padding: 8px 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.workspace-cell {
+  width: 100%;
+  min-width: 0;
+  max-height: 23px;
+  line-height: 23px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 13px;
+}
+.workspace-cell > .semi-button {
+  max-width: 100%;
+  padding: 0;
+  text-align: left;
+}
+.workspace-cell .semi-button {
+  height: 23px;
+  font-size: 13px;
+}
+.workspace-cell .semi-button-content {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.workspace-cell-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 23px;
+  margin: 0;
+  padding: 0;
+  flex-wrap: nowrap;
+}
+.workspace-cell-actions > .semi-button {
+  padding: 0 8px;
+  flex-shrink: 0;
+}
+.workspace-cell .semi-tag {
+  max-width: 100%;
+  vertical-align: middle;
+}
+.workspace-table-fill,
+.workspace-table-fill > .semi-spin,
+.workspace-table-fill .semi-spin-children,
+.workspace-table-fill .semi-table-small,
+.workspace-table-fill .semi-table-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+.workspace-table-fill .semi-table-header {
+  flex-shrink: 0;
+}
+.workspace-table-fill .semi-table-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.workspace-tabs {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.workspace-tabs > .semi-tabs-bar {
+  background: var(--semi-color-fill-0);
+  flex-shrink: 0;
+}
+.workspace-tabs > .semi-tabs-content {
+  min-height: 0;
+  padding: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.workspace-tabs .semi-tabs-pane-active,
+.workspace-tabs .semi-tabs-pane-active > .semi-tabs-pane-motion-overlay {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.workspace-table-footer {
+  min-height: 44px;
+  flex-shrink: 0;
+}
+.workspace-table-footer > .semi-page {
+  margin-left: auto;
+}
+@media (max-width: 700px) {
+  .workspace-table-footer {
+    flex-wrap: wrap;
+  }
+}