拆分领取页 ClaimPage 为多模块

将 snapshot、轮询、共享 UI、UID/lewan/feifei 步骤组件物理拆分，主文件只保留页面编排与状态。
2026-07-10 13:55:43 +08:00
parent 8de56b0354
commit c70c3ff6a5
8 changed files with 968 additions and 940 deletions
@@ -0,0 +1,54 @@
+import { Alert, Button, Card, Input, Space, Typography } from 'antd'
+import type { ClaimProductInfo } from '@/types/claim'
+import { ClaimProductItems, InfoTile } from './claim-shared'
+
+export function ClaimUidStep({
+  uidInput,
+  submitting,
+  onChange,
+  onSubmit,
+  product,
+}: {
+  uidInput: string
+  submitting: boolean
+  onChange: (value: string) => void
+  onSubmit: () => void
+  product: ClaimProductInfo | null
+}) {
+  return (
+    <Card className="claim-content-card">
+      <Typography.Title level={2}>第 1 步：填写游戏 UID</Typography.Title>
+      <p className="claim-muted">
+        请填写你要领取的游戏角色 UID。提交后系统会按平台继续绑定或跳转领取。
+      </p>
+
+      <div className="claim-info-grid">
+        <InfoTile label="领取商品" value={product?.title || '-'} />
+        <InfoTile label="商品数量" value={String(product?.quantity || 0)} />
+      </div>
+
+      <ClaimProductItems product={product} />
+
+      <Space direction="vertical" size={12} style={{ width: '100%' }}>
+        <Input
+          size="large"
+          placeholder="请输入游戏 UID"
+          value={uidInput}
+          maxLength={64}
+          onChange={(event) => onChange(event.target.value)}
+          onPressEnter={onSubmit}
+        />
+        <Button type="primary" size="large" loading={submitting} onClick={onSubmit} block>
+          确认 UID，下一步
+        </Button>
+      </Space>
+
+      <Alert
+        type="info"
+        showIcon
+        style={{ marginTop: 16 }}
+        message="UID 需与游戏内角色 ID 一致，填错将导致无法发货。"
+      />
+    </Card>
+  )
+}