feat(ui): responsive table

ui/src/pages/accesses/AccessList.tsx

@@ -23,7 +23,7 @@ const AccessList = () => {
     {
       key: "$index",
       align: "center",
-      title: "",
+      fixed: "left",
       width: 50,
       render: (_, __, index) => (page - 1) * pageSize + index + 1,
     },
@@ -36,11 +36,12 @@ const AccessList = () => {
     {
       key: "provider",
       title: t("common.text.provider"),
+      ellipsis: true,
       render: (_, record) => {
         return (
-          <Space className="max-w-full" size={4}>
+          <Space className="max-w-full truncate" size={4}>
             <Avatar src={accessProvidersMap.get(record.configType)?.icon} size="small" />
-            <Typography.Text>{t(accessProvidersMap.get(record.configType)?.name ?? "")}</Typography.Text>
+            <Typography.Text ellipsis>{t(accessProvidersMap.get(record.configType)?.name ?? "")}</Typography.Text>
           </Space>
         );
       },
@@ -156,8 +157,6 @@ const AccessList = () => {
     });
   };
 
-  // TODO: 响应式表格
-
   return (
     <>
       {ModelContextHolder}
@@ -199,6 +198,7 @@ const AccessList = () => {
           },
         }}
         rowKey={(record) => record.id}
+        scroll={{ x: "max(100%, 960px)" }}
       />
     </>
   );

ui/src/pages/certificates/CertificateList.tsx

@@ -27,7 +27,7 @@ const CertificateList = () => {
     {
       key: "$index",
       align: "center",
-      title: "",
+      fixed: "left",
       width: 50,
       render: (_, __, index) => (page - 1) * pageSize + index + 1,
     },
@@ -39,6 +39,7 @@ const CertificateList = () => {
     {
       key: "expiry",
       title: t("certificate.props.expiry"),
+      ellipsis: true,
       defaultFilteredValue: searchParams.has("state") ? [searchParams.get("state") as string] : undefined,
       filterDropdown: ({ setSelectedKeys, confirm, clearFilters }) => {
         const items: Required<MenuProps>["items"] = [
@@ -107,6 +108,7 @@ const CertificateList = () => {
     {
       key: "source",
       title: t("certificate.props.source"),
+      ellipsis: true,
       render: (_, record) => {
         const workflowId = record.workflow;
         return workflowId ? (
@@ -213,8 +215,6 @@ const CertificateList = () => {
     setCurrentRecord(certificate);
   };
 
-  // TODO: 响应式表格
-
   return (
     <>
       {NotificationContextHolder}
@@ -242,6 +242,7 @@ const CertificateList = () => {
           },
         }}
         rowKey={(record) => record.id}
+        scroll={{ x: "max(100%, 960px)" }}
       />
 
       <CertificateDetailDrawer

ui/src/pages/workflows/WorkflowList.tsx

@@ -43,13 +43,14 @@ const WorkflowList = () => {
     {
       key: "$index",
       align: "center",
-      title: "",
+      fixed: "left",
       width: 50,
       render: (_, __, index) => (page - 1) * pageSize + index + 1,
     },
     {
       key: "name",
       title: t("common.text.name"),
+      ellipsis: true,
       render: (_, record) => (
         <Space className="max-w-full" direction="vertical" size={4}>
           <Typography.Text ellipsis>{record.name}</Typography.Text>
@@ -62,6 +63,7 @@ const WorkflowList = () => {
     {
       key: "type",
       title: t("workflow.props.executionMethod"),
+      ellipsis: true,
       render: (_, record) => {
         const method = record.type;
         if (!method) {
@@ -279,8 +281,6 @@ const WorkflowList = () => {
     navigate("/workflows/detail");
   };
 
-  // TODO: 响应式表格
-
   return (
     <>
       {ModelContextHolder}
@@ -323,6 +323,7 @@ const WorkflowList = () => {
           },
         }}
         rowKey={(record) => record.id}
+        scroll={{ x: "max(100%, 960px)" }}
       />
     </>
   );