From 17b96dfef6b0504067d1daabeafc97add15108ec Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 2 May 2026 18:35:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B9=B3=E5=8F=B0=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/admin/AdminPlatformShopsView.vue    | 979 +++++++++++-------
 1 file changed, 581 insertions(+), 398 deletions(-)

diff --git a/apps/frontend/src/views/admin/AdminPlatformShopsView.vue b/apps/frontend/src/views/admin/AdminPlatformShopsView.vue
index 6db793c3..64ea8c59 100644
--- a/apps/frontend/src/views/admin/AdminPlatformShopsView.vue
+++ b/apps/frontend/src/views/admin/AdminPlatformShopsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import { showError, showSuccess } from '@/lib/feedback'
 import {
@@ -22,6 +22,8 @@ import type {
 import { hasAdminRole } from '@/utils/admin-auth'
 import { formatAdminDateTime } from '@/utils/admin-time'
 
+type PlatformTab = 'agiso' | 'khhao'
+
 type EditableDefaults = {
   messageTemplate: string
   autoDeliveryMessageTemplate: string
@@ -41,12 +43,15 @@ const loading = ref(true)
 const saving = ref(false)
 const khhaoSaving = ref(false)
 const errorMessage = ref('')
-const filePath = ref('')
+const activePlatform = ref<PlatformTab>('agiso')
+
+const agisoFilePath = ref('')
 const khhaoFilePath = ref('')
 const defaults = ref<EditableDefaults>(createEmptyDefaults())
 const shops = ref<EditableShop[]>([])
 const observedShops = ref<AdminAgisoObservedShopItem[]>([])
 const expandedShopIds = ref<string[]>([])
+
 const khhaoForm = ref({
   baseUrl: 'https://admin.khhao.com',
   username: '',
@@ -63,6 +68,19 @@ const khhaoLoginResult = ref<AdminKhhaoLoginTestResult | null>(null)
 const khhaoQueryResult = ref<AdminKhhaoOrderQueryResult | null>(null)
 const khhaoSyncResult = ref<AdminKhhaoOrderSyncResult | null>(null)
 
+const agisoStats = computed(() => ({
+  configuredShopCount: shops.value.length,
+  observedShopCount: observedShops.value.length,
+  pendingObservedCount: observedShops.value.filter((item) => !item.configured).length,
+}))
+
+const khhaoStats = computed(() => ({
+  hasCredential: Boolean(khhaoForm.value.username.trim() && khhaoForm.value.password.trim()),
+  queryCount: khhaoQueryResult.value?.itemCount || 0,
+  syncedCount: khhaoSyncResult.value?.syncedCount || 0,
+  ignoredCount: khhaoSyncResult.value?.ignoredCount || 0,
+}))
+
 function createEmptyDefaults(): EditableDefaults {
   return {
     messageTemplate: '',
@@ -115,10 +133,13 @@ async function loadConfigs() {
       fetchAdminAgisoShopConfigs(),
       fetchAdminKhhaoSourceConfig(),
     ])
-    filePath.value = agisoResponse.data.filePath
+
+    agisoFilePath.value = agisoResponse.data.filePath
     defaults.value = mapEditableDefaults(agisoResponse.data.defaults)
     shops.value = agisoResponse.data.shops.map(mapEditableShop)
     observedShops.value = agisoResponse.data.observedShops
+    expandedShopIds.value = []
+
     khhaoFilePath.value = khhaoResponse.data.filePath
     khhaoForm.value = {
       baseUrl: khhaoResponse.data.source.baseUrl || 'https://admin.khhao.com',
@@ -128,14 +149,17 @@ async function loadConfigs() {
       limit: 10,
       maxCaptchaAttempts: khhaoResponse.data.source.maxCaptchaAttempts || 3,
     }
-    expandedShopIds.value = []
   } catch (error) {
-    errorMessage.value = error instanceof Error ? error.message : '读取店铺配置失败'
+    errorMessage.value = error instanceof Error ? error.message : '读取平台配置失败'
   } finally {
     loading.value = false
   }
 }
 
+function switchPlatform(platform: PlatformTab) {
+  activePlatform.value = platform
+}
+
 function addShop() {
   const shop = createEmptyShop()
   shops.value.unshift(shop)
@@ -169,7 +193,6 @@ function expandShop(id: string) {
   if (expandedShopIds.value.includes(id)) {
     return
   }
-
   expandedShopIds.value = [id, ...expandedShopIds.value]
 }
 
@@ -182,7 +205,6 @@ function toggleShop(id: string) {
     collapseShop(id)
     return
   }
-
   expandShop(id)
 }
 
@@ -200,19 +222,14 @@ function describeShop(shop: EditableShop) {
   if (shop.messageTemplate.trim()) {
     overrides.push('领取模板')
   }
-
   if (shop.autoDeliveryMessageTemplate.trim()) {
     overrides.push('发货模板')
   }
 
-  if (overrides.length === 0) {
-    return '使用默认模板'
-  }
-
-  return `已覆盖 ${overrides.join('、')}`
+  return overrides.length === 0 ? '使用默认模板' : `已覆盖 ${overrides.join('、')}`
 }
 
-async function saveConfigs() {
+async function saveAgisoConfigs() {
   const payloadDefaults = {
     messageTemplate: defaults.value.messageTemplate.trim(),
     autoDeliveryMessageTemplate: defaults.value.autoDeliveryMessageTemplate.trim(),
@@ -235,13 +252,13 @@ async function saveConfigs() {
       defaults: payloadDefaults,
       shops: payload,
     })
-    filePath.value = response.data.filePath
+    agisoFilePath.value = response.data.filePath
     defaults.value = mapEditableDefaults(response.data.defaults)
     shops.value = response.data.shops.map(mapEditableShop)
-    showSuccess('店铺配置已保存')
+    showSuccess('Agiso 配置已保存')
     await loadConfigs()
   } catch (error) {
-    showError(error instanceof Error ? error.message : '保存店铺配置失败')
+    showError(error instanceof Error ? error.message : '保存 Agiso 配置失败')
   } finally {
     saving.value = false
   }
@@ -263,10 +280,31 @@ function ensureKhhaoCredentials() {
     khhaoResultError.value = '请先填写 khhao 账号和密码'
     return false
   }
-
   return true
 }
 
+async function handleKhhaoSaveSource() {
+  khhaoSaving.value = true
+  khhaoResultError.value = ''
+
+  try {
+    const response = await saveAdminKhhaoSourceConfig({
+      enabled: true,
+      baseUrl: khhaoForm.value.baseUrl.trim() || 'https://admin.khhao.com',
+      username: khhaoForm.value.username.trim(),
+      password: khhaoForm.value.password.trim(),
+      maxCaptchaAttempts: Number(khhaoForm.value.maxCaptchaAttempts || 3),
+    })
+    khhaoFilePath.value = response.data.filePath
+    showSuccess('khhao 来源配置已保存')
+  } catch (error) {
+    khhaoResultError.value = error instanceof Error ? error.message : 'khhao 来源配置保存失败'
+    showError(khhaoResultError.value)
+  } finally {
+    khhaoSaving.value = false
+  }
+}
+
 async function handleKhhaoTestLogin() {
   if (!ensureKhhaoCredentials()) {
     return
@@ -290,28 +328,6 @@ async function handleKhhaoTestLogin() {
   }
 }
 
-async function handleKhhaoSaveSource() {
-  khhaoSaving.value = true
-  khhaoResultError.value = ''
-
-  try {
-    const response = await saveAdminKhhaoSourceConfig({
-      enabled: true,
-      baseUrl: khhaoForm.value.baseUrl.trim() || 'https://admin.khhao.com',
-      username: khhaoForm.value.username.trim(),
-      password: khhaoForm.value.password.trim(),
-      maxCaptchaAttempts: Number(khhaoForm.value.maxCaptchaAttempts || 3),
-    })
-    khhaoFilePath.value = response.data.filePath
-    showSuccess('khhao 来源配置已保存')
-  } catch (error) {
-    khhaoResultError.value = error instanceof Error ? error.message : 'khhao 来源配置保存失败'
-    showError(khhaoResultError.value)
-  } finally {
-    khhaoSaving.value = false
-  }
-}
-
 async function handleKhhaoQueryOrders() {
   if (!ensureKhhaoCredentials()) {
     return
@@ -357,136 +373,326 @@ onMounted(loadConfigs)
 
 <template>
   <section class="admin-panel">
-    <header class="panel-header">
-      <div>
-        <h1>Agiso 店铺配置</h1>
-        <p>Agiso 默认消息模板和店铺覆盖配置都改为文件维护。保存后立即生效，不需要再手改 `.env`。</p>
+    <header class="hero-card">
+      <div class="hero-copy">
+        <h1>平台配置</h1>
+        <p>按平台分别管理来源接入、凭据与店铺能力。Agiso 负责 webhook / 店铺消息配置，khhao 负责账号登录拉单与同步。</p>
       </div>
-      <div class="header-actions">
-        <el-button round @click="loadConfigs">刷新</el-button>
-        <el-button round type="primary" @click="addShop">新增店铺</el-button>
+      <div class="hero-actions">
+        <el-button round @click="loadConfigs">刷新全部配置</el-button>
+        <el-button v-if="activePlatform === 'agiso'" round type="primary" @click="addShop">新增 Agiso 店铺</el-button>
       </div>
     </header>
 
-    <div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以维护店铺配置。</div>
+    <div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以维护平台配置。</div>
 
     <template v-else>
-      <section class="meta-card">
-        <div class="meta-line">
-          <span class="meta-label">配置文件</span>
-          <code>{{ filePath || '-' }}</code>
-        </div>
-        <div class="meta-line">
-          <span class="meta-label">说明</span>
-          <span>全局默认消息模板与店铺级覆盖统一保存在此文件中。店铺留空时会回退到上面的默认模板与全局兜底配置。</span>
-        </div>
-      </section>
-
       <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-      <div v-if="loading" class="empty-block">店铺配置加载中</div>
+      <div v-if="loading" class="empty-block">平台配置加载中</div>
 
       <template v-else>
-        <section class="table-card">
-          <div class="section-title-row">
-            <div>
-              <h3>默认消息模板</h3>
-              <p>留空时会回退到系统内置模板。店铺未单独配置时，默认使用这里的内容。</p>
+        <section class="overview-grid">
+          <button
+            type="button"
+            :class="['platform-overview-card', { 'is-active': activePlatform === 'agiso' }]"
+            @click="switchPlatform('agiso')"
+          >
+            <div class="platform-head">
+              <span class="platform-badge">Agiso</span>
+              <span class="platform-tag">Webhook / 店铺</span>
             </div>
-          </div>
+            <strong>{{ agisoStats.configuredShopCount }}</strong>
+            <span>已配置店铺</span>
+            <div class="platform-metrics">
+              <span>识别到 {{ agisoStats.observedShopCount }} 家</span>
+              <span>待补 {{ agisoStats.pendingObservedCount }} 家</span>
+            </div>
+          </button>
 
-          <div class="shop-grid">
-            <label class="field-block field-wide">
-              <span>默认领取链接消息模板</span>
-              <textarea
-                v-model="defaults.messageTemplate"
-                class="text-area"
-                placeholder="例如：您的订单 {platformOrderId} 已创建领取链接，请尽快打开并完成领取：{claimUrl}"
-              />
-            </label>
-
-            <label class="field-block field-wide">
-              <span>默认自动发货消息模板</span>
-              <textarea
-                v-model="defaults.autoDeliveryMessageTemplate"
-                class="text-area"
-                placeholder="例如：您的订单 {platformOrderId} 已完成自动发货，请注意查收。"
-              />
-            </label>
-          </div>
+          <button
+            type="button"
+            :class="['platform-overview-card', { 'is-active': activePlatform === 'khhao' }]"
+            @click="switchPlatform('khhao')"
+          >
+            <div class="platform-head">
+              <span class="platform-badge">khhao</span>
+              <span class="platform-tag">账号 / 拉单</span>
+            </div>
+            <strong>{{ khhaoStats.hasCredential ? '已配置' : '未配置' }}</strong>
+            <span>来源凭据</span>
+            <div class="platform-metrics">
+              <span>最近查询 {{ khhaoStats.queryCount }} 条</span>
+              <span>最近同步成功 {{ khhaoStats.syncedCount }} 条</span>
+            </div>
+          </button>
         </section>
 
-        <section class="table-card">
-          <div class="section-title-row">
-            <div>
-              <h3>khhao 数据来源接入</h3>
-              <p>这里用于保存 khhao 来源凭据，并测试登录、查询订单和手动同步。后续履约规则可去“履约配置”页从查询结果里直接导入。</p>
-            </div>
-            <div class="section-actions">
-              <el-button :loading="khhaoSaving" round @click="handleKhhaoSaveSource">保存来源配置</el-button>
-              <el-button :loading="khhaoTesting" round @click="handleKhhaoTestLogin">测试登录</el-button>
-              <el-button :loading="khhaoQuerying" round @click="handleKhhaoQueryOrders">查询订单</el-button>
-              <el-button :loading="khhaoSyncing" round type="primary" @click="handleKhhaoSyncOrders">同步订单</el-button>
-            </div>
-          </div>
+        <section class="platform-switcher">
+          <button
+            type="button"
+            :class="['switch-chip', { 'is-active': activePlatform === 'agiso' }]"
+            @click="switchPlatform('agiso')"
+          >
+            Agiso 店铺与消息
+          </button>
+          <button
+            type="button"
+            :class="['switch-chip', { 'is-active': activePlatform === 'khhao' }]"
+            @click="switchPlatform('khhao')"
+          >
+            khhao 来源与同步
+          </button>
+        </section>
 
-          <div class="meta-card">
+        <template v-if="activePlatform === 'agiso'">
+          <section class="meta-card">
+            <div class="meta-line">
+              <span class="meta-label">配置文件</span>
+              <code>{{ agisoFilePath || '-' }}</code>
+            </div>
+            <div class="meta-line">
+              <span class="meta-label">职责</span>
+              <span>管理 Agiso 默认消息模板、店铺 AccessToken 以及店铺级模板覆盖。该区域不处理 khhao 登录与拉单。</span>
+            </div>
+          </section>
+
+          <section class="table-card">
+            <div class="section-title-row">
+              <div>
+                <h3>默认消息模板</h3>
+                <p>Agiso 店铺未单独配置时，统一使用这里的领取消息与自动发货消息模板。</p>
+              </div>
+            </div>
+
+            <div class="form-grid">
+              <label class="field-block field-wide">
+                <span>默认领取链接消息模板</span>
+                <textarea
+                  v-model="defaults.messageTemplate"
+                  class="text-area"
+                  placeholder="例如：您的订单 {platformOrderId} 已创建领取链接，请尽快打开并完成领取：{claimUrl}"
+                />
+              </label>
+
+              <label class="field-block field-wide">
+                <span>默认自动发货消息模板</span>
+                <textarea
+                  v-model="defaults.autoDeliveryMessageTemplate"
+                  class="text-area"
+                  placeholder="例如：您的订单 {platformOrderId} 已完成自动发货，请注意查收。"
+                />
+              </label>
+            </div>
+          </section>
+
+          <section class="table-card">
+            <div class="section-title-row">
+              <div>
+                <h3>Agiso 店铺列表</h3>
+                <p>每家店铺可单独配置 AccessToken 和模板覆盖。建议先用“近期识别到的店铺”导入，再补 AccessToken。</p>
+              </div>
+              <div class="section-actions">
+                <el-button :disabled="shops.length === 0" text @click="expandAllShops">全部展开</el-button>
+                <el-button :disabled="shops.length === 0" text @click="collapseAllShops">全部折叠</el-button>
+                <el-button :loading="saving" round type="primary" @click="saveAgisoConfigs">保存 Agiso 配置</el-button>
+              </div>
+            </div>
+
+            <div v-if="shops.length === 0" class="empty-inline">当前还没有 Agiso 店铺配置，先新增一条。</div>
+
+            <div v-for="shop in shops" :key="shop.id" class="shop-card">
+              <button type="button" class="shop-summary" @click="toggleShop(shop.id)">
+                <div class="shop-summary-main">
+                  <strong>{{ shop.shopName || shop.shopId || '未命名店铺' }}</strong>
+                  <span class="cell-subtle">ID: {{ shop.shopId || '未填写' }}</span>
+                </div>
+                <div class="shop-summary-side">
+                  <span class="shop-status" :class="{ 'is-disabled': !shop.enabled }">
+                    {{ shop.enabled ? '已启用' : '已停用' }}
+                  </span>
+                  <span class="shop-summary-copy">{{ describeShop(shop) }}</span>
+                  <span class="shop-toggle">{{ isShopExpanded(shop.id) ? '收起' : '展开' }}</span>
+                </div>
+              </button>
+
+              <div v-if="isShopExpanded(shop.id)" class="shop-body">
+                <div class="form-grid">
+                  <label class="field-block">
+                    <span>店铺 ID</span>
+                    <input v-model="shop.shopId" class="text-input" placeholder="例如 693760716" />
+                  </label>
+
+                  <label class="field-block">
+                    <span>店铺名称</span>
+                    <input v-model="shop.shopName" class="text-input" placeholder="例如 大锤商行" />
+                  </label>
+
+                  <label class="field-block field-wide">
+                    <span>AccessToken</span>
+                    <input v-model="shop.accessToken" class="text-input" placeholder="AldsIdle..." />
+                  </label>
+
+                  <label class="field-block field-wide">
+                    <span>领取链接消息模板</span>
+                    <textarea
+                      v-model="shop.messageTemplate"
+                      class="text-area"
+                      placeholder="留空则沿用默认领取链接模板"
+                    />
+                  </label>
+
+                  <label class="field-block field-wide">
+                    <span>自动发货消息模板</span>
+                    <textarea
+                      v-model="shop.autoDeliveryMessageTemplate"
+                      class="text-area"
+                      placeholder="留空则沿用默认自动发货模板"
+                    />
+                  </label>
+                </div>
+
+                <div class="shop-actions">
+                  <label class="checkbox-line">
+                    <input v-model="shop.enabled" type="checkbox" />
+                    <span>启用店铺级覆盖</span>
+                  </label>
+                  <el-button link type="danger" @click="removeShop(shop.id)">删除</el-button>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="table-card">
+            <div class="section-title-row">
+              <div>
+                <h3>近期识别到的 Agiso 店铺</h3>
+                <p>从 webhook 自动识别出的店铺，可一键导入到上方店铺列表。</p>
+              </div>
+            </div>
+
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th>店铺</th>
+                  <th>Webhook 次数</th>
+                  <th>最近出现时间</th>
+                  <th>状态</th>
+                  <th>操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="item in observedShops" :key="item.shopId">
+                  <td>
+                    <div class="cell-stack">
+                      <strong>{{ item.displayShopName || item.shopId }}</strong>
+                      <span class="cell-subtle">ID: {{ item.shopId }}</span>
+                    </div>
+                  </td>
+                  <td>{{ item.webhookEventCount }}</td>
+                  <td>{{ formatAdminDateTime(item.latestSeenAt) }}</td>
+                  <td>{{ item.configured ? '已配置' : '未配置' }}</td>
+                  <td>
+                    <el-button v-if="!item.configured" link type="primary" @click="importObservedShop(item)">导入到店铺</el-button>
+                    <span v-else class="cell-subtle">已存在</span>
+                  </td>
+                </tr>
+                <tr v-if="observedShops.length === 0">
+                  <td colspan="5" class="empty-inline">最近还没有识别到可用店铺。</td>
+                </tr>
+              </tbody>
+            </table>
+          </section>
+        </template>
+
+        <template v-else>
+          <section class="meta-card">
             <div class="meta-line">
               <span class="meta-label">配置文件</span>
               <code>{{ khhaoFilePath || '-' }}</code>
             </div>
             <div class="meta-line">
-              <span class="meta-label">说明</span>
-              <span>khhao 的 Base URL、账号、密码和验证码重试次数会单独保存在该文件中，不与 Agiso 店铺配置混用。</span>
+              <span class="meta-label">职责</span>
+              <span>管理 khhao 的来源地址、登录账号、密码与验证码重试次数，并执行测试登录、查询订单与手动同步。</span>
             </div>
-          </div>
+          </section>
 
-          <div class="shop-grid">
-            <label class="field-block field-wide">
-              <span>Base URL</span>
-              <input v-model="khhaoForm.baseUrl" class="text-input" placeholder="https://admin.khhao.com" />
-            </label>
-
-            <label class="field-block">
-              <span>账号</span>
-              <input v-model="khhaoForm.username" class="text-input" placeholder="khhao 登录账号" />
-            </label>
-
-            <label class="field-block">
-              <span>密码</span>
-              <input v-model="khhaoForm.password" class="text-input" type="password" placeholder="khhao 登录密码" />
-            </label>
-
-            <label class="field-block">
-              <span>页码</span>
-              <input v-model.number="khhaoForm.page" class="text-input" type="number" min="1" />
-            </label>
-
-            <label class="field-block">
-              <span>每页条数</span>
-              <input v-model.number="khhaoForm.limit" class="text-input" type="number" min="1" max="50" />
-            </label>
-
-            <label class="field-block">
-              <span>验证码重试次数</span>
-              <input v-model.number="khhaoForm.maxCaptchaAttempts" class="text-input" type="number" min="1" max="5" />
-            </label>
-          </div>
-
-          <p v-if="khhaoResultError" class="error-copy">{{ khhaoResultError }}</p>
-
-          <div v-if="khhaoLoginResult" class="meta-card">
-            <div class="meta-line">
-              <span class="meta-label">登录测试</span>
-              <span>账号 {{ khhaoLoginResult.username }}，第 {{ khhaoLoginResult.attempt }} 次成功，Cookie {{ khhaoLoginResult.session.cookieCount }} 个，验证码识别：{{ khhaoLoginResult.captcha.recognizedText || '-' }}</span>
+          <section class="table-card">
+            <div class="section-title-row">
+              <div>
+                <h3>khhao 来源配置</h3>
+                <p>先保存 khhao 凭据，再按需执行登录测试、订单查询或同步。履约规则请前往“履约配置”页处理。</p>
+              </div>
+              <div class="section-actions">
+                <el-button :loading="khhaoSaving" round @click="handleKhhaoSaveSource">保存来源配置</el-button>
+                <el-button :loading="khhaoTesting" round @click="handleKhhaoTestLogin">测试登录</el-button>
+                <el-button :loading="khhaoQuerying" round @click="handleKhhaoQueryOrders">查询订单</el-button>
+                <el-button :loading="khhaoSyncing" round type="primary" @click="handleKhhaoSyncOrders">同步订单</el-button>
+              </div>
             </div>
-            <div class="meta-line">
-              <span class="meta-label">时间</span>
-              <span>{{ formatAdminDateTime(khhaoLoginResult.loggedInAt) }}</span>
-            </div>
-          </div>
 
-          <template v-if="khhaoQueryResult">
-            <div class="section-title-row compact-top">
+            <div class="form-grid">
+              <label class="field-block field-wide">
+                <span>Base URL</span>
+                <input v-model="khhaoForm.baseUrl" class="text-input" placeholder="https://admin.khhao.com" />
+              </label>
+
+              <label class="field-block">
+                <span>账号</span>
+                <input v-model="khhaoForm.username" class="text-input" placeholder="khhao 登录账号" />
+              </label>
+
+              <label class="field-block">
+                <span>密码</span>
+                <input v-model="khhaoForm.password" class="text-input" type="password" placeholder="khhao 登录密码" />
+              </label>
+
+              <label class="field-block">
+                <span>页码</span>
+                <input v-model.number="khhaoForm.page" class="text-input" type="number" min="1" />
+              </label>
+
+              <label class="field-block">
+                <span>每页条数</span>
+                <input v-model.number="khhaoForm.limit" class="text-input" type="number" min="1" max="50" />
+              </label>
+
+              <label class="field-block">
+                <span>验证码重试次数</span>
+                <input v-model.number="khhaoForm.maxCaptchaAttempts" class="text-input" type="number" min="1" max="5" />
+              </label>
+            </div>
+
+            <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>
+                <p v-if="khhaoLoginResult">
+                  第 {{ khhaoLoginResult.attempt }} 次成功，验证码识别 {{ khhaoLoginResult.captcha.recognizedText || '-' }}，
+                  {{ formatAdminDateTime(khhaoLoginResult.loggedInAt) }}
+                </p>
+                <p v-else>可先点击“测试登录”验证账号密码与 OCR。</p>
+              </article>
+
+              <article class="result-card">
+                <span class="result-label">查询结果</span>
+                <strong>{{ khhaoQueryResult?.itemCount || 0 }} 条</strong>
+                <p v-if="khhaoQueryResult">当前页 {{ khhaoQueryResult.page }} / 总计 {{ khhaoQueryResult.total }} 条</p>
+                <p v-else>可先点击“查询订单”验证拉单链路。</p>
+              </article>
+
+              <article class="result-card">
+                <span class="result-label">同步结果</span>
+                <strong>{{ khhaoSyncResult?.syncedCount || 0 }} 条</strong>
+                <p v-if="khhaoSyncResult">忽略 {{ khhaoSyncResult.ignoredCount }} 条，拉取 {{ khhaoSyncResult.fetchedCount }} 条</p>
+                <p v-else>完成履约配置后可在这里手动同步。</p>
+              </article>
+            </div>
+          </section>
+
+          <section v-if="khhaoQueryResult" class="table-card">
+            <div class="section-title-row">
               <div>
                 <h3>khhao 查询结果</h3>
                 <p>当前页 {{ khhaoQueryResult.page }}，本页 {{ khhaoQueryResult.itemCount }} 条，总数 {{ khhaoQueryResult.total }}。</p>
@@ -528,10 +734,10 @@ onMounted(loadConfigs)
                 </tr>
               </tbody>
             </table>
-          </template>
+          </section>
 
-          <template v-if="khhaoSyncResult">
-            <div class="section-title-row compact-top">
+          <section v-if="khhaoSyncResult" class="table-card">
+            <div class="section-title-row">
               <div>
                 <h3>khhao 同步结果</h3>
                 <p>拉取 {{ khhaoSyncResult.fetchedCount }} 条，成功 {{ khhaoSyncResult.syncedCount }} 条，忽略 {{ khhaoSyncResult.ignoredCount }} 条。</p>
@@ -559,133 +765,8 @@ onMounted(loadConfigs)
                 </tr>
               </tbody>
             </table>
-          </template>
-        </section>
-
-        <section class="table-card">
-          <div class="section-title-row">
-            <div>
-              <h3>已配置店铺</h3>
-              <p>默认折叠显示。至少填写 `shopId` 和 `accessToken`；`shopName` 为空时，界面会退回显示店铺 ID。</p>
-            </div>
-            <div class="section-actions">
-              <el-button :disabled="shops.length === 0" text @click="expandAllShops">全部展开</el-button>
-              <el-button :disabled="shops.length === 0" text @click="collapseAllShops">全部折叠</el-button>
-              <el-button :loading="saving" round type="primary" @click="saveConfigs">保存配置</el-button>
-            </div>
-          </div>
-
-          <div v-if="shops.length === 0" class="empty-inline">当前还没有店铺配置，先新增一条。</div>
-
-          <div v-for="shop in shops" :key="shop.id" class="shop-card">
-            <button type="button" class="shop-summary" @click="toggleShop(shop.id)">
-              <div class="shop-summary-main">
-                <strong>{{ shop.shopName || shop.shopId || '未命名店铺' }}</strong>
-                <span class="cell-subtle">ID: {{ shop.shopId || '未填写' }}</span>
-              </div>
-              <div class="shop-summary-side">
-                <span class="shop-status" :class="{ 'is-disabled': !shop.enabled }">
-                  {{ shop.enabled ? '已启用' : '已停用' }}
-                </span>
-                <span class="shop-summary-copy">{{ describeShop(shop) }}</span>
-                <span class="shop-toggle">{{ isShopExpanded(shop.id) ? '收起' : '展开' }}</span>
-              </div>
-            </button>
-
-            <div v-if="isShopExpanded(shop.id)" class="shop-body">
-              <div class="shop-grid">
-                <label class="field-block">
-                  <span>店铺 ID</span>
-                  <input v-model="shop.shopId" class="text-input" placeholder="例如 693760716" />
-                </label>
-
-                <label class="field-block">
-                  <span>店铺名称</span>
-                  <input v-model="shop.shopName" class="text-input" placeholder="例如 大锤商行" />
-                </label>
-
-                <label class="field-block field-wide">
-                  <span>AccessToken</span>
-                  <input v-model="shop.accessToken" class="text-input" placeholder="AldsIdle..." />
-                </label>
-
-                <label class="field-block field-wide">
-                  <span>领取链接消息模板</span>
-                  <textarea
-                    v-model="shop.messageTemplate"
-                    class="text-area"
-                    placeholder="留空则沿用上面的默认领取链接模板"
-                  />
-                </label>
-
-                <label class="field-block field-wide">
-                  <span>自动发货消息模板</span>
-                  <textarea
-                    v-model="shop.autoDeliveryMessageTemplate"
-                    class="text-area"
-                    placeholder="留空则沿用上面的默认自动发货模板"
-                  />
-                </label>
-              </div>
-
-              <div class="shop-actions">
-                <label class="checkbox-line">
-                  <input v-model="shop.enabled" type="checkbox" />
-                  <span>启用店铺级覆盖</span>
-                </label>
-                <el-button link type="danger" @click="removeShop(shop.id)">删除</el-button>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section class="table-card">
-          <div class="section-title-row">
-            <div>
-              <h3>近期识别到的店铺</h3>
-              <p>从 webhook 自动识别出的店铺，可一键导入配置列表。</p>
-            </div>
-          </div>
-
-          <table class="data-table">
-            <thead>
-              <tr>
-                <th>店铺</th>
-                <th>Webhook 次数</th>
-                <th>最近出现时间</th>
-                <th>状态</th>
-                <th>操作</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in observedShops" :key="item.shopId">
-                <td>
-                  <div class="cell-stack">
-                    <strong>{{ item.displayShopName || item.shopId }}</strong>
-                    <span class="cell-subtle">ID: {{ item.shopId }}</span>
-                  </div>
-                </td>
-                <td>{{ item.webhookEventCount }}</td>
-                <td>{{ formatAdminDateTime(item.latestSeenAt) }}</td>
-                <td>{{ item.configured ? '已配置' : '未配置' }}</td>
-                <td>
-                  <el-button
-                    v-if="!item.configured"
-                    link
-                    type="primary"
-                    @click="importObservedShop(item)"
-                  >
-                    导入到配置
-                  </el-button>
-                  <span v-else class="cell-subtle">已存在</span>
-                </td>
-              </tr>
-              <tr v-if="observedShops.length === 0">
-                <td colspan="5" class="empty-inline">最近还没有识别到可用店铺。</td>
-              </tr>
-            </tbody>
-          </table>
-        </section>
+          </section>
+        </template>
       </template>
     </template>
   </section>
@@ -697,58 +778,149 @@ onMounted(loadConfigs)
   gap: 16px;
 }
 
-.panel-header,
-.section-title-row {
+.hero-card,
+.meta-card,
+.table-card,
+.empty-block,
+.error-copy {
+  padding: 20px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(86, 108, 138, 0.1);
+}
+
+.hero-card,
+.section-title-row,
+.hero-actions,
+.section-actions,
+.platform-head,
+.shop-summary,
+.shop-actions,
+.platform-switcher,
+.overview-grid,
+.result-grid {
   display: flex;
+  gap: 12px;
+}
+
+.hero-card,
+.section-title-row,
+.shop-summary,
+.shop-actions {
   justify-content: space-between;
-  gap: 16px;
   align-items: flex-start;
 }
 
-.panel-header h1,
+.hero-copy h1,
 .section-title-row h3 {
   margin: 0;
   color: #1d3555;
 }
 
-.panel-header p,
+.hero-copy p,
 .section-title-row p {
   margin: 8px 0 0;
   color: #64748b;
 }
 
-.header-actions {
-  display: flex;
-  gap: 10px;
-}
-
-.section-actions {
-  display: flex;
-  gap: 10px;
-  align-items: center;
+.hero-actions,
+.section-actions,
+.platform-switcher {
   flex-wrap: wrap;
 }
 
-.compact-top {
-  margin-top: 16px;
+.overview-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.platform-overview-card {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid rgba(86, 108, 138, 0.12);
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 20px;
+  padding: 18px;
+  text-align: left;
+  cursor: pointer;
+  display: grid;
+  gap: 10px;
+  transition: 0.2s ease;
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  color: inherit;
+  outline: none;
+}
+
+.platform-overview-card:hover,
+.platform-overview-card.is-active {
+  border-color: rgba(37, 99, 235, 0.28);
+  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
+}
+
+.platform-badge,
+.platform-tag,
+.switch-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 30px;
+  padding: 0 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.platform-badge {
+  background: rgba(37, 99, 235, 0.1);
+  color: #2559a7;
+}
+
+.platform-tag {
+  background: rgba(15, 23, 42, 0.05);
+  color: #475467;
+}
+
+.platform-overview-card strong {
+  color: #1d3555;
+  font-size: 26px;
+  line-height: 1.1;
+}
+
+.platform-overview-card > span,
+.platform-metrics {
+  color: #64748b;
+}
+
+.platform-metrics {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+
+.switch-chip {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid rgba(86, 108, 138, 0.12);
+  background: rgba(255, 255, 255, 0.94);
+  color: #475467;
+  cursor: pointer;
+  font: inherit;
+  outline: none;
+}
+
+.switch-chip.is-active {
+  background: #2563eb;
+  border-color: #2563eb;
+  color: #fff;
 }
 
 .meta-card,
-.table-card,
-.empty-block,
-.error-copy {
-  padding: 18px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-}
-
-.meta-card {
-  display: grid;
-  gap: 10px;
-}
-
-.meta-line {
+.meta-line,
+.cell-stack {
   display: grid;
   gap: 6px;
 }
@@ -759,71 +931,7 @@ onMounted(loadConfigs)
   font-weight: 700;
 }
 
-.shop-card {
-  margin-top: 14px;
-  border-radius: 18px;
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  overflow: hidden;
-}
-
-.shop-summary {
-  width: 100%;
-  border: 0;
-  padding: 16px;
-  background: transparent;
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  align-items: center;
-  text-align: left;
-  cursor: pointer;
-}
-
-.shop-summary-main,
-.shop-summary-side {
-  display: grid;
-  gap: 4px;
-}
-
-.shop-summary-side {
-  justify-items: end;
-}
-
-.shop-summary-main strong,
-.shop-toggle {
-  color: #1d3555;
-}
-
-.shop-summary-copy {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.shop-status {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 28px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: rgba(22, 163, 74, 0.12);
-  color: #166534;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.shop-status.is-disabled {
-  background: rgba(148, 163, 184, 0.14);
-  color: #475467;
-}
-
-.shop-body {
-  padding: 0 16px 16px;
-  border-top: 1px solid rgba(148, 163, 184, 0.18);
-}
-
-.shop-grid {
+.form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
@@ -855,17 +963,70 @@ onMounted(loadConfigs)
 }
 
 .text-area {
-  min-height: 90px;
+  min-height: 96px;
   padding: 12px 14px;
   resize: vertical;
 }
 
-.shop-actions {
-  margin-top: 12px;
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
+.shop-card {
+  margin-top: 14px;
+  border-radius: 18px;
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  overflow: hidden;
+}
+
+.shop-summary {
+  width: 100%;
+  border: 0;
+  padding: 16px;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+.shop-summary-main,
+.shop-summary-side {
+  display: grid;
+  gap: 4px;
+}
+
+.shop-summary-side {
+  justify-items: end;
+}
+
+.shop-summary-main strong,
+.shop-toggle {
+  color: #1d3555;
+}
+
+.shop-summary-copy,
+.cell-subtle {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.shop-status {
+  display: inline-flex;
   align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: rgba(22, 163, 74, 0.12);
+  color: #166534;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.shop-status.is-disabled {
+  background: rgba(148, 163, 184, 0.14);
+  color: #475467;
+}
+
+.shop-body {
+  padding: 0 16px 16px;
+  border-top: 1px solid rgba(148, 163, 184, 0.18);
 }
 
 .checkbox-line {
@@ -875,6 +1036,38 @@ onMounted(loadConfigs)
   color: #475467;
 }
 
+.result-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.result-card {
+  display: grid;
+  gap: 6px;
+  padding: 14px;
+  border-radius: 16px;
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+}
+
+.result-label {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.result-card strong {
+  color: #1d3555;
+  font-size: 22px;
+}
+
+.result-card p {
+  margin: 0;
+  color: #64748b;
+}
+
 .data-table {
   width: 100%;
   border-collapse: collapse;
@@ -895,16 +1088,6 @@ onMounted(loadConfigs)
   font-size: 13px;
 }
 
-.cell-stack {
-  display: grid;
-  gap: 4px;
-}
-
-.cell-subtle {
-  color: #64748b;
-  font-size: 12px;
-}
-
 .empty-block,
 .empty-inline {
   color: #64748b;
@@ -914,18 +1097,18 @@ onMounted(loadConfigs)
   color: #b42318;
 }
 
-@media (max-width: 980px) {
-  .panel-header,
-  .section-title-row,
-  .shop-actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .shop-grid {
+@media (max-width: 1100px) {
+  .overview-grid,
+  .result-grid,
+  .form-grid {
     grid-template-columns: 1fr;
   }
+}
 
+@media (max-width: 980px) {
+  .hero-card,
+  .section-title-row,
+  .shop-actions,
   .shop-summary {
     flex-direction: column;
     align-items: stretch;