领取页面移动端优化,默认展开核销吗指引

apps/frontend/src/views/claim/kuaishou-cloud/KuaishouCloudClaimView.vue

@@ -39,6 +39,7 @@ const claim = useKuaishouCloudClaim(() => props.token)
         :progress-text="claim.progressText.value"
         :role-name="claim.roleName.value"
         :role-id="claim.roleId.value"
+        :show-role-info="claim.currentStep.value !== 1"
       />
 
       <ClaimTicketStep

apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimHeaderCard.vue

@@ -47,6 +47,7 @@ defineProps<{
 .header-copy h1 {
   margin: 0;
   color: #0f172a;
+  line-height: 1.3;
 }
 
 .header-copy p {
@@ -89,8 +90,53 @@ defineProps<{
 @media (max-width: 720px) {
   .header-card {
     max-width: 100%;
+    padding: 16px 18px;
     flex-direction: column;
     align-items: flex-start;
+    gap: 12px;
+    border-radius: 16px;
+  }
+
+  .header-copy h1 {
+    font-size: 28px;
+    line-height: 1.22;
+    overflow-wrap: anywhere;
+  }
+
+  .header-copy p {
+    font-size: 14px;
+    line-height: 1.4;
+  }
+
+  .eyebrow {
+    margin-bottom: 6px;
+    font-size: 12px;
+  }
+
+  .step-indicator {
+    gap: 8px;
+  }
+
+  .step-dot {
+    width: 30px;
+    height: 30px;
+    font-size: 15px;
+  }
+}
+
+@media (max-width: 420px) {
+  .header-card {
+    padding: 14px 16px;
+  }
+
+  .header-copy h1 {
+    font-size: 24px;
+  }
+
+  .step-dot {
+    width: 28px;
+    height: 28px;
+    font-size: 14px;
   }
 }
 </style>

apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimSummaryCard.vue

@@ -1,22 +1,25 @@
 <script setup lang="ts">
-defineProps<{
+const props = withDefaults(defineProps<{
   progressText: string
   roleName: string
   roleId: string
-}>()
+  showRoleInfo?: boolean
+}>(), {
+  showRoleInfo: true,
+})
 </script>
 
 <template>
-  <section class="summary-card">
+  <section class="summary-card" :class="{ 'summary-card--progress-only': !props.showRoleInfo }">
     <div class="summary-item">
       <span>当前进度</span>
       <strong>{{ progressText }}</strong>
     </div>
-    <div class="summary-item">
+    <div v-if="props.showRoleInfo" class="summary-item">
       <span>当前角色</span>
       <strong>{{ roleName || '待识别' }}</strong>
     </div>
-    <div class="summary-item">
+    <div v-if="props.showRoleInfo" class="summary-item">
       <span>角色 ID</span>
       <strong>{{ roleId || '-' }}</strong>
     </div>
@@ -38,6 +41,10 @@ defineProps<{
   gap: 14px;
 }
 
+.summary-card--progress-only {
+  grid-template-columns: 1fr;
+}
+
 .summary-item {
   padding: 16px;
   border-radius: 16px;
@@ -61,7 +68,32 @@ defineProps<{
 @media (max-width: 720px) {
   .summary-card {
     max-width: 100%;
+    padding: 12px;
     grid-template-columns: 1fr;
+    gap: 8px;
+    border-radius: 16px;
+  }
+
+  .summary-item {
+    min-height: 44px;
+    padding: 10px 12px;
+    border-radius: 12px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .summary-item span {
+    flex: 0 0 auto;
+    font-size: 12px;
+  }
+
+  .summary-item strong {
+    min-width: 0;
+    text-align: right;
+    font-size: 15px;
+    overflow-wrap: anywhere;
   }
 }
 </style>

apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimTicketStep.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Clock } from '@element-plus/icons-vue'
+import { ref } from 'vue'
 
 import type { ClaimKuaishouCloudFlowInfo } from '@/types/claim'
 
@@ -15,6 +16,8 @@ defineEmits<{
   'update:ticketCode': [value: string]
   submitTicket: []
 }>()
+
+const activeGuideNames = ref(['guide'])
 </script>
 
 <template>
@@ -54,7 +57,7 @@ defineEmits<{
     </div>
 
     <div v-if="flow.guideImages.length > 0" class="guide-section">
-      <el-collapse>
+      <el-collapse v-model="activeGuideNames">
         <el-collapse-item title="查看核销码图文指引" name="guide">
           <div class="guide-grid">
             <figure