fix: keep template table cells compact with Semi tooltips

frontend/src/research/ResearchWorkspace.tsx

@@ -15,7 +15,9 @@ import {
   Table,
   TextArea,
   Toast,
+  Typography,
 } from "@douyinfe/semi-ui-19";
+import { WorkspaceTable } from "../components/WorkspaceTable";
 import { ResearchInput } from "../ai/ResearchInput";
 import { IconAIEditLevel3 } from "@douyinfe/semi-icons";
 import { api, post, formatTime } from "../api";
@@ -354,20 +356,20 @@ export function ResearchWorkspace({
         }
       >
         {listMode === "assets" ? (
-          <>
-            <Table<Asset>
-              className="research-table"
+          <div className="research-template-table-container">
+            <WorkspaceTable<Asset>
+              key={JSON.stringify([search, assetPage])}
+              fill
               dataSource={assets}
               rowKey="id"
-              pagination={false}
-              size="small"
-              sticky
-              style={{ minWidth: 720 }}
+              scroll={{ x: 800, y: "100%" }}
               empty="还没有模板。新建或导入一个模板开始研究。"
               columns={[
                 {
                   title: "模板名称",
                   key: "name",
+                  width: 280,
+                  ellipsis: { showTitle: false },
                   render: (_, item) => (
                     <Button
                       theme="borderless"
@@ -384,7 +386,13 @@ export function ResearchWorkspace({
                         })
                       }
                     >
-                      {item.name}
+                      <Typography.Text
+                        size="inherit"
+                        style={{ width: "100%", color: "inherit" }}
+                        ellipsis={{ showTooltip: true }}
+                      >
+                        {item.name}
+                      </Typography.Text>
                     </Button>
                   ),
                 },
@@ -397,8 +405,17 @@ export function ResearchWorkspace({
                 {
                   title: "表达式",
                   key: "expression",
-                  width: 260,
-                  render: (_, item) => <code>{item.content.expression}</code>,
+                  width: undefined,
+                  ellipsis: { showTitle: false },
+                  render: (_, item) => (
+                    <Typography.Text
+                      className="research-template-expression"
+                      style={{ width: "100%" }}
+                      ellipsis={{ showTooltip: true }}
+                    >
+                      {item.content.expression}
+                    </Typography.Text>
+                  ),
                 },
                 {
                   title: "分类",
@@ -412,19 +429,21 @@ export function ResearchWorkspace({
                   key: "actions",
                   width: 80,
                   render: (_, item) => (
-                    <DeleteResearchButton
-                      name={item.name}
-                      label="模板"
-                      disabled={!!busy}
-                      onConfirm={() =>
-                        task("删除模板", () => removeAsset(item))
-                      }
-                    />
+                    <div className="workspace-cell-actions">
+                      <DeleteResearchButton
+                        name={item.name}
+                        label="模板"
+                        disabled={!!busy}
+                        onConfirm={() =>
+                          task("删除模板", () => removeAsset(item))
+                        }
+                      />
+                    </div>
                   ),
                 },
               ]}
             />
-          </>
+          </div>
         ) : (
           <>
             <Table<(typeof history)[number]>

frontend/src/research/workspace.css

@@ -104,6 +104,18 @@
 .research-table-scroll {
   overflow-x: auto;
 }
+.research-template-table-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.research-template-expression {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
 .research-table .semi-table-row-cell {
   vertical-align: top;
   overflow-wrap: anywhere;