style: refine product trace UI

src/pages/ProductTracePublic.tsx

@@ -133,10 +133,12 @@ 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>
+              <div className="product-trace-wechat-qr-stage">
                 <Image src={trace.wechatQrCode} alt="公众号二维码" width={160} />
               </div>
+            </div>
           )}
           <div className="detail-item">
             <span className="label">状态</span>

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,9 +260,29 @@ function ProductTracesPage() {
     {
       title: '操作',
       key: 'actions',
-      width: 260,
+      width: 210,
-      render: (_: unknown, record: ProductTrace) => (
+      render: (_: unknown, record: ProductTrace) => {
-        <Space>
+        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>
@@ -272,16 +294,27 @@ function ProductTracesPage() {
             >
               二维码
             </Button>
-          {record.isActive && (
+            <Dropdown
-            <Button type="link" size="small" danger icon={<StopOutlined />} onClick={() => handleRevoke(record)}>
+              menu={{
-              停用
+                items: moreItems,
-            </Button>
+                onClick: ({ key }) => {
-          )}
+                  if (key === 'revoke') {
-          <Button type="link" size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+                    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;