style: refine product trace UI

2026-06-05 17:40:13 +08:00
parent fe8bfe3580
commit a693f249a6
3 changed files with 70 additions and 25 deletions
@@ -3,6 +3,7 @@ import {
  Button,
  Card,
  DatePicker,
+  Dropdown,
  Form,
  Image,
  Input,
@@ -18,6 +19,7 @@ import {
  DeleteOutlined,
  EyeOutlined,
  LinkOutlined,
+  MoreOutlined,
  PlusOutlined,
  QrcodeOutlined,
  StopOutlined,
@@ -258,30 +260,61 @@ function ProductTracesPage() {
    {
      title: '操作',
      key: 'actions',
-      width: 260,
-      render: (_: unknown, record: ProductTrace) => (
-        <Space>
-          <Button type="link" size="small" icon={<EyeOutlined />} onClick={() => openEdit(record)}>
-            详情
-          </Button>
-          <Button
-            type="link"
-            size="small"
-            icon={<QrcodeOutlined />}
-            onClick={() => handleGenerateQrCode(record)}
-          >
-            二维码
-          </Button>
-          {record.isActive && (
-            <Button type="link" size="small" danger icon={<StopOutlined />} onClick={() => handleRevoke(record)}>
-              停用
+      width: 210,
+      render: (_: unknown, record: ProductTrace) => {
+        const moreItems = [
+          ...(record.isActive
+            ? [
+                {
+                  key: 'revoke',
+                  label: '停用',
+                  danger: true,
+                  icon: <StopOutlined />,
+                },
+              ]
+            : []),
+          {
+            key: 'delete',
+            label: '删除',
+            danger: true,
+            icon: <DeleteOutlined />,
+          },
+        ];
+
+        return (
+          <Space size={0}>
+            <Button type="link" size="small" icon={<EyeOutlined />} onClick={() => openEdit(record)}>
+              详情
            </Button>
-          )}
-          <Button type="link" size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
-            删除
-          </Button>
-        </Space>
-      ),
+            <Button
+              type="link"
+              size="small"
+              icon={<QrcodeOutlined />}
+              onClick={() => handleGenerateQrCode(record)}
+            >
+              二维码
+            </Button>
+            <Dropdown
+              menu={{
+                items: moreItems,
+                onClick: ({ key }) => {
+                  if (key === 'revoke') {
+                    handleRevoke(record);
+                  }
+                  if (key === 'delete') {
+                    handleDelete(record);
+                  }
+                },
+              }}
+              trigger={['click']}
+            >
+              <Button type="link" size="small" icon={<MoreOutlined />}>
+                更多
+              </Button>
+            </Dropdown>
+          </Space>
+        );
+      },
    },
  ];