增加绑定指引

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

@@ -43,6 +43,18 @@ defineEmits<{
       <span>系统正在准备绑定资源，请稍后自动刷新。</span>
     </div>
 
+    <div class="binding-guide">
+      <div class="guide-copy">
+        <strong>绑定操作指引</strong>
+        <p>保存二维码，Q 玩的用 Q 扫，V 玩的用 V 扫，扫了后绑定角色。</p>
+      </div>
+      <img
+        src="/kuaishou-cloud-guide/4.jpg"
+        alt="扫码绑定角色操作指引"
+        class="guide-image"
+      />
+    </div>
+
     <p v-if="flow.role.errorMessage" class="muted warning-line">
       {{ flow.role.errorMessage }}
     </p>
@@ -143,6 +155,42 @@ defineEmits<{
   border-radius: 18px;
 }
 
+.binding-guide {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 180px;
+  gap: 16px;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid #bfdbfe;
+  border-radius: 18px;
+  background: #eff6ff;
+}
+
+.guide-copy {
+  display: grid;
+  gap: 8px;
+}
+
+.guide-copy strong {
+  color: #1e3a8a;
+  font-size: 16px;
+}
+
+.guide-copy p {
+  margin: 0;
+  color: #1d4ed8;
+  font-weight: 700;
+  line-height: 1.7;
+}
+
+.guide-image {
+  width: 100%;
+  border-radius: 14px;
+  border: 1px solid #dbeafe;
+  background: #ffffff;
+  object-fit: cover;
+}
+
 .action-row {
   display: flex;
   gap: 12px;
@@ -172,6 +220,15 @@ defineEmits<{
     height: auto;
   }
 
+  .binding-guide {
+    grid-template-columns: 1fr;
+  }
+
+  .guide-image {
+    max-width: 320px;
+    justify-self: center;
+  }
+
   .action-row {
     width: 100%;
     flex-direction: column;