抽离平台配置结果信息卡片

apps/frontend/src/components/admin/AdminPlatformCloudtentaclesSection.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AdminResultCard from '@/components/admin/AdminResultCard.vue'
 import type {
   AdminCloudtentaclesLoginTestResult,
   AdminCloudtentaclesPersistedSession,
@@ -168,32 +169,26 @@ defineProps<Props>()
     <p v-if="cloudtentaclesResultError" class="error-copy">{{ cloudtentaclesResultError }}</p>
 
     <div class="result-grid">
-      <article class="result-card">
-        <span class="result-label">短信发送</span>
-        <strong>{{ cloudtentaclesSmsResult ? '成功' : '未执行' }}</strong>
+      <AdminResultCard label="短信发送" :value="cloudtentaclesSmsResult ? '成功' : '未执行'">
         <p v-if="cloudtentaclesSmsResult">
           {{ cloudtentaclesSmsResult.phoneMasked }}，{{ formatAdminDateTime(cloudtentaclesSmsResult.sentAt) }}
         </p>
         <p v-else>先发送短信验证码，确认手机号可用。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
-        <span class="result-label">登录结果</span>
-        <strong>{{ cloudtentaclesLoginResult ? '成功' : '未执行' }}</strong>
+      <AdminResultCard label="登录结果" :value="cloudtentaclesLoginResult ? '成功' : '未执行'">
         <p v-if="cloudtentaclesLoginResult">
           {{ cloudtentaclesLoginResult.phoneMasked }}，{{ formatAdminDateTime(cloudtentaclesLoginResult.loggedInAt) }}
         </p>
         <p v-else>填写短信验证码后可执行测试登录。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
-        <span class="result-label">会话校验</span>
-        <strong>{{ cloudtentaclesValidateResult ? '成功' : '未执行' }}</strong>
+      <AdminResultCard label="会话校验" :value="cloudtentaclesValidateResult ? '成功' : '未执行'">
         <p v-if="cloudtentaclesValidateResult">
           权限 {{ cloudtentaclesValidateResult.session.permissionCount }} 项，余额 {{ cloudtentaclesValidateResult.asset }}
         </p>
         <p v-else>登录成功后可继续校验 token 会话。</p>
-      </article>
+      </AdminResultCard>
     </div>
   </section>
 
@@ -234,23 +229,23 @@ defineProps<Props>()
     </div>
 
     <div class="result-grid">
-      <article class="result-card">
-        <span class="result-label">当前 token</span>
-        <strong>{{ cloudtentaclesValidateResult?.session.tokenMasked || cloudtentaclesLoginResult?.session.tokenMasked || '-' }}</strong>
+      <AdminResultCard
+        label="当前 token"
+        :value="cloudtentaclesValidateResult?.session.tokenMasked || cloudtentaclesLoginResult?.session.tokenMasked || '-'"
+      >
         <p>原始 token 已写入上方输入框，可继续用于校验或后续调试。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
-        <span class="result-label">权限</span>
-        <strong>{{ cloudtentaclesValidateResult?.session.permissionCount || cloudtentaclesLoginResult?.session.permissionCount || 0 }} 项</strong>
+      <AdminResultCard
+        label="权限"
+        :value="`${cloudtentaclesValidateResult?.session.permissionCount || cloudtentaclesLoginResult?.session.permissionCount || 0} 项`"
+      >
         <p>{{ (cloudtentaclesValidateResult?.session.permissions || cloudtentaclesLoginResult?.session.permissions || []).join('、') || '暂无' }}</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
-        <span class="result-label">余额</span>
-        <strong>{{ cloudtentaclesValidateResult?.asset || cloudtentaclesLoginResult?.asset || 0 }}</strong>
+      <AdminResultCard label="余额" :value="cloudtentaclesValidateResult?.asset || cloudtentaclesLoginResult?.asset || 0">
         <p>可用于确认当前履约账号状态。</p>
-      </article>
+      </AdminResultCard>
     </div>
   </section>
 </template>