feat: 实现账户分组管理功能和优化响应式设计

主要更新：
- 实现账户分组管理功能，支持创建、编辑、删除分组
- 支持将账户添加到分组进行统一调度
- 优化 API Keys 页面响应式设计，解决操作栏被隐藏的问题
- 优化账户管理页面布局，合并平台/类型列，改进操作按钮布局
- 修复代理信息显示溢出问题
- 改进表格列宽分配，充分利用屏幕空间

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

web/admin-spa/src/components/accounts/AccountForm.vue

@@ -159,12 +159,50 @@
                   >
                   <span class="text-sm text-gray-700">专属账户</span>
                 </label>
+                <label class="flex items-center cursor-pointer">
+                  <input 
+                    v-model="form.accountType" 
+                    type="radio" 
+                    value="group" 
+                    class="mr-2"
+                  >
+                  <span class="text-sm text-gray-700">分组调度</span>
+                </label>
               </div>
               <p class="text-xs text-gray-500 mt-2">
-                共享账户：供所有API Key使用；专属账户：仅供特定API Key使用
+                共享账户：供所有API Key使用；专属账户：仅供特定API Key使用；分组调度：加入分组供分组内调度
               </p>
             </div>
             
+            <!-- 分组选择器 -->
+            <div v-if="form.accountType === 'group'">
+              <label class="block text-sm font-semibold text-gray-700 mb-3">选择分组 *</label>
+              <div class="flex gap-2">
+                <select 
+                  v-model="form.groupId" 
+                  class="form-input flex-1"
+                  required
+                >
+                  <option value="">请选择分组</option>
+                  <option 
+                    v-for="group in filteredGroups" 
+                    :key="group.id" 
+                    :value="group.id"
+                  >
+                    {{ group.name }} ({{ group.memberCount || 0 }} 个成员)
+                  </option>
+                  <option value="__new__">+ 新建分组</option>
+                </select>
+                <button
+                  type="button"
+                  class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  @click="refreshGroups"
+                >
+                  <i class="fas fa-sync-alt" :class="{ 'animate-spin': loadingGroups }" />
+                </button>
+              </div>
+            </div>
+            
             <!-- Gemini 项目编号字段 -->
             <div v-if="form.platform === 'gemini'">
               <label class="block text-sm font-semibold text-gray-700 mb-3">项目编号 (可选)</label>
@@ -555,12 +593,50 @@
                 >
                 <span class="text-sm text-gray-700">专属账户</span>
               </label>
+              <label class="flex items-center cursor-pointer">
+                <input 
+                  v-model="form.accountType" 
+                  type="radio" 
+                  value="group" 
+                  class="mr-2"
+                >
+                <span class="text-sm text-gray-700">分组调度</span>
+              </label>
             </div>
             <p class="text-xs text-gray-500 mt-2">
-              共享账户：供所有API Key使用；专属账户：仅供特定API Key使用
+              共享账户：供所有API Key使用；专属账户：仅供特定API Key使用；分组调度：加入分组供分组内调度
             </p>
           </div>
           
+          <!-- 分组选择器 -->
+          <div v-if="form.accountType === 'group'">
+            <label class="block text-sm font-semibold text-gray-700 mb-3">选择分组 *</label>
+            <div class="flex gap-2">
+              <select 
+                v-model="form.groupId" 
+                class="form-input flex-1"
+                required
+              >
+                <option value="">请选择分组</option>
+                <option 
+                  v-for="group in filteredGroups" 
+                  :key="group.id" 
+                  :value="group.id"
+                >
+                  {{ group.name }} ({{ group.memberCount || 0 }} 个成员)
+                </option>
+                <option value="__new__">+ 新建分组</option>
+              </select>
+              <button
+                type="button"
+                class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                @click="refreshGroups"
+              >
+                <i class="fas fa-sync-alt" :class="{ 'animate-spin': loadingGroups }" />
+              </button>
+            </div>
+          </div>
+          
           <!-- Gemini 项目编号字段 -->
           <div v-if="form.platform === 'gemini'">
             <label class="block text-sm font-semibold text-gray-700 mb-3">项目编号 (可选)</label>
@@ -813,17 +889,26 @@
       @confirm="handleConfirm"
       @cancel="handleCancel"
     />
+    
+    <!-- 分组管理模态框 -->
+    <GroupManagementModal
+      v-if="showGroupManagement"
+      @close="showGroupManagement = false"
+      @refresh="handleGroupRefresh"
+    />
   </Teleport>
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { showToast } from '@/utils/toast'
+import { apiClient } from '@/config/api'
 import { useAccountsStore } from '@/stores/accounts'
 import { useConfirm } from '@/composables/useConfirm'
 import ProxyConfig from './ProxyConfig.vue'
 import OAuthFlow from './OAuthFlow.vue'
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
+import GroupManagementModal from './GroupManagementModal.vue'
 
 const props = defineProps({
   account: {
@@ -874,6 +959,7 @@ const form = ref({
   name: props.account?.name || '',
   description: props.account?.description || '',
   accountType: props.account?.accountType || 'shared',
+  groupId: '',
   projectId: props.account?.projectId || '',
   accessToken: '',
   refreshToken: '',
@@ -941,6 +1027,12 @@ const nextStep = async () => {
     return
   }
   
+  // 分组类型验证
+  if (form.value.accountType === 'group' && (!form.value.groupId || form.value.groupId.trim() === '')) {
+    showToast('请选择一个分组', 'error')
+    return
+  }
+  
   // 对于Gemini账户，检查项目编号
   if (form.value.platform === 'gemini' && oauthStep.value === 1 && form.value.addType === 'oauth') {
     if (!form.value.projectId || form.value.projectId.trim() === '') {
@@ -968,6 +1060,7 @@ const handleOAuthSuccess = async (tokenInfo) => {
       name: form.value.name,
       description: form.value.description,
       accountType: form.value.accountType,
+      groupId: form.value.accountType === 'group' ? form.value.groupId : undefined,
       proxy: form.value.proxy.enabled ? {
         type: form.value.proxy.type,
         host: form.value.proxy.host,
@@ -1034,6 +1127,12 @@ const createAccount = async () => {
     hasError = true
   }
   
+  // 分组类型验证
+  if (form.value.accountType === 'group' && (!form.value.groupId || form.value.groupId.trim() === '')) {
+    showToast('请选择一个分组', 'error')
+    hasError = true
+  }
+  
   if (hasError) {
     return
   }
@@ -1044,6 +1143,7 @@ const createAccount = async () => {
       name: form.value.name,
       description: form.value.description,
       accountType: form.value.accountType,
+      groupId: form.value.accountType === 'group' ? form.value.groupId : undefined,
       proxy: form.value.proxy.enabled ? {
         type: form.value.proxy.type,
         host: form.value.proxy.host,
@@ -1121,6 +1221,12 @@ const updateAccount = async () => {
     return
   }
   
+  // 分组类型验证
+  if (form.value.accountType === 'group' && (!form.value.groupId || form.value.groupId.trim() === '')) {
+    showToast('请选择一个分组', 'error')
+    return
+  }
+  
   // 对于Gemini账户，检查项目编号
   if (form.value.platform === 'gemini') {
     if (!form.value.projectId || form.value.projectId.trim() === '') {
@@ -1143,6 +1249,7 @@ const updateAccount = async () => {
       name: form.value.name,
       description: form.value.description,
       accountType: form.value.accountType,
+      groupId: form.value.accountType === 'group' ? form.value.groupId : undefined,
       proxy: form.value.proxy.enabled ? {
         type: form.value.proxy.type,
         host: form.value.proxy.host,
@@ -1247,11 +1354,71 @@ watch(() => form.value.apiKey, () => {
   }
 })
 
+// 分组相关数据
+const groups = ref([])
+const loadingGroups = ref(false)
+const showGroupManagement = ref(false)
+
+// 根据平台筛选分组
+const filteredGroups = computed(() => {
+  const platformFilter = form.value.platform === 'claude-console' ? 'claude' : form.value.platform
+  return groups.value.filter(g => g.platform === platformFilter)
+})
+
+// 加载分组列表
+const loadGroups = async () => {
+  loadingGroups.value = true
+  try {
+    const response = await apiClient.get('/admin/account-groups')
+    groups.value = response.data || []
+  } catch (error) {
+    showToast('加载分组列表失败', 'error')
+    groups.value = []
+  } finally {
+    loadingGroups.value = false
+  }
+}
+
+// 刷新分组列表
+const refreshGroups = async () => {
+  await loadGroups()
+  showToast('分组列表已刷新', 'success')
+}
+
+// 处理分组管理模态框刷新
+const handleGroupRefresh = async () => {
+  await loadGroups()
+}
+
 // 监听平台变化，重置表单
 watch(() => form.value.platform, (newPlatform) => {
   if (newPlatform === 'claude-console') {
     form.value.addType = 'manual' // Claude Console 只支持手动模式
   }
+  
+  // 平台变化时，清空分组选择
+  if (form.value.accountType === 'group') {
+    form.value.groupId = ''
+  }
+})
+
+// 监听账户类型变化
+watch(() => form.value.accountType, (newType) => {
+  if (newType === 'group') {
+    // 如果选择分组类型，加载分组列表
+    if (groups.value.length === 0) {
+      loadGroups()
+    }
+  }
+})
+
+// 监听分组选择
+watch(() => form.value.groupId, (newGroupId) => {
+  if (newGroupId === '__new__') {
+    // 触发创建新分组
+    form.value.groupId = ''
+    showGroupManagement.value = true
+  }
 })
 
 // 添加模型映射
@@ -1317,6 +1484,7 @@ watch(() => props.account, (newAccount) => {
       name: newAccount.name,
       description: newAccount.description || '',
       accountType: newAccount.accountType || 'shared',
+      groupId: '',
       projectId: newAccount.projectId || '',
       accessToken: '',
       refreshToken: '',
@@ -1328,6 +1496,22 @@ watch(() => props.account, (newAccount) => {
       userAgent: newAccount.userAgent || '',
       rateLimitDuration: newAccount.rateLimitDuration || 60
     }
+    
+    // 如果是分组类型，加载分组ID
+    if (newAccount.accountType === 'group') {
+      // 先加载分组列表
+      loadGroups().then(() => {
+        // 查找账户所属的分组
+        groups.value.forEach(group => {
+          apiClient.get(`/admin/account-groups/${group.id}/members`).then(response => {
+            const members = response.data || []
+            if (members.some(m => m.id === newAccount.id)) {
+              form.value.groupId = group.id
+            }
+          }).catch(() => {})
+        })
+      })
+    }
   }
 }, { immediate: true })
 

web/admin-spa/src/components/accounts/GroupManagementModal.vue

@@ -0,0 +1,418 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="show"
+      class="fixed inset-0 modal z-50 flex items-center justify-center p-3 sm:p-4"
+    >
+      <div class="modal-content w-full max-w-4xl p-4 sm:p-6 md:p-8 mx-auto max-h-[90vh] overflow-y-auto custom-scrollbar">
+        <div class="flex items-center justify-between mb-4 sm:mb-6">
+          <div class="flex items-center gap-2 sm:gap-3">
+            <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg sm:rounded-xl flex items-center justify-center">
+              <i class="fas fa-layer-group text-white text-sm sm:text-base" />
+            </div>
+            <h3 class="text-lg sm:text-xl font-bold text-gray-900">
+              账户分组管理
+            </h3>
+          </div>
+          <button 
+            class="text-gray-400 hover:text-gray-600 transition-colors p-1"
+            @click="$emit('close')"
+          >
+            <i class="fas fa-times text-lg sm:text-xl" />
+          </button>
+        </div>
+        
+        <!-- 添加分组按钮 -->
+        <div class="mb-6">
+          <button
+            class="btn btn-primary px-4 py-2"
+            @click="showCreateForm = true"
+          >
+            <i class="fas fa-plus mr-2" />
+            创建新分组
+          </button>
+        </div>
+        
+        <!-- 创建分组表单 -->
+        <div
+          v-if="showCreateForm"
+          class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200"
+        >
+          <h4 class="text-lg font-semibold text-gray-900 mb-4">创建新分组</h4>
+          <div class="space-y-4">
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">分组名称 *</label>
+              <input
+                v-model="createForm.name"
+                type="text"
+                class="form-input w-full"
+                placeholder="输入分组名称"
+              >
+            </div>
+            
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">平台类型 *</label>
+              <div class="flex gap-4">
+                <label class="flex items-center cursor-pointer">
+                  <input
+                    v-model="createForm.platform"
+                    type="radio"
+                    value="claude"
+                    class="mr-2"
+                  >
+                  <span class="text-sm text-gray-700">Claude</span>
+                </label>
+                <label class="flex items-center cursor-pointer">
+                  <input
+                    v-model="createForm.platform"
+                    type="radio"
+                    value="gemini"
+                    class="mr-2"
+                  >
+                  <span class="text-sm text-gray-700">Gemini</span>
+                </label>
+              </div>
+            </div>
+            
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">描述 (可选)</label>
+              <textarea
+                v-model="createForm.description"
+                rows="2"
+                class="form-input w-full resize-none"
+                placeholder="分组描述..."
+              />
+            </div>
+            
+            <div class="flex gap-3">
+              <button
+                class="btn btn-primary px-4 py-2"
+                :disabled="!createForm.name || !createForm.platform || creating"
+                @click="createGroup"
+              >
+                <div
+                  v-if="creating"
+                  class="loading-spinner mr-2"
+                />
+                {{ creating ? '创建中...' : '创建' }}
+              </button>
+              <button
+                class="btn btn-secondary px-4 py-2"
+                @click="cancelCreate"
+              >
+                取消
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 分组列表 -->
+        <div class="space-y-4">
+          <div
+            v-if="loading"
+            class="text-center py-8"
+          >
+            <div class="loading-spinner-lg mx-auto mb-4" />
+            <p class="text-gray-500">加载中...</p>
+          </div>
+          
+          <div
+            v-else-if="groups.length === 0"
+            class="text-center py-8 bg-gray-50 rounded-lg"
+          >
+            <i class="fas fa-layer-group text-4xl text-gray-300 mb-4" />
+            <p class="text-gray-500">暂无分组</p>
+          </div>
+          
+          <div
+            v-else
+            class="grid gap-4 grid-cols-1 md:grid-cols-2"
+          >
+            <div
+              v-for="group in groups"
+              :key="group.id"
+              class="bg-white rounded-lg border p-4 hover:shadow-md transition-shadow"
+            >
+              <div class="flex items-start justify-between mb-3">
+                <div class="flex-1">
+                  <h4 class="font-semibold text-gray-900">{{ group.name }}</h4>
+                  <p class="text-sm text-gray-500 mt-1">{{ group.description || '暂无描述' }}</p>
+                </div>
+                <div class="flex items-center gap-2 ml-4">
+                  <span
+                    :class="[
+                      'px-2 py-1 text-xs font-medium rounded-full',
+                      group.platform === 'claude' 
+                        ? 'bg-purple-100 text-purple-700'
+                        : 'bg-blue-100 text-blue-700'
+                    ]"
+                  >
+                    {{ group.platform === 'claude' ? 'Claude' : 'Gemini' }}
+                  </span>
+                </div>
+              </div>
+              
+              <div class="flex items-center justify-between text-sm text-gray-600">
+                <div class="flex items-center gap-4">
+                  <span>
+                    <i class="fas fa-users mr-1" />
+                    {{ group.memberCount || 0 }} 个成员
+                  </span>
+                  <span>
+                    <i class="fas fa-clock mr-1" />
+                    {{ formatDate(group.createdAt) }}
+                  </span>
+                </div>
+                <div class="flex items-center gap-2">
+                  <button
+                    class="text-blue-600 hover:text-blue-800 transition-colors"
+                    title="编辑"
+                    @click="editGroup(group)"
+                  >
+                    <i class="fas fa-edit" />
+                  </button>
+                  <button
+                    class="text-red-600 hover:text-red-800 transition-colors"
+                    title="删除"
+                    :disabled="group.memberCount > 0"
+                    @click="deleteGroup(group)"
+                  >
+                    <i class="fas fa-trash" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 编辑分组模态框 -->
+    <div
+      v-if="showEditForm"
+      class="fixed inset-0 modal z-60 flex items-center justify-center p-3 sm:p-4"
+    >
+      <div class="modal-content w-full max-w-lg p-4 sm:p-6">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-bold text-gray-900">编辑分组</h3>
+          <button
+            class="text-gray-400 hover:text-gray-600 transition-colors"
+            @click="cancelEdit"
+          >
+            <i class="fas fa-times" />
+          </button>
+        </div>
+        
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-semibold text-gray-700 mb-2">分组名称 *</label>
+            <input
+              v-model="editForm.name"
+              type="text"
+              class="form-input w-full"
+              placeholder="输入分组名称"
+            >
+          </div>
+          
+          <div>
+            <label class="block text-sm font-semibold text-gray-700 mb-2">平台类型</label>
+            <div class="px-3 py-2 bg-gray-100 rounded-lg text-sm text-gray-600">
+              {{ editForm.platform === 'claude' ? 'Claude' : 'Gemini' }}
+              <span class="text-xs text-gray-500 ml-2">(不可修改)</span>
+            </div>
+          </div>
+          
+          <div>
+            <label class="block text-sm font-semibold text-gray-700 mb-2">描述 (可选)</label>
+            <textarea
+              v-model="editForm.description"
+              rows="2"
+              class="form-input w-full resize-none"
+              placeholder="分组描述..."
+            />
+          </div>
+          
+          <div class="flex gap-3 pt-4">
+            <button
+              class="btn btn-primary px-4 py-2 flex-1"
+              :disabled="!editForm.name || updating"
+              @click="updateGroup"
+            >
+              <div
+                v-if="updating"
+                class="loading-spinner mr-2"
+              />
+              {{ updating ? '更新中...' : '更新' }}
+            </button>
+            <button
+              class="btn btn-secondary px-4 py-2 flex-1"
+              @click="cancelEdit"
+            >
+              取消
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { showToast } from '@/utils/toast'
+import { apiClient } from '@/config/api'
+
+const emit = defineEmits(['close', 'refresh'])
+
+const show = ref(true)
+const loading = ref(false)
+const groups = ref([])
+
+// 创建表单
+const showCreateForm = ref(false)
+const creating = ref(false)
+const createForm = ref({
+  name: '',
+  platform: 'claude',
+  description: ''
+})
+
+// 编辑表单
+const showEditForm = ref(false)
+const updating = ref(false)
+const editingGroup = ref(null)
+const editForm = ref({
+  name: '',
+  platform: '',
+  description: ''
+})
+
+// 格式化日期
+const formatDate = (dateStr) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('zh-CN')
+}
+
+// 加载分组列表
+const loadGroups = async () => {
+  loading.value = true
+  try {
+    const response = await apiClient.get('/admin/account-groups')
+    groups.value = response.data || []
+  } catch (error) {
+    showToast('加载分组列表失败', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 创建分组
+const createGroup = async () => {
+  if (!createForm.value.name || !createForm.value.platform) {
+    showToast('请填写必填项', 'error')
+    return
+  }
+  
+  creating.value = true
+  try {
+    await apiClient.post('/admin/account-groups', {
+      name: createForm.value.name,
+      platform: createForm.value.platform,
+      description: createForm.value.description
+    })
+    
+    showToast('分组创建成功', 'success')
+    cancelCreate()
+    await loadGroups()
+    emit('refresh')
+  } catch (error) {
+    showToast(error.response?.data?.error || '创建分组失败', 'error')
+  } finally {
+    creating.value = false
+  }
+}
+
+// 取消创建
+const cancelCreate = () => {
+  showCreateForm.value = false
+  createForm.value = {
+    name: '',
+    platform: 'claude',
+    description: ''
+  }
+}
+
+// 编辑分组
+const editGroup = (group) => {
+  editingGroup.value = group
+  editForm.value = {
+    name: group.name,
+    platform: group.platform,
+    description: group.description || ''
+  }
+  showEditForm.value = true
+}
+
+// 更新分组
+const updateGroup = async () => {
+  if (!editForm.value.name) {
+    showToast('请填写分组名称', 'error')
+    return
+  }
+  
+  updating.value = true
+  try {
+    await apiClient.put(`/admin/account-groups/${editingGroup.value.id}`, {
+      name: editForm.value.name,
+      description: editForm.value.description
+    })
+    
+    showToast('分组更新成功', 'success')
+    cancelEdit()
+    await loadGroups()
+    emit('refresh')
+  } catch (error) {
+    showToast(error.response?.data?.error || '更新分组失败', 'error')
+  } finally {
+    updating.value = false
+  }
+}
+
+// 取消编辑
+const cancelEdit = () => {
+  showEditForm.value = false
+  editingGroup.value = null
+  editForm.value = {
+    name: '',
+    platform: '',
+    description: ''
+  }
+}
+
+// 删除分组
+const deleteGroup = async (group) => {
+  if (group.memberCount > 0) {
+    showToast('分组内还有成员，无法删除', 'error')
+    return
+  }
+  
+  if (!confirm(`确定要删除分组 "${group.name}" 吗？`)) {
+    return
+  }
+  
+  try {
+    await apiClient.delete(`/admin/account-groups/${group.id}`)
+    showToast('分组删除成功', 'success')
+    await loadGroups()
+    emit('refresh')
+  } catch (error) {
+    showToast(error.response?.data?.error || '删除分组失败', 'error')
+  }
+}
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadGroups()
+})
+</script>

web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue

@@ -433,6 +433,18 @@
                   <option value="">
                     使用共享账号池
                   </option>
+                  <optgroup
+                    v-if="localAccounts.claudeGroups && localAccounts.claudeGroups.length > 0"
+                    label="调度分组"
+                  >
+                    <option 
+                      v-for="group in localAccounts.claudeGroups" 
+                      :key="`group:${group.id}`" 
+                      :value="`group:${group.id}`"
+                    >
+                      {{ group.name }} ({{ group.memberCount || 0 }} 个成员)
+                    </option>
+                  </optgroup>
                   <optgroup
                     v-if="localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth').length > 0"
                     label="Claude OAuth 账号"
@@ -469,13 +481,30 @@
                   <option value="">
                     使用共享账号池
                   </option>
-                  <option 
-                    v-for="account in localAccounts.gemini.filter(a => a.isDedicated)" 
-                    :key="account.id" 
-                    :value="account.id"
+                  <optgroup
+                    v-if="localAccounts.geminiGroups && localAccounts.geminiGroups.length > 0"
+                    label="调度分组"
                   >
-                    {{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
-                  </option>
+                    <option 
+                      v-for="group in localAccounts.geminiGroups" 
+                      :key="`group:${group.id}`" 
+                      :value="`group:${group.id}`"
+                    >
+                      {{ group.name }} ({{ group.memberCount || 0 }} 个成员)
+                    </option>
+                  </optgroup>
+                  <optgroup
+                    v-if="localAccounts.gemini.filter(a => a.isDedicated).length > 0"
+                    label="Gemini 账号"
+                  >
+                    <option 
+                      v-for="account in localAccounts.gemini.filter(a => a.isDedicated)" 
+                      :key="account.id" 
+                      :value="account.id"
+                    >
+                      {{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
+                    </option>
+                  </optgroup>
                 </select>
               </div>
             </div>
@@ -650,7 +679,7 @@ const clientsStore = useClientsStore()
 const apiKeysStore = useApiKeysStore()
 const loading = ref(false)
 const accountsLoading = ref(false)
-const localAccounts = ref({ claude: [], gemini: [] })
+const localAccounts = ref({ claude: [], gemini: [], claudeGroups: [], geminiGroups: [] })
 
 // 表单验证状态
 const errors = ref({
@@ -702,7 +731,9 @@ onMounted(async () => {
   if (props.accounts) {
     localAccounts.value = {
       claude: props.accounts.claude || [],
-      gemini: props.accounts.gemini || []
+      gemini: props.accounts.gemini || [],
+      claudeGroups: props.accounts.claudeGroups || [],
+      geminiGroups: props.accounts.geminiGroups || []
     }
   }
 })
@@ -711,10 +742,11 @@ onMounted(async () => {
 const refreshAccounts = async () => {
   accountsLoading.value = true
   try {
-    const [claudeData, claudeConsoleData, geminiData] = await Promise.all([
+    const [claudeData, claudeConsoleData, geminiData, groupsData] = await Promise.all([
       apiClient.get('/admin/claude-accounts'),
       apiClient.get('/admin/claude-console-accounts'),
-      apiClient.get('/admin/gemini-accounts')
+      apiClient.get('/admin/gemini-accounts'),
+      apiClient.get('/admin/account-groups')
     ])
     
     // 合并Claude OAuth账户和Claude Console账户
@@ -749,6 +781,13 @@ const refreshAccounts = async () => {
       }))
     }
     
+    // 处理分组数据
+    if (groupsData.success) {
+      const allGroups = groupsData.data || []
+      localAccounts.value.claudeGroups = allGroups.filter(g => g.platform === 'claude')
+      localAccounts.value.geminiGroups = allGroups.filter(g => g.platform === 'gemini')
+    }
+    
     showToast('账号列表已刷新', 'success')
   } catch (error) {
     showToast('刷新账号列表失败', 'error')

web/admin-spa/src/components/apikeys/EditApiKeyModal.vue

@@ -302,6 +302,18 @@
                   <option value="">
                     使用共享账号池
                   </option>
+                  <optgroup
+                    v-if="localAccounts.claudeGroups && localAccounts.claudeGroups.length > 0"
+                    label="调度分组"
+                  >
+                    <option 
+                      v-for="group in localAccounts.claudeGroups" 
+                      :key="`group:${group.id}`" 
+                      :value="`group:${group.id}`"
+                    >
+                      {{ group.name }} ({{ group.memberCount || 0 }} 个成员)
+                    </option>
+                  </optgroup>
                   <optgroup
                     v-if="localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth').length > 0"
                     label="Claude OAuth 账号"
@@ -338,13 +350,30 @@
                   <option value="">
                     使用共享账号池
                   </option>
-                  <option 
-                    v-for="account in localAccounts.gemini.filter(a => a.isDedicated)" 
-                    :key="account.id" 
-                    :value="account.id"
+                  <optgroup
+                    v-if="localAccounts.geminiGroups && localAccounts.geminiGroups.length > 0"
+                    label="调度分组"
                   >
-                    {{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
-                  </option>
+                    <option 
+                      v-for="group in localAccounts.geminiGroups" 
+                      :key="`group:${group.id}`" 
+                      :value="`group:${group.id}`"
+                    >
+                      {{ group.name }} ({{ group.memberCount || 0 }} 个成员)
+                    </option>
+                  </optgroup>
+                  <optgroup
+                    v-if="localAccounts.gemini.filter(a => a.isDedicated).length > 0"
+                    label="Gemini 账号"
+                  >
+                    <option 
+                      v-for="account in localAccounts.gemini.filter(a => a.isDedicated)" 
+                      :key="account.id" 
+                      :value="account.id"
+                    >
+                      {{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
+                    </option>
+                  </optgroup>
                 </select>
               </div>
             </div>
@@ -526,7 +555,7 @@ const clientsStore = useClientsStore()
 const apiKeysStore = useApiKeysStore()
 const loading = ref(false)
 const accountsLoading = ref(false)
-const localAccounts = ref({ claude: [], gemini: [] })
+const localAccounts = ref({ claude: [], gemini: [], claudeGroups: [], geminiGroups: [] })
 
 // 支持的客户端列表
 const supportedClients = ref([])
@@ -656,10 +685,11 @@ const updateApiKey = async () => {
 const refreshAccounts = async () => {
   accountsLoading.value = true
   try {
-    const [claudeData, claudeConsoleData, geminiData] = await Promise.all([
+    const [claudeData, claudeConsoleData, geminiData, groupsData] = await Promise.all([
       apiClient.get('/admin/claude-accounts'),
       apiClient.get('/admin/claude-console-accounts'),
-      apiClient.get('/admin/gemini-accounts')
+      apiClient.get('/admin/gemini-accounts'),
+      apiClient.get('/admin/account-groups')
     ])
     
     // 合并Claude OAuth账户和Claude Console账户
@@ -694,6 +724,13 @@ const refreshAccounts = async () => {
       }))
     }
     
+    // 处理分组数据
+    if (groupsData.success) {
+      const allGroups = groupsData.data || []
+      localAccounts.value.claudeGroups = allGroups.filter(g => g.platform === 'claude')
+      localAccounts.value.geminiGroups = allGroups.filter(g => g.platform === 'gemini')
+    }
+    
     showToast('账号列表已刷新', 'success')
   } catch (error) {
     showToast('刷新账号列表失败', 'error')
@@ -712,7 +749,9 @@ onMounted(async () => {
   if (props.accounts) {
     localAccounts.value = {
       claude: props.accounts.claude || [],
-      gemini: props.accounts.gemini || []
+      gemini: props.accounts.gemini || [],
+      claudeGroups: props.accounts.claudeGroups || [],
+      geminiGroups: props.accounts.geminiGroups || []
     }
   }