订单mock和领取页面优化

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

@@ -5,7 +5,6 @@ import ClaimBindingStep from './components/ClaimBindingStep.vue'
 import ClaimConfirmStep from './components/ClaimConfirmStep.vue'
 import ClaimHeaderCard from './components/ClaimHeaderCard.vue'
 import ClaimResultStep from './components/ClaimResultStep.vue'
-import ClaimSummaryCard from './components/ClaimSummaryCard.vue'
 import ClaimTicketStep from './components/ClaimTicketStep.vue'
 import { useKuaishouCloudClaim } from './composables/useKuaishouCloudClaim'
 
@@ -22,6 +21,7 @@ const claim = useKuaishouCloudClaim(() => props.token)
       :order="claim.order.value"
       :product="claim.product.value"
       :current-step="claim.currentStep.value"
+      :progress-text="claim.progressText.value"
     />
 
     <div v-if="claim.loading.value" class="content-card loading-card">
@@ -35,13 +35,6 @@ const claim = useKuaishouCloudClaim(() => props.token)
     </div>
 
     <template v-else-if="claim.detail.value && claim.flow.value">
-      <ClaimSummaryCard
-        :progress-text="claim.progressText.value"
-        :role-name="claim.roleName.value"
-        :role-id="claim.roleId.value"
-        :show-role-info="claim.currentStep.value !== 1"
-      />
-
       <ClaimTicketStep
         v-if="claim.currentStep.value === 1"
         :ticket-code="claim.ticketCode.value"

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

@@ -7,6 +7,7 @@ defineProps<{
   order: ClaimOrderInfo | null
   product: ClaimProductInfo | null
   currentStep: number
+  progressText: string
 }>()
 </script>
 
@@ -19,14 +20,17 @@ defineProps<{
       <ClaimProductItems :product="product" compact />
     </div>
     <div class="step-indicator">
-      <div
-        v-for="step in 4"
-        :key="step"
-        class="step-dot"
-        :class="{ active: currentStep >= step }"
-      >
-        {{ step }}
+      <div class="step-dots">
+        <div
+          v-for="step in 4"
+          :key="step"
+          class="step-dot"
+          :class="{ active: currentStep >= step }"
+        >
+          {{ step }}
+        </div>
       </div>
+      <span class="step-progress-text">{{ progressText }}</span>
     </div>
   </section>
 </template>
@@ -41,43 +45,66 @@ defineProps<{
   box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
   backdrop-filter: blur(12px);
   padding: 24px 28px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
+  position: relative;
 }
 
 .header-copy h1 {
   margin: 0;
   color: #0f172a;
   line-height: 1.3;
+  max-width: calc(100% - 220px);
+  overflow-wrap: anywhere;
 }
 
 .header-copy p {
   margin: 0;
   color: #64748b;
   line-height: 1.6;
+  max-width: calc(100% - 220px);
+  overflow-wrap: anywhere;
 }
 
 .header-copy {
   min-width: 0;
-  flex: 1;
 }
 
 .eyebrow {
   display: inline-flex;
+  max-width: calc(100% - 220px);
   margin-bottom: 8px;
   color: #2563eb;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.08em;
+  overflow-wrap: anywhere;
 }
 
 .step-indicator {
+  position: absolute;
+  top: 28px;
+  right: 28px;
+  max-width: 220px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+}
+
+.step-dots {
   display: flex;
   gap: 10px;
 }
 
+.step-progress-text {
+  max-width: 100%;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.4;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
 .step-dot {
   width: 34px;
   height: 34px;
@@ -99,36 +126,47 @@ defineProps<{
   .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;
+    max-width: calc(100% - 154px);
     overflow-wrap: anywhere;
   }
 
   .header-copy p {
     font-size: 14px;
     line-height: 1.4;
+    max-width: calc(100% - 154px);
   }
 
   .eyebrow {
+    max-width: calc(100% - 154px);
     margin-bottom: 6px;
     font-size: 12px;
   }
 
   .step-indicator {
-    gap: 8px;
+    top: 14px;
+    right: 16px;
+    max-width: 148px;
+    gap: 6px;
+  }
+
+  .step-dots {
+    gap: 6px;
   }
 
   .step-dot {
-    width: 30px;
-    height: 30px;
-    font-size: 15px;
+    width: 28px;
+    height: 28px;
+    font-size: 14px;
+  }
+
+  .step-progress-text {
+    font-size: 12px;
   }
 }
 
@@ -138,13 +176,33 @@ defineProps<{
   }
 
   .header-copy h1 {
+    max-width: calc(100% - 132px);
     font-size: 24px;
   }
 
+  .header-copy p {
+    max-width: 100%;
+  }
+
+  .eyebrow {
+    max-width: calc(100% - 132px);
+  }
+
+  .step-indicator {
+    top: 12px;
+    right: 14px;
+    max-width: 128px;
+    gap: 5px;
+  }
+
+  .step-dots {
+    gap: 5px;
+  }
+
   .step-dot {
-    width: 28px;
-    height: 28px;
-    font-size: 14px;
+    width: 26px;
+    height: 26px;
+    font-size: 13px;
   }
 }
 </style>

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

@@ -24,8 +24,7 @@ const activeGuideNames = ref(['guide'])
   <section class="content-card">
     <h2>第 1 步：提交核销码</h2>
     <p class="muted">
-      请先从快手小店复制核销码。验证通过后，系统会自动准备 Cloud
-      绑定资源，不需要再让客服手工点"准备绑定资源"。
+      请您先从快手小店复制核销码。验证通过后，系统会自动准备绑定资源.
     </p>
 
     <el-input