From 5377f8893d97b6e1e0faf38dc3f03b34805051c0 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Tue, 26 May 2026 20:06:27 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=86=E5=8F=96=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E4=BC=98=E5=8C=96,=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E6=A0=B8=E9=94=80=E5=90=97=E6=8C=87=E5=BC=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kuaishou-cloud/KuaishouCloudClaimView.vue |  1 +
 .../components/ClaimHeaderCard.vue            | 46 +++++++++++++++++++
 .../components/ClaimSummaryCard.vue           | 42 +++++++++++++++--
 .../components/ClaimTicketStep.vue            |  5 +-
 4 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/views/claim/kuaishou-cloud/KuaishouCloudClaimView.vue b/apps/frontend/src/views/claim/kuaishou-cloud/KuaishouCloudClaimView.vue
index 16fc6346..ac50043d 100644
--- a/apps/frontend/src/views/claim/kuaishou-cloud/KuaishouCloudClaimView.vue
+++ b/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
diff --git a/apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimHeaderCard.vue b/apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimHeaderCard.vue
index 0c2dbfcc..216ff7de 100644
--- a/apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimHeaderCard.vue
+++ b/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>
diff --git a/apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimSummaryCard.vue b/apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimSummaryCard.vue
index a77f6f16..71890a2f 100644
--- a/apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimSummaryCard.vue
+++ b/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>
diff --git a/apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimTicketStep.vue b/apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimTicketStep.vue
index cd61ecf8..f13fae5f 100644
--- a/apps/frontend/src/views/claim/kuaishou-cloud/components/ClaimTicketStep.vue
+++ b/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