style: refine product trace UI

src/pages/ProductTracePublic.tsx

@@ -133,9 +133,11 @@ function ProductTracePublicPage() {
             </div>
           )}
           {trace.wechatQrCode && (
-            <div className="detail-item detail-item-block">
+            <div className="detail-item detail-item-block product-trace-wechat-qr">
               <span className="label">公众号二维码</span>
-              <Image src={trace.wechatQrCode} alt="公众号二维码" width={160} />
+              <div className="product-trace-wechat-qr-stage">
+                <Image src={trace.wechatQrCode} alt="公众号二维码" width={160} />
+              </div>
             </div>
           )}
           <div className="detail-item">

src/pages/ProductTraces.tsx

@@ -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,
+      width: 210,
-      render: (_: unknown, record: ProductTrace) => (
+      render: (_: unknown, record: ProductTrace) => {
-        <Space>
+        const moreItems = [
-          <Button type="link" size="small" icon={<EyeOutlined />} onClick={() => openEdit(record)}>
+          ...(record.isActive
-            详情
+            ? [
-          </Button>
+                {
-          <Button
+                  key: 'revoke',
-            type="link"
+                  label: '停用',
-            size="small"
+                  danger: true,
-            icon={<QrcodeOutlined />}
+                  icon: <StopOutlined />,
-            onClick={() => handleGenerateQrCode(record)}
+                },
-          >
+              ]
-            二维码
+            : []),
-          </Button>
+          {
-          {record.isActive && (
+            key: 'delete',
-            <Button type="link" size="small" danger icon={<StopOutlined />} onClick={() => handleRevoke(record)}>
+            label: '删除',
-              停用
+            danger: true,
+            icon: <DeleteOutlined />,
+          },
+        ];
+
+        return (
+          <Space size={0}>
+            <Button type="link" size="small" icon={<EyeOutlined />} onClick={() => openEdit(record)}>
+              详情
             </Button>
-          )}
+            <Button
-          <Button type="link" size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+              type="link"
-            删除
+              size="small"
-          </Button>
+              icon={<QrcodeOutlined />}
-        </Space>
+              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>
+        );
+      },
     },
   ];
 

src/pages/styles/PublicQuery.css

@@ -132,6 +132,16 @@
   font-weight: bold;
 }
 
+.product-trace-wechat-qr {
+  align-items: stretch;
+}
+
+.product-trace-wechat-qr-stage {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
 .copyright {
   margin-top: 32px;
   text-align: center;