feat: 分组配置优化展示

web/src/components/keys/GroupInfoCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { keysApi } from "@/api/keys";
-import type { Group, GroupStatsResponse } from "@/types/models";
+import type { Group, GroupConfigOption, GroupStatsResponse } from "@/types/models";
 import { copy } from "@/utils/clipboard";
 import { getGroupDisplayName } from "@/utils/display";
 import { Pencil, Trash } from "@vicons/ionicons5";
@@ -13,8 +13,10 @@ import {
   NFormItem,
   NGrid,
   NGridItem,
+  NIcon,
   NSpin,
   NTag,
+  NTooltip,
   useDialog,
 } from "naive-ui";
 import { onMounted, ref, watch } from "vue";
@@ -39,9 +41,11 @@ const dialog = useDialog();
 const showEditModal = ref(false);
 const delLoading = ref(false);
 const expandedName = ref<string[]>([]);
+const configOptions = ref<GroupConfigOption[]>([]);
 
 onMounted(() => {
   loadStats();
+  loadConfigOptions();
 });
 
 watch(
@@ -68,6 +72,25 @@ async function loadStats() {
   }
 }
 
+async function loadConfigOptions() {
+  try {
+    const options = await keysApi.getGroupConfigOptions();
+    configOptions.value = options || [];
+  } catch (error) {
+    console.error("获取配置选项失败:", error);
+  }
+}
+
+function getConfigDisplayName(key: string): string {
+  const option = configOptions.value.find(opt => opt.key === key);
+  return option?.name || key;
+}
+
+function getConfigDescription(key: string): string {
+  const option = configOptions.value.find(opt => opt.key === key);
+  return option?.description || "暂无说明";
+}
+
 function handleEdit() {
   showEditModal.value = true;
 }
@@ -359,11 +382,29 @@ function resetPage() {
               >
                 <h4 class="section-title">高级配置</h4>
                 <n-form label-placement="left">
-                  <n-form-item
-                    v-for="(value, key) in group?.config || {}"
-                    :key="key"
-                    :label="`${key}:`"
-                  >
+                  <n-form-item v-for="(value, key) in group?.config || {}" :key="key">
+                    <template #label>
+                      <n-tooltip trigger="hover" :delay="300" placement="top">
+                        <template #trigger>
+                          <span class="config-label">
+                            {{ getConfigDisplayName(key) }}:
+                            <n-icon size="14" class="config-help-icon">
+                              <svg viewBox="0 0 24 24">
+                                <path
+                                  fill="currentColor"
+                                  d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,17A1.5,1.5 0 0,1 10.5,15.5A1.5,1.5 0 0,1 12,14A1.5,1.5 0 0,1 13.5,15.5A1.5,1.5 0 0,1 12,17M12,10.5C10.07,10.5 8.5,8.93 8.5,7A3.5,3.5 0 0,1 12,3.5A3.5,3.5 0 0,1 15.5,7C15.5,8.93 13.93,10.5 12,10.5Z"
+                                />
+                              </svg>
+                            </n-icon>
+                          </span>
+                        </template>
+                        <div class="config-tooltip">
+                          <div class="tooltip-title">{{ getConfigDisplayName(key) }}</div>
+                          <div class="tooltip-description">{{ getConfigDescription(key) }}</div>
+                          <div class="tooltip-key">配置键: {{ key }}</div>
+                        </div>
+                      </n-tooltip>
+                    </template>
                     {{ value || "-" }}
                   </n-form-item>
                   <n-form-item v-if="group?.param_overrides" label="参数覆盖:" :span="2">
@@ -532,4 +573,50 @@ function resetPage() {
   min-height: 20px;
   color: #374151;
 }
+
+/* 配置项tooltip样式 */
+.config-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: help;
+}
+
+.config-help-icon {
+  color: #9ca3af;
+  transition: color 0.2s ease;
+}
+
+.config-label:hover .config-help-icon {
+  color: #6366f1;
+}
+
+.config-tooltip {
+  max-width: 300px;
+  padding: 8px 0;
+}
+
+.tooltip-title {
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 4px;
+  font-size: 0.9rem;
+}
+
+.tooltip-description {
+  color: #e5e7eb;
+  margin-bottom: 6px;
+  line-height: 1.4;
+  font-size: 0.85rem;
+}
+
+.tooltip-key {
+  color: #d1d5db;
+  font-size: 0.75rem;
+  font-family: monospace;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 2px 6px;
+  border-radius: 4px;
+  display: inline-block;
+}
 </style>