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

apps/frontend/src/components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     AdminPlatformCloudtentaclesSection: typeof import('./components/admin/AdminPlatformCloudtentaclesSection.vue')['default']
     AdminPlatformKhhaoSection: typeof import('./components/admin/AdminPlatformKhhaoSection.vue')['default']
     AdminPlatformKuaishouEticketSection: typeof import('./components/admin/AdminPlatformKuaishouEticketSection.vue')['default']
+    AdminResultCard: typeof import('./components/admin/AdminResultCard.vue')['default']
     AdminStatusTag: typeof import('./components/admin/AdminStatusTag.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']

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">
+      <AdminResultCard label="短信发送" :value="cloudtentaclesSmsResult ? '成功' : '未执行'">
-        <span class="result-label">短信发送</span>
-        <strong>{{ cloudtentaclesSmsResult ? '成功' : '未执行' }}</strong>
         <p v-if="cloudtentaclesSmsResult">
           {{ cloudtentaclesSmsResult.phoneMasked }}，{{ formatAdminDateTime(cloudtentaclesSmsResult.sentAt) }}
         </p>
         <p v-else>先发送短信验证码，确认手机号可用。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
+      <AdminResultCard label="登录结果" :value="cloudtentaclesLoginResult ? '成功' : '未执行'">
-        <span class="result-label">登录结果</span>
-        <strong>{{ cloudtentaclesLoginResult ? '成功' : '未执行' }}</strong>
         <p v-if="cloudtentaclesLoginResult">
           {{ cloudtentaclesLoginResult.phoneMasked }}，{{ formatAdminDateTime(cloudtentaclesLoginResult.loggedInAt) }}
         </p>
         <p v-else>填写短信验证码后可执行测试登录。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
+      <AdminResultCard label="会话校验" :value="cloudtentaclesValidateResult ? '成功' : '未执行'">
-        <span class="result-label">会话校验</span>
-        <strong>{{ cloudtentaclesValidateResult ? '成功' : '未执行' }}</strong>
         <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">
+      <AdminResultCard
-        <span class="result-label">当前 token</span>
+        label="当前 token"
-        <strong>{{ cloudtentaclesValidateResult?.session.tokenMasked || cloudtentaclesLoginResult?.session.tokenMasked || '-' }}</strong>
+        :value="cloudtentaclesValidateResult?.session.tokenMasked || cloudtentaclesLoginResult?.session.tokenMasked || '-'"
+      >
         <p>原始 token 已写入上方输入框，可继续用于校验或后续调试。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
+      <AdminResultCard
-        <span class="result-label">权限</span>
+        label="权限"
-        <strong>{{ cloudtentaclesValidateResult?.session.permissionCount || cloudtentaclesLoginResult?.session.permissionCount || 0 }} 项</strong>
+        :value="`${cloudtentaclesValidateResult?.session.permissionCount || cloudtentaclesLoginResult?.session.permissionCount || 0} 项`"
+      >
         <p>{{ (cloudtentaclesValidateResult?.session.permissions || cloudtentaclesLoginResult?.session.permissions || []).join('、') || '暂无' }}</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
+      <AdminResultCard label="余额" :value="cloudtentaclesValidateResult?.asset || cloudtentaclesLoginResult?.asset || 0">
-        <span class="result-label">余额</span>
-        <strong>{{ cloudtentaclesValidateResult?.asset || cloudtentaclesLoginResult?.asset || 0 }}</strong>
         <p>可用于确认当前履约账号状态。</p>
-      </article>
+      </AdminResultCard>
     </div>
   </section>
 </template>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AdminResultCard from '@/components/admin/AdminResultCard.vue'
 import type {
   AdminKhhaoLoginTestResult,
   AdminKhhaoOrderQueryResult,
@@ -130,29 +131,23 @@ defineProps<Props>()
     <p v-if="khhaoResultError" class="error-copy">{{ khhaoResultError }}</p>
 
     <div class="result-grid">
-      <article class="result-card">
+      <AdminResultCard label="登录结果" :value="khhaoLoginResult ? '成功' : '未执行'">
-        <span class="result-label">登录结果</span>
-        <strong>{{ khhaoLoginResult ? '成功' : '未执行' }}</strong>
         <p v-if="khhaoLoginResult">
           第 {{ khhaoLoginResult.attempt }} 次成功，验证码识别 {{ khhaoLoginResult.captcha.recognizedText || '-' }}，
           {{ formatAdminDateTime(khhaoLoginResult.loggedInAt) }}
         </p>
         <p v-else>可先点击“测试登录”验证账号密码与 OCR。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
+      <AdminResultCard label="查询结果" :value="`${khhaoQueryResult?.itemCount || 0} 条`">
-        <span class="result-label">查询结果</span>
-        <strong>{{ khhaoQueryResult?.itemCount || 0 }} 条</strong>
         <p v-if="khhaoQueryResult">当前页 {{ khhaoQueryResult.page }} / 总计 {{ khhaoQueryResult.total }} 条</p>
         <p v-else>可先点击“查询订单”验证拉单链路。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
+      <AdminResultCard label="同步结果" :value="`${khhaoSyncResult?.syncedCount || 0} 条`">
-        <span class="result-label">同步结果</span>
-        <strong>{{ khhaoSyncResult?.syncedCount || 0 }} 条</strong>
         <p v-if="khhaoSyncResult">忽略 {{ khhaoSyncResult.ignoredCount }} 条，拉取 {{ khhaoSyncResult.fetchedCount }} 条</p>
         <p v-else>完成履约配置后可在这里手动同步。</p>
-      </article>
+      </AdminResultCard>
     </div>
 
     <div v-if="khhaoAutoSyncState" class="meta-card compact-meta">

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AdminResultCard from '@/components/admin/AdminResultCard.vue'
 import type { EditableKuaishouEticketShop } from '@/composables/admin/platform-shops/types'
 import type {
   AdminKuaishouEticketConsumeResult,
@@ -189,32 +190,32 @@ defineProps<Props>()
       </div>
 
       <aside class="kuaishou-side-panel">
-        <article class="result-card kuaishou-side-card">
+        <AdminResultCard label="店铺总数" :value="kuaishouEticketStats.configuredShopCount" class="kuaishou-side-card">
-          <span class="result-label">店铺总数</span>
-          <strong>{{ kuaishouEticketStats.configuredShopCount }}</strong>
           <p>其中 Cookie 就绪 {{ kuaishouEticketStats.cookieReadyCount }} 家。</p>
-        </article>
+        </AdminResultCard>
 
-        <article class="result-card kuaishou-side-card">
+        <AdminResultCard
-          <span class="result-label">当前调试店铺</span>
+          label="当前调试店铺"
-          <strong>{{ activeKuaishouEticketShop?.kshopName || activeKuaishouEticketShop?.shopId || '未选择' }}</strong>
+          :value="activeKuaishouEticketShop?.kshopName || activeKuaishouEticketShop?.shopId || '未选择'"
+          class="kuaishou-side-card"
+        >
           <p>{{ kuaishouEticketStats.selectedShopReady ? '已具备调试条件，可直接查询核销信息。' : '请选择店铺并补全 Cookie。' }}</p>
-        </article>
+        </AdminResultCard>
 
-        <article class="result-card kuaishou-side-card">
+        <AdminResultCard
-          <span class="result-label">最近识别结果</span>
+          label="最近识别结果"
-          <strong>{{ kuaishouEticketShopInfoResult?.shop.kshopName || kuaishouEticketShopInfoResult?.shop.shopId || '未执行' }}</strong>
+          :value="kuaishouEticketShopInfoResult?.shop.kshopName || kuaishouEticketShopInfoResult?.shop.shopId || '未执行'"
+          class="kuaishou-side-card"
+        >
           <p v-if="kuaishouEticketShopInfoResult">结算状态 {{ kuaishouEticketShopInfoResult.shop.settleStatus }}</p>
           <p v-else>可用“读取店铺信息”校验 Cookie 是否属于预期店铺。</p>
-        </article>
+        </AdminResultCard>
 
-        <article class="result-card kuaishou-side-card kuaishou-guide-card">
+        <AdminResultCard label="建议顺序" value="先配置，再调试" class="kuaishou-side-card kuaishou-guide-card">
-          <span class="result-label">建议顺序</span>
-          <strong>先配置，再调试</strong>
           <p>1. 新增店铺并粘贴 Cookie</p>
           <p>2. 读取店铺信息确认 kshopName / shopId</p>
           <p>3. 设为调试店铺后查询券码并执行核销</p>
-        </article>
+        </AdminResultCard>
       </aside>
     </div>
 
@@ -292,24 +293,20 @@ defineProps<Props>()
     </div>
 
     <div class="result-grid">
-      <article class="result-card">
+      <AdminResultCard label="详情查询" :value="kuaishouEticketDetailResult ? (kuaishouEticketDetailResult.ok ? '成功' : '已返回') : '未执行'">
-        <span class="result-label">详情查询</span>
-        <strong>{{ kuaishouEticketDetailResult ? (kuaishouEticketDetailResult.ok ? '成功' : '已返回') : '未执行' }}</strong>
         <p v-if="kuaishouEticketDetailResult?.detail">
           {{ kuaishouEticketDetailResult.goods?.itemTitle || kuaishouEticketDetailResult.goods?.skuDesc || '-' }}，
           剩余 {{ kuaishouEticketDetailResult.detail.leftCount }} / {{ kuaishouEticketDetailResult.detail.totalCount }}
         </p>
         <p v-else>先通过查询券码获取核销详情并自动带出核销参数。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
+      <AdminResultCard label="核销执行" :value="kuaishouEticketConsumeResult ? (kuaishouEticketConsumeResult.consumed ? '已处理' : '已返回') : '未执行'">
-        <span class="result-label">核销执行</span>
-        <strong>{{ kuaishouEticketConsumeResult ? (kuaishouEticketConsumeResult.consumed ? '已处理' : '已返回') : '未执行' }}</strong>
         <p v-if="kuaishouEticketConsumeResult">
           {{ kuaishouEticketConsumeResult.errorMessage || (kuaishouEticketConsumeResult.ok ? '核销成功' : '接口已返回结果') }}
         </p>
         <p v-else>查询详情后再执行核销会更稳妥。</p>
-      </article>
+      </AdminResultCard>
     </div>
   </section>
 

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+  value: string | number
+}>()
+</script>
+
+<template>
+  <article class="result-card">
+    <span class="result-label">{{ label }}</span>
+    <strong>{{ value }}</strong>
+    <slot />
+  </article>
+</template>