feat: 优化移动端响应式设计

- 优化所有页面的移动端适配（手机、平板、PC）
- 修复AccountsView移动端状态显示和按钮功能问题
- 修复ApiKeysView移动端详情展开显示问题
- 移除ApiKeysView不必要的查看按钮
- 修复Dashboard页面PC版时间筛选按钮布局
- 改进所有组件的响应式设计
- 删除dist目录避免构建文件冲突

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

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

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

@@ -0,0 +1,324 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed inset-0 modal z-50 flex items-center justify-center p-4">
+      <div class="modal-content w-full max-w-2xl p-8 mx-auto max-h-[90vh] overflow-y-auto custom-scrollbar">
+        <div class="flex items-center justify-between mb-6">
+          <div class="flex items-center gap-3">
+            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center">
+              <i class="fas fa-layer-group text-white text-lg" />
+            </div>
+            <div>
+              <h3 class="text-xl font-bold text-gray-900">
+                批量创建成功
+              </h3>
+              <p class="text-sm text-gray-600">
+                成功创建 {{ apiKeys.length }} 个 API Key
+              </p>
+            </div>
+          </div>
+          <button 
+            class="text-gray-400 hover:text-gray-600 transition-colors"
+            title="直接关闭（不推荐）"
+            @click="handleDirectClose"
+          >
+            <i class="fas fa-times text-xl" />
+          </button>
+        </div>
+      
+        <!-- 警告提示 -->
+        <div class="bg-amber-50 border-l-4 border-amber-400 p-4 mb-6">
+          <div class="flex items-start">
+            <div class="w-6 h-6 bg-amber-400 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
+              <i class="fas fa-exclamation-triangle text-white text-sm" />
+            </div>
+            <div class="ml-3">
+              <h5 class="font-semibold text-amber-900 mb-1">
+                重要提醒
+              </h5>
+              <p class="text-sm text-amber-800">
+                这是您唯一能看到所有 API Key 的机会。关闭此窗口后，系统将不再显示完整的 API Key。请立即下载并妥善保存。
+              </p>
+            </div>
+          </div>
+        </div>
+      
+        <!-- 统计信息 -->
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+          <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-xs text-blue-600 font-medium">
+                  创建数量
+                </p>
+                <p class="text-2xl font-bold text-blue-900 mt-1">
+                  {{ apiKeys.length }}
+                </p>
+              </div>
+              <div class="w-10 h-10 bg-blue-500 bg-opacity-20 rounded-lg flex items-center justify-center">
+                <i class="fas fa-key text-blue-600" />
+              </div>
+            </div>
+          </div>
+          
+          <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4 border border-green-200">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-xs text-green-600 font-medium">
+                  基础名称
+                </p>
+                <p class="text-lg font-bold text-green-900 mt-1 truncate">
+                  {{ baseName }}
+                </p>
+              </div>
+              <div class="w-10 h-10 bg-green-500 bg-opacity-20 rounded-lg flex items-center justify-center">
+                <i class="fas fa-tag text-green-600" />
+              </div>
+            </div>
+          </div>
+          
+          <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-4 border border-purple-200">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-xs text-purple-600 font-medium">
+                  权限范围
+                </p>
+                <p class="text-lg font-bold text-purple-900 mt-1">
+                  {{ getPermissionText() }}
+                </p>
+              </div>
+              <div class="w-10 h-10 bg-purple-500 bg-opacity-20 rounded-lg flex items-center justify-center">
+                <i class="fas fa-shield-alt text-purple-600" />
+              </div>
+            </div>
+          </div>
+          
+          <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-4 border border-orange-200">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-xs text-orange-600 font-medium">
+                  过期时间
+                </p>
+                <p class="text-lg font-bold text-orange-900 mt-1">
+                  {{ getExpiryText() }}
+                </p>
+              </div>
+              <div class="w-10 h-10 bg-orange-500 bg-opacity-20 rounded-lg flex items-center justify-center">
+                <i class="fas fa-clock text-orange-600" />
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- API Keys 预览 -->
+        <div class="mb-6">
+          <div class="flex items-center justify-between mb-3">
+            <label class="text-sm font-semibold text-gray-700">API Keys 预览</label>
+            <div class="flex items-center gap-2">
+              <button 
+                type="button"
+                class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1"
+                @click="togglePreview"
+              >
+                <i :class="['fas', showPreview ? 'fa-eye-slash' : 'fa-eye']" />
+                {{ showPreview ? '隐藏' : '显示' }}预览
+              </button>
+              <span class="text-xs text-gray-500">（最多显示前10个）</span>
+            </div>
+          </div>
+          
+          <div
+            v-if="showPreview"
+            class="bg-gray-900 rounded-lg p-4 max-h-48 overflow-y-auto custom-scrollbar"
+          >
+            <pre class="text-xs text-gray-300 font-mono">{{ getPreviewText() }}</pre>
+          </div>
+        </div>
+      
+        <!-- 操作按钮 -->
+        <div class="flex gap-3">
+          <button 
+            class="flex-1 btn btn-primary py-3 px-6 font-semibold flex items-center justify-center gap-2" 
+            @click="downloadApiKeys"
+          >
+            <i class="fas fa-download" />
+            下载所有 API Keys
+          </button>
+          <button 
+            class="px-6 py-3 bg-gray-200 text-gray-800 rounded-xl font-semibold hover:bg-gray-300 transition-colors border border-gray-300" 
+            @click="handleClose"
+          >
+            我已保存
+          </button>
+        </div>
+        
+        <!-- 额外提示 -->
+        <div class="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
+          <p class="text-xs text-blue-700 flex items-start">
+            <i class="fas fa-info-circle mr-2 mt-0.5 flex-shrink-0" />
+            <span>
+              下载的文件格式为文本文件（.txt），每行包含一个 API Key。
+              请将文件保存在安全的位置，避免泄露。
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { showToast } from '@/utils/toast'
+
+const props = defineProps({
+  apiKeys: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['close'])
+
+const showPreview = ref(false)
+
+// 获取基础名称
+const baseName = computed(() => {
+  if (props.apiKeys.length > 0) {
+    const firstKey = props.apiKeys[0]
+    // 提取基础名称（去掉 _1, _2 等后缀）
+    const match = firstKey.name.match(/^(.+)_\d+$/)
+    return match ? match[1] : firstKey.name
+  }
+  return ''
+})
+
+// 获取权限文本
+const getPermissionText = () => {
+  if (props.apiKeys.length === 0) return '未知'
+  const permissions = props.apiKeys[0].permissions
+  const permissionMap = {
+    'all': '全部服务',
+    'claude': '仅 Claude',
+    'gemini': '仅 Gemini'
+  }
+  return permissionMap[permissions] || permissions
+}
+
+// 获取过期时间文本
+const getExpiryText = () => {
+  if (props.apiKeys.length === 0) return '未知'
+  const expiresAt = props.apiKeys[0].expiresAt
+  if (!expiresAt) return '永不过期'
+  
+  const expiryDate = new Date(expiresAt)
+  const now = new Date()
+  const diffDays = Math.ceil((expiryDate - now) / (1000 * 60 * 60 * 24))
+  
+  if (diffDays <= 7) return `${diffDays}天`
+  if (diffDays <= 30) return `${Math.ceil(diffDays / 7)}周`
+  if (diffDays <= 365) return `${Math.ceil(diffDays / 30)}个月`
+  return `${Math.ceil(diffDays / 365)}年`
+}
+
+// 切换预览显示
+const togglePreview = () => {
+  showPreview.value = !showPreview.value
+}
+
+// 获取预览文本
+const getPreviewText = () => {
+  const previewKeys = props.apiKeys.slice(0, 10)
+  const lines = previewKeys.map((key, index) => {
+    return `${key.name}: ${key.apiKey || key.key || ''}`
+  })
+  
+  if (props.apiKeys.length > 10) {
+    lines.push(`... 还有 ${props.apiKeys.length - 10} 个 API Key`)
+  }
+  
+  return lines.join('\n')
+}
+
+// 下载 API Keys
+const downloadApiKeys = () => {
+  // 生成文件内容
+  const content = props.apiKeys.map(key => {
+    return `${key.name}: ${key.apiKey || key.key || ''}`
+  }).join('\n')
+  
+  // 创建 Blob 对象
+  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+  
+  // 创建下载链接
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  
+  // 生成文件名（包含时间戳）
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)
+  link.download = `api-keys-${baseName.value}-${timestamp}.txt`
+  
+  // 触发下载
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  
+  // 释放 URL 对象
+  URL.revokeObjectURL(url)
+  
+  showToast('API Keys 文件已下载', 'success')
+}
+
+// 关闭弹窗（带确认）
+const handleClose = async () => {
+  if (window.showConfirm) {
+    const confirmed = await window.showConfirm(
+      '关闭提醒',
+      '关闭后将无法再次查看这些 API Key，请确保已经下载并妥善保存。\n\n确定要关闭吗？',
+      '确定关闭',
+      '返回下载'
+    )
+    if (confirmed) {
+      emit('close')
+    }
+  } else {
+    // 降级方案
+    const confirmed = confirm(
+      '关闭后将无法再次查看这些 API Key，请确保已经下载并妥善保存。\n\n确定要关闭吗？'
+    )
+    if (confirmed) {
+      emit('close')
+    }
+  }
+}
+
+// 直接关闭（不带确认）
+const handleDirectClose = async () => {
+  if (window.showConfirm) {
+    const confirmed = await window.showConfirm(
+      '确定要关闭吗？',
+      '您还没有下载 API Keys，关闭后将无法再次查看。\n\n强烈建议您先下载保存。',
+      '仍然关闭',
+      '返回下载'
+    )
+    if (confirmed) {
+      emit('close')
+    }
+  } else {
+    // 降级方案
+    const confirmed = confirm(
+      '您还没有下载 API Keys，关闭后将无法再次查看。\n\n确定要关闭吗？'
+    )
+    if (confirmed) {
+      emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped>
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>

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

@@ -1,21 +1,21 @@
 <template>
   <Teleport to="body">
-    <div class="fixed inset-0 modal z-50 flex items-center justify-center p-4">
-      <div class="modal-content w-full max-w-4xl p-6 mx-auto max-h-[90vh] flex flex-col">
+    <div 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 mx-auto max-h-[90vh] flex flex-col">
         <div class="flex items-center justify-between mb-4">
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
-              <i class="fas fa-key text-white" />
+          <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-blue-500 to-blue-600 rounded-lg sm:rounded-xl flex items-center justify-center">
+              <i class="fas fa-key text-white text-sm sm:text-base" />
             </div>
-            <h3 class="text-xl font-bold text-gray-900">
+            <h3 class="text-lg sm:text-xl font-bold text-gray-900">
               创建新的 API Key
             </h3>
           </div>
           <button 
-            class="text-gray-400 hover:text-gray-600 transition-colors"
+            class="text-gray-400 hover:text-gray-600 transition-colors p-1"
             @click="$emit('close')"
           >
-            <i class="fas fa-times text-xl" />
+            <i class="fas fa-times text-lg sm:text-xl" />
           </button>
         </div>
       
@@ -23,15 +23,78 @@
           class="space-y-4 modal-scroll-content custom-scrollbar flex-1"
           @submit.prevent="createApiKey"
         >
+          <!-- 创建类型选择 -->
+          <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-3 sm:p-4 border border-blue-200">
+            <div :class="['flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3', form.createType === 'batch' ? 'mb-3' : '']">
+              <label class="text-xs sm:text-sm font-semibold text-gray-700 flex items-center h-full">创建类型</label>
+              <div class="flex gap-3 sm:gap-4 items-center">
+                <label class="flex items-center cursor-pointer">
+                  <input 
+                    v-model="form.createType" 
+                    type="radio" 
+                    value="single" 
+                    class="mr-1.5 sm:mr-2 text-blue-600"
+                  >
+                  <span class="text-xs sm:text-sm text-gray-700 flex items-center">
+                    <i class="fas fa-key mr-1 text-xs" />
+                    单个创建
+                  </span>
+                </label>
+                <label class="flex items-center cursor-pointer">
+                  <input 
+                    v-model="form.createType" 
+                    type="radio" 
+                    value="batch" 
+                    class="mr-1.5 sm:mr-2 text-blue-600"
+                  >
+                  <span class="text-xs sm:text-sm text-gray-700 flex items-center">
+                    <i class="fas fa-layer-group mr-1 text-xs" />
+                    批量创建
+                  </span>
+                </label>
+              </div>
+            </div>
+            
+            <!-- 批量创建数量输入 -->
+            <div
+              v-if="form.createType === 'batch'"
+              class="mt-3"
+            >
+              <div class="flex items-center gap-4">
+                <div class="flex-1">
+                  <label class="block text-xs font-medium text-gray-600 mb-1">创建数量</label>
+                  <div class="flex items-center gap-2">
+                    <input 
+                      v-model.number="form.batchCount" 
+                      type="number" 
+                      min="2"
+                      max="500"
+                      required 
+                      class="form-input w-full text-sm"
+                      placeholder="输入数量 (2-500)"
+                    >
+                    <div class="text-xs text-gray-500 whitespace-nowrap">
+                      最大支持 500 个
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <p class="text-xs text-amber-600 mt-2 flex items-start">
+                <i class="fas fa-info-circle mr-1 mt-0.5 flex-shrink-0" />
+                <span>批量创建时，每个 Key 的名称会自动添加序号后缀，例如：{{ form.name || 'MyKey' }}_1, {{ form.name || 'MyKey' }}_2 ...</span>
+              </p>
+            </div>
+          </div>
+          
           <div>
-            <label class="block text-sm font-semibold text-gray-700 mb-2">名称 <span class="text-red-500">*</span></label>
+            <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">名称 <span class="text-red-500">*</span></label>
             <input 
               v-model="form.name" 
               type="text" 
               required 
-              class="form-input w-full"
+              class="form-input w-full text-sm"
               :class="{ 'border-red-500': errors.name }"
-              placeholder="为您的 API Key 取一个名称"
+              :placeholder="form.createType === 'batch' ? '输入基础名称（将自动添加序号）' : '为您的 API Key 取一个名称'"
               @input="errors.name = ''"
             >
             <p
@@ -346,7 +409,19 @@
           </div>
         
           <div>
-            <label class="block text-sm font-semibold text-gray-700 mb-2">专属账号绑定 (可选)</label>
+            <div class="flex items-center justify-between mb-2">
+              <label class="text-sm font-semibold text-gray-700">专属账号绑定 (可选)</label>
+              <button
+                type="button"
+                class="text-blue-600 hover:text-blue-800 text-sm flex items-center gap-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                title="刷新账号列表"
+                :disabled="accountsLoading"
+                @click="refreshAccounts"
+              >
+                <i :class="['fas', accountsLoading ? 'fa-spinner fa-spin' : 'fa-sync-alt', 'text-xs']" />
+                <span>{{ accountsLoading ? '刷新中...' : '刷新账号' }}</span>
+              </button>
+            </div>
             <div class="grid grid-cols-1 gap-3">
               <div>
                 <label class="block text-sm font-medium text-gray-600 mb-1">Claude 专属账号</label>
@@ -358,24 +433,40 @@
                   <option value="">
                     使用共享账号池
                   </option>
-                  <optgroup v-if="accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth').length > 0" label="Claude OAuth 账号">
+<<<<<<< Updated upstream
+                  <option 
+                    v-for="account in accounts.claude.filter(a => a.isDedicated)" 
+                    :key="account.id" 
+                    :value="account.id"
+                  >
+                    {{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
+                  </option>
+=======
+                  <optgroup
+                    v-if="localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth').length > 0"
+                    label="Claude OAuth 账号"
+                  >
                     <option 
-                      v-for="account in accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth')" 
+                      v-for="account in localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth')" 
                       :key="account.id" 
                       :value="account.id"
                     >
                       {{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
                     </option>
                   </optgroup>
-                  <optgroup v-if="accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console').length > 0" label="Claude Console 账号">
+                  <optgroup
+                    v-if="localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console').length > 0"
+                    label="Claude Console 账号"
+                  >
                     <option 
-                      v-for="account in accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console')" 
+                      v-for="account in localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console')" 
                       :key="account.id" 
                       :value="`console:${account.id}`"
                     >
                       {{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
                     </option>
                   </optgroup>
+>>>>>>> Stashed changes
                 </select>
               </div>
               <div>
@@ -389,7 +480,7 @@
                     使用共享账号池
                   </option>
                   <option 
-                    v-for="account in accounts.gemini.filter(a => a.isDedicated)" 
+                    v-for="account in localAccounts.gemini.filter(a => a.isDedicated)" 
                     :key="account.id" 
                     :value="account.id"
                   >
@@ -552,7 +643,6 @@
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
 import { showToast } from '@/utils/toast'
-import { useAuthStore } from '@/stores/auth'
 import { useClientsStore } from '@/stores/clients'
 import { useApiKeysStore } from '@/stores/apiKeys'
 import { apiClient } from '@/config/api'
@@ -564,12 +654,13 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['close', 'success'])
+const emit = defineEmits(['close', 'success', 'batch-success'])
 
-const authStore = useAuthStore()
 const clientsStore = useClientsStore()
 const apiKeysStore = useApiKeysStore()
 const loading = ref(false)
+const accountsLoading = ref(false)
+const localAccounts = ref({ claude: [], gemini: [] })
 
 // 表单验证状态
 const errors = ref({
@@ -590,6 +681,8 @@ const supportedClients = ref([])
 
 // 表单数据
 const form = reactive({
+  createType: 'single',
+  batchCount: 10,
   name: '',
   description: '',
   tokenLimit: '',
@@ -615,8 +708,60 @@ const form = reactive({
 onMounted(async () => {
   supportedClients.value = await clientsStore.loadSupportedClients()
   availableTags.value = await apiKeysStore.fetchTags()
+  // 初始化账号数据
+  localAccounts.value = props.accounts
 })
 
+// 刷新账号列表
+const refreshAccounts = async () => {
+  accountsLoading.value = true
+  try {
+    const [claudeData, claudeConsoleData, geminiData] = await Promise.all([
+      apiClient.get('/admin/claude-accounts'),
+      apiClient.get('/admin/claude-console-accounts'),
+      apiClient.get('/admin/gemini-accounts')
+    ])
+    
+    // 合并Claude OAuth账户和Claude Console账户
+    const claudeAccounts = []
+    
+    if (claudeData.success) {
+      claudeData.data?.forEach(account => {
+        claudeAccounts.push({
+          ...account,
+          platform: 'claude-oauth',
+          isDedicated: account.accountType === 'dedicated'
+        })
+      })
+    }
+    
+    if (claudeConsoleData.success) {
+      claudeConsoleData.data?.forEach(account => {
+        claudeAccounts.push({
+          ...account,
+          platform: 'claude-console',
+          isDedicated: account.accountType === 'dedicated'
+        })
+      })
+    }
+    
+    localAccounts.value.claude = claudeAccounts
+    
+    if (geminiData.success) {
+      localAccounts.value.gemini = (geminiData.data || []).map(account => ({
+        ...account,
+        isDedicated: account.accountType === 'dedicated'
+      }))
+    }
+    
+    showToast('账号列表已刷新', 'success')
+  } catch (error) {
+    showToast('刷新账号列表失败', 'error')
+  } finally {
+    accountsLoading.value = false
+  }
+}
+
 // 计算最小日期时间
 const minDateTime = computed(() => {
   const now = new Date()
@@ -725,12 +870,19 @@ const createApiKey = async () => {
     return
   }
   
+  // 批量创建时验证数量
+  if (form.createType === 'batch') {
+    if (!form.batchCount || form.batchCount < 2 || form.batchCount > 500) {
+      showToast('批量创建数量必须在 2-500 之间', 'error')
+      return
+    }
+  }
+  
   loading.value = true
   
   try {
     // 准备提交的数据
-    const data = {
-      name: form.name,
+    const baseData = {
       description: form.description || undefined,
       tokenLimit: form.tokenLimit !== '' && form.tokenLimit !== null ? parseInt(form.tokenLimit) : null,
       rateLimitWindow: form.rateLimitWindow !== '' && form.rateLimitWindow !== null ? parseInt(form.rateLimitWindow) : null,
@@ -739,6 +891,9 @@ const createApiKey = async () => {
       dailyCostLimit: form.dailyCostLimit !== '' && form.dailyCostLimit !== null ? parseFloat(form.dailyCostLimit) : 0,
       expiresAt: form.expiresAt || undefined,
       permissions: form.permissions,
+<<<<<<< Updated upstream
+      claudeAccountId: form.claudeAccountId || undefined,
+      geminiAccountId: form.geminiAccountId || undefined,
       tags: form.tags.length > 0 ? form.tags : undefined
     }
     
@@ -772,8 +927,65 @@ const createApiKey = async () => {
       showToast('API Key 创建成功', 'success')
       emit('success', result.data)
       emit('close')
+=======
+      tags: form.tags.length > 0 ? form.tags : undefined,
+      enableModelRestriction: form.enableModelRestriction,
+      restrictedModels: form.restrictedModels,
+      enableClientRestriction: form.enableClientRestriction,
+      allowedClients: form.allowedClients
+    }
+    
+    // 处理Claude账户绑定（区分OAuth和Console）
+    if (form.claudeAccountId) {
+      if (form.claudeAccountId.startsWith('console:')) {
+        // Claude Console账户
+        baseData.claudeConsoleAccountId = form.claudeAccountId.substring(8);
+      } else {
+        // Claude OAuth账户
+        baseData.claudeAccountId = form.claudeAccountId;
+      }
+    }
+    
+    // Gemini账户绑定
+    if (form.geminiAccountId) {
+      baseData.geminiAccountId = form.geminiAccountId;
+    }
+    
+    if (form.createType === 'single') {
+      // 单个创建
+      const data = {
+        ...baseData,
+        name: form.name
+      }
+      
+      const result = await apiClient.post('/admin/api-keys', data)
+      
+      if (result.success) {
+        showToast('API Key 创建成功', 'success')
+        emit('success', result.data)
+        emit('close')
+      } else {
+        showToast(result.message || '创建失败', 'error')
+      }
+>>>>>>> Stashed changes
     } else {
-      showToast(result.message || '创建失败', 'error')
+      // 批量创建
+      const data = {
+        ...baseData,
+        createType: 'batch',
+        baseName: form.name,
+        count: form.batchCount
+      }
+      
+      const result = await apiClient.post('/admin/api-keys/batch', data)
+      
+      if (result.success) {
+        showToast(`成功创建 ${result.data.length} 个 API Key`, 'success')
+        emit('batch-success', result.data)
+        emit('close')
+      } else {
+        showToast(result.message || '批量创建失败', 'error')
+      }
     }
   } catch (error) {
     showToast('创建失败', 'error')

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

@@ -1,44 +1,44 @@
 <template>
   <Teleport to="body">
-    <div class="fixed inset-0 modal z-50 flex items-center justify-center p-4">
-      <div class="modal-content w-full max-w-4xl p-8 mx-auto max-h-[90vh] flex flex-col">
-        <div class="flex items-center justify-between mb-6">
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
-              <i class="fas fa-edit text-white" />
+    <div 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] flex flex-col">
+        <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-blue-500 to-blue-600 rounded-lg sm:rounded-xl flex items-center justify-center">
+              <i class="fas fa-edit text-white text-sm sm:text-base" />
             </div>
-            <h3 class="text-xl font-bold text-gray-900">
+            <h3 class="text-lg sm:text-xl font-bold text-gray-900">
               编辑 API Key
             </h3>
           </div>
           <button 
-            class="text-gray-400 hover:text-gray-600 transition-colors"
+            class="text-gray-400 hover:text-gray-600 transition-colors p-1"
             @click="$emit('close')"
           >
-            <i class="fas fa-times text-xl" />
+            <i class="fas fa-times text-lg sm:text-xl" />
           </button>
         </div>
       
         <form
-          class="space-y-6 modal-scroll-content custom-scrollbar flex-1"
+          class="space-y-4 sm:space-y-6 modal-scroll-content custom-scrollbar flex-1"
           @submit.prevent="updateApiKey"
         >
           <div>
-            <label class="block text-sm font-semibold text-gray-700 mb-3">名称</label>
+            <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-3">名称</label>
             <input 
               :value="form.name" 
               type="text" 
               disabled
-              class="form-input w-full bg-gray-100 cursor-not-allowed"
+              class="form-input w-full bg-gray-100 cursor-not-allowed text-sm"
             >
-            <p class="text-xs text-gray-500 mt-2">
+            <p class="text-xs text-gray-500 mt-1 sm:mt-2">
               名称不可修改
             </p>
           </div>
         
           <!-- 标签 -->
           <div>
-            <label class="block text-sm font-semibold text-gray-700 mb-3">标签</label>
+            <label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-3">标签</label>
             <div class="space-y-4">
               <!-- 已选择的标签 -->
               <div v-if="form.tags.length > 0">
@@ -278,7 +278,19 @@
           </div>
         
           <div>
-            <label class="block text-sm font-semibold text-gray-700 mb-3">专属账号绑定</label>
+            <div class="flex items-center justify-between mb-3">
+              <label class="text-sm font-semibold text-gray-700">专属账号绑定</label>
+              <button
+                type="button"
+                class="text-blue-600 hover:text-blue-800 text-sm flex items-center gap-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                title="刷新账号列表"
+                :disabled="accountsLoading"
+                @click="refreshAccounts"
+              >
+                <i :class="['fas', accountsLoading ? 'fa-spinner fa-spin' : 'fa-sync-alt', 'text-xs']" />
+                <span>{{ accountsLoading ? '刷新中...' : '刷新账号' }}</span>
+              </button>
+            </div>
             <div class="grid grid-cols-1 gap-3">
               <div>
                 <label class="block text-sm font-medium text-gray-600 mb-1">Claude 专属账号</label>
@@ -290,24 +302,40 @@
                   <option value="">
                     使用共享账号池
                   </option>
-                  <optgroup v-if="accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth').length > 0" label="Claude OAuth 账号">
+<<<<<<< Updated upstream
+                  <option 
+                    v-for="account in accounts.claude" 
+                    :key="account.id" 
+                    :value="account.id"
+                  >
+                    {{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
+                  </option>
+=======
+                  <optgroup
+                    v-if="localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth').length > 0"
+                    label="Claude OAuth 账号"
+                  >
                     <option 
-                      v-for="account in accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth')" 
+                      v-for="account in localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth')" 
                       :key="account.id" 
                       :value="account.id"
                     >
                       {{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
                     </option>
                   </optgroup>
-                  <optgroup v-if="accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console').length > 0" label="Claude Console 账号">
+                  <optgroup
+                    v-if="localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console').length > 0"
+                    label="Claude Console 账号"
+                  >
                     <option 
-                      v-for="account in accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console')" 
+                      v-for="account in localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console')" 
                       :key="account.id" 
                       :value="`console:${account.id}`"
                     >
                       {{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
                     </option>
                   </optgroup>
+>>>>>>> Stashed changes
                 </select>
               </div>
               <div>
@@ -321,7 +349,7 @@
                     使用共享账号池
                   </option>
                   <option 
-                    v-for="account in accounts.gemini" 
+                    v-for="account in localAccounts.gemini.filter(a => a.isDedicated)" 
                     :key="account.id" 
                     :value="account.id"
                   >
@@ -507,6 +535,8 @@ const emit = defineEmits(['close', 'success'])
 const clientsStore = useClientsStore()
 const apiKeysStore = useApiKeysStore()
 const loading = ref(false)
+const accountsLoading = ref(false)
+const localAccounts = ref({ claude: [], gemini: [] })
 
 // 支持的客户端列表
 const supportedClients = ref([])
@@ -632,12 +662,65 @@ const updateApiKey = async () => {
   }
 }
 
+// 刷新账号列表
+const refreshAccounts = async () => {
+  accountsLoading.value = true
+  try {
+    const [claudeData, claudeConsoleData, geminiData] = await Promise.all([
+      apiClient.get('/admin/claude-accounts'),
+      apiClient.get('/admin/claude-console-accounts'),
+      apiClient.get('/admin/gemini-accounts')
+    ])
+    
+    // 合并Claude OAuth账户和Claude Console账户
+    const claudeAccounts = []
+    
+    if (claudeData.success) {
+      claudeData.data?.forEach(account => {
+        claudeAccounts.push({
+          ...account,
+          platform: 'claude-oauth',
+          isDedicated: account.accountType === 'dedicated'
+        })
+      })
+    }
+    
+    if (claudeConsoleData.success) {
+      claudeConsoleData.data?.forEach(account => {
+        claudeAccounts.push({
+          ...account,
+          platform: 'claude-console',
+          isDedicated: account.accountType === 'dedicated'
+        })
+      })
+    }
+    
+    localAccounts.value.claude = claudeAccounts
+    
+    if (geminiData.success) {
+      localAccounts.value.gemini = (geminiData.data || []).map(account => ({
+        ...account,
+        isDedicated: account.accountType === 'dedicated'
+      }))
+    }
+    
+    showToast('账号列表已刷新', 'success')
+  } catch (error) {
+    showToast('刷新账号列表失败', 'error')
+  } finally {
+    accountsLoading.value = false
+  }
+}
+
 // 初始化表单数据
 onMounted(async () => {
   // 加载支持的客户端和已存在的标签
   supportedClients.value = await clientsStore.loadSupportedClients()
   availableTags.value = await apiKeysStore.fetchTags()
   
+  // 初始化账号数据
+  localAccounts.value = props.accounts
+  
   form.name = props.apiKey.name
   form.tokenLimit = props.apiKey.tokenLimit || ''
   form.rateLimitWindow = props.apiKey.rateLimitWindow || ''

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

@@ -0,0 +1,402 @@
+<template>
+  <Teleport to="body">
+    <div 
+      v-if="show"
+      class="fixed inset-0 modal z-50 flex items-center justify-center p-4"
+    >
+      <!-- 模态框内容 -->
+      <div class="modal-content w-full max-w-lg p-8 mx-auto">
+        <!-- 头部 -->
+        <div class="flex items-center justify-between mb-6">
+          <div class="flex items-center gap-3">
+            <div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center">
+              <i class="fas fa-clock text-white" />
+            </div>
+            <div>
+              <h3 class="text-xl font-bold text-gray-900">
+                修改过期时间
+              </h3>
+              <p class="text-sm text-gray-600">
+                为 "{{ apiKey.name || 'API Key' }}" 设置新的过期时间
+              </p>
+            </div>
+          </div>
+          <button
+            class="text-gray-400 hover:text-gray-600 transition-colors"
+            @click="$emit('close')"
+          >
+            <i class="fas fa-times text-xl" />
+          </button>
+        </div>
+        
+        <div class="space-y-6">
+          <!-- 当前状态显示 -->
+          <div class="bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg p-4 border border-gray-200">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-xs text-gray-600 font-medium mb-1">
+                  当前过期时间
+                </p>
+                <p class="text-sm font-semibold text-gray-800">
+                  <template v-if="apiKey.expiresAt">
+                    {{ formatExpireDate(apiKey.expiresAt) }}
+                    <span
+                      v-if="getExpiryStatus(apiKey.expiresAt)"
+                      class="ml-2 text-xs font-normal"
+                      :class="getExpiryStatus(apiKey.expiresAt).class"
+                    >
+                      ({{ getExpiryStatus(apiKey.expiresAt).text }})
+                    </span>
+                  </template>
+                  <template v-else>
+                    <i class="fas fa-infinity mr-1 text-gray-500" />
+                    永不过期
+                  </template>
+                </p>
+              </div>
+              <div class="w-12 h-12 bg-white rounded-lg flex items-center justify-center shadow-sm">
+                <i
+                  :class="[
+                    'fas fa-hourglass-half text-lg',
+                    apiKey.expiresAt && isExpired(apiKey.expiresAt) ? 'text-red-500' : 'text-gray-400'
+                  ]"
+                />
+              </div>
+            </div>
+          </div>
+          
+          <!-- 快捷选项 -->
+          <div>
+            <label class="block text-sm font-semibold text-gray-700 mb-3">选择新的期限</label>
+            <div class="grid grid-cols-3 gap-2 mb-3">
+              <button
+                v-for="option in quickOptions"
+                :key="option.value"
+                :class="[
+                  'px-3 py-2 rounded-lg text-sm font-medium transition-all',
+                  localForm.expireDuration === option.value
+                    ? 'bg-blue-500 text-white shadow-md'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                ]"
+                @click="selectQuickOption(option.value)"
+              >
+                {{ option.label }}
+              </button>
+              <button
+                :class="[
+                  'px-3 py-2 rounded-lg text-sm font-medium transition-all',
+                  localForm.expireDuration === 'custom'
+                    ? 'bg-blue-500 text-white shadow-md'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                ]"
+                @click="selectQuickOption('custom')"
+              >
+                <i class="fas fa-calendar-alt mr-1" />
+                自定义
+              </button>
+            </div>
+          </div>
+          
+          <!-- 自定义日期选择 -->
+          <div
+            v-if="localForm.expireDuration === 'custom'"
+            class="animate-fadeIn"
+          >
+            <label class="block text-sm font-semibold text-gray-700 mb-2">选择日期和时间</label>
+            <input 
+              v-model="localForm.customExpireDate" 
+              type="datetime-local" 
+              class="form-input w-full"
+              :min="minDateTime"
+              @change="updateCustomExpiryPreview"
+            >
+            <p class="text-xs text-gray-500 mt-2">
+              选择一个未来的日期和时间作为过期时间
+            </p>
+          </div>
+          
+          <!-- 预览新的过期时间 -->
+          <div 
+            v-if="localForm.expiresAt !== apiKey.expiresAt"
+            class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-200"
+          >
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-xs text-blue-700 font-medium mb-1">
+                  <i class="fas fa-arrow-right mr-1" />
+                  新的过期时间
+                </p>
+                <p class="text-sm font-semibold text-blue-900">
+                  <template v-if="localForm.expiresAt">
+                    {{ formatExpireDate(localForm.expiresAt) }}
+                    <span
+                      v-if="getExpiryStatus(localForm.expiresAt)"
+                      class="ml-2 text-xs font-normal"
+                      :class="getExpiryStatus(localForm.expiresAt).class"
+                    >
+                      ({{ getExpiryStatus(localForm.expiresAt).text }})
+                    </span>
+                  </template>
+                  <template v-else>
+                    <i class="fas fa-infinity mr-1" />
+                    永不过期
+                  </template>
+                </p>
+              </div>
+              <div class="w-12 h-12 bg-white rounded-lg flex items-center justify-center shadow-sm">
+                <i class="fas fa-check text-lg text-green-500" />
+              </div>
+            </div>
+          </div>
+          
+          <!-- 操作按钮 -->
+          <div class="flex gap-3 pt-2">
+            <button
+              class="flex-1 px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg font-semibold hover:bg-gray-200 transition-colors"
+              @click="$emit('close')"
+            >
+              取消
+            </button>
+            <button
+              class="flex-1 btn btn-primary py-2.5 px-4 font-semibold"
+              :disabled="saving || localForm.expiresAt === apiKey.expiresAt"
+              @click="handleSave"
+            >
+              <div
+                v-if="saving"
+                class="loading-spinner mr-2"
+              />
+              <i
+                v-else
+                class="fas fa-save mr-2"
+              />
+              {{ saving ? '保存中...' : '保存更改' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch } from 'vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    required: true
+  },
+  apiKey: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['close', 'save'])
+
+const saving = ref(false)
+
+// 表单数据
+const localForm = reactive({
+  expireDuration: '',
+  customExpireDate: '',
+  expiresAt: null
+})
+
+// 快捷选项
+const quickOptions = [
+  { value: '', label: '永不过期' },
+  { value: '1d', label: '1 天' },
+  { value: '7d', label: '7 天' },
+  { value: '30d', label: '30 天' },
+  { value: '90d', label: '90 天' },
+  { value: '180d', label: '180 天' },
+  { value: '365d', label: '1 年' },
+  { value: '730d', label: '2 年' }
+]
+
+// 计算最小日期时间
+const minDateTime = computed(() => {
+  const now = new Date()
+  now.setMinutes(now.getMinutes() + 1)
+  return now.toISOString().slice(0, 16)
+})
+
+// 监听显示状态，初始化表单
+watch(() => props.show, (newVal) => {
+  if (newVal) {
+    initializeForm()
+  }
+})
+
+// 监听 apiKey 变化，重新初始化
+watch(() => props.apiKey?.id, (newId) => {
+  if (newId && props.show) {
+    initializeForm()
+  }
+})
+
+// 初始化表单
+const initializeForm = () => {
+  saving.value = false
+  
+  if (props.apiKey.expiresAt) {
+    localForm.expireDuration = 'custom'
+    localForm.customExpireDate = new Date(props.apiKey.expiresAt).toISOString().slice(0, 16)
+    localForm.expiresAt = props.apiKey.expiresAt
+  } else {
+    localForm.expireDuration = ''
+    localForm.customExpireDate = ''
+    localForm.expiresAt = null
+  }
+}
+
+// 选择快捷选项
+const selectQuickOption = (value) => {
+  localForm.expireDuration = value
+  
+  if (!value) {
+    localForm.expiresAt = null
+    return
+  }
+  
+  if (value === 'custom') {
+    return
+  }
+  
+  const now = new Date()
+  const match = value.match(/(\d+)([dhmy])/)
+  
+  if (match) {
+    const [, num, unit] = match
+    const amount = parseInt(num)
+    
+    switch (unit) {
+      case 'd':
+        now.setDate(now.getDate() + amount)
+        break
+      case 'h':
+        now.setHours(now.getHours() + amount)
+        break
+      case 'm':
+        now.setMonth(now.getMonth() + amount)
+        break
+      case 'y':
+        now.setFullYear(now.getFullYear() + amount)
+        break
+    }
+    
+    localForm.expiresAt = now.toISOString()
+  }
+}
+
+// 更新自定义过期时间
+const updateCustomExpiryPreview = () => {
+  if (localForm.customExpireDate) {
+    localForm.expiresAt = new Date(localForm.customExpireDate).toISOString()
+  }
+}
+
+// 格式化过期日期
+const formatExpireDate = (dateString) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 检查是否已过期
+const isExpired = (dateString) => {
+  if (!dateString) return false
+  return new Date(dateString) < new Date()
+}
+
+// 获取过期状态
+const getExpiryStatus = (expiresAt) => {
+  if (!expiresAt) return null
+  
+  const now = new Date()
+  const expiryDate = new Date(expiresAt)
+  const diffMs = expiryDate - now
+  const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
+  
+  if (diffMs < 0) {
+    return {
+      text: '已过期',
+      class: 'text-red-600'
+    }
+  } else if (diffDays <= 7) {
+    return {
+      text: `${diffDays} 天后过期`,
+      class: 'text-orange-600'
+    }
+  } else if (diffDays <= 30) {
+    return {
+      text: `${diffDays} 天后过期`,
+      class: 'text-yellow-600'
+    }
+  } else {
+    return {
+      text: `${Math.ceil(diffDays / 30)} 个月后过期`,
+      class: 'text-green-600'
+    }
+  }
+}
+
+// 保存
+const handleSave = () => {
+  saving.value = true
+  emit('save', {
+    keyId: props.apiKey.id,
+    expiresAt: localForm.expiresAt
+  })
+}
+
+// 重置保存状态
+const resetSaving = () => {
+  saving.value = false
+}
+
+// 暴露方法给父组件
+defineExpose({
+  resetSaving
+})
+</script>
+
+<style scoped>
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.2s ease-out;
+}
+
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  display: inline-block;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>