affiliate-dash 领取界面优化(合并多次迭代为一次提交)

- 第 2 步绑定页:移除金额/单号/商品信息区,移除标题上方 affiliate-dash 标签
- 二维码区参考旧设计:左右竖排红字 Q区用Q扫/V区用V扫,去浅蓝背景,放大至 220px
- 第 4 步结果页:废弃 canvas 生成发货成功图,改用旧版结果卡片(绿勾+兑换成功+信息网格+商品明细)
- 开发 Mock:新增 affiliate-dash 领取五步 mock(uid/bind/submitted/completed/failed,不调真实平台)

apps/frontend/src/pages/claim/ClaimAffiliateDashSteps.tsx

@@ -1,18 +1,13 @@
-import { CheckCircleOutlined, LinkOutlined } from '@ant-design/icons'
+import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
 import { Alert, Button, Card, Typography } from 'antd'
-import type {
-  ClaimAffiliateDashFlowInfo,
-  ClaimOrderInfo,
-  ClaimProductInfo,
-} from '@/types/claim'
+import { formatAdminDateTime } from '@/utils/admin-time'
+import type { ClaimAffiliateDashFlowInfo } from '@/types/claim'
 import type { ClaimSnapshot } from './claim-snapshot'
-import { InfoTile, UidEditRow } from './claim-shared'
+import { ClaimProductItems, InfoTile, UidEditRow } from './claim-shared'
 
 export function AffiliateDashClaimPanel({
   affiliateDash,
   expectedUid,
-  order,
-  product,
   taskLastError,
   qrCodeDataUrl,
   submittingUid,
@@ -21,12 +16,9 @@ export function AffiliateDashClaimPanel({
   onUidChange,
   onResubmitUid,
   onSubmit,
-  onOpenBindUrl,
 }: {
   affiliateDash: ClaimAffiliateDashFlowInfo
   expectedUid: string
-  order: ClaimOrderInfo | null
-  product: ClaimProductInfo | null
   taskLastError?: string
   qrCodeDataUrl: string
   submittingUid: boolean
@@ -35,16 +27,13 @@ export function AffiliateDashClaimPanel({
   onUidChange: (value: string) => void
   onResubmitUid: () => void
   onSubmit: () => void
-  onOpenBindUrl: () => void
 }) {
-  const bindReady = Boolean(affiliateDash.bindUrl || affiliateDash.qrUrl)
   const bound = Boolean(affiliateDash.bound)
   const bindMismatch = Boolean(affiliateDash.bindMismatch)
 
   return (
     <Card className="claim-content-card">
       <div className="claim-feifei-main">
-        <span className="claim-feifei-label">affiliate-dash</span>
         <Typography.Title level={2}>
           {bound ? '第 3 步：确认并提交发货' : '第 2 步：绑定领取账号'}
         </Typography.Title>
@@ -58,14 +47,6 @@ export function AffiliateDashClaimPanel({
         onSubmit={onResubmitUid}
       />
 
-      <div className="claim-info-grid">
-        <InfoTile label="填写 UID" value={expectedUid || '-'} />
-        <InfoTile label="订单号" value={order?.platformOrderId || '-'} />
-        <InfoTile label="affiliate-dash 单号" value={affiliateDash.orderNo || '-'} />
-        <InfoTile label="领取商品" value={product?.title || affiliateDash.productName || '-'} />
-        <InfoTile label="金额" value={`${affiliateDash.amount} ${affiliateDash.currency}`.trim() || '-'} />
-      </div>
-
       {taskLastError ? (
         <Alert
           type="warning"
@@ -98,26 +79,49 @@ export function AffiliateDashClaimPanel({
       ) : null}
 
       {!bound ? (
-        <div className="claim-bind-area" style={{ marginBottom: 16 }}>
+        <div
+          className="claim-bind-area"
+          style={{
+            marginBottom: 16,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 20,
+          }}
+        >
+          <span
+            style={{
+              color: '#ff4d4f',
+              writingMode: 'vertical-rl',
+              textOrientation: 'upright',
+              fontSize: 17,
+              fontWeight: 600,
+              letterSpacing: 8,
+            }}
+          >
+            Q区用Q扫
+          </span>
           {qrCodeDataUrl ? (
             <img
               src={qrCodeDataUrl}
               alt="绑定二维码"
-              style={{ width: 180, height: 180, borderRadius: 8 }}
+              style={{ width: 220, height: 220, borderRadius: 8 }}
             />
-          ) : null}
-          {bindReady ? (
-            <Button
-              type="primary"
-              icon={<LinkOutlined />}
-              onClick={onOpenBindUrl}
-              style={{ marginLeft: 16 }}
-            >
-              打开绑定链接
-            </Button>
           ) : (
-            <Typography.Text type="secondary">绑定链接生成中，请稍候自动刷新…</Typography.Text>
+            <Typography.Text type="secondary">绑定二维码生成中，请稍候自动刷新…</Typography.Text>
           )}
+          <span
+            style={{
+              color: '#ff4d4f',
+              writingMode: 'vertical-rl',
+              textOrientation: 'upright',
+              fontSize: 17,
+              fontWeight: 600,
+              letterSpacing: 8,
+            }}
+          >
+            V区用V扫
+          </span>
         </div>
       ) : (
         <Button
@@ -141,21 +145,37 @@ export function AffiliateDashResultStep({
   snapshot: ClaimSnapshot
 }) {
   const affiliateDash = snapshot.affiliateDash
+  const success = Boolean(affiliateDash && !snapshot.isRedeemFailed)
+  const flow = snapshot.flow
 
   return (
-    <Card className="claim-content-card claim-result-card">
-      <div className="claim-result-title">{snapshot.resultTitle}</div>
-      <div className="claim-result-description">{snapshot.resultDescription}</div>
-
-      {affiliateDash ? (
-        <div className="claim-info-grid" style={{ marginTop: 24 }}>
-          <InfoTile label="领取商品" value={affiliateDash.productName || '-'} />
-          <InfoTile label="affiliate-dash 单号" value={affiliateDash.orderNo || '-'} />
-          <InfoTile label="订单状态" value={affiliateDash.orderStatus || '-'} />
-          <InfoTile label="发货状态" value={affiliateDash.submitStatus || '-'} />
-          <InfoTile label="金额" value={`${affiliateDash.amount} ${affiliateDash.currency}`.trim() || '-'} />
+    <Card className="claim-content-card">
+      <div className="claim-result-header">
+        {!success ? (
+          <ExclamationCircleOutlined className="claim-large-icon claim-icon-warning" />
+        ) : (
+          <CheckCircleOutlined className="claim-large-icon claim-icon-success" />
+        )}
+        <div>
+          <Typography.Title level={2}>{snapshot.resultTitle}</Typography.Title>
+          <p className="claim-muted">{snapshot.resultDescription}</p>
         </div>
-      ) : null}
+      </div>
+
+      <div className="claim-info-grid">
+        <InfoTile label="领取商品" value={snapshot.product?.title || '-'} />
+        <InfoTile
+          label="绑定账号"
+          value={affiliateDash?.boundAccount || affiliateDash?.gameAccount || '-'}
+        />
+        <InfoTile label="渠道" value={affiliateDash?.gameChannel || '-'} />
+        <InfoTile
+          label="结果时间"
+          value={formatAdminDateTime(flow?.dispatch.dispatchAt || null)}
+        />
+      </div>
+
+      <ClaimProductItems product={snapshot.product} />
     </Card>
   )
 }

apps/frontend/src/pages/claim/ClaimPage.tsx

@@ -377,8 +377,6 @@ export default function ClaimPage() {
         <AffiliateDashClaimPanel
           affiliateDash={snapshot.affiliateDash}
           expectedUid={snapshot.expectedUid}
-          order={snapshot.order}
-          product={snapshot.product}
           taskLastError={snapshot.task?.lastError}
           qrCodeDataUrl={qrCodeDataUrl}
           submittingUid={submittingUid}
@@ -387,7 +385,6 @@ export default function ClaimPage() {
           onUidChange={setUidInput}
           onResubmitUid={() => void handleSubmitUid()}
           onSubmit={() => void handleSubmitAffiliateDash()}
-          onOpenBindUrl={openBindUrl}
         />
       ) : snapshot.isFeifeiFlow && snapshot.feifei ? (
         <FeifeiClaimPanel