From 77859c7daa67069d24b8a4c65a3aefaf791bfafc Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Thu, 27 Nov 2025 16:39:36 +0800
Subject: [PATCH] feat: enhance provider status display in ProviderPage

- Added a tooltip to show detailed provider status, including availability and error messages.
- Refactored item details template to include status chips for better visual representation.
- Removed unused status section to streamline the UI.
---
 dashboard/src/views/ProviderPage.vue | 99 ++++++++++++----------------
 1 file changed, 43 insertions(+), 56 deletions(-)

diff --git a/dashboard/src/views/ProviderPage.vue b/dashboard/src/views/ProviderPage.vue
index 32f5a60a8..a5716f7bf 100644
--- a/dashboard/src/views/ProviderPage.vue
+++ b/dashboard/src/views/ProviderPage.vue
@@ -69,6 +69,25 @@
                     :loading="isProviderTesting(provider.id)" @toggle-enabled="providerStatusChange"
                     :bglogo="getProviderIcon(provider.provider)" @delete="deleteProvider" @edit="configExistingProvider"
                     @copy="copyProvider" :show-copy-button="true">
+                    <template #item-details="{ item }">
+                      <!-- 测试状态 chip -->
+                      <v-tooltip v-if="getProviderStatus(item.id)" location="top" max-width="300">
+                        <template v-slot:activator="{ props }">
+                          <v-chip v-bind="props" :color="getStatusColor(getProviderStatus(item.id).status)" size="small">
+                            <v-icon start size="small">
+                              {{ getProviderStatus(item.id).status === 'available' ? 'mdi-check-circle' :
+                                getProviderStatus(item.id).status === 'unavailable' ? 'mdi-alert-circle' :
+                                  'mdi-clock-outline' }}
+                            </v-icon>
+                            {{ getStatusText(getProviderStatus(item.id).status) }}
+                          </v-chip>
+                        </template>
+                        <span v-if="getProviderStatus(item.id).status === 'unavailable'">
+                          {{ getProviderStatus(item.id).error }}
+                        </span>
+                        <span v-else>{{ getStatusText(getProviderStatus(item.id).status) }}</span>
+                      </v-tooltip>
+                    </template>
                     <template #actions="{ item }">
                       <v-btn style="z-index: 100000;" variant="tonal" color="info" rounded="xl" size="small"
                         :loading="isProviderTesting(item.id)" @click="testSingleProvider(item)">
@@ -96,73 +115,38 @@
                 :loading="isProviderTesting(provider.id)" @toggle-enabled="providerStatusChange"
                 :bglogo="getProviderIcon(provider.provider)" @delete="deleteProvider" @edit="configExistingProvider"
                 @copy="copyProvider" :show-copy-button="true">
+
+                <template #item-details="{ item }">
+                  <!-- 测试状态 chip -->
+                  <v-tooltip v-if="getProviderStatus(item.id)" location="top" max-width="300">
+                    <template v-slot:activator="{ props }">
+                      <v-chip v-bind="props" :color="getStatusColor(getProviderStatus(item.id).status)" size="small">
+                        <v-icon start size="small">
+                          {{ getProviderStatus(item.id).status === 'available' ? 'mdi-check-circle' :
+                            getProviderStatus(item.id).status === 'unavailable' ? 'mdi-alert-circle' :
+                              'mdi-clock-outline' }}
+                        </v-icon>
+                        {{ getStatusText(getProviderStatus(item.id).status) }}
+                      </v-chip>
+                    </template>
+                    <span v-if="getProviderStatus(item.id).status === 'unavailable'">
+                      {{ getProviderStatus(item.id).error }}
+                    </span>
+                    <span v-else>{{ getStatusText(getProviderStatus(item.id).status) }}</span>
+                  </v-tooltip>
+                </template>
                 <template #actions="{ item }">
                   <v-btn style="z-index: 100000;" variant="tonal" color="info" rounded="xl" size="small"
                     :loading="isProviderTesting(item.id)" @click="testSingleProvider(item)">
                     {{ tm('availability.test') }}
                   </v-btn>
                 </template>
-                <template v-slot:details="{ item }">
-                </template>
               </item-card>
             </v-col>
           </v-row>
         </template>
       </div>
 
-      <!-- 供应商状态部分 -->
-      <v-card elevation="0" class="mt-4">
-        <v-card-title class="d-flex align-center py-3 px-4">
-          <v-icon class="me-2">mdi-heart-pulse</v-icon>
-          <span class="text-h4">{{ tm('availability.title') }}</span>
-          <v-spacer></v-spacer>
-          <v-btn color="primary" variant="tonal" :loading="testingProviders.length > 0" @click="fetchProviderStatus">
-            <v-icon left>mdi-refresh</v-icon>
-            {{ tm('availability.refresh') }}
-          </v-btn>
-          <v-btn variant="text" color="primary" @click="showStatus = !showStatus" style="margin-left: 8px;">
-            {{ showStatus ? tm('logs.collapse') : tm('logs.expand') }}
-            <v-icon>{{ showStatus ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
-          </v-btn>
-        </v-card-title>
-
-        <v-expand-transition>
-          <v-card-text class="pa-0" v-if="showStatus">
-            <v-card-text class="px-4 py-3">
-              <v-alert v-if="providerStatuses.length === 0" type="info" variant="tonal">
-                {{ tm('availability.noData') }}
-              </v-alert>
-
-              <v-container v-else class="pa-0">
-                <v-row>
-                  <v-col v-for="status in providerStatuses" :key="status.id" cols="12" sm="6" md="4">
-                    <v-card variant="outlined" class="status-card" :class="`status-${status.status}`">
-                      <v-card-item>
-                        <v-icon v-if="status.status === 'available'" color="success"
-                          class="me-2">mdi-check-circle</v-icon>
-                        <v-icon v-else-if="status.status === 'unavailable'" color="error"
-                          class="me-2">mdi-alert-circle</v-icon>
-                        <v-progress-circular v-else-if="status.status === 'pending'" indeterminate color="primary"
-                          size="20" width="2" class="me-2"></v-progress-circular>
-
-                        <span class="font-weight-bold">{{ status.id }}</span>
-
-                        <v-chip :color="getStatusColor(status.status)" size="small" class="ml-2">
-                          {{ getStatusText(status.status) }}
-                        </v-chip>
-                      </v-card-item>
-                      <v-card-text v-if="status.status === 'unavailable'" class="text-caption text-medium-emphasis">
-                        <span class="font-weight-bold">{{ tm('availability.errorMessage') }}:</span> {{ status.error }}
-                      </v-card-text>
-                    </v-card>
-                  </v-col>
-                </v-row>
-              </v-container>
-            </v-card-text>
-          </v-card-text>
-        </v-expand-transition>
-      </v-card>
-
       <!-- 日志部分 -->
       <v-card elevation="0" class="mt-4">
         <v-card-title class="d-flex align-center py-3 px-4">
@@ -751,11 +735,14 @@ export default {
       return this.testingProviders.includes(providerId);
     },
 
+    getProviderStatus(providerId) {
+      return this.providerStatuses.find(s => s.id === providerId);
+    },
+
     async testSingleProvider(provider) {
       if (this.isProviderTesting(provider.id)) return;
 
       this.testingProviders.push(provider.id);
-      this.showStatus = true; // 自动展开状态部分
 
       // 更新UI为pending状态
       const statusIndex = this.providerStatuses.findIndex(s => s.id === provider.id);