From 5ed6890cc553fac87959f61fabd4a3867706a4c2 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Fri, 10 Jul 2026 20:58:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A2=86=E5=8F=96=E9=A1=B5?=
 =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=AD=A5=E5=B8=83=E5=B1=80=E4=B8=8E=E7=AC=AC?=
 =?UTF-8?q?=E4=BA=8C=E6=AD=A5=E6=93=8D=E4=BD=9C=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 去掉与顶部重复的商品信息，压缩间距便于一屏展示
- 移动端步骤指示器保持右上角
- 更新 UID、换绑角色增加悬浮功能说明
---
 .../src/pages/claim/ClaimLewanSteps.tsx       | 44 ++++++----
 apps/frontend/src/pages/claim/ClaimPage.tsx   |  1 -
 .../frontend/src/pages/claim/ClaimUidStep.tsx | 23 ++---
 .../frontend/src/pages/claim/claim-shared.tsx | 12 +--
 apps/frontend/src/styles/main.css             | 86 +++++++++++++++++--
 5 files changed, 117 insertions(+), 49 deletions(-)

diff --git a/apps/frontend/src/pages/claim/ClaimLewanSteps.tsx b/apps/frontend/src/pages/claim/ClaimLewanSteps.tsx
index 12517356..35bec725 100644
--- a/apps/frontend/src/pages/claim/ClaimLewanSteps.tsx
+++ b/apps/frontend/src/pages/claim/ClaimLewanSteps.tsx
@@ -178,15 +178,19 @@ function ClaimBindingStep({
         <Button size="large" icon={<ReloadOutlined />} loading={refreshingRole} onClick={onRefreshRole}>
           刷新角色信息
         </Button>
-        <Button
-          size="large"
-          icon={<SwapOutlined />}
-          loading={rebindingRole}
-          disabled={confirmingRole || redeeming}
-          onClick={onRebindRole}
-        >
-          换绑角色
-        </Button>
+        <Tooltip title="角色绑定错误时，请点击「换绑角色」，然后重新扫码绑定正确的角色">
+          <span className="claim-action-tooltip-wrap">
+            <Button
+              size="large"
+              icon={<SwapOutlined />}
+              loading={rebindingRole}
+              disabled={confirmingRole || redeeming}
+              onClick={onRebindRole}
+            >
+              换绑角色
+            </Button>
+          </span>
+        </Tooltip>
         {snapshot.isUidMatched ? (
           <Button
             type="primary"
@@ -262,15 +266,19 @@ function ClaimConfirmStep({
       <Alert type="warning" showIcon message="兑换后不可取消，也不可退货。" />
 
       <Space size={12} wrap className="claim-action-row">
-        <Button
-          size="large"
-          icon={<SwapOutlined />}
-          loading={rebindingRole}
-          disabled={redeeming}
-          onClick={onRebindRole}
-        >
-          换绑角色
-        </Button>
+        <Tooltip title="角色绑定错误时，请点击「换绑角色」，然后重新扫码绑定正确的角色">
+          <span className="claim-action-tooltip-wrap">
+            <Button
+              size="large"
+              icon={<SwapOutlined />}
+              loading={rebindingRole}
+              disabled={redeeming}
+              onClick={onRebindRole}
+            >
+              换绑角色
+            </Button>
+          </span>
+        </Tooltip>
         <Button
           type="primary"
           size="large"
diff --git a/apps/frontend/src/pages/claim/ClaimPage.tsx b/apps/frontend/src/pages/claim/ClaimPage.tsx
index 9cb45500..f5f56469 100644
--- a/apps/frontend/src/pages/claim/ClaimPage.tsx
+++ b/apps/frontend/src/pages/claim/ClaimPage.tsx
@@ -333,7 +333,6 @@ export default function ClaimPage() {
           submitting={submittingUid}
           onChange={setUidInput}
           onSubmit={() => void handleSubmitUid()}
-          product={snapshot.product}
         />
       ) : snapshot.hasRedeemResult ? (
         snapshot.isFeifeiFlow ? (
diff --git a/apps/frontend/src/pages/claim/ClaimUidStep.tsx b/apps/frontend/src/pages/claim/ClaimUidStep.tsx
index e472dc3f..79d7c4fa 100644
--- a/apps/frontend/src/pages/claim/ClaimUidStep.tsx
+++ b/apps/frontend/src/pages/claim/ClaimUidStep.tsx
@@ -1,6 +1,4 @@
 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({
@@ -8,29 +6,22 @@ export function ClaimUidStep({
   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 步：填写游戏编号（数字的那个）</Typography.Title>
-      <p className="claim-muted">
-        请填写你要领取的游戏角色编号（纯数字）。提交后系统会按平台继续绑定或跳转领取。
+    <Card className="claim-content-card claim-uid-step">
+      <Typography.Title level={3} className="claim-uid-step-title">
+        第 1 步：填写游戏编号（数字的那个）
+      </Typography.Title>
+      <p className="claim-muted claim-uid-step-desc">
+        请填写游戏内角色编号（纯数字），提交后继续绑定或领取。
       </p>
 
-      <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} compact />
-
-      <Space direction="vertical" size={12} style={{ width: '100%' }}>
+      <Space direction="vertical" size={10} style={{ width: '100%' }}>
         <Input
           size="large"
           placeholder="请输入游戏编号（纯数字）"
diff --git a/apps/frontend/src/pages/claim/claim-shared.tsx b/apps/frontend/src/pages/claim/claim-shared.tsx
index 1ba7c3e9..e6869c14 100644
--- a/apps/frontend/src/pages/claim/claim-shared.tsx
+++ b/apps/frontend/src/pages/claim/claim-shared.tsx
@@ -1,4 +1,4 @@
-import { Button, Input, Space } from 'antd'
+import { Button, Input, Space, Tooltip } from 'antd'
 import type { ClaimProductInfo } from '@/types/claim'
 
 export function ClaimProductItems({
@@ -51,13 +51,15 @@ export function UidEditRow({
         size="large"
         value={uidInput}
         maxLength={64}
-        placeholder="游戏 UID"
+        placeholder="游戏编号"
         onChange={(event) => onChange(event.target.value)}
         onPressEnter={onSubmit}
       />
-      <Button size="large" loading={submitting} onClick={onSubmit}>
-        更新 UID
-      </Button>
+      <Tooltip title="游戏编号填错时，修改为正确编号后点击「更新 UID」即可">
+        <Button size="large" loading={submitting} onClick={onSubmit}>
+          更新 UID
+        </Button>
+      </Tooltip>
     </Space.Compact>
   )
 }
diff --git a/apps/frontend/src/styles/main.css b/apps/frontend/src/styles/main.css
index a12230eb..489141e4 100644
--- a/apps/frontend/src/styles/main.css
+++ b/apps/frontend/src/styles/main.css
@@ -779,10 +779,25 @@ select {
   font-weight: 600;
 }
 
+.claim-uid-step .ant-card-body {
+  gap: 10px;
+}
+
+.claim-uid-step-title.ant-typography {
+  margin: 0 !important;
+  font-size: 20px !important;
+  line-height: 1.3 !important;
+}
+
+.claim-uid-step-desc {
+  font-size: 13px;
+  line-height: 1.45;
+}
+
 .claim-uid-guide {
-  margin: 14px 0 0;
-  padding: 8px;
-  border-radius: 10px;
+  margin: 4px 0 0;
+  padding: 6px;
+  border-radius: 8px;
   background: #f8fafc;
   border: 1px solid #e5e7eb;
 }
@@ -790,28 +805,81 @@ select {
 .claim-uid-guide-image {
   display: block;
   width: 100%;
-  max-width: 420px;
+  max-width: 360px;
+  max-height: 160px;
   margin: 0 auto;
-  border-radius: 8px;
+  border-radius: 6px;
   border: 1px solid #e2e8f0;
   object-fit: contain;
   background: #fff;
 }
 
 .claim-uid-guide-caption {
-  margin: 8px 0 0;
+  margin: 6px 0 0;
   text-align: center;
   color: #64748b;
   font-size: 12px;
-  line-height: 1.4;
+  line-height: 1.35;
 }
 
 .claim-uid-warning {
-  margin: 14px 0 0;
+  margin: 2px 0 0;
   color: #ff4d4f;
   font-size: 13px;
   font-weight: 600;
-  line-height: 1.5;
+  line-height: 1.45;
+}
+
+@media (max-width: 480px) {
+  .claim-page {
+    padding: 12px;
+    gap: 10px;
+  }
+
+  .claim-header-card .ant-card-body,
+  .claim-content-card .ant-card-body {
+    gap: 12px;
+  }
+
+  .claim-header-copy {
+    /* 为右上角步骤条预留空间 */
+    padding-right: 112px;
+  }
+
+  .claim-header-copy h1 {
+    font-size: 22px;
+  }
+
+  .claim-step-indicator {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    max-width: 100px;
+    align-items: flex-end;
+  }
+
+  .claim-step-dot {
+    width: 26px;
+    height: 26px;
+    font-size: 12px;
+  }
+
+  .claim-step-dots {
+    gap: 5px;
+  }
+
+  .claim-step-progress-text {
+    text-align: right;
+    font-size: 12px;
+  }
+
+  .claim-uid-step-title.ant-typography {
+    font-size: 18px !important;
+  }
+
+  .claim-uid-guide-image {
+    max-height: 140px;
+  }
 }
 
 .claim-info-item {