feat(admin-web): widen benefit coupon detail and enrich redeem record drawer (v3.4.13)

Share redeem detail fields across benefit coupon and redeem records pages;
widen coupon drawer to avoid horizontal scroll.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/admin-web/src/pages/RedeemRecordsPage.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import { Button, Descriptions, Drawer, Form, Input, Select, Table, Tag, Typography } from 'antd';
+import { Button, Drawer, Form, Input, Select, Table, Tag, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { REDEEM_CHANNEL_LABELS, type RedeemChannel } from '@dukang/shared-types';
+import RedeemRecordDetailDescriptions from '../components/RedeemRecordDetailDescriptions';
 import { request } from '../lib/api';
 import { fmtTime } from '../lib/constants';
 import { useAdminList } from '../lib/useAdminList';
@@ -39,6 +40,17 @@ export default function RedeemRecordsPage() {
   );
   const [detail, setDetail] = useState<Record<string, unknown> | null>(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  async function openDetail(id: string) {
+    setDetailLoading(true);
+    setDrawerOpen(true);
+    try {
+      setDetail(await request(`/admin/redeem-records/${id}`));
+    } finally {
+      setDetailLoading(false);
+    }
+  }
 
   const columns: ColumnsType<Row> = [
     { title: '核销号', dataIndex: 'redeemNo', width: 180 },
@@ -77,14 +89,7 @@ export default function RedeemRecordsPage() {
       title: '操作',
       width: 80,
       render: (_, row) => (
-        <Button
-          type="link"
-          size="small"
-          onClick={async () => {
-            setDetail(await request(`/admin/redeem-records/${row.id}`));
-            setDrawerOpen(true);
-          }}
-        >
+        <Button type="link" size="small" onClick={() => void openDetail(row.id)}>
           详情
         </Button>
       ),
@@ -142,35 +147,21 @@ export default function RedeemRecordsPage() {
           },
         }}
       />
-      <Drawer title="核销详情" width={520} open={drawerOpen} onClose={() => setDrawerOpen(false)}>
-        {detail && (
-          <Descriptions column={1} bordered size="small">
-            <Descriptions.Item label="核销号">{String(detail.redeemNo)}</Descriptions.Item>
-            <Descriptions.Item label="方式">
-              {
-                REDEEM_CHANNEL_LABELS[
-                  (detail.channel === 'PHONE' ? 'PHONE' : 'SCAN') as RedeemChannel
-                ]
-              }
-            </Descriptions.Item>
-            <Descriptions.Item label="核销额">¥{String(detail.amount)}</Descriptions.Item>
-            <Descriptions.Item label="结算额">¥{String(detail.settleAmount)}</Descriptions.Item>
-            {detail.user && typeof detail.user === 'object' ? (
-              <>
-                <Descriptions.Item label="用户编号">
-                  {String((detail.user as { userNo?: string }).userNo ?? '—')}
-                </Descriptions.Item>
-                <Descriptions.Item label="用户昵称">
-                  {String((detail.user as { nickname?: string | null }).nickname ?? '—')}
-                </Descriptions.Item>
-                <Descriptions.Item label="用户手机">
-                  {maskPhone((detail.user as { phone?: string | null }).phone)}
-                </Descriptions.Item>
-              </>
-            ) : null}
-            <Descriptions.Item label="时间">{fmtTime(String(detail.createdAt))}</Descriptions.Item>
-          </Descriptions>
-        )}
+      <Drawer
+        title="核销详情"
+        width={640}
+        open={drawerOpen}
+        onClose={() => {
+          setDrawerOpen(false);
+          setDetail(null);
+        }}
+        destroyOnClose
+      >
+        {detailLoading ? (
+          <Typography.Text type="secondary">加载中…</Typography.Text>
+        ) : detail ? (
+          <RedeemRecordDetailDescriptions detail={detail} />
+        ) : null}
       </Drawer>
     </div>
   );