From 58f25fad749da65aafde9dbda00bf4dc9bf443e3 Mon Sep 17 00:00:00 2001
From: yml <a2213290201@gmail.com>
Date: Mon, 4 May 2026 11:27:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E5=B9=B3=E5=8F=B0=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=BB=93=E6=9E=9C=E4=BF=A1=E6=81=AF=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/frontend/src/components.d.ts             |  1 +
 .../AdminPlatformCloudtentaclesSection.vue    | 43 ++++++++----------
 .../admin/AdminPlatformKhhaoSection.vue       | 19 +++-----
 .../AdminPlatformKuaishouEticketSection.vue   | 45 +++++++++----------
 .../src/components/admin/AdminResultCard.vue  | 14 ++++++
 5 files changed, 62 insertions(+), 60 deletions(-)
 create mode 100644 apps/frontend/src/components/admin/AdminResultCard.vue

diff --git a/apps/frontend/src/components.d.ts b/apps/frontend/src/components.d.ts
index be0c478b..95a6f5d3 100644
--- a/apps/frontend/src/components.d.ts
+++ b/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']
diff --git a/apps/frontend/src/components/admin/AdminPlatformCloudtentaclesSection.vue b/apps/frontend/src/components/admin/AdminPlatformCloudtentaclesSection.vue
index 5fb04b01..832ac805 100644
--- a/apps/frontend/src/components/admin/AdminPlatformCloudtentaclesSection.vue
+++ b/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>
diff --git a/apps/frontend/src/components/admin/AdminPlatformKhhaoSection.vue b/apps/frontend/src/components/admin/AdminPlatformKhhaoSection.vue
index 2451641e..a4669d5e 100644
--- a/apps/frontend/src/components/admin/AdminPlatformKhhaoSection.vue
+++ b/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">
-        <span class="result-label">登录结果</span>
-        <strong>{{ khhaoLoginResult ? '成功' : '未执行' }}</strong>
+      <AdminResultCard label="登录结果" :value="khhaoLoginResult ? '成功' : '未执行'">
         <p v-if="khhaoLoginResult">
           第 {{ khhaoLoginResult.attempt }} 次成功，验证码识别 {{ khhaoLoginResult.captcha.recognizedText || '-' }}，
           {{ formatAdminDateTime(khhaoLoginResult.loggedInAt) }}
         </p>
         <p v-else>可先点击“测试登录”验证账号密码与 OCR。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
-        <span class="result-label">查询结果</span>
-        <strong>{{ khhaoQueryResult?.itemCount || 0 }} 条</strong>
+      <AdminResultCard label="查询结果" :value="`${khhaoQueryResult?.itemCount || 0} 条`">
         <p v-if="khhaoQueryResult">当前页 {{ khhaoQueryResult.page }} / 总计 {{ khhaoQueryResult.total }} 条</p>
         <p v-else>可先点击“查询订单”验证拉单链路。</p>
-      </article>
+      </AdminResultCard>
 
-      <article class="result-card">
-        <span class="result-label">同步结果</span>
-        <strong>{{ khhaoSyncResult?.syncedCount || 0 }} 条</strong>
+      <AdminResultCard label="同步结果" :value="`${khhaoSyncResult?.syncedCount || 0} 条`">
         <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">
diff --git a/apps/frontend/src/components/admin/AdminPlatformKuaishouEticketSection.vue b/apps/frontend/src/components/admin/AdminPlatformKuaishouEticketSection.vue
index ed50762c..08995516 100644
--- a/apps/frontend/src/components/admin/AdminPlatformKuaishouEticketSection.vue
+++ b/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">
-          <span class="result-label">店铺总数</span>
-          <strong>{{ kuaishouEticketStats.configuredShopCount }}</strong>
+        <AdminResultCard label="店铺总数" :value="kuaishouEticketStats.configuredShopCount" class="kuaishou-side-card">
           <p>其中 Cookie 就绪 {{ kuaishouEticketStats.cookieReadyCount }} 家。</p>
-        </article>
+        </AdminResultCard>
 
-        <article class="result-card kuaishou-side-card">
-          <span class="result-label">当前调试店铺</span>
-          <strong>{{ activeKuaishouEticketShop?.kshopName || activeKuaishouEticketShop?.shopId || '未选择' }}</strong>
+        <AdminResultCard
+          label="当前调试店铺"
+          :value="activeKuaishouEticketShop?.kshopName || activeKuaishouEticketShop?.shopId || '未选择'"
+          class="kuaishou-side-card"
+        >
           <p>{{ kuaishouEticketStats.selectedShopReady ? '已具备调试条件，可直接查询核销信息。' : '请选择店铺并补全 Cookie。' }}</p>
-        </article>
+        </AdminResultCard>
 
-        <article class="result-card kuaishou-side-card">
-          <span class="result-label">最近识别结果</span>
-          <strong>{{ kuaishouEticketShopInfoResult?.shop.kshopName || kuaishouEticketShopInfoResult?.shop.shopId || '未执行' }}</strong>
+        <AdminResultCard
+          label="最近识别结果"
+          :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">
-          <span class="result-label">建议顺序</span>
-          <strong>先配置，再调试</strong>
+        <AdminResultCard label="建议顺序" value="先配置，再调试" class="kuaishou-side-card kuaishou-guide-card">
           <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">
-        <span class="result-label">详情查询</span>
-        <strong>{{ kuaishouEticketDetailResult ? (kuaishouEticketDetailResult.ok ? '成功' : '已返回') : '未执行' }}</strong>
+      <AdminResultCard label="详情查询" :value="kuaishouEticketDetailResult ? (kuaishouEticketDetailResult.ok ? '成功' : '已返回') : '未执行'">
         <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">
-        <span class="result-label">核销执行</span>
-        <strong>{{ kuaishouEticketConsumeResult ? (kuaishouEticketConsumeResult.consumed ? '已处理' : '已返回') : '未执行' }}</strong>
+      <AdminResultCard label="核销执行" :value="kuaishouEticketConsumeResult ? (kuaishouEticketConsumeResult.consumed ? '已处理' : '已返回') : '未执行'">
         <p v-if="kuaishouEticketConsumeResult">
           {{ kuaishouEticketConsumeResult.errorMessage || (kuaishouEticketConsumeResult.ok ? '核销成功' : '接口已返回结果') }}
         </p>
         <p v-else>查询详情后再执行核销会更稳妥。</p>
-      </article>
+      </AdminResultCard>
     </div>
   </section>
 
diff --git a/apps/frontend/src/components/admin/AdminResultCard.vue b/apps/frontend/src/components/admin/AdminResultCard.vue
new file mode 100644
index 00000000..b1cb207f
--- /dev/null
+++ b/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>