From 6708f40005d7aefacdf40a2b242874e03151baaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A2=A8=E9=A2=9C?= <monay@monay.cc>
Date: Sun, 4 Jan 2026 21:34:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(keys):=20=E4=BC=98=E5=8C=96=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E9=80=89=E9=A1=B9=E6=98=BE=E7=A4=BA=E4=B8=8E=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=A4=8D=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 删除冗余的 vite.config.js，统一使用 TypeScript 配置
- 创建 GroupOptionItem 组件封装分组选项 UI 逻辑（GroupBadge + 描述 + 勾选状态）
- 在密钥页面的分组选择器中显示分组描述文字
- 添加选中状态的勾选图标，提升交互体验
- 优化描述文字左对齐和截断显示效果
- 消除代码重复，简化维护成本
---
 .../src/components/common/GroupOptionItem.vue | 52 +++++++++++++++++++
 frontend/src/views/user/KeysView.vue          | 26 +++++-----
 frontend/vite.config.js                       | 36 -------------
 3 files changed, 64 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/components/common/GroupOptionItem.vue
 delete mode 100644 frontend/vite.config.js

diff --git a/frontend/src/components/common/GroupOptionItem.vue b/frontend/src/components/common/GroupOptionItem.vue
new file mode 100644
index 00000000..3283c330
--- /dev/null
+++ b/frontend/src/components/common/GroupOptionItem.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
+    <div
+      class="flex min-w-0 flex-1 flex-col items-start gap-1"
+      :title="description || undefined"
+    >
+      <GroupBadge
+        :name="name"
+        :platform="platform"
+        :subscription-type="subscriptionType"
+        :rate-multiplier="rateMultiplier"
+      />
+      <span
+        v-if="description"
+        class="w-full truncate text-left text-xs text-gray-500 dark:text-gray-400"
+      >
+        {{ description }}
+      </span>
+    </div>
+    <svg
+      v-if="showCheckmark && selected"
+      class="h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import GroupBadge from './GroupBadge.vue'
+import type { SubscriptionType, GroupPlatform } from '@/types'
+
+interface Props {
+  name: string
+  platform: GroupPlatform
+  subscriptionType?: SubscriptionType
+  rateMultiplier?: number
+  description?: string | null
+  selected?: boolean
+  showCheckmark?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  subscriptionType: 'standard',
+  selected: false,
+  showCheckmark: true
+})
+</script>
diff --git a/frontend/src/views/user/KeysView.vue b/frontend/src/views/user/KeysView.vue
index bc8986f6..1a3b584b 100644
--- a/frontend/src/views/user/KeysView.vue
+++ b/frontend/src/views/user/KeysView.vue
@@ -335,12 +335,14 @@
               />
               <span v-else class="text-gray-400">{{ t('keys.selectGroup') }}</span>
             </template>
-            <template #option="{ option }">
-              <GroupBadge
+            <template #option="{ option, selected }">
+              <GroupOptionItem
                 :name="(option as unknown as GroupOption).label"
                 :platform="(option as unknown as GroupOption).platform"
                 :subscription-type="(option as unknown as GroupOption).subscriptionType"
                 :rate-multiplier="(option as unknown as GroupOption).rate"
+                :description="(option as unknown as GroupOption).description"
+                :selected="selected"
               />
             </template>
           </Select>
@@ -516,26 +518,19 @@
                 ? 'bg-primary-50 dark:bg-primary-900/20'
                 : 'hover:bg-gray-100 dark:hover:bg-dark-700'
             ]"
+            :title="option.description || undefined"
           >
-            <GroupBadge
+            <GroupOptionItem
               :name="option.label"
               :platform="option.platform"
               :subscription-type="option.subscriptionType"
               :rate-multiplier="option.rate"
-            />
-            <svg
-              v-if="
+              :description="option.description"
+              :selected="
                 selectedKeyForGroup?.group_id === option.value ||
                 (!selectedKeyForGroup?.group_id && option.value === null)
               "
-              class="h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              stroke-width="2"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-            </svg>
+            />
           </button>
         </div>
       </div>
@@ -562,6 +557,7 @@ import EmptyState from '@/components/common/EmptyState.vue'
 import Select from '@/components/common/Select.vue'
 import UseKeyModal from '@/components/keys/UseKeyModal.vue'
 import GroupBadge from '@/components/common/GroupBadge.vue'
+import GroupOptionItem from '@/components/common/GroupOptionItem.vue'
 import type { ApiKey, Group, PublicSettings, SubscriptionType, GroupPlatform } from '@/types'
 import type { Column } from '@/components/common/types'
 import type { BatchApiKeyUsageStats } from '@/api/usage'
@@ -570,6 +566,7 @@ import { formatDateTime } from '@/utils/format'
 interface GroupOption {
   value: number
   label: string
+  description: string | null
   rate: number
   subscriptionType: SubscriptionType
   platform: GroupPlatform
@@ -665,6 +662,7 @@ const groupOptions = computed(() =>
   groups.value.map((group) => ({
     value: group.id,
     label: group.name,
+    description: group.description,
     rate: group.rate_multiplier,
     subscriptionType: group.subscription_type,
     platform: group.platform
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
deleted file mode 100644
index efcf347a..00000000
--- a/frontend/vite.config.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import checker from 'vite-plugin-checker';
-import { resolve } from 'path';
-export default defineConfig({
-    plugins: [
-        vue(),
-        checker({
-            typescript: true,
-            vueTsc: true
-        })
-    ],
-    resolve: {
-        alias: {
-            '@': resolve(__dirname, 'src')
-        }
-    },
-    build: {
-        outDir: '../backend/internal/web/dist',
-        emptyOutDir: true
-    },
-    server: {
-        host: '0.0.0.0',
-        port: 3000,
-        proxy: {
-            '/api': {
-                target: 'http://localhost:8080',
-                changeOrigin: true
-            },
-            '/setup': {
-                target: 'http://localhost:8080',
-                changeOrigin: true
-            }
-        }
-    }
-});