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

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

apps/frontend/src/pages/admin/AdminDevMockPage.tsx

@@ -128,82 +128,20 @@ export default function AdminDevMockPage() {
       <Row gutter={[16, 16]}>
         <Col xs={24} xl={12}>
           <Card title="1. lewan 领取（强制 UID）" bordered={false}>
-            <Form
-              layout="vertical"
-              initialValues={{
-                step: 'binding',
-                uid: status?.defaultUid || '10001',
-                productNo: '套餐_1----3676797936',
-              }}
-              onFinish={(values) => lewanMutation.mutate(values)}
-            >
-              <Form.Item
-                label="页面步骤"
-                name="step"
-                tooltip="uid=只到填 UID；binding=已预填 UID 且角色匹配；confirm/result=后续步骤"
-              >
-                <Select
-                  options={[
-                    { value: 'uid', label: 'uid · 待填 UID' },
-                    { value: 'binding', label: 'binding · 绑定且 UID 已匹配（推荐）' },
-                    { value: 'confirm', label: 'confirm · 待确认兑换' },
-                    { value: 'result', label: 'result · 已完成' },
-                  ]}
-                />
-              </Form.Item>
-              <Form.Item label="游戏 UID" name="uid" rules={[{ required: true, message: '请填 UID' }]}>
-                <Input placeholder="10001" />
-              </Form.Item>
-              <Form.Item label="91 商品 productNo" name="productNo">
-                <Input placeholder="套餐_1----3676797936" />
-              </Form.Item>
-              <Form.Item label="订单号 orderNo（可空自动生成）" name="orderNo">
-                <Input placeholder="留空自动 MOCK91…" />
-              </Form.Item>
-              <Button type="primary" htmlType="submit" loading={lewanMutation.isPending} block>
-                生成 lewan Mock
-              </Button>
-            </Form>
+            <LewanMockForm
+              defaultUid={status?.defaultUid || '10001'}
+              loading={lewanMutation.isPending}
+              onSubmit={(values) => lewanMutation.mutate(values)}
+            />
           </Card>
         </Col>
 
         <Col xs={24} xl={12}>
           <Card title="2. feifei 领取（拼 UID 到 H5）" bordered={false}>
-            <Form
-              layout="vertical"
-              initialValues={{
-                step: 'ready',
-                uid: '166909256',
-                productName: '套装-浪漫天命',
-              }}
-              onFinish={(values) => feifeiMutation.mutate(values)}
-            >
-              <Form.Item label="页面步骤" name="step">
-                <Select
-                  options={[
-                    { value: 'uid', label: 'uid · 待填 UID' },
-                    { value: 'ready', label: 'ready · 已填 UID，可打开 H5（推荐）' },
-                    { value: 'completed', label: 'completed · 模拟成功' },
-                    { value: 'failed', label: 'failed · 模拟失败' },
-                  ]}
-                />
-              </Form.Item>
-              <Form.Item label="游戏 UID" name="uid" rules={[{ required: true, message: '请填 UID' }]}>
-                <Input placeholder="166909256" />
-              </Form.Item>
-              <Form.Item label="商品名" name="productName">
-                <Input />
-              </Form.Item>
-              <Form.Item label="H5 链接（可空用 mock 地址）" name="h5Url">
-                <Input placeholder="http://skin-exchange.../h5/bind?code=..." />
-              </Form.Item>
-              <Form.Item label="订单号 orderNo（可空）" name="orderNo">
-                <Input placeholder="留空自动 MOCKFF…" />
-              </Form.Item>
-              <Button type="primary" htmlType="submit" loading={feifeiMutation.isPending} block>
-                生成 feifei Mock
-              </Button>
-            </Form>
+            <FeifeiMockForm
+              loading={feifeiMutation.isPending}
+              onSubmit={(values) => feifeiMutation.mutate(values)}
+            />
           </Card>
         </Col>
 
@@ -357,3 +295,136 @@ export default function AdminDevMockPage() {
     </section>
   )
 }
+
+function LewanMockForm({
+  defaultUid,
+  loading,
+  onSubmit,
+}: {
+  defaultUid: string
+  loading: boolean
+  onSubmit: (values: Record<string, unknown>) => void
+}) {
+  const [form] = Form.useForm()
+  const step = Form.useWatch('step', form)
+  const uidRequired = step !== 'uid'
+
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      initialValues={{
+        step: 'uid',
+        uid: defaultUid || '10001',
+        productNo: '套餐_1----3676797936',
+      }}
+      onFinish={onSubmit}
+    >
+      <Form.Item
+        label="页面步骤"
+        name="step"
+        tooltip="uid=只到填编号第一步；binding=已预填编号且角色匹配；confirm/result=后续步骤"
+      >
+        <Select
+          options={[
+            { value: 'uid', label: 'uid · 待填 UID（第一步）' },
+            { value: 'binding', label: 'binding · 绑定且 UID 已匹配（推荐）' },
+            { value: 'confirm', label: 'confirm · 待确认兑换' },
+            { value: 'result', label: 'result · 已完成' },
+          ]}
+        />
+      </Form.Item>
+      <Form.Item
+        label="游戏 UID"
+        name="uid"
+        required={uidRequired}
+        rules={
+          uidRequired
+            ? [{ required: true, whitespace: true, message: '后续步骤请填写游戏 UID' }]
+            : []
+        }
+        extra={
+          step === 'uid'
+            ? '「待填 UID」步骤可不填，打开领取页会停留在第一步让用户填写'
+            : '后续步骤用于模拟已提交的编号，建议与默认角色一致（如 10001）'
+        }
+      >
+        <Input allowClear placeholder={defaultUid || '10001'} />
+      </Form.Item>
+      <Form.Item label="91 商品 productNo" name="productNo">
+        <Input placeholder="套餐_1----3676797936" />
+      </Form.Item>
+      <Form.Item label="订单号 orderNo（可空自动生成）" name="orderNo">
+        <Input placeholder="留空自动 MOCK91…" />
+      </Form.Item>
+      <Button type="primary" htmlType="submit" loading={loading} block>
+        生成 lewan Mock
+      </Button>
+    </Form>
+  )
+}
+
+function FeifeiMockForm({
+  loading,
+  onSubmit,
+}: {
+  loading: boolean
+  onSubmit: (values: Record<string, unknown>) => void
+}) {
+  const [form] = Form.useForm()
+  const step = Form.useWatch('step', form)
+  const uidRequired = step !== 'uid'
+
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      initialValues={{
+        step: 'uid',
+        uid: '166909256',
+        productName: '套装-浪漫天命',
+      }}
+      onFinish={onSubmit}
+    >
+      <Form.Item label="页面步骤" name="step">
+        <Select
+          options={[
+            { value: 'uid', label: 'uid · 待填 UID（第一步）' },
+            { value: 'ready', label: 'ready · 已填 UID，可打开 H5（推荐）' },
+            { value: 'completed', label: 'completed · 模拟成功' },
+            { value: 'failed', label: 'failed · 模拟失败' },
+          ]}
+        />
+      </Form.Item>
+      <Form.Item
+        label="游戏 UID"
+        name="uid"
+        required={uidRequired}
+        rules={
+          uidRequired
+            ? [{ required: true, whitespace: true, message: '后续步骤请填写游戏 UID' }]
+            : []
+        }
+        extra={
+          step === 'uid'
+            ? '「待填 UID」步骤可不填，打开领取页会停留在第一步让用户填写'
+            : '后续步骤用于模拟已提交的编号'
+        }
+      >
+        <Input allowClear placeholder="166909256" />
+      </Form.Item>
+      <Form.Item label="商品名" name="productName">
+        <Input />
+      </Form.Item>
+      <Form.Item label="H5 链接（可空用 mock 地址）" name="h5Url">
+        <Input placeholder="http://skin-exchange.../h5/bind?code=..." />
+      </Form.Item>
+      <Form.Item label="订单号 orderNo（可空）" name="orderNo">
+        <Input placeholder="留空自动 MOCKFF…" />
+      </Form.Item>
+      <Button type="primary" htmlType="submit" loading={loading} block>
+        生成 feifei Mock
+      </Button>
+    </Form>
+  )
+}