优化领取页第一步文案示意与 Mock 表单

- 游戏编号文案与红色提示，底部增加编号位置示意图
- 压缩商品信息卡片，示意图移至最下方
- 开发 Mock 在待填 UID 步骤下 UID 改为可选

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

@@ -1,6 +1,7 @@
-import { Alert, Button, Card, Input, Space, Typography } from 'antd'
+import { Button, Card, Input, Space, Typography } from 'antd'
 import type { ClaimProductInfo } from '@/types/claim'
 import { ClaimProductItems, InfoTile } from './claim-shared'
+import gameRoleIdGuide from '@/assets/claim/game-role-id-guide.jpg'
 
 export function ClaimUidStep({
   uidInput,
@@ -17,38 +18,45 @@ export function ClaimUidStep({
 }) {
   return (
     <Card className="claim-content-card">
-      <Typography.Title level={2}>第 1 步：填写游戏 UID</Typography.Title>
+      <Typography.Title level={2}>第 1 步：填写游戏编号（数字的那个）</Typography.Title>
       <p className="claim-muted">
-        请填写你要领取的游戏角色 UID。提交后系统会按平台继续绑定或跳转领取。
+        请填写你要领取的游戏角色编号（纯数字）。提交后系统会按平台继续绑定或跳转领取。
       </p>
 
-      <div className="claim-info-grid">
+      <div className="claim-info-grid claim-info-grid-compact">
         <InfoTile label="领取商品" value={product?.title || '-'} />
         <InfoTile label="商品数量" value={String(product?.quantity || 0)} />
       </div>
 
-      <ClaimProductItems product={product} />
+      <ClaimProductItems product={product} compact />
 
       <Space direction="vertical" size={12} style={{ width: '100%' }}>
         <Input
           size="large"
-          placeholder="请输入游戏 UID"
+          placeholder="请输入游戏编号（纯数字）"
           value={uidInput}
           maxLength={64}
+          inputMode="numeric"
           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 一致，填错将导致无法发货。"
-      />
+      <p className="claim-uid-warning">
+        游戏编号需与游戏内角色编号一致，填错将导致无法发货。
+      </p>
+
+      <div className="claim-uid-guide">
+        <img
+          src={gameRoleIdGuide}
+          alt="游戏编号位置示意：复制游戏内角色编号提交纯数字"
+          className="claim-uid-guide-image"
+        />
+        <p className="claim-uid-guide-caption">示意：复制游戏内「编号」处的纯数字提交</p>
+      </div>
     </Card>
   )
 }

apps/frontend/src/pages/claim/claim-snapshot.ts

@@ -186,7 +186,7 @@ function resolveProgressText(options: {
   isUidMatched: boolean
 }) {
   if (!options.hasExpectedUid) {
-    return '请填写游戏 UID'
+    return '请填写游戏编号'
   }
   if (options.isFeifeiFlow) {
     return options.feifei?.rechargeStatusLabel || `UID ${options.expectedUid}，请打开领取链接`