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/views/AccountsView.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="accounts-container">
-    <div class="card p-6">
-      <div class="flex flex-col md:flex-row justify-between items-center gap-4 mb-6">
+    <div class="card p-4 sm:p-6">
+      <div class="flex flex-col gap-4 mb-4 sm:mb-6">
         <div>
-          <h3 class="text-xl font-bold text-gray-900 mb-2">
+          <h3 class="text-lg sm:text-xl font-bold text-gray-900 mb-1 sm:mb-2">
             账户管理
           </h3>
-          <p class="text-gray-600">
+          <p class="text-sm sm:text-base text-gray-600">
             管理您的 Claude 和 Gemini 账户及代理配置
           </p>
         </div>
-        <div class="flex gap-2">
+        <div class="flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between">
           <select
             v-model="accountSortBy"
-            class="form-input px-3 py-2 text-sm"
+            class="form-input px-3 py-2 text-sm w-full sm:w-auto"
             @change="sortAccounts()"
           >
             <option value="name">
@@ -33,7 +33,7 @@
             </option>
           </select>
           <button 
-            class="btn btn-success px-6 py-3 flex items-center gap-2"
+            class="btn btn-success px-4 sm:px-6 py-2 sm:py-3 flex items-center gap-2 w-full sm:w-auto justify-center"
             @click.stop="openCreateAccountModal"
           >
             <i class="fas fa-plus" />添加账户
@@ -66,9 +66,10 @@
         </p>
       </div>
       
+      <!-- 桌面端表格视图 -->
       <div
         v-else
-        class="table-container"
+        class="hidden lg:block table-container"
       >
         <table class="min-w-full">
           <thead class="bg-gray-50/80 backdrop-blur-sm">
@@ -442,6 +443,183 @@
           </tbody>
         </table>
       </div>
+      
+      <!-- 移动端卡片视图 -->
+      <div
+        v-if="!accountsLoading && sortedAccounts.length > 0"
+        class="lg:hidden space-y-3"
+      >
+        <div
+          v-for="account in sortedAccounts"
+          :key="account.id"
+          class="card p-4 hover:shadow-lg transition-shadow"
+        >
+          <!-- 卡片头部 -->
+          <div class="flex items-start justify-between mb-3">
+            <div class="flex items-center gap-3">
+              <div
+                :class="[
+                  'w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0',
+                  account.platform === 'claude' 
+                    ? 'bg-gradient-to-br from-purple-500 to-purple-600' 
+                    : 'bg-gradient-to-br from-blue-500 to-blue-600'
+                ]"
+              >
+                <i
+                  :class="[
+                    'text-white text-sm',
+                    account.platform === 'claude' ? 'fas fa-brain' : 'fas fa-robot'
+                  ]"
+                />
+              </div>
+              <div>
+                <h4 class="text-sm font-semibold text-gray-900">
+                  {{ account.name || account.email }}
+                </h4>
+                <div class="flex items-center gap-2 mt-0.5">
+                  <span class="text-xs text-gray-500">{{ account.platform }}</span>
+                  <span class="text-xs text-gray-400">|</span>
+                  <span class="text-xs text-gray-500">{{ account.type }}</span>
+                </div>
+              </div>
+            </div>
+            <span
+              :class="[
+                'inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold',
+                getAccountStatusClass(account)
+              ]"
+            >
+              <div
+                :class="[
+                  'w-1.5 h-1.5 rounded-full mr-1.5',
+                  getAccountStatusDotClass(account)
+                ]"
+              />
+              {{ getAccountStatusText(account) }}
+            </span>
+          </div>
+          
+          <!-- 使用统计 -->
+          <div class="grid grid-cols-2 gap-3 mb-3">
+            <div>
+              <p class="text-xs text-gray-500">
+                今日使用
+              </p>
+              <p class="text-sm font-semibold text-gray-900">
+                {{ formatNumber(account.usage?.dailyRequests || 0) }} 次
+              </p>
+              <p class="text-xs text-gray-500 mt-0.5">
+                {{ formatNumber(account.usage?.dailyTokens || 0) }} tokens
+              </p>
+            </div>
+            <div>
+              <p class="text-xs text-gray-500">
+                总使用量
+              </p>
+              <p class="text-sm font-semibold text-gray-900">
+                {{ formatNumber(account.usage?.totalRequests || 0) }} 次
+              </p>
+              <p class="text-xs text-gray-500 mt-0.5">
+                {{ formatNumber(account.usage?.totalTokens || 0) }} tokens
+              </p>
+            </div>
+          </div>
+          
+          <!-- 状态信息 -->
+          <div class="space-y-2 mb-3">
+            <!-- 会话窗口 -->
+            <div
+              v-if="account.sessionWindow"
+              class="flex items-center justify-between text-xs"
+            >
+              <span class="text-gray-500">会话窗口</span>
+              <div class="flex items-center gap-2">
+                <span
+                  :class="[
+                    'font-medium',
+                    account.sessionWindow.remaining <= 20 ? 'text-orange-600' : 'text-gray-900'
+                  ]"
+                >
+                  {{ account.sessionWindow.remaining || 0 }} / {{ account.sessionWindow.total || 0 }}
+                </span>
+                <div class="w-20 h-1.5 bg-gray-200 rounded-full overflow-hidden">
+                  <div 
+                    class="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-300"
+                    :style="{ width: `${getSessionWindowPercentage(account)}%` }"
+                  />
+                </div>
+              </div>
+            </div>
+            
+            <!-- 最后使用时间 -->
+            <div class="flex items-center justify-between text-xs">
+              <span class="text-gray-500">最后使用</span>
+              <span class="text-gray-700">
+                {{ account.lastUsedAt ? formatRelativeTime(account.lastUsedAt) : '从未使用' }}
+              </span>
+            </div>
+            
+            <!-- 代理配置 -->
+            <div
+              v-if="account.proxyConfig && account.proxyConfig.type !== 'none'"
+              class="flex items-center justify-between text-xs"
+            >
+              <span class="text-gray-500">代理</span>
+              <span class="text-gray-700">
+                {{ account.proxyConfig.type.toUpperCase() }}
+              </span>
+            </div>
+            
+            <!-- 调度优先级 -->
+            <div class="flex items-center justify-between text-xs">
+              <span class="text-gray-500">优先级</span>
+              <span class="text-gray-700 font-medium">
+                {{ account.priority || 0 }}
+              </span>
+            </div>
+          </div>
+          
+          <!-- 操作按钮 -->
+          <div class="flex gap-2 mt-3 pt-3 border-t border-gray-100">
+            <button 
+              v-if="account.platform === 'claude' && account.type === 'oauth'"
+              class="flex-1 px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors flex items-center justify-center gap-1"
+              :disabled="refreshingTokens[account.id]"
+              @click="refreshAccountToken(account)"
+            >
+              <i :class="['fas fa-sync-alt', { 'animate-spin': refreshingTokens[account.id] }]" />
+              {{ refreshingTokens[account.id] ? '刷新中' : '刷新' }}
+            </button>
+            
+            <button 
+              class="flex-1 px-3 py-2 text-xs rounded-lg transition-colors flex items-center justify-center gap-1"
+              :class="account.schedulable 
+                ? 'text-gray-600 bg-gray-50 hover:bg-gray-100' 
+                : 'text-green-600 bg-green-50 hover:bg-green-100'"
+              @click="toggleSchedulable(account)"
+              :disabled="account.isTogglingSchedulable"
+            >
+              <i :class="['fas', account.schedulable ? 'fa-pause' : 'fa-play']" />
+              {{ account.schedulable ? '暂停' : '启用' }}
+            </button>
+            
+            <button 
+              class="flex-1 px-3 py-2 text-xs text-gray-600 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+              @click="editAccount(account)"
+            >
+              <i class="fas fa-edit mr-1" />
+              编辑
+            </button>
+            
+            <button 
+              class="px-3 py-2 text-xs text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
+              @click="deleteAccount(account)"
+            >
+              <i class="fas fa-trash" />
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
     
     <!-- 添加账户模态框 -->
@@ -491,6 +669,7 @@ const accountSortBy = ref('name')
 const accountsSortBy = ref('')
 const accountsSortOrder = ref('asc')
 const apiKeys = ref([])
+const refreshingTokens = ref({})
 
 // 模态框状态
 const showCreateAccountModal = ref(false)
@@ -813,6 +992,96 @@ const handleEditSuccess = () => {
   loadAccounts()
 }
 
+// 获取账户状态文本
+const getAccountStatusText = (account) => {
+  // 检查是否被封锁
+  if (account.status === 'blocked') return '已封锁'
+  // 检查是否限流
+  if (account.isRateLimited || account.status === 'rate_limited' || 
+      (account.rateLimitStatus && account.rateLimitStatus.isRateLimited)) return '限流中'
+  // 检查是否错误
+  if (account.status === 'error' || !account.isActive) return '错误'
+  // 检查是否可调度
+  if (account.schedulable === false) return '已暂停'
+  // 否则正常
+  return '正常'
+}
+
+// 获取账户状态样式类
+const getAccountStatusClass = (account) => {
+  if (account.status === 'blocked') {
+    return 'bg-red-100 text-red-800'
+  }
+  if (account.isRateLimited || account.status === 'rate_limited' || 
+      (account.rateLimitStatus && account.rateLimitStatus.isRateLimited)) {
+    return 'bg-orange-100 text-orange-800'
+  }
+  if (account.status === 'error' || !account.isActive) {
+    return 'bg-red-100 text-red-800'
+  }
+  if (account.schedulable === false) {
+    return 'bg-gray-100 text-gray-800'
+  }
+  return 'bg-green-100 text-green-800'
+}
+
+// 获取账户状态点样式类
+const getAccountStatusDotClass = (account) => {
+  if (account.status === 'blocked') {
+    return 'bg-red-500'
+  }
+  if (account.isRateLimited || account.status === 'rate_limited' || 
+      (account.rateLimitStatus && account.rateLimitStatus.isRateLimited)) {
+    return 'bg-orange-500'
+  }
+  if (account.status === 'error' || !account.isActive) {
+    return 'bg-red-500'
+  }
+  if (account.schedulable === false) {
+    return 'bg-gray-500'
+  }
+  return 'bg-green-500'
+}
+
+// 获取会话窗口百分比
+const getSessionWindowPercentage = (account) => {
+  if (!account.sessionWindow) return 100
+  const { remaining, total } = account.sessionWindow
+  if (!total || total === 0) return 100
+  return Math.round((remaining / total) * 100)
+}
+
+// 格式化相对时间
+const formatRelativeTime = (dateString) => {
+  return formatLastUsed(dateString)
+}
+
+// 刷新账户Token
+const refreshAccountToken = async (account) => {
+  if (refreshingTokens.value[account.id]) return
+  
+  try {
+    refreshingTokens.value[account.id] = true
+    const data = await apiClient.post(`/admin/claude-accounts/${account.id}/refresh`)
+    
+    if (data.success) {
+      showToast('Token刷新成功', 'success')
+      loadAccounts()
+    } else {
+      showToast(data.message || 'Token刷新失败', 'error')
+    }
+  } catch (error) {
+    showToast('Token刷新失败', 'error')
+  } finally {
+    refreshingTokens.value[account.id] = false
+  }
+}
+
+// 切换调度状态
+const toggleDispatch = async (account) => {
+  await toggleSchedulable(account)
+}
+
 // 监听排序选择变化
 watch(accountSortBy, (newVal) => {
   const fieldMap = {

web/admin-spa/src/views/ApiKeysView.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="tab-content">
-    <div class="card p-6">
-      <div class="flex flex-col md:flex-row justify-between items-center gap-4 mb-6">
+    <div class="card p-4 sm:p-6">
+      <div class="flex flex-col gap-4 mb-4 sm:mb-6">
         <div>
-          <h3 class="text-xl font-bold text-gray-900 mb-2">
+          <h3 class="text-lg sm:text-xl font-bold text-gray-900 mb-1 sm:mb-2">
             API Keys 管理
           </h3>
-          <p class="text-gray-600">
+          <p class="text-sm sm:text-base text-gray-600">
             管理和监控您的 API 密钥
           </p>
         </div>
-        <div class="flex items-center gap-3">
+        <div class="flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
           <!-- Token统计时间范围选择 -->
+<<<<<<< Updated upstream
           <select 
             v-model="apiKeyStatsTimeRange" 
             class="px-2 py-1 text-sm text-gray-700 bg-white border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent hover:border-gray-300 transition-colors"
@@ -43,12 +44,51 @@
               v-for="tag in availableTags"
               :key="tag"
               :value="tag"
+=======
+          <div class="flex flex-wrap gap-2 items-center">
+            <select 
+              v-model="apiKeyStatsTimeRange" 
+              class="px-3 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent hover:border-gray-300 transition-colors"
+              @change="loadApiKeys()"
+>>>>>>> Stashed changes
             >
-              {{ tag }}
-            </option>
-          </select>
+              <option value="today">
+                今日
+              </option>
+              <option value="7days">
+                最近7天
+              </option>
+              <option value="monthly">
+                本月
+              </option>
+              <option value="all">
+                全部时间
+              </option>
+            </select>
+            <!-- 标签筛选器 -->
+            <select 
+              v-model="selectedTagFilter" 
+              class="px-3 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent hover:border-gray-300 transition-colors"
+              @change="currentPage = 1"
+            >
+              <option value="">
+                所有标签
+              </option>
+              <option
+                v-for="tag in availableTags"
+                :key="tag"
+                :value="tag"
+              >
+                {{ tag }}
+              </option>
+            </select>
+          </div>
           <button 
-            class="btn btn-primary px-4 py-1.5 text-sm flex items-center gap-2"
+<<<<<<< Updated upstream
+            class="btn btn-primary px-6 py-3 flex items-center gap-2"
+=======
+            class="btn btn-primary px-4 py-2 text-sm flex items-center gap-2 w-full sm:w-auto justify-center"
+>>>>>>> Stashed changes
             @click.stop="openCreateApiKeyModal"
           >
             <i class="fas fa-plus" />创建新 Key
@@ -81,9 +121,10 @@
         </p>
       </div>
       
+      <!-- 桌面端表格视图 -->
       <div
         v-else
-        class="table-container"
+        class="hidden md:block table-container"
       >
         <table class="min-w-full">
           <thead class="bg-gray-50/80 backdrop-blur-sm">
@@ -105,9 +146,6 @@
               <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                 标签
               </th>
-              <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
-                API Key
-              </th>
               <th
                 class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
                 @click="sortApiKeys('status')"
@@ -219,11 +257,6 @@
                     >无标签</span>
                   </div>
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm font-mono text-gray-600 bg-gray-50 px-3 py-1 rounded-lg">
-                    {{ (key.apiKey || '').substring(0, 20) }}...
-                  </div>
-                </td>
                 <td class="px-6 py-4 whitespace-nowrap">
                   <span
                     :class="['inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold', 
@@ -337,34 +370,43 @@
                   {{ new Date(key.createdAt).toLocaleDateString() }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm">
-                  <div v-if="key.expiresAt">
-                    <div
-                      v-if="isApiKeyExpired(key.expiresAt)"
-                      class="text-red-600"
-                    >
-                      <i class="fas fa-exclamation-circle mr-1" />
-                      已过期
-                    </div>
-                    <div
-                      v-else-if="isApiKeyExpiringSoon(key.expiresAt)"
-                      class="text-orange-600"
-                    >
-                      <i class="fas fa-clock mr-1" />
-                      {{ formatExpireDate(key.expiresAt) }}
-                    </div>
-                    <div
+                  <div class="inline-flex items-center gap-1 group">
+                    <span v-if="key.expiresAt">
+                      <span
+                        v-if="isApiKeyExpired(key.expiresAt)"
+                        class="text-red-600"
+                      >
+                        <i class="fas fa-exclamation-circle mr-1" />
+                        已过期
+                      </span>
+                      <span
+                        v-else-if="isApiKeyExpiringSoon(key.expiresAt)"
+                        class="text-orange-600"
+                      >
+                        <i class="fas fa-clock mr-1" />
+                        {{ formatExpireDate(key.expiresAt) }}
+                      </span>
+                      <span
+                        v-else
+                        class="text-gray-600"
+                      >
+                        {{ formatExpireDate(key.expiresAt) }}
+                      </span>
+                    </span>
+                    <span
                       v-else
-                      class="text-gray-600"
+                      class="text-gray-400"
                     >
-                      {{ formatExpireDate(key.expiresAt) }}
-                    </div>
-                  </div>
-                  <div
-                    v-else
-                    class="text-gray-400"
-                  >
-                    <i class="fas fa-infinity mr-1" />
-                    永不过期
+                      <i class="fas fa-infinity mr-1" />
+                      永不过期
+                    </span>
+                    <button
+                      class="opacity-0 group-hover:opacity-100 p-0.5 text-gray-400 hover:text-blue-600 rounded transition-all duration-200"
+                      title="快速修改过期时间"
+                      @click.stop="startEditExpiry(key)"
+                    >
+                      <i class="fas fa-pencil-alt text-xs" />
+                    </button>
                   </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm">
@@ -402,7 +444,7 @@
               <!-- 模型统计展开区域 -->
               <tr v-if="key && key.id && expandedApiKeys[key.id]">
                 <td
-                  colspan="7"
+                  colspan="6"
                   class="px-6 py-4 bg-gray-50"
                 >
                   <div
@@ -604,21 +646,228 @@
           </tbody>
         </table>
       </div>
+<<<<<<< Updated upstream
+=======
+      
+      <!-- 移动端卡片视图 -->
+      <div
+        v-if="!apiKeysLoading && sortedApiKeys.length > 0"
+        class="md:hidden space-y-3"
+      >
+        <div
+          v-for="key in sortedApiKeys"
+          :key="key.id"
+          class="card p-4 hover:shadow-lg transition-shadow"
+        >
+          <!-- 卡片头部 -->
+          <div class="flex items-start justify-between mb-3">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
+                <i class="fas fa-key text-white text-sm" />
+              </div>
+              <div>
+                <h4 class="text-sm font-semibold text-gray-900">
+                  {{ key.name }}
+                </h4>
+                <p class="text-xs text-gray-500 mt-0.5">
+                  {{ key.id }}
+                </p>
+              </div>
+            </div>
+            <span
+              :class="['inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold', 
+                       key.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800']"
+            >
+              <div
+                :class="['w-1.5 h-1.5 rounded-full mr-1.5', 
+                         key.isActive ? 'bg-green-500' : 'bg-red-500']"
+              />
+              {{ key.isActive ? '活跃' : '已停用' }}
+            </span>
+          </div>
+          
+          <!-- 绑定信息 -->
+          <div class="mb-3 text-xs text-gray-600">
+            <span v-if="key.claudeAccountId || key.claudeConsoleAccountId">
+              <i class="fas fa-link mr-1" />
+              绑定: {{ getBoundAccountName(key.claudeAccountId, key.claudeConsoleAccountId) }}
+            </span>
+            <span v-else>
+              <i class="fas fa-share-alt mr-1" />
+              使用共享池
+            </span>
+          </div>
+          
+          <!-- 统计信息 -->
+          <div class="grid grid-cols-2 gap-3 mb-3">
+            <div>
+              <p class="text-xs text-gray-500">
+                使用量
+              </p>
+              <p class="text-sm font-semibold text-gray-900">
+                {{ formatNumber((key.usage && key.usage.total && key.usage.total.requests) || 0) }} 次
+              </p>
+              <p class="text-xs text-gray-500 mt-0.5">
+                {{ formatNumber((key.usage && key.usage.total && key.usage.total.tokens) || 0) }} tokens
+              </p>
+            </div>
+            <div>
+              <p class="text-xs text-gray-500">
+                费用
+              </p>
+              <p class="text-sm font-semibold text-green-600">
+                {{ calculateApiKeyCost(key.usage) }}
+              </p>
+            </div>
+          </div>
+          
+          <!-- 时间信息 -->
+          <div class="text-xs text-gray-500 mb-3">
+            <div class="flex justify-between mb-1">
+              <span>创建时间</span>
+              <span>{{ formatDate(key.createdAt) }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span>过期时间</span>
+              <span :class="isApiKeyExpiringSoon(key.expiresAt) ? 'text-orange-600 font-semibold' : ''">
+                {{ key.expiresAt ? formatDate(key.expiresAt) : '永不过期' }}
+              </span>
+            </div>
+          </div>
+          
+          <!-- 标签 -->
+          <div
+            v-if="key.tags && key.tags.length > 0"
+            class="flex flex-wrap gap-1 mb-3"
+          >
+            <span
+              v-for="tag in key.tags"
+              :key="tag" 
+              class="inline-flex items-center px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded-full"
+            >
+              {{ tag }}
+            </span>
+          </div>
+          
+          <!-- 操作按钮 -->
+          <div class="flex gap-2 mt-3 pt-3 border-t border-gray-100">
+            <button 
+              class="flex-1 px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors flex items-center justify-center gap-1"
+              @click="toggleExpanded(key.id)"
+            >
+              <i :class="['fas', expandedKeys.includes(key.id) ? 'fa-chevron-up' : 'fa-chevron-down']" />
+              {{ expandedKeys.includes(key.id) ? '收起' : '详情' }}
+            </button>
+            <button 
+              class="flex-1 px-3 py-2 text-xs text-gray-600 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+              @click="openEditApiKeyModal(key)"
+            >
+              <i class="fas fa-edit mr-1" />
+              编辑
+            </button>
+            <button 
+              v-if="key.expiresAt && (isApiKeyExpired(key.expiresAt) || isApiKeyExpiringSoon(key.expiresAt))"
+              class="flex-1 px-3 py-2 text-xs text-orange-600 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors"
+              @click="openRenewApiKeyModal(key)"
+            >
+              <i class="fas fa-clock mr-1" />
+              续期
+            </button>
+            <button 
+              class="px-3 py-2 text-xs text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
+              @click="deleteApiKey(key.id)"
+            >
+              <i class="fas fa-trash" />
+            </button>
+          </div>
+          
+          <!-- 展开的详细统计 -->
+          <div
+            v-if="expandedKeys.includes(key.id)"
+            class="mt-3 pt-3 border-t border-gray-100"
+          >
+            <h5 class="text-xs font-semibold text-gray-700 mb-2">
+              详细信息
+            </h5>
+            
+            <!-- 更多统计数据 -->
+            <div class="space-y-2 text-xs">
+              <div class="flex justify-between">
+                <span class="text-gray-600">并发限制:</span>
+                <span class="font-medium text-purple-600">{{ key.concurrencyLimit > 0 ? key.concurrencyLimit : '无限制' }}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-600">当前并发:</span>
+                <span :class="['font-medium', key.currentConcurrency > 0 ? 'text-orange-600' : 'text-gray-600']">
+                  {{ key.currentConcurrency || 0 }}
+                  <span v-if="key.concurrencyLimit > 0" class="text-xs text-gray-500">/ {{ key.concurrencyLimit }}</span>
+                </span>
+              </div>
+              <div v-if="key.dailyCostLimit > 0" class="flex justify-between">
+                <span class="text-gray-600">今日费用:</span>
+                <span :class="['font-medium', (key.dailyCost || 0) >= key.dailyCostLimit ? 'text-red-600' : 'text-blue-600']">
+                  ${{ (key.dailyCost || 0).toFixed(2) }} / ${{ key.dailyCostLimit.toFixed(2) }}
+                </span>
+              </div>
+              <div v-if="key.rateLimitWindow > 0" class="flex justify-between">
+                <span class="text-gray-600">时间窗口:</span>
+                <span class="font-medium text-indigo-600">{{ key.rateLimitWindow }} 分钟</span>
+              </div>
+              <div v-if="key.rateLimitRequests > 0" class="flex justify-between">
+                <span class="text-gray-600">请求限制:</span>
+                <span class="font-medium text-indigo-600">{{ key.rateLimitRequests }} 次/窗口</span>
+              </div>
+              
+              <!-- Token 细节 -->
+              <div class="pt-2 mt-2 border-t border-gray-100">
+                <div class="flex justify-between">
+                  <span class="text-gray-600">输入 Token:</span>
+                  <span class="font-medium">{{ formatNumber((key.usage && key.usage.total && key.usage.total.inputTokens) || 0) }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-gray-600">输出 Token:</span>
+                  <span class="font-medium">{{ formatNumber((key.usage && key.usage.total && key.usage.total.outputTokens) || 0) }}</span>
+                </div>
+                <div v-if="((key.usage && key.usage.total && key.usage.total.cacheCreateTokens) || 0) > 0" class="flex justify-between">
+                  <span class="text-gray-600">缓存创建:</span>
+                  <span class="font-medium text-purple-600">{{ formatNumber((key.usage && key.usage.total && key.usage.total.cacheCreateTokens) || 0) }}</span>
+                </div>
+                <div v-if="((key.usage && key.usage.total && key.usage.total.cacheReadTokens) || 0) > 0" class="flex justify-between">
+                  <span class="text-gray-600">缓存读取:</span>
+                  <span class="font-medium text-purple-600">{{ formatNumber((key.usage && key.usage.total && key.usage.total.cacheReadTokens) || 0) }}</span>
+                </div>
+              </div>
+              
+              <!-- 今日统计 -->
+              <div class="pt-2 mt-2 border-t border-gray-100">
+                <div class="flex justify-between">
+                  <span class="text-gray-600">今日请求:</span>
+                  <span class="font-medium text-green-600">{{ formatNumber((key.usage && key.usage.daily && key.usage.daily.requests) || 0) }} 次</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-gray-600">今日 Token:</span>
+                  <span class="font-medium text-green-600">{{ formatNumber((key.usage && key.usage.daily && key.usage.daily.tokens) || 0) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       
       <!-- 分页组件 -->
       <div
         v-if="filteredAndSortedApiKeys.length > 0"
-        class="mt-6 flex flex-col sm:flex-row justify-between items-center gap-4"
+        class="mt-4 sm:mt-6 flex flex-col sm:flex-row justify-between items-center gap-4"
       >
-        <div class="flex items-center gap-3">
-          <span class="text-sm text-gray-600">
+        <div class="flex flex-col sm:flex-row items-center gap-3 w-full sm:w-auto">
+          <span class="text-xs sm:text-sm text-gray-600">
             共 {{ filteredAndSortedApiKeys.length }} 条记录
           </span>
           <div class="flex items-center gap-2">
-            <span class="text-sm text-gray-600">每页显示</span>
+            <span class="text-xs sm:text-sm text-gray-600">每页显示</span>
             <select 
               v-model="pageSize" 
-              class="px-2 py-1 text-sm text-gray-700 bg-white border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent hover:border-gray-300 transition-colors"
+              class="px-2 py-1 text-xs sm:text-sm text-gray-700 bg-white border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent hover:border-gray-300 transition-colors"
               @change="currentPage = 1"
             >
               <option 
@@ -629,14 +878,14 @@
                 {{ size }}
               </option>
             </select>
-            <span class="text-sm text-gray-600">条</span>
+            <span class="text-xs sm:text-sm text-gray-600">条</span>
           </div>
         </div>
         
         <div class="flex items-center gap-2">
           <!-- 上一页 -->
           <button 
-            class="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+            class="px-3 py-1.5 sm:py-1 text-xs sm:text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
             :disabled="currentPage === 1"
             @click="currentPage--"
           >
@@ -648,14 +897,14 @@
             <!-- 第一页 -->
             <button 
               v-if="currentPage > 3"
-              class="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+              class="hidden sm:block px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
               @click="currentPage = 1"
             >
               1
             </button>
             <span
               v-if="currentPage > 4"
-              class="px-2 text-gray-500"
+              class="hidden sm:inline px-2 text-gray-500"
             >...</span>
             
             <!-- 中间页码 -->
@@ -663,7 +912,7 @@
               v-for="page in pageNumbers" 
               :key="page"
               :class="[
-                'px-3 py-1 text-sm font-medium rounded-md',
+                'px-2 sm:px-3 py-1 text-xs sm:text-sm font-medium rounded-md',
                 page === currentPage 
                   ? 'bg-blue-600 text-white' 
                   : 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-50'
@@ -676,11 +925,11 @@
             <!-- 最后一页 -->
             <span
               v-if="currentPage < totalPages - 3"
-              class="px-2 text-gray-500"
+              class="hidden sm:inline px-2 text-gray-500"
             >...</span>
             <button 
               v-if="totalPages > 1 && currentPage < totalPages - 2"
-              class="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+              class="hidden sm:block px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
               @click="currentPage = totalPages"
             >
               {{ totalPages }}
@@ -689,7 +938,7 @@
           
           <!-- 下一页 -->
           <button 
-            class="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+            class="px-3 py-1.5 sm:py-1 text-xs sm:text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
             :disabled="currentPage === totalPages || totalPages === 0"
             @click="currentPage++"
           >
@@ -697,6 +946,7 @@
           </button>
         </div>
       </div>
+>>>>>>> Stashed changes
     </div>
     
     <!-- 模态框组件 -->
@@ -705,6 +955,7 @@
       :accounts="accounts"
       @close="showCreateApiKeyModal = false"
       @success="handleCreateSuccess"
+      @batch-success="handleBatchCreateSuccess"
     />
     
     <EditApiKeyModal 
@@ -727,6 +978,21 @@
       :api-key="newApiKeyData"
       @close="showNewApiKeyModal = false"
     />
+    
+    <BatchApiKeyModal 
+      v-if="showBatchApiKeyModal"
+      :api-keys="batchApiKeyData"
+      @close="showBatchApiKeyModal = false"
+    />
+    
+    <!-- 过期时间编辑弹窗 -->
+    <ExpiryEditModal
+      ref="expiryEditModalRef"
+      :show="!!editingExpiryKey"
+      :api-key="editingExpiryKey || { id: null, expiresAt: null, name: '' }"
+      @close="closeExpiryEdit"
+      @save="handleSaveExpiry"
+    />
   </div>
 </template>
 
@@ -739,6 +1005,8 @@ import CreateApiKeyModal from '@/components/apikeys/CreateApiKeyModal.vue'
 import EditApiKeyModal from '@/components/apikeys/EditApiKeyModal.vue'
 import RenewApiKeyModal from '@/components/apikeys/RenewApiKeyModal.vue'
 import NewApiKeyModal from '@/components/apikeys/NewApiKeyModal.vue'
+import BatchApiKeyModal from '@/components/apikeys/BatchApiKeyModal.vue'
+import ExpiryEditModal from '@/components/apikeys/ExpiryEditModal.vue'
 
 // 响应式数据
 const clientsStore = useClientsStore()
@@ -752,6 +1020,8 @@ const apiKeyModelStats = ref({})
 const apiKeyDateFilters = ref({})
 const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
 const accounts = ref({ claude: [], gemini: [] })
+const editingExpiryKey = ref(null)
+const expiryEditModalRef = ref(null)
 
 // 分页相关
 const currentPage = ref(1)
@@ -762,14 +1032,19 @@ const pageSizeOptions = [5, 10, 20, 50, 100]
 const selectedTagFilter = ref('')
 const availableTags = ref([])
 
+// 移动端展开状态
+const expandedKeys = ref([])
+
 // 模态框状态
 const showCreateApiKeyModal = ref(false)
 const showEditApiKeyModal = ref(false)
 const showRenewApiKeyModal = ref(false)
 const showNewApiKeyModal = ref(false)
+const showBatchApiKeyModal = ref(false)
 const editingApiKey = ref(null)
 const renewingApiKey = ref(null)
 const newApiKeyData = ref(null)
+const batchApiKeyData = ref([])
 
 // 计算筛选和排序后的API Keys（未分页）
 const filteredAndSortedApiKeys = computed(() => {
@@ -1155,12 +1430,16 @@ const resetApiKeyDateFilter = (keyId) => {
 }
 
 // 打开创建模态框
-const openCreateApiKeyModal = () => {
+const openCreateApiKeyModal = async () => {
+  // 重新加载账号数据，确保显示最新的专属账号
+  await loadAccounts()
   showCreateApiKeyModal.value = true
 }
 
 // 打开编辑模态框
-const openEditApiKeyModal = (apiKey) => {
+const openEditApiKeyModal = async (apiKey) => {
+  // 重新加载账号数据，确保显示最新的专属账号
+  await loadAccounts()
   editingApiKey.value = apiKey
   showEditApiKeyModal.value = true
 }
@@ -1179,6 +1458,14 @@ const handleCreateSuccess = (data) => {
   loadApiKeys()
 }
 
+// 处理批量创建成功
+const handleBatchCreateSuccess = (data) => {
+  showCreateApiKeyModal.value = false
+  batchApiKeyData.value = data
+  showBatchApiKeyModal.value = true
+  loadApiKeys()
+}
+
 // 处理编辑成功
 const handleEditSuccess = () => {
   showEditApiKeyModal.value = false
@@ -1258,6 +1545,90 @@ const copyApiStatsLink = (apiKey) => {
   }
 }
 
+// 开始编辑过期时间
+const startEditExpiry = (apiKey) => {
+  editingExpiryKey.value = apiKey
+}
+
+// 关闭过期时间编辑
+const closeExpiryEdit = () => {
+  editingExpiryKey.value = null
+}
+
+// 保存过期时间
+const handleSaveExpiry = async ({ keyId, expiresAt }) => {
+  try {
+    const data = await apiClient.put(`/admin/api-keys/${keyId}`, {
+      expiresAt: expiresAt || null
+    })
+    
+    if (data.success) {
+      showToast('过期时间已更新', 'success')
+      // 更新本地数据
+      const key = apiKeys.value.find(k => k.id === keyId)
+      if (key) {
+        key.expiresAt = expiresAt || null
+      }
+      closeExpiryEdit()
+    } else {
+      showToast(data.message || '更新失败', 'error')
+      // 重置保存状态
+      if (expiryEditModalRef.value) {
+        expiryEditModalRef.value.resetSaving()
+      }
+    }
+  } catch (error) {
+    showToast('更新失败', 'error')
+    // 重置保存状态
+    if (expiryEditModalRef.value) {
+      expiryEditModalRef.value.resetSaving()
+    }
+  }
+}
+
+// 切换移动端卡片展开状态
+const toggleExpanded = (keyId) => {
+  const index = expandedKeys.value.indexOf(keyId)
+  if (index > -1) {
+    expandedKeys.value.splice(index, 1)
+  } else {
+    expandedKeys.value.push(keyId)
+  }
+}
+
+// 格式化日期时间
+const formatDate = (dateString) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  }).replace(/\//g, '-')
+}
+
+// 显示API Key详情
+const showApiKey = async (apiKey) => {
+  try {
+    // 重新获取API Key的完整信息（包含实际的key值）
+    const response = await apiClient.get(`/admin/api-keys/${apiKey.id}`)
+    if (response.success && response.data) {
+      newApiKeyData.value = {
+        ...response.data,
+        key: response.data.key || response.data.apiKey // 兼容不同的字段名
+      }
+      showNewApiKeyModal.value = true
+    } else {
+      showToast('获取API Key信息失败', 'error')
+    }
+  } catch (error) {
+    console.error('Error fetching API key:', error)
+    showToast('获取API Key信息失败', 'error')
+  }
+}
+
 onMounted(async () => {
   // 并行加载所有需要的数据
   await Promise.all([

web/admin-spa/src/views/ApiStatsView.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="min-h-screen gradient-bg p-6">
+  <div class="min-h-screen gradient-bg p-4 md:p-6">
     <!-- 顶部导航 -->
-    <div class="glass-strong rounded-3xl p-6 mb-8 shadow-xl">
+    <div class="glass-strong rounded-3xl p-4 md:p-6 mb-6 md:mb-8 shadow-xl">
       <div class="flex flex-col md:flex-row justify-between items-center gap-4">
         <LogoTitle 
           :loading="oemLoading"
@@ -12,19 +12,19 @@
         <div class="flex items-center gap-3">
           <router-link
             to="/dashboard"
-            class="admin-button rounded-xl px-4 py-2 text-white transition-all duration-300 flex items-center gap-2"
+            class="admin-button rounded-xl px-3 py-2 md:px-4 md:py-2 text-white transition-all duration-300 flex items-center gap-2"
           >
             <i class="fas fa-cog text-sm" />
-            <span class="text-sm font-medium">管理后台</span>
+            <span class="text-xs md:text-sm font-medium">管理后台</span>
           </router-link>
         </div>
       </div>
     </div>
 
     <!-- Tab 切换 -->
-    <div class="mb-8">
+    <div class="mb-6 md:mb-8">
       <div class="flex justify-center">
-        <div class="inline-flex bg-white/10 backdrop-blur-xl rounded-full p-1 shadow-lg border border-white/20">
+        <div class="inline-flex bg-white/10 backdrop-blur-xl rounded-full p-1 shadow-lg border border-white/20 w-full max-w-md md:w-auto">
           <button
             :class="[
               'tab-pill-button',
@@ -32,8 +32,8 @@
             ]"
             @click="currentTab = 'stats'"
           >
-            <i class="fas fa-chart-line mr-2" />
-            <span>统计查询</span>
+            <i class="fas fa-chart-line mr-1 md:mr-2" />
+            <span class="text-sm md:text-base">统计查询</span>
           </button>
           <button
             :class="[
@@ -42,8 +42,8 @@
             ]"
             @click="currentTab = 'tutorial'"
           >
-            <i class="fas fa-graduation-cap mr-2" />
-            <span>使用教程</span>
+            <i class="fas fa-graduation-cap mr-1 md:mr-2" />
+            <span class="text-sm md:text-base">使用教程</span>
           </button>
         </div>
       </div>
@@ -60,9 +60,9 @@
       <!-- 错误提示 -->
       <div
         v-if="error"
-        class="mb-8"
+        class="mb-6 md:mb-8"
       >
-        <div class="bg-red-500/20 border border-red-500/30 rounded-xl p-4 text-red-800 backdrop-blur-sm">
+        <div class="bg-red-500/20 border border-red-500/30 rounded-xl p-3 md:p-4 text-red-800 backdrop-blur-sm text-sm md:text-base">
           <i class="fas fa-exclamation-triangle mr-2" />
           {{ error }}
         </div>
@@ -73,31 +73,31 @@
         v-if="statsData"
         class="fade-in"
       >
-        <div class="glass-strong rounded-3xl p-6 shadow-xl">
+        <div class="glass-strong rounded-3xl p-4 md:p-6 shadow-xl">
           <!-- 时间范围选择器 -->
-          <div class="mb-6 pb-6 border-b border-gray-200">
-            <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
-              <div class="flex items-center gap-3">
-                <i class="fas fa-clock text-blue-500 text-lg" />
-                <span class="text-lg font-medium text-gray-700">统计时间范围</span>
+          <div class="mb-4 md:mb-6 pb-4 md:pb-6 border-b border-gray-200">
+            <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 md:gap-4">
+              <div class="flex items-center gap-2 md:gap-3">
+                <i class="fas fa-clock text-blue-500 text-base md:text-lg" />
+                <span class="text-base md:text-lg font-medium text-gray-700">统计时间范围</span>
               </div>
-              <div class="flex gap-2">
+              <div class="flex gap-2 w-full md:w-auto">
                 <button 
                   :class="['period-btn', { 'active': statsPeriod === 'daily' }]"
-                  class="px-6 py-2 text-sm font-medium flex items-center gap-2"
+                  class="px-4 md:px-6 py-2 text-xs md:text-sm font-medium flex items-center gap-1 md:gap-2 flex-1 md:flex-none justify-center"
                   :disabled="loading || modelStatsLoading"
                   @click="switchPeriod('daily')"
                 >
-                  <i class="fas fa-calendar-day" />
+                  <i class="fas fa-calendar-day text-xs md:text-sm" />
                   今日
                 </button>
                 <button 
                   :class="['period-btn', { 'active': statsPeriod === 'monthly' }]"
-                  class="px-6 py-2 text-sm font-medium flex items-center gap-2"
+                  class="px-4 md:px-6 py-2 text-xs md:text-sm font-medium flex items-center gap-1 md:gap-2 flex-1 md:flex-none justify-center"
                   :disabled="loading || modelStatsLoading"
                   @click="switchPeriod('monthly')"
                 >
-                  <i class="fas fa-calendar-alt" />
+                  <i class="fas fa-calendar-alt text-xs md:text-sm" />
                   本月
                 </button>
               </div>
@@ -108,7 +108,7 @@
           <StatsOverview />
 
           <!-- Token 分布和限制配置 -->
-          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6 md:mb-8">
             <TokenDistribution />
             <LimitConfig />
           </div>
@@ -132,7 +132,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useApiStatsStore } from '@/stores/apistats'
@@ -333,7 +333,7 @@ watch(apiKey, (newValue) => {
 
 /* Tab 胶囊按钮样式 */
 .tab-pill-button {
-  padding: 0.625rem 1.25rem;
+  padding: 0.5rem 1rem;
   border-radius: 9999px;
   font-weight: 500;
   font-size: 0.875rem;
@@ -346,6 +346,15 @@ watch(apiKey, (newValue) => {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
+  flex: 1;
+  justify-content: center;
+}
+
+@media (min-width: 768px) {
+  .tab-pill-button {
+    padding: 0.625rem 1.25rem;
+    flex: none;
+  }
 }
 
 .tab-pill-button:hover {

web/admin-spa/src/views/DashboardView.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <!-- 主要统计 -->
-    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6 mb-4 sm:mb-6 md:mb-8">
       <div class="stat-card">
         <div class="flex items-center justify-between">
           <div>
-            <p class="text-sm font-semibold text-gray-600 mb-1">
+            <p class="text-xs sm:text-sm font-semibold text-gray-600 mb-1">
               总API Keys
             </p>
-            <p class="text-3xl font-bold text-gray-900">
+            <p class="text-2xl sm:text-3xl font-bold text-gray-900">
               {{ dashboardData.totalApiKeys }}
             </p>
             <p class="text-xs text-gray-500 mt-1">
@@ -24,10 +24,10 @@
       <div class="stat-card">
         <div class="flex items-center justify-between">
           <div>
-            <p class="text-sm font-semibold text-gray-600 mb-1">
+            <p class="text-xs sm:text-sm font-semibold text-gray-600 mb-1">
               服务账户
             </p>
-            <p class="text-3xl font-bold text-gray-900">
+            <p class="text-2xl sm:text-3xl font-bold text-gray-900">
               {{ dashboardData.totalAccounts }}
             </p>
             <p class="text-xs text-gray-500 mt-1">
@@ -49,10 +49,10 @@
       <div class="stat-card">
         <div class="flex items-center justify-between">
           <div>
-            <p class="text-sm font-semibold text-gray-600 mb-1">
+            <p class="text-xs sm:text-sm font-semibold text-gray-600 mb-1">
               今日请求
             </p>
-            <p class="text-3xl font-bold text-gray-900">
+            <p class="text-2xl sm:text-3xl font-bold text-gray-900">
               {{ dashboardData.todayRequests }}
             </p>
             <p class="text-xs text-gray-500 mt-1">
@@ -68,10 +68,10 @@
       <div class="stat-card">
         <div class="flex items-center justify-between">
           <div>
-            <p class="text-sm font-semibold text-gray-600 mb-1">
+            <p class="text-xs sm:text-sm font-semibold text-gray-600 mb-1">
               系统状态
             </p>
-            <p class="text-3xl font-bold text-green-600">
+            <p class="text-2xl sm:text-3xl font-bold text-green-600">
               {{ dashboardData.systemStatus }}
             </p>
             <p class="text-xs text-gray-500 mt-1">
@@ -86,15 +86,15 @@
     </div>
 
     <!-- Token统计和性能指标 -->
-    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6 mb-4 sm:mb-6 md:mb-8">
       <div class="stat-card">
         <div class="flex items-center justify-between">
           <div class="flex-1 mr-8">
-            <p class="text-sm font-semibold text-gray-600 mb-1">
+            <p class="text-xs sm:text-sm font-semibold text-gray-600 mb-1">
               今日Token
             </p>
             <div class="flex items-baseline gap-2 mb-2 flex-wrap">
-              <p class="text-3xl font-bold text-blue-600">
+              <p class="text-xl sm:text-2xl md:text-3xl font-bold text-blue-600">
                 {{ formatNumber((dashboardData.todayInputTokens || 0) + (dashboardData.todayOutputTokens || 0) + (dashboardData.todayCacheCreateTokens || 0) + (dashboardData.todayCacheReadTokens || 0)) }}
               </p>
               <span class="text-sm text-green-600 font-medium">/ {{ costsData.todayCosts.formatted.totalCost }}</span>
@@ -123,11 +123,11 @@
       <div class="stat-card">
         <div class="flex items-center justify-between">
           <div class="flex-1 mr-8">
-            <p class="text-sm font-semibold text-gray-600 mb-1">
+            <p class="text-xs sm:text-sm font-semibold text-gray-600 mb-1">
               总Token消耗
             </p>
             <div class="flex items-baseline gap-2 mb-2 flex-wrap">
-              <p class="text-3xl font-bold text-emerald-600">
+              <p class="text-xl sm:text-2xl md:text-3xl font-bold text-emerald-600">
                 {{ formatNumber((dashboardData.totalInputTokens || 0) + (dashboardData.totalOutputTokens || 0) + (dashboardData.totalCacheCreateTokens || 0) + (dashboardData.totalCacheReadTokens || 0)) }}
               </p>
               <span class="text-sm text-green-600 font-medium">/ {{ costsData.totalCosts.formatted.totalCost }}</span>
@@ -156,11 +156,11 @@
       <div class="stat-card">
         <div class="flex items-center justify-between">
           <div>
-            <p class="text-sm font-semibold text-gray-600 mb-1">
+            <p class="text-xs sm:text-sm font-semibold text-gray-600 mb-1">
               实时RPM 
               <span class="text-xs text-gray-400">({{ dashboardData.metricsWindow }}分钟)</span>
             </p>
-            <p class="text-3xl font-bold text-orange-600">
+            <p class="text-2xl sm:text-3xl font-bold text-orange-600">
               {{ dashboardData.realtimeRPM || 0 }}
             </p>
             <p class="text-xs text-gray-500 mt-1">
@@ -182,11 +182,11 @@
       <div class="stat-card">
         <div class="flex items-center justify-between">
           <div>
-            <p class="text-sm font-semibold text-gray-600 mb-1">
+            <p class="text-xs sm:text-sm font-semibold text-gray-600 mb-1">
               实时TPM 
               <span class="text-xs text-gray-400">({{ dashboardData.metricsWindow }}分钟)</span>
             </p>
-            <p class="text-3xl font-bold text-rose-600">
+            <p class="text-2xl sm:text-3xl font-bold text-rose-600">
               {{ formatNumber(dashboardData.realtimeTPM || 0) }}
             </p>
             <p class="text-xs text-gray-500 mt-1">
@@ -208,13 +208,13 @@
 
     <!-- 模型消费统计 -->
     <div class="mb-8">
-      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
-        <h3 class="text-xl font-bold text-gray-900">
+      <div class="flex flex-col gap-4 mb-4 sm:mb-6">
+        <h3 class="text-lg sm:text-xl font-bold text-gray-900">
           模型使用分布与Token使用趋势
         </h3>
-        <div class="flex flex-wrap gap-2 items-center">
+        <div class="flex flex-col lg:flex-row gap-2 lg:items-center lg:justify-end">
           <!-- 快捷日期选择 -->
-          <div class="flex gap-1 bg-gray-100 rounded-lg p-1">
+          <div class="flex gap-1 bg-gray-100 rounded-lg p-1 overflow-x-auto flex-shrink-0">
             <button 
               v-for="option in dateFilter.presetOptions" 
               :key="option.value"
@@ -269,8 +269,8 @@
               value-format="YYYY-MM-DD HH:mm:ss"
               :disabled-date="disabledDate"
               size="default"
-              style="width: 400px;"
-              class="custom-date-picker"
+              class="w-full lg:w-auto custom-date-picker"
+              style="max-width: 400px;"
               @change="onCustomDateRangeChange"
             />
             <span
@@ -310,12 +310,12 @@
             <!-- 刷新按钮 -->
             <button 
               :disabled="isRefreshing" 
-              class="px-3 py-1 rounded-md text-sm font-medium transition-colors bg-white text-blue-600 shadow-sm hover:bg-gray-50 border border-gray-300 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              class="px-3 py-1 rounded-md text-sm font-medium transition-colors bg-white text-blue-600 shadow-sm hover:bg-gray-50 border border-gray-300 flex items-center gap-1 sm:gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
               title="立即刷新数据"
               @click="refreshAllData()"
             >
               <i :class="['fas fa-sync-alt text-xs', { 'animate-spin': isRefreshing }]" />
-              <span>{{ isRefreshing ? '刷新中' : '刷新' }}</span>
+              <span class="hidden sm:inline">{{ isRefreshing ? '刷新中' : '刷新' }}</span>
             </button>
           </div>
         </div>
@@ -323,51 +323,51 @@
       
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <!-- 饼图 -->
-        <div class="card p-6">
-          <h4 class="text-lg font-semibold text-gray-800 mb-4">
+        <div class="card p-4 sm:p-6">
+          <h4 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">
             Token使用分布
           </h4>
           <div
             class="relative"
-            style="height: 300px;"
+            style="height: 250px;"
           >
             <canvas ref="modelUsageChart" />
           </div>
         </div>
         
         <!-- 详细数据表格 -->
-        <div class="card p-6">
-          <h4 class="text-lg font-semibold text-gray-800 mb-4">
+        <div class="card p-4 sm:p-6">
+          <h4 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">
             详细统计数据
           </h4>
           <div
             v-if="dashboardModelStats.length === 0"
             class="text-center py-8"
           >
-            <p class="text-gray-500">
+            <p class="text-gray-500 text-sm sm:text-base">
               暂无模型使用数据
             </p>
           </div>
           <div
             v-else
-            class="overflow-auto max-h-[300px]"
+            class="overflow-auto max-h-[250px] sm:max-h-[300px]"
           >
             <table class="min-w-full">
               <thead class="bg-gray-50 sticky top-0">
                 <tr>
-                  <th class="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                  <th class="px-2 sm:px-4 py-2 text-left text-xs font-medium text-gray-700">
                     模型
                   </th>
-                  <th class="px-4 py-2 text-right text-xs font-medium text-gray-700">
+                  <th class="px-2 sm:px-4 py-2 text-right text-xs font-medium text-gray-700 hidden sm:table-cell">
                     请求数
                   </th>
-                  <th class="px-4 py-2 text-right text-xs font-medium text-gray-700">
+                  <th class="px-2 sm:px-4 py-2 text-right text-xs font-medium text-gray-700">
                     总Token
                   </th>
-                  <th class="px-4 py-2 text-right text-xs font-medium text-gray-700">
+                  <th class="px-2 sm:px-4 py-2 text-right text-xs font-medium text-gray-700">
                     费用
                   </th>
-                  <th class="px-4 py-2 text-right text-xs font-medium text-gray-700">
+                  <th class="px-2 sm:px-4 py-2 text-right text-xs font-medium text-gray-700 hidden sm:table-cell">
                     占比
                   </th>
                 </tr>
@@ -378,19 +378,24 @@
                   :key="stat.model"
                   class="hover:bg-gray-50"
                 >
-                  <td class="px-4 py-2 text-sm text-gray-900">
-                    {{ stat.model }}
+                  <td class="px-2 sm:px-4 py-2 text-xs sm:text-sm text-gray-900">
+                    <span
+                      class="block truncate max-w-[100px] sm:max-w-none"
+                      :title="stat.model"
+                    >
+                      {{ stat.model }}
+                    </span>
                   </td>
-                  <td class="px-4 py-2 text-sm text-gray-600 text-right">
+                  <td class="px-2 sm:px-4 py-2 text-xs sm:text-sm text-gray-600 text-right hidden sm:table-cell">
                     {{ formatNumber(stat.requests) }}
                   </td>
-                  <td class="px-4 py-2 text-sm text-gray-600 text-right">
+                  <td class="px-2 sm:px-4 py-2 text-xs sm:text-sm text-gray-600 text-right">
                     {{ formatNumber(stat.allTokens) }}
                   </td>
-                  <td class="px-4 py-2 text-sm text-green-600 text-right font-medium">
+                  <td class="px-2 sm:px-4 py-2 text-xs sm:text-sm text-green-600 text-right font-medium">
                     {{ stat.formatted ? stat.formatted.total : '$0.000000' }}
                   </td>
-                  <td class="px-4 py-2 text-sm font-medium text-right">
+                  <td class="px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium text-right hidden sm:table-cell">
                     <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                       {{ calculatePercentage(stat.allTokens, dashboardModelStats) }}%
                     </span>
@@ -404,48 +409,51 @@
     </div>
 
     <!-- Token使用趋势图 -->
-    <div class="mb-8">
-      <div class="card p-6">
-        <div style="height: 300px;">
+    <div class="mb-4 sm:mb-6 md:mb-8">
+      <div class="card p-4 sm:p-6">
+        <div
+          style="height: 250px;"
+          class="sm:h-[300px]"
+        >
           <canvas ref="usageTrendChart" />
         </div>
       </div>
     </div>
     
     <!-- API Keys 使用趋势图 -->
-    <div class="mb-8">
-      <div class="card p-6">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-gray-900">
+    <div class="mb-4 sm:mb-6 md:mb-8">
+      <div class="card p-4 sm:p-6">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
+          <h3 class="text-base sm:text-lg font-semibold text-gray-900">
             API Keys 使用趋势
           </h3>
           <!-- 维度切换按钮 -->
           <div class="flex gap-1 bg-gray-100 rounded-lg p-1">
             <button 
               :class="[
-                'px-3 py-1 rounded-md text-sm font-medium transition-colors',
+                'px-2 sm:px-3 py-1 rounded-md text-xs sm:text-sm font-medium transition-colors',
                 apiKeysTrendMetric === 'requests'
                   ? 'bg-white text-blue-600 shadow-sm' 
                   : 'text-gray-600 hover:text-gray-900'
               ]"
               @click="apiKeysTrendMetric = 'requests'; updateApiKeysUsageTrendChart()"
             >
-              <i class="fas fa-exchange-alt mr-1" />请求次数
+              <i class="fas fa-exchange-alt mr-1" /><span class="hidden sm:inline">请求次数</span><span class="sm:hidden">请求</span>
             </button>
             <button 
               :class="[
-                'px-3 py-1 rounded-md text-sm font-medium transition-colors',
+                'px-2 sm:px-3 py-1 rounded-md text-xs sm:text-sm font-medium transition-colors',
                 apiKeysTrendMetric === 'tokens'
                   ? 'bg-white text-blue-600 shadow-sm' 
                   : 'text-gray-600 hover:text-gray-900'
               ]"
               @click="apiKeysTrendMetric = 'tokens'; updateApiKeysUsageTrendChart()"
             >
-              <i class="fas fa-coins mr-1" />Token 数量
+              <i class="fas fa-coins mr-1" /><span class="hidden sm:inline">Token 数量</span><span class="sm:hidden">Token</span>
             </button>
           </div>
         </div>
-        <div class="mb-4 text-sm text-gray-600">
+        <div class="mb-4 text-xs sm:text-sm text-gray-600">
           <span v-if="apiKeysTrendData.totalApiKeys > 10">
             共 {{ apiKeysTrendData.totalApiKeys }} 个 API Key，显示使用量前 10 个
           </span>
@@ -453,7 +461,10 @@
             共 {{ apiKeysTrendData.totalApiKeys }} 个 API Key
           </span>
         </div>
-        <div style="height: 350px;">
+        <div
+          style="height: 300px;"
+          class="sm:h-[350px]"
+        >
           <canvas ref="apiKeysUsageTrendChart" />
         </div>
       </div>

web/admin-spa/src/views/LoginView.vue

@@ -1,47 +1,47 @@
 <template>
-  <div class="flex items-center justify-center min-h-screen p-6">
-    <div class="glass-strong rounded-3xl p-10 w-full max-w-md shadow-2xl">
-      <div class="text-center mb-8">
+  <div class="flex items-center justify-center min-h-screen p-4 sm:p-6">
+    <div class="glass-strong rounded-xl sm:rounded-2xl md:rounded-3xl p-6 sm:p-8 md:p-10 w-full max-w-md shadow-2xl">
+      <div class="text-center mb-6 sm:mb-8">
         <!-- 使用自定义布局来保持登录页面的居中大logo样式 -->
-        <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-gray-300/30 rounded-2xl flex items-center justify-center backdrop-blur-sm overflow-hidden">
+        <div class="w-16 h-16 sm:w-20 sm:h-20 mx-auto mb-4 sm:mb-6 bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-gray-300/30 rounded-xl sm:rounded-2xl flex items-center justify-center backdrop-blur-sm overflow-hidden">
           <template v-if="!oemLoading">
             <img
               v-if="authStore.oemSettings.siteIconData || authStore.oemSettings.siteIcon" 
               :src="authStore.oemSettings.siteIconData || authStore.oemSettings.siteIcon" 
               alt="Logo"
-              class="w-12 h-12 object-contain"
+              class="w-10 h-10 sm:w-12 sm:h-12 object-contain"
               @error="(e) => e.target.style.display = 'none'"
             >
             <i
               v-else
-              class="fas fa-cloud text-3xl text-gray-700"
+              class="fas fa-cloud text-2xl sm:text-3xl text-gray-700"
             />
           </template>
           <div
             v-else
-            class="w-12 h-12 bg-gray-300/50 rounded animate-pulse"
+            class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-300/50 rounded animate-pulse"
           />
         </div>
         <template v-if="!oemLoading && authStore.oemSettings.siteName">
-          <h1 class="text-3xl font-bold text-white mb-2 header-title">
+          <h1 class="text-2xl sm:text-3xl font-bold text-white mb-2 header-title">
             {{ authStore.oemSettings.siteName }}
           </h1>
         </template>
         <div
           v-else-if="oemLoading"
-          class="h-9 w-64 bg-gray-300/50 rounded animate-pulse mx-auto mb-2"
+          class="h-8 sm:h-9 w-48 sm:w-64 bg-gray-300/50 rounded animate-pulse mx-auto mb-2"
         />
-        <p class="text-gray-600 text-lg">
+        <p class="text-gray-600 text-base sm:text-lg">
           管理后台
         </p>
       </div>
       
       <form
-        class="space-y-6"
+        class="space-y-4 sm:space-y-6"
         @submit.prevent="handleLogin"
       >
         <div>
-          <label class="block text-sm font-semibold text-gray-900 mb-3">用户名</label>
+          <label class="block text-sm font-semibold text-gray-900 mb-2 sm:mb-3">用户名</label>
           <input 
             v-model="loginForm.username" 
             type="text" 
@@ -52,7 +52,7 @@
         </div>
         
         <div>
-          <label class="block text-sm font-semibold text-gray-900 mb-3">密码</label>
+          <label class="block text-sm font-semibold text-gray-900 mb-2 sm:mb-3">密码</label>
           <input 
             v-model="loginForm.password" 
             type="password" 
@@ -65,7 +65,7 @@
         <button 
           type="submit" 
           :disabled="authStore.loginLoading"
-          class="btn btn-primary w-full py-4 px-6 text-lg font-semibold"
+          class="btn btn-primary w-full py-3 sm:py-4 px-4 sm:px-6 text-base sm:text-lg font-semibold"
         >
           <i
             v-if="!authStore.loginLoading"
@@ -81,7 +81,7 @@
       
       <div
         v-if="authStore.loginError"
-        class="mt-6 p-4 bg-red-500/20 border border-red-500/30 rounded-xl text-red-800 text-sm text-center backdrop-blur-sm"
+        class="mt-4 sm:mt-6 p-3 sm:p-4 bg-red-500/20 border border-red-500/30 rounded-lg sm:rounded-xl text-red-800 text-xs sm:text-sm text-center backdrop-blur-sm"
       >
         <i class="fas fa-exclamation-triangle mr-2" />{{ authStore.loginError }}
       </div>

web/admin-spa/src/views/SettingsView.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="settings-container">
-    <div class="card p-6">
-      <div class="flex flex-col md:flex-row justify-between items-center gap-4 mb-6">
-        <div>
-          <h3 class="text-xl font-bold text-gray-900 mb-2">
-            其他设置
-          </h3>
-          <p class="text-gray-600">
-            自定义网站名称和图标
-          </p>
-        </div>
+    <div class="card p-4 sm:p-6">
+      <div class="mb-4 sm:mb-6">
+        <h3 class="text-lg sm:text-xl font-bold text-gray-900 mb-1 sm:mb-2">
+          其他设置
+        </h3>
+        <p class="text-sm sm:text-base text-gray-600">
+          自定义网站名称和图标
+        </p>
       </div>
       
       <div
@@ -22,9 +20,10 @@
         </p>
       </div>
       
+      <!-- 桌面端表格视图 -->
       <div
         v-else
-        class="table-container"
+        class="hidden sm:block table-container"
       >
         <table class="min-w-full">
           <tbody class="divide-y divide-gray-200/50">
@@ -168,6 +167,137 @@
           </tbody>
         </table>
       </div>
+      
+      <!-- 移动端卡片视图 -->
+      <div
+        v-if="!loading"
+        class="sm:hidden space-y-4"
+      >
+        <!-- 网站名称设置卡片 -->
+        <div class="bg-gray-50 rounded-lg p-4">
+          <div class="flex items-center gap-3 mb-3">
+            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
+              <i class="fas fa-font text-white text-sm" />
+            </div>
+            <div>
+              <h4 class="text-sm font-semibold text-gray-900">网站名称</h4>
+              <p class="text-xs text-gray-500">品牌标识</p>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <input 
+              v-model="oemSettings.siteName"
+              type="text" 
+              class="form-input w-full text-sm"
+              placeholder="Claude Relay Service"
+              maxlength="100"
+            >
+            <p class="text-xs text-gray-500">
+              将显示在浏览器标题和页面头部
+            </p>
+          </div>
+        </div>
+        
+        <!-- 网站图标设置卡片 -->
+        <div class="bg-gray-50 rounded-lg p-4">
+          <div class="flex items-center gap-3 mb-3">
+            <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0">
+              <i class="fas fa-image text-white text-sm" />
+            </div>
+            <div>
+              <h4 class="text-sm font-semibold text-gray-900">网站图标</h4>
+              <p class="text-xs text-gray-500">Favicon</p>
+            </div>
+          </div>
+          <div class="space-y-3">
+            <!-- 图标预览 -->
+            <div
+              v-if="oemSettings.siteIconData || oemSettings.siteIcon"
+              class="inline-flex items-center gap-3 p-3 bg-white rounded-lg border border-gray-200 w-full"
+            >
+              <img 
+                :src="oemSettings.siteIconData || oemSettings.siteIcon" 
+                alt="图标预览" 
+                class="w-8 h-8"
+                @error="handleIconError"
+              >
+              <span class="text-sm text-gray-600 flex-1">当前图标</span>
+              <button 
+                class="text-red-600 hover:text-red-900 text-sm font-medium hover:bg-red-50 px-3 py-1 rounded-lg transition-colors"
+                @click="removeIcon"
+              >
+                <i class="fas fa-trash mr-1" />删除
+              </button>
+            </div>
+            
+            <!-- 上传按钮 -->
+            <input 
+              ref="iconFileInput"
+              type="file" 
+              accept="image/*" 
+              style="display: none;"
+              @change="handleIconUpload"
+            >
+            <div class="flex flex-col gap-2">
+              <button 
+                class="w-full px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition-colors flex items-center justify-center gap-2"
+                @click="$refs.iconFileInput.click()"
+              >
+                <i class="fas fa-upload" />
+                上传图标
+              </button>
+              <div class="text-xs text-gray-500">
+                或者输入图标URL：
+              </div>
+              <input 
+                v-model="oemSettings.siteIcon"
+                type="url" 
+                class="form-input w-full text-sm"
+                placeholder="https://example.com/icon.png"
+              >
+            </div>
+            <p class="text-xs text-gray-500">
+              支持 PNG、JPEG、GIF 格式，建议使用正方形图片
+            </p>
+          </div>
+        </div>
+        
+        <!-- 操作按钮 -->
+        <div class="space-y-3 pt-2">
+          <button 
+            class="btn btn-primary w-full py-3 text-sm font-semibold"
+            :disabled="saving"
+            @click="saveOemSettings"
+          >
+            <div
+              v-if="saving"
+              class="loading-spinner mr-2"
+            />
+            <i
+              v-else
+              class="fas fa-save mr-2"
+            />
+            {{ saving ? '保存中...' : '保存设置' }}
+          </button>
+          
+          <button 
+            class="btn bg-gray-100 text-gray-700 hover:bg-gray-200 w-full py-3 text-sm"
+            :disabled="saving"
+            @click="resetOemSettings"
+          >
+            <i class="fas fa-undo mr-2" />
+            重置为默认
+          </button>
+          
+          <div
+            v-if="oemSettings.updatedAt"
+            class="text-center text-xs text-gray-500"
+          >
+            <i class="fas fa-clock mr-1" />
+            最后更新：{{ formatDateTime(oemSettings.updatedAt) }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>