优化领取界面

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

@@ -56,10 +56,12 @@ const claim = useKuaishouCloudClaim(() => props.token)
         :role-id="claim.roleId.value"
         :refreshing-role="claim.refreshingRole.value"
         :confirming-role="claim.confirmingRole.value"
+        :rebinding-role="claim.rebindingRole.value"
         :flow="claim.flow.value"
         :format-date-time="claim.formatAdminDateTime"
         @open-bind-url="claim.openBindUrl($event)"
         @refresh-role="claim.refreshRole()"
+        @rebind-role="claim.rebindRole()"
         @confirm-role="claim.confirmRole()"
       />
 

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

@@ -12,6 +12,7 @@ defineProps<{
   roleId: string
   refreshingRole: boolean
   confirmingRole: boolean
+  rebindingRole: boolean
   flow: ClaimKuaishouCloudFlowInfo
   formatDateTime: (value: string | null) => string
 }>()
@@ -19,6 +20,7 @@ defineProps<{
 defineEmits<{
   openBindUrl: [useCurrentPage?: boolean]
   refreshRole: []
+  rebindRole: []
   confirmRole: []
 }>()
 </script>
@@ -50,36 +52,38 @@ defineEmits<{
       </div>
     </div>
 
-    <p v-if="flow.role.errorMessage" class="muted warning-line">
-      {{ flow.role.errorMessage }}
-    </p>
-    <p v-else class="muted warning-line">
-      系统会自动刷新角色信息。如果当前角色不正确，请重新打开绑定页完成重新绑定。
-    </p>
-    <p class="muted meta-line">
-      最近刷新：{{ formatDateTime(flow.role.refreshedAt) }}；链接有效期：{{
-        formatDateTime(flow.binding.bindExpiresAt)
-      }}
-    </p>
-    <p v-if="flow.binding.bindProbeMessage" class="muted meta-line">
-      链接检测：{{ flow.binding.bindProbeStatus || '-' }} / {{ flow.binding.bindProbeMessage }}
-    </p>
-
     <div class="action-row">
       <el-button size="large" plain :loading="refreshingRole" @click="$emit('refreshRole')">
         <el-icon><RefreshRight /></el-icon>
         刷新角色信息
       </el-button>
+      <el-button
+        size="large"
+        plain
+        :loading="rebindingRole"
+        :disabled="confirmingRole"
+        @click="$emit('rebindRole')"
+      >
+        换绑角色
+      </el-button>
       <el-button
         type="primary"
         size="large"
         :loading="confirmingRole"
-        :disabled="!isBindingPrepared || !isRoleReady"
+        :disabled="!isBindingPrepared || !isRoleReady || rebindingRole"
         @click="$emit('confirmRole')"
       >
         我已完成绑定，下一步
       </el-button>
     </div>
+
+    <div class="meta-footer">
+      <span>最近刷新：{{ formatDateTime(flow.role.refreshedAt) }}</span>
+      <span>链接有效期：{{ formatDateTime(flow.binding.bindExpiresAt) }}</span>
+      <span v-if="flow.binding.bindProbeMessage">
+        链接检测：{{ flow.binding.bindProbeStatus || '-' }} / {{ flow.binding.bindProbeMessage }}
+      </span>
+    </div>
   </section>
 </template>
 
@@ -109,14 +113,6 @@ defineEmits<{
   line-height: 1.6;
 }
 
-.warning-line {
-  color: #b45309;
-}
-
-.meta-line {
-  font-size: 13px;
-}
-
 .status-banner {
   display: flex;
   align-items: center;
@@ -245,6 +241,20 @@ defineEmits<{
   flex-wrap: wrap;
 }
 
+.action-row :deep(.el-button) {
+  margin-left: 0;
+}
+
+.meta-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  justify-content: center;
+  color: #94a3b8;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
 .spinning {
   animation: spin 1s linear infinite;
 }
@@ -299,5 +309,9 @@ defineEmits<{
     width: 100%;
     margin-left: 0;
   }
+
+  .meta-footer {
+    justify-content: flex-start;
+  }
 }
 </style>