1

2026-01-23 00:53:33 +00:00 · 2026-01-19 20:24:47 +08:00
parent 12fd5e1cb4
commit 76ecbe18a5
98 changed files with 8182 additions and 1896 deletions
--- a/web/admin-spa/src/App.vue
+++ b/web/admin-spa/src/App.vue
@@ -4,7 +4,6 @@

    <!-- 全局组件 -->
    <ToastNotification ref="toastRef" />
-    <ConfirmDialog ref="confirmRef" />
  </div>
 </template>

@@ -13,12 +12,10 @@ import { onMounted, ref } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useThemeStore } from '@/stores/theme'
 import ToastNotification from '@/components/common/ToastNotification.vue'
-import ConfirmDialog from '@/components/common/ConfirmDialog.vue'

 const authStore = useAuthStore()
 const themeStore = useThemeStore()
 const toastRef = ref()
-const confirmRef = ref()

 onMounted(() => {
  // 初始化主题
--- a/web/admin-spa/src/assets/styles/components.css
+++ b/web/admin-spa/src/assets/styles/components.css
@@ -49,8 +49,8 @@
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  box-shadow:
-    0 10px 15px -3px rgba(102, 126, 234, 0.3),
-    0 4px 6px -2px rgba(102, 126, 234, 0.05);
+    0 10px 15px -3px rgba(var(--primary-rgb), 0.3),
+    0 4px 6px -2px rgba(var(--primary-rgb), 0.05);
  transform: translateY(-1px);
 }

@@ -87,18 +87,6 @@
  transition: all 0.3s ease;
 }

-.stat-card::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
 .stat-card:hover {
  transform: translateY(-4px);
  box-shadow:
@@ -106,10 +94,6 @@
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }

-.stat-card:hover::before {
-  opacity: 1;
-}
-
 .stat-icon {
  width: 56px;
  height: 56px;
@@ -160,15 +144,15 @@
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  box-shadow:
-    0 10px 15px -3px rgba(102, 126, 234, 0.3),
-    0 4px 6px -2px rgba(102, 126, 234, 0.05);
+    0 10px 15px -3px rgba(var(--primary-rgb), 0.3),
+    0 4px 6px -2px rgba(var(--primary-rgb), 0.05);
 }

 .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
-    0 20px 25px -5px rgba(102, 126, 234, 0.3),
-    0 10px 10px -5px rgba(102, 126, 234, 0.1);
+    0 20px 25px -5px rgba(var(--primary-rgb), 0.3),
+    0 10px 10px -5px rgba(var(--primary-rgb), 0.1);
 }

 .btn-success {
@@ -202,7 +186,7 @@
 }

 .btn-secondary {
-  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
+  background: linear-gradient(135deg, var(--text-secondary) 0%, var(--bg-gradient-end) 100%);
  color: white;
  box-shadow:
    0 10px 15px -3px rgba(107, 114, 128, 0.3),
@@ -231,7 +215,7 @@
  outline: none;
  border-color: var(--primary-color);
  box-shadow:
-    0 0 0 3px rgba(102, 126, 234, 0.1),
+    0 0 0 3px rgba(var(--primary-rgb), 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
 }
@@ -251,7 +235,7 @@
 }

 .table-row:hover {
-  background: rgba(102, 126, 234, 0.05);
+  background: rgba(var(--primary-rgb), 0.05);
  transform: scale(1.005);
 }

@@ -276,8 +260,8 @@
 }

 .dark .modal-content {
-  background: rgba(17, 24, 39, 0.95);
-  border: 1px solid rgba(75, 85, 99, 0.3);
+  background: var(--glass-strong-color);
+  border: 1px solid var(--border-color);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05);
@@ -419,8 +403,8 @@
  /* 玻璃态容器 */
  .glass,
  .glass-strong {
-    margin: 16px;
-    border-radius: 20px;
+    margin: 0;
+    border-radius: 16px;
  }

  /* 统计卡片 */
--- a/web/admin-spa/src/assets/styles/global.css
+++ b/web/admin-spa/src/assets/styles/global.css
@@ -47,6 +47,70 @@
  --table-hover: rgba(129, 140, 248, 0.1);
 }

+/* 覆盖 Tailwind v3 的暗黑模式背景色使用主题色 */
+.dark .bg-gray-800,
+.dark\:bg-gray-800:is(.dark *) {
+  background-color: var(--glass-strong-color) !important;
+}
+
+.dark .bg-gray-700,
+.dark\:bg-gray-700:is(.dark *) {
+  background-color: var(--bg-gradient-mid) !important;
+}
+
+.dark .bg-gray-900,
+.dark\:bg-gray-900:is(.dark *) {
+  background-color: var(--bg-gradient-start) !important;
+}
+
+/* 覆盖带透明度的背景色 */
+.dark\:bg-gray-800\/40:is(.dark *) {
+  background-color: color-mix(in srgb, var(--glass-strong-color) 40%, transparent) !important;
+}
+
+.dark\:bg-gray-700\/30:is(.dark *) {
+  background-color: color-mix(in srgb, var(--bg-gradient-mid) 30%, transparent) !important;
+}
+
+/* 覆盖 Tailwind v3 的暗黑模式渐变色 */
+.dark\:from-gray-700:is(.dark *) {
+  --tw-gradient-from: var(--bg-gradient-mid) !important;
+  --tw-gradient-to: var(--bg-gradient-mid) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
+}
+
+.dark\:to-gray-800\/90:is(.dark *) {
+  --tw-gradient-to: var(--glass-strong-color) !important;
+}
+
+/* 覆盖 Tailwind v3 的暗黑模式悬停背景色 */
+.dark\:hover\:bg-gray-600:is(.dark *):hover {
+  background-color: var(--bg-gradient-end) !important;
+}
+
+.dark\:hover\:bg-gray-700:is(.dark *):hover {
+  background-color: var(--bg-gradient-mid) !important;
+}
+
+.dark\:hover\:bg-gray-500:is(.dark *):hover {
+  background-color: var(--text-secondary) !important;
+}
+
+.dark .border-gray-700,
+.dark\:border-gray-700:is(.dark *) {
+  border-color: var(--border-color) !important;
+}
+
+.dark .border-gray-600,
+.dark\:border-gray-600:is(.dark *) {
+  border-color: var(--border-color) !important;
+}
+
+/* 覆盖悬停边框色 */
+.dark\:hover\:border-gray-500:is(.dark *):hover {
+  border-color: var(--border-color) !important;
+}
+
 /* 优化后的transition - 避免布局跳动 */
 button,
 input,
@@ -99,9 +163,9 @@ body::before {
  right: 0;
  bottom: 0;
  background:
-    radial-gradient(circle at 20% 80%, rgba(240, 147, 251, 0.2) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.2) 0%, transparent 50%),
-    radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
+    radial-gradient(circle at 20% 80%, rgba(var(--accent-rgb), 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(var(--primary-rgb), 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(var(--secondary-rgb), 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
 }
@@ -174,8 +238,8 @@ body::before {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  box-shadow:
-    0 10px 15px -3px rgba(102, 126, 234, 0.3),
-    0 4px 6px -2px rgba(102, 126, 234, 0.05);
+    0 10px 15px -3px rgba(var(--primary-rgb), 0.3),
+    0 4px 6px -2px rgba(var(--primary-rgb), 0.05);
  transform: translateY(-1px);
 }

@@ -215,15 +279,15 @@ body::before {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  box-shadow:
-    0 10px 15px -3px rgba(102, 126, 234, 0.3),
-    0 4px 6px -2px rgba(102, 126, 234, 0.05);
+    0 10px 15px -3px rgba(var(--primary-rgb), 0.3),
+    0 4px 6px -2px rgba(var(--primary-rgb), 0.05);
 }

 .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
-    0 20px 25px -5px rgba(102, 126, 234, 0.3),
-    0 10px 10px -5px rgba(102, 126, 234, 0.1);
+    0 20px 25px -5px rgba(var(--primary-rgb), 0.3),
+    0 10px 10px -5px rgba(var(--primary-rgb), 0.1);
 }

 .btn-success {
@@ -275,7 +339,7 @@ body::before {
  outline: none;
  border-color: var(--primary-color);
  box-shadow:
-    0 0 0 3px rgba(102, 126, 234, 0.1),
+    0 0 0 3px rgba(var(--primary-rgb), 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  color: #1f2937;
@@ -283,9 +347,9 @@ body::before {

 .dark .form-input:focus {
  box-shadow:
-    0 0 0 3px rgba(129, 140, 248, 0.2),
+    0 0 0 3px rgba(var(--primary-rgb), 0.2),
    0 10px 15px -3px rgba(0, 0, 0, 0.2);
-  background: rgba(17, 24, 39, 0.95);
+  background: var(--glass-strong-color);
  color: #f3f4f6;
 }

@@ -332,19 +396,7 @@ body::before {
 }

 .dark .stat-card {
-  background: linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.8) 100%);
-}
-
-.stat-card::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
+  background: linear-gradient(135deg, var(--glass-strong-color) 0%, var(--bg-gradient-start) 100%);
 }

 .stat-card:hover {
@@ -354,10 +406,6 @@ body::before {
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }

-.stat-card:hover::before {
-  opacity: 1;
-}
-
 .stat-icon {
  width: 56px;
  height: 56px;
@@ -407,15 +455,15 @@ body::before {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  box-shadow:
-    0 10px 15px -3px rgba(102, 126, 234, 0.3),
-    0 4px 6px -2px rgba(102, 126, 234, 0.05);
+    0 10px 15px -3px rgba(var(--primary-rgb), 0.3),
+    0 4px 6px -2px rgba(var(--primary-rgb), 0.05);
 }

 .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
-    0 20px 25px -5px rgba(102, 126, 234, 0.3),
-    0 10px 10px -5px rgba(102, 126, 234, 0.1);
+    0 20px 25px -5px rgba(var(--primary-rgb), 0.3),
+    0 10px 10px -5px rgba(var(--primary-rgb), 0.1);
 }

 .btn-success {
@@ -466,7 +514,7 @@ body::before {
  outline: none;
  border-color: var(--primary-color);
  box-shadow:
-    0 0 0 3px rgba(102, 126, 234, 0.1),
+    0 0 0 3px rgba(var(--primary-rgb), 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  color: #1f2937;
@@ -474,9 +522,9 @@ body::before {

 .dark .form-input:focus {
  box-shadow:
-    0 0 0 3px rgba(129, 140, 248, 0.2),
+    0 0 0 3px rgba(var(--primary-rgb), 0.2),
    0 10px 15px -3px rgba(0, 0, 0, 0.2);
-  background: rgba(17, 24, 39, 0.95);
+  background: var(--glass-strong-color);
  color: #f3f4f6;
 }

@@ -527,8 +575,8 @@ body::before {
 }

 .dark .modal-content {
-  background: #1f2937;
-  border: 1px solid rgba(75, 85, 99, 0.5);
+  background: var(--bg-gradient-start);
+  border: 1px solid var(--border-color);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.02);
@@ -633,11 +681,11 @@ body::before {
 /* 自定义滚动条样式 */
 .custom-scrollbar {
  scrollbar-width: thin;
-  scrollbar-color: rgba(102, 126, 234, 0.3) rgba(102, 126, 234, 0.05);
+  scrollbar-color: rgba(var(--primary-rgb), 0.3) rgba(var(--primary-rgb), 0.05);
 }

 .dark .custom-scrollbar {
-  scrollbar-color: rgba(129, 140, 248, 0.3) rgba(129, 140, 248, 0.05);
+  scrollbar-color: rgba(var(--primary-rgb), 0.3) rgba(var(--primary-rgb), 0.05);
 }

 .custom-scrollbar::-webkit-scrollbar {
@@ -646,38 +694,62 @@ body::before {
 }

 .custom-scrollbar::-webkit-scrollbar-track {
-  background: rgba(102, 126, 234, 0.05);
+  background: rgba(var(--primary-rgb), 0.05);
  border-radius: 10px;
 }

 .dark .custom-scrollbar::-webkit-scrollbar-track {
-  background: rgba(129, 140, 248, 0.05);
+  background: rgba(var(--primary-rgb), 0.05);
 }

 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(118, 75, 162, 0.4) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(var(--primary-rgb), 0.4) 0%,
+    rgba(var(--secondary-rgb), 0.4) 100%
+  );
  border-radius: 10px;
  transition: background 0.3s ease;
 }

 .dark .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(135deg, rgba(129, 140, 248, 0.4) 0%, rgba(167, 139, 250, 0.4) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(var(--primary-rgb), 0.4) 0%,
+    rgba(var(--secondary-rgb), 0.4) 100%
+  );
 }

 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(var(--primary-rgb), 0.6) 0%,
+    rgba(var(--secondary-rgb), 0.6) 100%
+  );
 }

 .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(135deg, rgba(129, 140, 248, 0.6) 0%, rgba(167, 139, 250, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(var(--primary-rgb), 0.6) 0%,
+    rgba(var(--secondary-rgb), 0.6) 100%
+  );
 }

 .custom-scrollbar::-webkit-scrollbar-thumb:active {
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(var(--primary-rgb), 0.8) 0%,
+    rgba(var(--secondary-rgb), 0.8) 100%
+  );
 }

 .dark .custom-scrollbar::-webkit-scrollbar-thumb:active {
-  background: linear-gradient(135deg, rgba(129, 140, 248, 0.8) 0%, rgba(167, 139, 250, 0.8) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(var(--primary-rgb), 0.8) 0%,
+    rgba(var(--secondary-rgb), 0.8) 100%
+  );
 }

 /* 弹窗滚动内容样式 */
@@ -690,8 +762,8 @@ body::before {
@media (max-width: 768px) {
  .glass,
  .glass-strong {
-    margin: 16px;
-    border-radius: 20px;
+    margin: 0;
+    border-radius: 16px;
  }

  .stat-card {
--- a/web/admin-spa/src/assets/styles/main.css
+++ b/web/admin-spa/src/assets/styles/main.css
@@ -36,9 +36,9 @@ body::before {
  right: 0;
  bottom: 0;
  background:
-    radial-gradient(circle at 20% 80%, rgba(240, 147, 251, 0.2) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.2) 0%, transparent 50%),
-    radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
+    radial-gradient(circle at 20% 80%, rgba(var(--accent-rgb), 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(var(--primary-rgb), 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(var(--secondary-rgb), 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
 }
@@ -80,7 +80,7 @@ h6 {
 /* 自定义滚动条样式 */
 .custom-scrollbar {
  scrollbar-width: thin;
-  scrollbar-color: rgba(102, 126, 234, 0.3) rgba(102, 126, 234, 0.05);
+  scrollbar-color: rgba(var(--primary-rgb), 0.3) rgba(var(--primary-rgb), 0.05);
 }

 .custom-scrollbar::-webkit-scrollbar {
@@ -89,22 +89,34 @@ h6 {
 }

 .custom-scrollbar::-webkit-scrollbar-track {
-  background: rgba(102, 126, 234, 0.05);
+  background: rgba(var(--primary-rgb), 0.05);
  border-radius: 10px;
 }

 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(118, 75, 162, 0.4) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(var(--primary-rgb), 0.4) 0%,
+    rgba(var(--secondary-rgb), 0.4) 100%
+  );
  border-radius: 10px;
  transition: background 0.3s ease;
 }

 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(var(--primary-rgb), 0.6) 0%,
+    rgba(var(--secondary-rgb), 0.6) 100%
+  );
 }

 .custom-scrollbar::-webkit-scrollbar-thumb:active {
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(var(--primary-rgb), 0.8) 0%,
+    rgba(var(--secondary-rgb), 0.8) 100%
+  );
 }

 /* Vue过渡动画 */
@@ -137,8 +149,8 @@ h6 {
@media (max-width: 768px) {
  .glass,
  .glass-strong {
-    margin: 16px;
-    border-radius: 20px;
+    margin: 0;
+    border-radius: 16px;
  }

  .stat-card {
--- a/web/admin-spa/src/components/accounts/AccountForm.vue
+++ b/web/admin-spa/src/components/accounts/AccountForm.vue
@@ -3804,8 +3804,9 @@

 <script setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import { showToast } from '@/utils/toast'
-import { apiClient } from '@/config/api'
+import { showToast } from '@/utils/tools'
+import * as httpApi from '@/utils/http_apis'
+import { getModels } from '@/utils/http_apis'
 import { useAccountsStore } from '@/stores/accounts'
 import { useConfirm } from '@/composables/useConfirm'
 import ProxyConfig from './ProxyConfig.vue'
@@ -4110,20 +4111,20 @@ const allowedModels = ref([
  'claude-3-5-haiku-20241022'
 ]) // 白名单模式下选中的模型列表

-// 常用模型列表
-const commonModels = [
-  { value: 'claude-opus-4-5-20251101', label: 'Claude Opus 4.5', color: 'blue' },
-  { value: 'claude-sonnet-4-20250514', label: 'Claude Sonnet 4', color: 'blue' },
-  { value: 'claude-sonnet-4-5-20250929', label: 'Claude Sonnet 4.5', color: 'indigo' },
-  { value: 'claude-3-5-haiku-20241022', label: 'Claude 3.5 Haiku', color: 'green' },
-  { value: 'claude-haiku-4-5-20251001', label: 'Claude Haiku 4.5', color: 'emerald' },
-  { value: 'claude-opus-4-20250514', label: 'Claude Opus 4', color: 'purple' },
-  { value: 'claude-opus-4-1-20250805', label: 'Claude Opus 4.1', color: 'purple' },
-  { value: 'deepseek-chat', label: 'DeepSeek Chat', color: 'cyan' },
-  { value: 'Qwen', label: 'Qwen', color: 'orange' },
-  { value: 'Kimi', label: 'Kimi', color: 'pink' },
-  { value: 'GLM', label: 'GLM', color: 'teal' }
-]
+// 常用模型列表（从 API 获取）
+const commonModels = ref([])
+
+// 加载模型列表
+const loadCommonModels = async () => {
+  try {
+    const result = await getModels()
+    if (result.success && result.data?.all) {
+      commonModels.value = result.data.all
+    }
+  } catch (error) {
+    console.error('Failed to load models:', error)
+  }
+}

 // 模型映射表数据
 const modelMappings = ref([])
@@ -4330,7 +4331,7 @@ const loadAccountUsage = async () => {
  if (!isEdit.value || !props.account?.id) return

  try {
-    const response = await apiClient.get(`/admin/claude-console-accounts/${props.account.id}/usage`)
+    const response = await httpApi.get(`/admin/claude-console-accounts/${props.account.id}/usage`)
    if (response) {
      // 更新表单中的使用量数据
      form.value.dailyUsage = response.dailyUsage || 0
@@ -5733,7 +5734,7 @@ const filteredGroups = computed(() => {
 const loadGroups = async () => {
  loadingGroups.value = true
  try {
-    const response = await apiClient.get('/admin/account-groups')
+    const response = await httpApi.get('/admin/account-groups')
    groups.value = response.data || []
  } catch (error) {
    showToast('加载分组列表失败', 'error')
@@ -6186,7 +6187,7 @@ watch(
            // 否则查找账户所属的分组
            const checkPromises = groups.value.map(async (group) => {
              try {
-                const response = await apiClient.get(`/admin/account-groups/${group.id}/members`)
+                const response = await httpApi.get(`/admin/account-groups/${group.id}/members`)
                const members = response.data || []
                if (members.some((m) => m.id === newAccount.id)) {
                  foundGroupIds.push(group.id)
@@ -6214,7 +6215,7 @@ watch(
 // 获取统一 User-Agent 信息
 const fetchUnifiedUserAgent = async () => {
  try {
-    const response = await apiClient.get('/admin/claude-code-version')
+    const response = await httpApi.get('/admin/claude-code-version')
    if (response.success && response.userAgent) {
      unifiedUserAgent.value = response.userAgent
    } else {
@@ -6230,7 +6231,7 @@ const fetchUnifiedUserAgent = async () => {
 const clearUnifiedCache = async () => {
  clearingCache.value = true
  try {
-    const response = await apiClient.post('/admin/claude-code-version/clear')
+    const response = await httpApi.post('/admin/claude-code-version/clear')
    if (response.success) {
      unifiedUserAgent.value = ''
      showToast('统一User-Agent缓存已清除', 'success')
@@ -6336,6 +6337,9 @@ onMounted(() => {
    initModelMappings()
  }

+  // 加载模型列表
+  loadCommonModels()
+
  // 获取Claude Code统一User-Agent信息
  fetchUnifiedUserAgent()
  // 如果是编辑模式且是Claude Console账户，加载使用情况
--- a/web/admin-spa/src/components/accounts/AccountScheduledTestModal.vue
+++ b/web/admin-spa/src/components/accounts/AccountScheduledTestModal.vue
@@ -220,8 +220,8 @@

 <script setup>
 import { ref, watch } from 'vue'
-import { API_PREFIX } from '@/config/api'
-import { showToast } from '@/utils/toast'
+import { API_PREFIX } from '@/utils/http_apis'
+import { showToast } from '@/utils/tools'

 const props = defineProps({
  show: {
--- a/web/admin-spa/src/components/accounts/AccountTestModal.vue
+++ b/web/admin-spa/src/components/accounts/AccountTestModal.vue
@@ -70,7 +70,13 @@
            </div>
            <div class="flex items-center justify-between text-sm">
              <span class="text-gray-500 dark:text-gray-400">测试模型</span>
-              <span class="font-medium text-gray-700 dark:text-gray-300">{{ testModel }}</span>
+              <select
+                v-model="selectedModel"
+                class="rounded-lg border border-gray-200 bg-white px-2 py-1 text-xs font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
+                :disabled="testStatus === 'testing'"
+              >
+                <option v-for="m in availableModels" :key="m" :value="m">{{ m }}</option>
+              </select>
            </div>
          </div>

@@ -177,7 +183,7 @@

 <script setup>
 import { ref, computed, watch, onUnmounted } from 'vue'
-import { API_PREFIX } from '@/config/api'
+import { API_PREFIX } from '@/utils/http_apis'

 const props = defineProps({
  show: {
@@ -199,36 +205,112 @@ const errorMessage = ref('')
 const testDuration = ref(0)
 const testStartTime = ref(null)
 const eventSource = ref(null)
+const selectedModel = ref('')

-// 测试模型
-const testModel = ref('claude-sonnet-4-5-20250929')
+// 可用模型列表 - 根据账户类型
+const availableModels = computed(() => {
+  if (!props.account) return []
+  const platform = props.account.platform
+  const modelLists = {
+    claude: ['claude-sonnet-4-5-20250929', 'claude-sonnet-4-20250514', 'claude-3-5-haiku-20241022'],
+    'claude-console': [
+      'claude-sonnet-4-5-20250929',
+      'claude-sonnet-4-20250514',
+      'claude-3-5-haiku-20241022'
+    ],
+    bedrock: [
+      'claude-sonnet-4-5-20250929',
+      'claude-sonnet-4-20250514',
+      'claude-3-5-haiku-20241022'
+    ],
+    gemini: ['gemini-2.5-flash', 'gemini-2.5-pro', 'gemini-2.0-flash'],
+    'openai-responses': ['gpt-4o-mini', 'gpt-4o', 'o3-mini'],
+    'azure-openai': [props.account.deploymentName || 'gpt-4o-mini'],
+    droid: ['claude-sonnet-4-20250514', 'claude-3-5-haiku-20241022'],
+    ccr: ['claude-sonnet-4-20250514', 'claude-3-5-haiku-20241022']
+  }
+  return modelLists[platform] || []
+})
+
+// 默认测试模型
+const defaultModel = computed(() => {
+  if (!props.account) return ''
+  const platform = props.account.platform
+  const models = {
+    claude: 'claude-sonnet-4-5-20250929',
+    'claude-console': 'claude-sonnet-4-5-20250929',
+    bedrock: 'claude-sonnet-4-5-20250929',
+    gemini: 'gemini-2.5-flash',
+    'openai-responses': 'gpt-4o-mini',
+    'azure-openai': props.account.deploymentName || 'gpt-4o-mini',
+    droid: 'claude-sonnet-4-20250514',
+    ccr: 'claude-sonnet-4-20250514'
+  }
+  return models[platform] || ''
+})
+
+// 监听账户变化，重置选中的模型
+watch(
+  () => props.account,
+  () => {
+    selectedModel.value = defaultModel.value
+  },
+  { immediate: true }
+)
+
+// 是否使用 SSE 流式响应
+const useSSE = computed(() => {
+  if (!props.account) return false
+  return ['claude', 'claude-console'].includes(props.account.platform)
+})

 // 计算属性
 const platformLabel = computed(() => {
  if (!props.account) return '未知'
  const platform = props.account.platform
-  if (platform === 'claude') return 'Claude OAuth'
-  if (platform === 'claude-console') return 'Claude Console'
-  return platform
+  const labels = {
+    claude: 'Claude OAuth',
+    'claude-console': 'Claude Console',
+    bedrock: 'AWS Bedrock',
+    gemini: 'Gemini',
+    'openai-responses': 'OpenAI Responses',
+    'azure-openai': 'Azure OpenAI',
+    droid: 'Droid',
+    ccr: 'CCR'
+  }
+  return labels[platform] || platform
 })

 const platformIcon = computed(() => {
  if (!props.account) return 'fas fa-question'
  const platform = props.account.platform
-  if (platform === 'claude' || platform === 'claude-console') return 'fas fa-brain'
-  return 'fas fa-robot'
+  const icons = {
+    claude: 'fas fa-brain',
+    'claude-console': 'fas fa-brain',
+    bedrock: 'fab fa-aws',
+    gemini: 'fas fa-gem',
+    'openai-responses': 'fas fa-code',
+    'azure-openai': 'fab fa-microsoft',
+    droid: 'fas fa-robot',
+    ccr: 'fas fa-key'
+  }
+  return icons[platform] || 'fas fa-robot'
 })

 const platformBadgeClass = computed(() => {
  if (!props.account) return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
  const platform = props.account.platform
-  if (platform === 'claude') {
-    return 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300'
+  const classes = {
+    claude: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300',
+    'claude-console': 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300',
+    bedrock: 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300',
+    gemini: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300',
+    'openai-responses': 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300',
+    'azure-openai': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-300',
+    droid: 'bg-pink-100 text-pink-700 dark:bg-pink-500/20 dark:text-pink-300',
+    ccr: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300'
  }
-  if (platform === 'claude-console') {
-    return 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300'
-  }
-  return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+  return classes[platform] || 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
 })

 const statusTitle = computed(() => {
@@ -247,15 +329,16 @@ const statusTitle = computed(() => {
 })

 const statusDescription = computed(() => {
+  const apiName = platformLabel.value || 'API'
  switch (testStatus.value) {
    case 'idle':
      return '点击下方按钮开始测试账户连通性'
    case 'testing':
      return '正在发送测试请求并等待响应'
    case 'success':
-      return '账户可以正常访问 Claude API'
+      return `账户可以正常访问 ${apiName}`
    case 'error':
-      return errorMessage.value || '无法连接到 Claude API'
+      return errorMessage.value || `无法连接到 ${apiName}`
    default:
      return ''
  }
@@ -340,13 +423,17 @@ const statusTextClass = computed(() => {
 function getTestEndpoint() {
  if (!props.account) return ''
  const platform = props.account.platform
-  if (platform === 'claude') {
-    return `${API_PREFIX}/admin/claude-accounts/${props.account.id}/test`
+  const endpoints = {
+    claude: `${API_PREFIX}/admin/claude-accounts/${props.account.id}/test`,
+    'claude-console': `${API_PREFIX}/admin/claude-console-accounts/${props.account.id}/test`,
+    bedrock: `${API_PREFIX}/admin/bedrock-accounts/${props.account.id}/test`,
+    gemini: `${API_PREFIX}/admin/gemini-accounts/${props.account.id}/test`,
+    'openai-responses': `${API_PREFIX}/admin/openai-responses-accounts/${props.account.id}/test`,
+    'azure-openai': `${API_PREFIX}/admin/azure-openai-accounts/${props.account.id}/test`,
+    droid: `${API_PREFIX}/admin/droid-accounts/${props.account.id}/test`,
+    ccr: `${API_PREFIX}/admin/ccr-accounts/${props.account.id}/test`
  }
-  if (platform === 'claude-console') {
-    return `${API_PREFIX}/admin/claude-console-accounts/${props.account.id}/test`
-  }
-  return ''
+  return endpoints[platform] || ''
 }

 async function startTest() {
@@ -375,14 +462,14 @@ async function startTest() {
    // 获取认证token
    const authToken = localStorage.getItem('authToken')

-    // 使用fetch发送POST请求并处理SSE
+    // 使用fetch发送POST请求
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: authToken ? `Bearer ${authToken}` : ''
      },
-      body: JSON.stringify({ model: testModel.value })
+      body: JSON.stringify({ model: selectedModel.value })
    })

    if (!response.ok) {
@@ -390,31 +477,46 @@ async function startTest() {
      throw new Error(errorData.message || `HTTP ${response.status}`)
    }

-    // 处理SSE流
-    const reader = response.body.getReader()
-    const decoder = new TextDecoder()
-    let streamDone = false
+    // 根据账户类型处理响应
+    if (useSSE.value) {
+      // SSE 流式响应 (Claude/Console)
+      const reader = response.body.getReader()
+      const decoder = new TextDecoder()
+      let streamDone = false

-    while (!streamDone) {
-      const { done, value } = await reader.read()
-      if (done) {
-        streamDone = true
-        continue
-      }
+      while (!streamDone) {
+        const { done, value } = await reader.read()
+        if (done) {
+          streamDone = true
+          continue
+        }

-      const chunk = decoder.decode(value)
-      const lines = chunk.split('\n')
+        const chunk = decoder.decode(value)
+        const lines = chunk.split('\n')

-      for (const line of lines) {
-        if (line.startsWith('data: ')) {
-          try {
-            const data = JSON.parse(line.substring(6))
-            handleSSEEvent(data)
-          } catch {
-            // 忽略解析错误
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            try {
+              const data = JSON.parse(line.substring(6))
+              handleSSEEvent(data)
+            } catch {
+              // 忽略解析错误
+            }
          }
        }
      }
+    } else {
+      // JSON 响应 (其他平台)
+      const data = await response.json()
+      testDuration.value = Date.now() - testStartTime.value
+
+      if (data.success) {
+        testStatus.value = 'success'
+        responseText.value = data.data?.responseText || 'Test passed'
+      } else {
+        testStatus.value = 'error'
+        errorMessage.value = data.message || 'Test failed'
+      }
    }
  } catch (err) {
    testStatus.value = 'error'
--- a/web/admin-spa/src/components/accounts/ApiKeyManagementModal.vue
+++ b/web/admin-spa/src/components/accounts/ApiKeyManagementModal.vue
@@ -381,13 +381,24 @@
        </div>
      </div>
    </div>
+    <ConfirmModal
+      :cancel-text="confirmModalConfig.cancelText"
+      :confirm-text="confirmModalConfig.confirmText"
+      :message="confirmModalConfig.message"
+      :show="showConfirmModal"
+      :title="confirmModalConfig.title"
+      :type="confirmModalConfig.type"
+      @cancel="handleCancelModal"
+      @confirm="handleConfirmModal"
+    />
  </Teleport>
 </template>

 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { showToast } from '@/utils/toast'
-import { apiClient } from '@/config/api'
+import { showToast } from '@/utils/tools'
+import * as httpApi from '@/utils/http_apis'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'

 const props = defineProps({
  accountId: {
@@ -417,6 +428,39 @@ const searchQuery = ref('')
 const searchMode = ref('fuzzy') // 'fuzzy' | 'exact'
 const batchDeleting = ref(false)

+// ConfirmModal 状态
+const showConfirmModal = ref(false)
+const confirmModalConfig = ref({
+  title: '',
+  message: '',
+  type: 'primary',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+const confirmResolve = ref(null)
+
+const showConfirm = (
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'primary'
+) => {
+  return new Promise((resolve) => {
+    confirmModalConfig.value = { title, message, confirmText, cancelText, type }
+    confirmResolve.value = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirmModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(true)
+}
+const handleCancelModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(false)
+}
+
 // 掩码显示 API Key（提前声明供 computed 使用）
 const maskApiKey = (key) => {
  if (!key || key.length < 12) {
@@ -474,7 +518,7 @@ const errorKeysCount = computed(() => {
 const loadApiKeys = async () => {
  loading.value = true
  try {
-    const response = await apiClient.get(`/admin/droid-accounts/${props.accountId}`)
+    const response = await httpApi.get(`/admin/droid-accounts/${props.accountId}`)
    const account = response.data

    // 解析 apiKeys
@@ -549,7 +593,15 @@ const loadApiKeys = async () => {

 // 删除 API Key
 const deleteApiKey = async (apiKey) => {
-  if (!confirm(`确定要删除 API Key "${maskApiKey(apiKey.key)}" 吗？`)) {
+  if (
+    !(await showConfirm(
+      '删除 API Key',
+      `确定要删除 API Key "${maskApiKey(apiKey.key)}" 吗？`,
+      '删除',
+      '取消',
+      'danger'
+    ))
+  ) {
    return
  }

@@ -561,7 +613,7 @@ const deleteApiKey = async (apiKey) => {
      apiKeyUpdateMode: 'delete'
    }

-    await apiClient.put(`/admin/droid-accounts/${props.accountId}`, updateData)
+    await httpApi.put(`/admin/droid-accounts/${props.accountId}`, updateData)

    showToast('API Key 已删除', 'success')
    await loadApiKeys()
@@ -577,9 +629,13 @@ const deleteApiKey = async (apiKey) => {
 // 重置 API Key 状态
 const resetApiKeyStatus = async (apiKey) => {
  if (
-    !confirm(
-      `确定要重置 API Key "${maskApiKey(apiKey.key)}" 的状态吗？这将清除错误信息并恢复为正常状态。`
-    )
+    !(await showConfirm(
+      '重置状态',
+      `确定要重置 API Key "${maskApiKey(apiKey.key)}" 的状态吗？这将清除错误信息并恢复为正常状态。`,
+      '重置',
+      '取消',
+      'warning'
+    ))
  ) {
    return
  }
@@ -598,7 +654,7 @@ const resetApiKeyStatus = async (apiKey) => {
      apiKeyUpdateMode: 'update'
    }

-    await apiClient.put(`/admin/droid-accounts/${props.accountId}`, updateData)
+    await httpApi.put(`/admin/droid-accounts/${props.accountId}`, updateData)

    showToast('API Key 状态已重置', 'success')
    await loadApiKeys()
@@ -619,7 +675,15 @@ const deleteAllErrorKeys = async () => {
    return
  }

-  if (!confirm(`确定要删除所有 ${errorKeys.length} 个异常状态的 API Key 吗？此操作不可恢复！`)) {
+  if (
+    !(await showConfirm(
+      '删除异常 API Key',
+      `确定要删除所有 ${errorKeys.length} 个异常状态的 API Key 吗？此操作不可恢复！`,
+      '删除',
+      '取消',
+      'danger'
+    ))
+  ) {
    return
  }

@@ -631,7 +695,7 @@ const deleteAllErrorKeys = async () => {
      apiKeyUpdateMode: 'delete'
    }

-    await apiClient.put(`/admin/droid-accounts/${props.accountId}`, updateData)
+    await httpApi.put(`/admin/droid-accounts/${props.accountId}`, updateData)

    showToast(`成功删除 ${errorKeys.length} 个异常 API Key`, 'success')
    await loadApiKeys()
@@ -652,15 +716,21 @@ const deleteAllKeys = async () => {
  }

  if (
-    !confirm(
-      `确定要删除所有 ${apiKeys.value.length} 个 API Key 吗？此操作不可恢复！\n\n请再次确认：这将删除该账户下的所有 API Key。`
-    )
+    !(await showConfirm(
+      '删除全部 API Key',
+      `确定要删除所有 ${apiKeys.value.length} 个 API Key 吗？此操作不可恢复！\n\n请再次确认：这将删除该账户下的所有 API Key。`,
+      '删除',
+      '取消',
+      'danger'
+    ))
  ) {
    return
  }

  // 二次确认
-  if (!confirm('最后确认：真的要删除所有 API Key 吗？')) {
+  if (
+    !(await showConfirm('最后确认', '真的要删除所有 API Key 吗？', '确认删除', '取消', 'danger'))
+  ) {
    return
  }

@@ -672,7 +742,7 @@ const deleteAllKeys = async () => {
      apiKeyUpdateMode: 'delete'
    }

-    await apiClient.put(`/admin/droid-accounts/${props.accountId}`, updateData)
+    await httpApi.put(`/admin/droid-accounts/${props.accountId}`, updateData)

    showToast(`成功删除所有 ${keysToDelete.length} 个 API Key`, 'success')
    await loadApiKeys()
--- a/web/admin-spa/src/components/accounts/CcrAccountForm.vue
+++ b/web/admin-spa/src/components/accounts/CcrAccountForm.vue
@@ -259,8 +259,8 @@

 <script setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import { apiClient } from '@/config/api'
-import { showToast } from '@/utils/toast'
+import * as httpApi from '@/utils/http_apis'
+import { showToast } from '@/utils/tools'
 import ProxyConfig from '@/components/accounts/ProxyConfig.vue'

 const props = defineProps({
@@ -344,7 +344,7 @@ const submit = async () => {
      if (form.value.apiKey && form.value.apiKey.trim().length > 0) {
        updates.apiKey = form.value.apiKey
      }
-      const res = await apiClient.put(`/admin/ccr-accounts/${props.account.id}`, updates)
+      const res = await httpApi.put(`/admin/ccr-accounts/${props.account.id}`, updates)
      if (res.success) {
        // 不在这里显示 toast，由父组件统一处理
        emit('success')
@@ -367,7 +367,7 @@ const submit = async () => {
        dailyQuota: Number(form.value.dailyQuota || 0),
        quotaResetTime: form.value.quotaResetTime || '00:00'
      }
-      const res = await apiClient.post('/admin/ccr-accounts', payload)
+      const res = await httpApi.post('/admin/ccr-accounts', payload)
      if (res.success) {
        // 不在这里显示 toast，由父组件统一处理
        emit('success')
--- a/web/admin-spa/src/components/accounts/GroupManagementModal.vue
+++ b/web/admin-spa/src/components/accounts/GroupManagementModal.vue
@@ -21,72 +21,36 @@
          </button>
        </div>

-        <!-- 添加分组按钮 -->
-        <div class="mb-6">
-          <button class="btn btn-primary px-4 py-2" @click="showCreateForm = true">
-            <i class="fas fa-plus mr-2" />
-            创建新分组
+        <!-- Tab 切换栏 -->
+        <div class="mb-4 flex flex-wrap gap-2">
+          <button
+            v-for="tab in platformTabs"
+            :key="tab.key"
+            :class="[
+              'rounded-lg px-3 py-1.5 text-sm font-medium transition-all',
+              activeTab === tab.key
+                ? tab.key === 'claude'
+                  ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
+                  : tab.key === 'gemini'
+                    ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+                    : tab.key === 'droid'
+                      ? 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300'
+                      : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'
+            ]"
+            @click="activeTab = tab.key"
+          >
+            {{ tab.label }}
+            <span class="ml-1 text-xs opacity-70">({{ platformCounts[tab.key] }})</span>
          </button>
        </div>

-        <!-- 创建分组表单 -->
-        <div v-if="showCreateForm" class="mb-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
-          <h4 class="mb-4 text-lg font-semibold text-gray-900">创建新分组</h4>
-          <div class="space-y-4">
-            <div>
-              <label class="mb-2 block text-sm font-semibold text-gray-700">分组名称 *</label>
-              <input
-                v-model="createForm.name"
-                class="form-input w-full"
-                placeholder="输入分组名称"
-                type="text"
-              />
-            </div>
-
-            <div>
-              <label class="mb-2 block text-sm font-semibold text-gray-700">平台类型 *</label>
-              <div class="flex gap-4">
-                <label class="flex cursor-pointer items-center">
-                  <input v-model="createForm.platform" class="mr-2" type="radio" value="claude" />
-                  <span class="text-sm text-gray-700">Claude</span>
-                </label>
-                <label class="flex cursor-pointer items-center">
-                  <input v-model="createForm.platform" class="mr-2" type="radio" value="gemini" />
-                  <span class="text-sm text-gray-700">Gemini</span>
-                </label>
-                <label class="flex cursor-pointer items-center">
-                  <input v-model="createForm.platform" class="mr-2" type="radio" value="openai" />
-                  <span class="text-sm text-gray-700">OpenAI</span>
-                </label>
-                <label class="flex cursor-pointer items-center">
-                  <input v-model="createForm.platform" class="mr-2" type="radio" value="droid" />
-                  <span class="text-sm text-gray-700">Droid</span>
-                </label>
-              </div>
-            </div>
-
-            <div>
-              <label class="mb-2 block text-sm font-semibold text-gray-700">描述 (可选)</label>
-              <textarea
-                v-model="createForm.description"
-                class="form-input w-full resize-none"
-                placeholder="分组描述..."
-                rows="2"
-              />
-            </div>
-
-            <div class="flex gap-3">
-              <button
-                class="btn btn-primary px-4 py-2"
-                :disabled="!createForm.name || !createForm.platform || creating"
-                @click="createGroup"
-              >
-                <div v-if="creating" class="loading-spinner mr-2" />
-                {{ creating ? '创建中...' : '创建' }}
-              </button>
-              <button class="btn btn-secondary px-4 py-2" @click="cancelCreate">取消</button>
-            </div>
-          </div>
+        <!-- 添加分组按钮 -->
+        <div class="mb-6">
+          <button class="btn btn-primary px-4 py-2" @click="openCreateForm">
+            <i class="fas fa-plus mr-2" />
+            创建新分组
+          </button>
        </div>

        <!-- 分组列表 -->
@@ -96,14 +60,17 @@
            <p class="text-gray-500">加载中...</p>
          </div>

-          <div v-else-if="groups.length === 0" class="rounded-lg bg-gray-50 py-8 text-center">
-            <i class="fas fa-layer-group mb-4 text-4xl text-gray-300" />
-            <p class="text-gray-500">暂无分组</p>
+          <div
+            v-else-if="filteredGroups.length === 0"
+            class="rounded-lg bg-gray-50 py-8 text-center dark:bg-gray-800"
+          >
+            <i class="fas fa-layer-group mb-4 text-4xl text-gray-300 dark:text-gray-600" />
+            <p class="text-gray-500 dark:text-gray-400">暂无分组</p>
          </div>

          <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div
-              v-for="group in groups"
+              v-for="group in filteredGroups"
              :key="group.id"
              class="rounded-lg border bg-white p-4 transition-shadow hover:shadow-md"
            >
@@ -239,13 +206,106 @@
        </div>
      </div>
    </div>
+
+    <!-- 创建分组模态框 -->
+    <div
+      v-if="showCreateForm"
+      class="modal fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4"
+    >
+      <div class="modal-content w-full max-w-lg p-4 sm:p-6">
+        <div class="mb-4 flex items-center justify-between">
+          <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">创建新分组</h3>
+          <button
+            class="text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-gray-300"
+            @click="cancelCreate"
+          >
+            <i class="fas fa-times" />
+          </button>
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+              >分组名称 *</label
+            >
+            <input
+              v-model="createForm.name"
+              class="form-input w-full"
+              placeholder="输入分组名称"
+              type="text"
+            />
+          </div>
+
+          <div>
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+              >平台类型 *</label
+            >
+            <div class="flex flex-wrap gap-4">
+              <label class="flex cursor-pointer items-center">
+                <input v-model="createForm.platform" class="mr-2" type="radio" value="claude" />
+                <span class="text-sm text-gray-700 dark:text-gray-300">Claude</span>
+              </label>
+              <label class="flex cursor-pointer items-center">
+                <input v-model="createForm.platform" class="mr-2" type="radio" value="gemini" />
+                <span class="text-sm text-gray-700 dark:text-gray-300">Gemini</span>
+              </label>
+              <label class="flex cursor-pointer items-center">
+                <input v-model="createForm.platform" class="mr-2" type="radio" value="openai" />
+                <span class="text-sm text-gray-700 dark:text-gray-300">OpenAI</span>
+              </label>
+              <label class="flex cursor-pointer items-center">
+                <input v-model="createForm.platform" class="mr-2" type="radio" value="droid" />
+                <span class="text-sm text-gray-700 dark:text-gray-300">Droid</span>
+              </label>
+            </div>
+          </div>
+
+          <div>
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+              >描述 (可选)</label
+            >
+            <textarea
+              v-model="createForm.description"
+              class="form-input w-full resize-none"
+              placeholder="分组描述..."
+              rows="2"
+            />
+          </div>
+
+          <div class="flex gap-3 pt-4">
+            <button
+              class="btn btn-primary flex-1 px-4 py-2"
+              :disabled="!createForm.name || !createForm.platform || creating"
+              @click="createGroup"
+            >
+              <div v-if="creating" class="loading-spinner mr-2" />
+              {{ creating ? '创建中...' : '创建' }}
+            </button>
+            <button class="btn btn-secondary flex-1 px-4 py-2" @click="cancelCreate">取消</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 删除确认对话框 -->
+    <ConfirmModal
+      cancel-text="取消"
+      confirm-text="确认删除"
+      :message="`确定要删除分组 &quot;${deletingGroup?.name}&quot; 吗？此操作不可撤销。`"
+      :show="showDeleteConfirm"
+      title="确认删除"
+      type="danger"
+      @cancel="cancelDelete"
+      @confirm="confirmDelete"
+    />
  </Teleport>
 </template>

 <script setup>
-import { ref, onMounted } from 'vue'
-import { showToast } from '@/utils/toast'
-import { apiClient } from '@/config/api'
+import { ref, computed, onMounted } from 'vue'
+import { showToast } from '@/utils/tools'
+import * as httpApi from '@/utils/http_apis'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'

 const emit = defineEmits(['close', 'refresh'])

@@ -253,6 +313,35 @@ const show = ref(true)
 const loading = ref(false)
 const groups = ref([])

+// Tab 切换
+const activeTab = ref('all')
+const platformTabs = [
+  { key: 'all', label: '全部', color: 'gray' },
+  { key: 'claude', label: 'Claude', color: 'purple' },
+  { key: 'gemini', label: 'Gemini', color: 'blue' },
+  { key: 'openai', label: 'OpenAI', color: 'gray' },
+  { key: 'droid', label: 'Droid', color: 'cyan' }
+]
+
+// 各平台分组数量
+const platformCounts = computed(() => {
+  const counts = { all: groups.value.length }
+  platformTabs.slice(1).forEach((tab) => {
+    counts[tab.key] = groups.value.filter((g) => g.platform === tab.key).length
+  })
+  return counts
+})
+
+// 过滤后的分组列表
+const filteredGroups = computed(() => {
+  if (activeTab.value === 'all') return groups.value
+  return groups.value.filter((g) => g.platform === activeTab.value)
+})
+
+// 删除确认
+const showDeleteConfirm = ref(false)
+const deletingGroup = ref(null)
+
 // 创建表单
 const showCreateForm = ref(false)
 const creating = ref(false)
@@ -283,7 +372,7 @@ const formatDate = (dateStr) => {
 const loadGroups = async () => {
  loading.value = true
  try {
-    const response = await apiClient.get('/admin/account-groups')
+    const response = await httpApi.get('/admin/account-groups')
    groups.value = response.data || []
  } catch (error) {
    showToast('加载分组列表失败', 'error')
@@ -301,7 +390,7 @@ const createGroup = async () => {

  creating.value = true
  try {
-    await apiClient.post('/admin/account-groups', {
+    await httpApi.post('/admin/account-groups', {
      name: createForm.value.name,
      platform: createForm.value.platform,
      description: createForm.value.description
@@ -318,6 +407,12 @@ const createGroup = async () => {
  }
 }

+// 打开创建表单（根据当前 Tab 预选平台）
+const openCreateForm = () => {
+  createForm.value.platform = activeTab.value !== 'all' ? activeTab.value : 'claude'
+  showCreateForm.value = true
+}
+
 // 取消创建
 const cancelCreate = () => {
  showCreateForm.value = false
@@ -348,7 +443,7 @@ const updateGroup = async () => {

  updating.value = true
  try {
-    await apiClient.put(`/admin/account-groups/${editingGroup.value.id}`, {
+    await httpApi.put(`/admin/account-groups/${editingGroup.value.id}`, {
      name: editForm.value.name,
      description: editForm.value.description
    })
@@ -375,20 +470,23 @@ const cancelEdit = () => {
  }
 }

-// 删除分组
-const deleteGroup = async (group) => {
+// 删除分组 - 打开确认对话框
+const deleteGroup = (group) => {
  if (group.memberCount > 0) {
    showToast('分组内还有成员，无法删除', 'error')
    return
  }
+  deletingGroup.value = group
+  showDeleteConfirm.value = true
+}

-  if (!confirm(`确定要删除分组 "${group.name}" 吗？`)) {
-    return
-  }
-
+// 确认删除
+const confirmDelete = async () => {
+  if (!deletingGroup.value) return
  try {
-    await apiClient.delete(`/admin/account-groups/${group.id}`)
+    await httpApi.del(`/admin/account-groups/${deletingGroup.value.id}`)
    showToast('分组删除成功', 'success')
+    cancelDelete()
    await loadGroups()
    emit('refresh')
  } catch (error) {
@@ -396,6 +494,12 @@ const deleteGroup = async (group) => {
  }
 }

+// 取消删除
+const cancelDelete = () => {
+  showDeleteConfirm.value = false
+  deletingGroup.value = null
+}
+
 // 组件挂载时加载数据
 onMounted(() => {
  loadGroups()
--- a/web/admin-spa/src/components/accounts/OAuthFlow.vue
+++ b/web/admin-spa/src/components/accounts/OAuthFlow.vue
@@ -794,7 +794,7 @@

 <script setup>
 import { ref, computed, watch, onBeforeUnmount } from 'vue'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'
 import { useAccountsStore } from '@/stores/accounts'

 const props = defineProps({
--- a/web/admin-spa/src/components/admin/ChangeRoleModal.vue
+++ b/web/admin-spa/src/components/admin/ChangeRoleModal.vue
@@ -192,8 +192,8 @@

 <script setup>
 import { ref, watch } from 'vue'
-import { apiClient } from '@/config/api'
-import { showToast } from '@/utils/toast'
+import * as httpApi from '@/utils/http_apis'
+import { showToast } from '@/utils/tools'

 const props = defineProps({
  show: {
@@ -221,7 +221,7 @@ const handleSubmit = async () => {
  error.value = ''

  try {
-    const response = await apiClient.patch(`/users/${props.user.id}/role`, {
+    const response = await httpApi.patch(`/users/${props.user.id}/role`, {
      role: selectedRole.value
    })

--- a/web/admin-spa/src/components/admin/UserUsageStatsModal.vue
+++ b/web/admin-spa/src/components/admin/UserUsageStatsModal.vue
@@ -347,8 +347,8 @@

 <script setup>
 import { ref, watch } from 'vue'
-import { apiClient } from '@/config/api'
-import { showToast } from '@/utils/toast'
+import * as httpApi from '@/utils/http_apis'
+import { showToast } from '@/utils/tools'

 const props = defineProps({
  show: {
@@ -394,10 +394,10 @@ const loadUsageStats = async () => {
  loading.value = true
  try {
    const [statsResponse, userResponse] = await Promise.all([
-      apiClient.get(`/users/${props.user.id}/usage-stats`, {
+      httpApi.get(`/users/${props.user.id}/usage-stats`, {
        params: { period: selectedPeriod.value }
      }),
-      apiClient.get(`/users/${props.user.id}`)
+      httpApi.get(`/users/${props.user.id}`)
    ])

    if (statsResponse.success) {
--- a/web/admin-spa/src/components/apikeys/ApiKeyTestModal.vue
+++ b/web/admin-spa/src/components/apikeys/ApiKeyTestModal.vue
@@ -85,19 +85,59 @@
                class="inline-flex items-center gap-1.5 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
              >
                <i class="fas fa-link" />
-                /api/v1/messages
+                {{ serviceConfig.displayEndpoint }}
              </span>
            </div>
-            <div class="flex items-center justify-between text-sm">
-              <span class="text-gray-500 dark:text-gray-400">测试模型</span>
-              <span class="font-medium text-gray-700 dark:text-gray-300">{{ testModel }}</span>
+            <div class="text-sm">
+              <div class="mb-1 flex items-center justify-between">
+                <span class="text-gray-500 dark:text-gray-400">测试模型</span>
+                <select
+                  v-model="testModel"
+                  class="rounded-lg border border-gray-200 bg-white px-2 py-1 text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300"
+                >
+                  <option v-for="model in availableModels" :key="model.value" :value="model.value">
+                    {{ model.label }}
+                  </option>
+                </select>
+              </div>
+              <div class="text-right text-xs text-gray-400 dark:text-gray-500">
+                {{ testModel }}
+              </div>
+            </div>
+            <div class="text-sm">
+              <div class="mb-1 flex items-center justify-between">
+                <span class="text-gray-500 dark:text-gray-400">最大输出 Token</span>
+                <select
+                  v-model="maxTokens"
+                  class="rounded-lg border border-gray-200 bg-white px-2 py-1 text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300"
+                >
+                  <option v-for="opt in maxTokensOptions" :key="opt.value" :value="opt.value">
+                    {{ opt.label }}
+                  </option>
+                </select>
+              </div>
            </div>
            <div class="flex items-center justify-between text-sm">
-              <span class="text-gray-500 dark:text-gray-400">模拟客户端</span>
-              <span class="font-medium text-gray-700 dark:text-gray-300">Claude Code</span>
+              <span class="text-gray-500 dark:text-gray-400">测试服务</span>
+              <span class="font-medium text-gray-700 dark:text-gray-300">{{
+                serviceConfig.name
+              }}</span>
            </div>
          </div>

+          <!-- 提示词输入 -->
+          <div class="mb-4">
+            <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              提示词
+            </label>
+            <textarea
+              v-model="testPrompt"
+              class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+              placeholder="输入测试提示词..."
+              rows="2"
+            />
+          </div>
+
          <!-- 状态指示 -->
          <div :class="['mb-4 rounded-xl border p-4 transition-all duration-300', statusCardClass]">
            <div class="flex items-center gap-3">
@@ -200,8 +240,9 @@
 </template>

 <script setup>
-import { ref, computed, watch, onUnmounted } from 'vue'
-import { API_PREFIX } from '@/config/api'
+import { ref, computed, watch, onUnmounted, onMounted } from 'vue'
+import { API_PREFIX } from '@/utils/http_apis'
+import { getModels } from '@/utils/http_apis'

 const props = defineProps({
  show: {
@@ -217,6 +258,12 @@ const props = defineProps({
  apiKeyName: {
    type: String,
    default: ''
+  },
+  // 服务类型: claude, gemini, openai
+  serviceType: {
+    type: String,
+    default: 'claude',
+    validator: (value) => ['claude', 'gemini', 'openai'].includes(value)
  }
 })

@@ -233,6 +280,77 @@ const abortController = ref(null)
 // 测试模型
 const testModel = ref('claude-sonnet-4-5-20250929')

+// 测试提示词
+const testPrompt = ref('hi')
+
+// 最大输出 token
+const maxTokens = ref(1000)
+const maxTokensOptions = [
+  { value: 100, label: '100' },
+  { value: 500, label: '500' },
+  { value: 1000, label: '1000' },
+  { value: 2000, label: '2000' },
+  { value: 4096, label: '4096' }
+]
+
+// 从 API 获取的模型列表
+const modelsFromApi = ref({
+  claude: [],
+  gemini: [],
+  openai: []
+})
+
+// 加载模型列表
+const loadModels = async () => {
+  try {
+    const result = await getModels()
+    if (result.success && result.data) {
+      modelsFromApi.value = {
+        claude: result.data.claude || [],
+        gemini: result.data.gemini || [],
+        openai: result.data.openai || []
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load models:', error)
+  }
+}
+
+// 服务配置
+const serviceConfig = computed(() => {
+  const configs = {
+    claude: {
+      name: 'Claude',
+      endpoint: '/api-key/test',
+      defaultModel: 'claude-sonnet-4-5-20250929',
+      displayEndpoint: '/api/v1/messages'
+    },
+    gemini: {
+      name: 'Gemini',
+      endpoint: '/api-key/test-gemini',
+      defaultModel: 'gemini-2.5-pro',
+      displayEndpoint: '/gemini/v1/models/:model:streamGenerateContent'
+    },
+    openai: {
+      name: 'OpenAI (Codex)',
+      endpoint: '/api-key/test-openai',
+      defaultModel: 'gpt-5',
+      displayEndpoint: '/openai/responses'
+    }
+  }
+  return configs[props.serviceType] || configs.claude
+})
+
+// 可用模型列表（从 API 获取）
+const availableModels = computed(() => {
+  return modelsFromApi.value[props.serviceType] || []
+})
+
+// 组件挂载时加载模型
+onMounted(() => {
+  loadModels()
+})
+
 // 计算属性
 const displayName = computed(() => {
  return props.apiKeyName || '当前 API Key'
@@ -370,7 +488,7 @@ async function startTest() {

  // 使用公开的测试端点，不需要管理员认证
  // apiStats 路由挂载在 /apiStats 下
-  const endpoint = `${API_PREFIX}/apiStats/api-key/test`
+  const endpoint = `${API_PREFIX}/apiStats${serviceConfig.value.endpoint}`

  try {
    // 使用fetch发送POST请求并处理SSE
@@ -381,7 +499,9 @@ async function startTest() {
      },
      body: JSON.stringify({
        apiKey: props.apiKeyValue,
-        model: testModel.value
+        model: testModel.value,
+        prompt: testPrompt.value,
+        maxTokens: maxTokens.value
      }),
      signal: abortController.value.signal
    })
@@ -483,10 +603,23 @@ watch(
      responseText.value = ''
      errorMessage.value = ''
      testDuration.value = 0
+      // 重置为当前服务的默认模型
+      testModel.value = serviceConfig.value.defaultModel
+      // 重置提示词和 maxTokens
+      testPrompt.value = 'hi'
+      maxTokens.value = 1000
    }
  }
 )

+// 监听服务类型变化，重置模型
+watch(
+  () => props.serviceType,
+  () => {
+    testModel.value = serviceConfig.value.defaultModel
+  }
+)
+
 // 组件卸载时清理
 onUnmounted(() => {
  if (abortController.value) {
--- a/web/admin-spa/src/components/apikeys/BatchApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/BatchApiKeyModal.vue
@@ -172,12 +172,25 @@
        </div>
      </div>
    </div>
+
+    <!-- ConfirmModal -->
+    <ConfirmModal
+      :cancel-text="confirmModalConfig.cancelText"
+      :confirm-text="confirmModalConfig.confirmText"
+      :message="confirmModalConfig.message"
+      :show="showConfirmModal"
+      :title="confirmModalConfig.title"
+      :type="confirmModalConfig.type"
+      @cancel="handleCancelModal"
+      @confirm="handleConfirmModal"
+    />
  </Teleport>
 </template>

 <script setup>
 import { ref, computed } from 'vue'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'

 const props = defineProps({
  apiKeys: {
@@ -190,6 +203,39 @@ const emit = defineEmits(['close'])

 const showPreview = ref(false)

+// ConfirmModal 状态
+const showConfirmModal = ref(false)
+const confirmModalConfig = ref({
+  title: '',
+  message: '',
+  type: 'primary',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+const confirmResolve = ref(null)
+
+const showConfirm = (
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'primary'
+) => {
+  return new Promise((resolve) => {
+    confirmModalConfig.value = { title, message, confirmText, cancelText, type }
+    confirmResolve.value = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirmModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(true)
+}
+const handleCancelModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(false)
+}
+
 // 获取基础名称
 const baseName = computed(() => {
  if (props.apiKeys.length > 0) {
@@ -282,45 +328,29 @@ const downloadApiKeys = () => {

 // 关闭弹窗（带确认）
 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 confirmed = await showConfirm(
+    '关闭提醒',
+    '关闭后将无法再次查看这些 API Key，请确保已经下载并妥善保存。\n\n确定要关闭吗？',
+    '确定关闭',
+    '返回下载',
+    'warning'
+  )
+  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')
-    }
+  const confirmed = await showConfirm(
+    '确定要关闭吗？',
+    '您还没有下载 API Keys，关闭后将无法再次查看。\n\n强烈建议您先下载保存。',
+    '仍然关闭',
+    '返回下载',
+    'warning'
+  )
+  if (confirmed) {
+    emit('close')
  }
 }
 </script>
--- a/web/admin-spa/src/components/apikeys/BatchEditApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/BatchEditApiKeyModal.vue
@@ -446,9 +446,9 @@

 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'
 import { useApiKeysStore } from '@/stores/apiKeys'
-import { apiClient } from '@/config/api'
+import * as httpApi from '@/utils/http_apis'
 import AccountSelector from '@/components/common/AccountSelector.vue'

 const props = defineProps({
@@ -588,15 +588,15 @@ const refreshAccounts = async () => {
      droidData,
      groupsData
    ] = await Promise.all([
-      apiClient.get('/admin/claude-accounts'),
-      apiClient.get('/admin/claude-console-accounts'),
-      apiClient.get('/admin/gemini-accounts'),
-      apiClient.get('/admin/gemini-api-accounts'), // 获取 Gemini-API 账号
-      apiClient.get('/admin/openai-accounts'),
-      apiClient.get('/admin/openai-responses-accounts'),
-      apiClient.get('/admin/bedrock-accounts'),
-      apiClient.get('/admin/droid-accounts'),
-      apiClient.get('/admin/account-groups')
+      httpApi.get('/admin/claude-accounts'),
+      httpApi.get('/admin/claude-console-accounts'),
+      httpApi.get('/admin/gemini-accounts'),
+      httpApi.get('/admin/gemini-api-accounts'), // 获取 Gemini-API 账号
+      httpApi.get('/admin/openai-accounts'),
+      httpApi.get('/admin/openai-responses-accounts'),
+      httpApi.get('/admin/bedrock-accounts'),
+      httpApi.get('/admin/droid-accounts'),
+      httpApi.get('/admin/account-groups')
    ])

    // 合并Claude OAuth账户和Claude Console账户
@@ -801,7 +801,7 @@ const batchUpdateApiKeys = async () => {
      updates.tagOperation = tagOperation.value
    }

-    const result = await apiClient.put('/admin/api-keys/batch', {
+    const result = await httpApi.put('/admin/api-keys/batch', {
      keyIds: props.selectedKeys,
      updates
    })
--- a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
@@ -579,55 +579,59 @@
            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
              >服务权限</label
            >
-            <div class="flex gap-4">
+            <div class="flex flex-wrap gap-4">
              <label class="flex cursor-pointer items-center">
                <input
-                  v-model="form.permissions"
+                  :checked="form.permissions === 'all'"
                  class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  type="radio"
-                  value="all"
+                  type="checkbox"
+                  @change="toggleAllServices"
                />
-                <span class="text-sm text-gray-700 dark:text-gray-300">全部服务</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">全部服务</span>
              </label>
              <label class="flex cursor-pointer items-center">
                <input
-                  v-model="form.permissions"
+                  v-model="selectedServices"
                  class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  type="radio"
+                  type="checkbox"
                  value="claude"
+                  @change="updatePermissions"
                />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 Claude</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">Claude</span>
              </label>
              <label class="flex cursor-pointer items-center">
                <input
-                  v-model="form.permissions"
+                  v-model="selectedServices"
                  class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  type="radio"
+                  type="checkbox"
                  value="gemini"
+                  @change="updatePermissions"
                />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 Gemini</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">Gemini</span>
              </label>
              <label class="flex cursor-pointer items-center">
                <input
-                  v-model="form.permissions"
+                  v-model="selectedServices"
                  class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  type="radio"
+                  type="checkbox"
                  value="openai"
+                  @change="updatePermissions"
                />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 OpenAI</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">OpenAI</span>
              </label>
              <label class="flex cursor-pointer items-center">
                <input
-                  v-model="form.permissions"
+                  v-model="selectedServices"
                  class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  type="radio"
+                  type="checkbox"
                  value="droid"
+                  @change="updatePermissions"
                />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 Droid</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">Droid</span>
              </label>
            </div>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              控制此 API Key 可以访问哪些服务
+              控制此 API Key 可以访问哪些服务，可多选
            </p>
          </div>

@@ -662,7 +666,7 @@
                  v-model="form.claudeAccountId"
                  :accounts="localAccounts.claude"
                  default-option-text="使用共享账号池"
-                  :disabled="form.permissions !== 'all' && form.permissions !== 'claude'"
+                  :disabled="!isServiceEnabled('claude')"
                  :groups="localAccounts.claudeGroups"
                  placeholder="请选择Claude账号"
                  platform="claude"
@@ -676,7 +680,7 @@
                  v-model="form.geminiAccountId"
                  :accounts="localAccounts.gemini"
                  default-option-text="使用共享账号池"
-                  :disabled="form.permissions !== 'all' && form.permissions !== 'gemini'"
+                  :disabled="!isServiceEnabled('gemini')"
                  :groups="localAccounts.geminiGroups"
                  placeholder="请选择Gemini账号"
                  platform="gemini"
@@ -690,7 +694,7 @@
                  v-model="form.openaiAccountId"
                  :accounts="localAccounts.openai"
                  default-option-text="使用共享账号池"
-                  :disabled="form.permissions !== 'all' && form.permissions !== 'openai'"
+                  :disabled="!isServiceEnabled('openai')"
                  :groups="localAccounts.openaiGroups"
                  placeholder="请选择OpenAI账号"
                  platform="openai"
@@ -704,7 +708,7 @@
                  v-model="form.bedrockAccountId"
                  :accounts="localAccounts.bedrock"
                  default-option-text="使用共享账号池"
-                  :disabled="form.permissions !== 'all' && form.permissions !== 'openai'"
+                  :disabled="!isServiceEnabled('claude')"
                  :groups="[]"
                  placeholder="请选择Bedrock账号"
                  platform="bedrock"
@@ -718,7 +722,7 @@
                  v-model="form.droidAccountId"
                  :accounts="localAccounts.droid"
                  default-option-text="使用共享账号池"
-                  :disabled="form.permissions !== 'all' && form.permissions !== 'droid'"
+                  :disabled="!isServiceEnabled('droid')"
                  :groups="localAccounts.droidGroups"
                  placeholder="请选择Droid账号"
                  platform="droid"
@@ -884,16 +888,29 @@
        </form>
      </div>
    </div>
+
+    <!-- ConfirmModal -->
+    <ConfirmModal
+      :cancel-text="confirmModalConfig.cancelText"
+      :confirm-text="confirmModalConfig.confirmText"
+      :message="confirmModalConfig.message"
+      :show="showConfirmModal"
+      :title="confirmModalConfig.title"
+      :type="confirmModalConfig.type"
+      @cancel="handleCancelModal"
+      @confirm="handleConfirmModal"
+    />
  </Teleport>
 </template>

 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'
 import { useClientsStore } from '@/stores/clients'
 import { useApiKeysStore } from '@/stores/apiKeys'
-import { apiClient } from '@/config/api'
+import * as httpApi from '@/utils/http_apis'
 import AccountSelector from '@/components/common/AccountSelector.vue'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'

 const props = defineProps({
  accounts: {
@@ -918,6 +935,40 @@ const clientsStore = useClientsStore()
 const apiKeysStore = useApiKeysStore()
 const loading = ref(false)
 const accountsLoading = ref(false)
+
+// ConfirmModal 状态
+const showConfirmModal = ref(false)
+const confirmModalConfig = ref({
+  title: '',
+  message: '',
+  type: 'primary',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+const confirmResolve = ref(null)
+
+const showConfirm = (
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'primary'
+) => {
+  return new Promise((resolve) => {
+    confirmModalConfig.value = { title, message, confirmText, cancelText, type }
+    confirmResolve.value = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirmModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(true)
+}
+const handleCancelModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(false)
+}
+
 const localAccounts = ref({
  claude: [],
  gemini: [],
@@ -980,6 +1031,39 @@ const form = reactive({
  tags: []
 })

+// 多选服务
+const allServices = ['claude', 'gemini', 'openai', 'droid']
+const selectedServices = ref([...allServices])
+
+// 切换全部服务
+const toggleAllServices = (event) => {
+  if (event.target.checked) {
+    selectedServices.value = [...allServices]
+    form.permissions = 'all'
+  } else {
+    selectedServices.value = []
+    form.permissions = ''
+  }
+}
+
+// 更新权限
+const updatePermissions = () => {
+  if (selectedServices.value.length === allServices.length) {
+    form.permissions = 'all'
+  } else if (selectedServices.value.length === 1) {
+    form.permissions = selectedServices.value[0]
+  } else if (selectedServices.value.length > 1) {
+    form.permissions = selectedServices.value.join(',')
+  } else {
+    form.permissions = ''
+  }
+}
+
+// 检查服务是否启用
+const isServiceEnabled = (service) => {
+  return form.permissions === 'all' || selectedServices.value.includes(service)
+}
+
 // 加载支持的客户端和已存在的标签
 onMounted(async () => {
  supportedClients.value = await clientsStore.loadSupportedClients()
@@ -1046,15 +1130,15 @@ const refreshAccounts = async () => {
      droidData,
      groupsData
    ] = await Promise.all([
-      apiClient.get('/admin/claude-accounts'),
-      apiClient.get('/admin/claude-console-accounts'),
-      apiClient.get('/admin/gemini-accounts'),
-      apiClient.get('/admin/gemini-api-accounts'), // 获取 Gemini-API 账号
-      apiClient.get('/admin/openai-accounts'),
-      apiClient.get('/admin/openai-responses-accounts'), // 获取 OpenAI-Responses 账号
-      apiClient.get('/admin/bedrock-accounts'),
-      apiClient.get('/admin/droid-accounts'),
-      apiClient.get('/admin/account-groups')
+      httpApi.get('/admin/claude-accounts'),
+      httpApi.get('/admin/claude-console-accounts'),
+      httpApi.get('/admin/gemini-accounts'),
+      httpApi.get('/admin/gemini-api-accounts'), // 获取 Gemini-API 账号
+      httpApi.get('/admin/openai-accounts'),
+      httpApi.get('/admin/openai-responses-accounts'), // 获取 OpenAI-Responses 账号
+      httpApi.get('/admin/bedrock-accounts'),
+      httpApi.get('/admin/droid-accounts'),
+      httpApi.get('/admin/account-groups')
    ])

    // 合并Claude OAuth账户和Claude Console账户
@@ -1331,18 +1415,13 @@ const createApiKey = async () => {

  // 检查是否设置了时间窗口但费用限制为0
  if (form.rateLimitWindow && (!form.rateLimitCost || parseFloat(form.rateLimitCost) === 0)) {
-    let confirmed = false
-    if (window.showConfirm) {
-      confirmed = await window.showConfirm(
-        '费用限制提醒',
-        '您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n\n是否继续？',
-        '继续创建',
-        '返回修改'
-      )
-    } else {
-      // 降级方案
-      confirmed = confirm('您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n是否继续？')
-    }
+    const confirmed = await showConfirm(
+      '费用限制提醒',
+      '您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n\n是否继续？',
+      '继续创建',
+      '返回修改',
+      'warning'
+    )
    if (!confirmed) {
      return
    }
@@ -1435,7 +1514,7 @@ const createApiKey = async () => {
        name: form.name
      }

-      const result = await apiClient.post('/admin/api-keys', data)
+      const result = await httpApi.post('/admin/api-keys', data)

      if (result.success) {
        showToast('API Key 创建成功', 'success')
@@ -1453,7 +1532,7 @@ const createApiKey = async () => {
        count: form.batchCount
      }

-      const result = await apiClient.post('/admin/api-keys/batch', data)
+      const result = await httpApi.post('/admin/api-keys/batch', data)

      if (result.success) {
        showToast(`成功创建 ${result.data.length} 个 API Key`, 'success')
--- a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
@@ -412,55 +412,59 @@
            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
              >服务权限</label
            >
-            <div class="flex gap-4">
+            <div class="flex flex-wrap gap-4">
              <label class="flex cursor-pointer items-center">
                <input
-                  v-model="form.permissions"
+                  :checked="form.permissions === 'all'"
                  class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  type="radio"
-                  value="all"
+                  type="checkbox"
+                  @change="toggleAllServices"
                />
-                <span class="text-sm text-gray-700 dark:text-gray-300">全部服务</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">全部服务</span>
              </label>
              <label class="flex cursor-pointer items-center">
                <input
-                  v-model="form.permissions"
+                  v-model="selectedServices"
                  class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  type="radio"
+                  type="checkbox"
                  value="claude"
+                  @change="updatePermissions"
                />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 Claude</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">Claude</span>
              </label>
              <label class="flex cursor-pointer items-center">
                <input
-                  v-model="form.permissions"
+                  v-model="selectedServices"
                  class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  type="radio"
+                  type="checkbox"
                  value="gemini"
+                  @change="updatePermissions"
                />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 Gemini</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">Gemini</span>
              </label>
              <label class="flex cursor-pointer items-center">
                <input
-                  v-model="form.permissions"
+                  v-model="selectedServices"
                  class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  type="radio"
+                  type="checkbox"
                  value="openai"
+                  @change="updatePermissions"
                />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 OpenAI</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">OpenAI</span>
              </label>
              <label class="flex cursor-pointer items-center">
                <input
-                  v-model="form.permissions"
+                  v-model="selectedServices"
                  class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
-                  type="radio"
+                  type="checkbox"
                  value="droid"
+                  @change="updatePermissions"
                />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 Droid</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">Droid</span>
              </label>
            </div>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              控制此 API Key 可以访问哪些服务
+              控制此 API Key 可以访问哪些服务，可多选
            </p>
          </div>

@@ -495,7 +499,7 @@
                  v-model="form.claudeAccountId"
                  :accounts="localAccounts.claude"
                  default-option-text="使用共享账号池"
-                  :disabled="form.permissions !== 'all' && form.permissions !== 'claude'"
+                  :disabled="!isServiceEnabled('claude')"
                  :groups="localAccounts.claudeGroups"
                  placeholder="请选择Claude账号"
                  platform="claude"
@@ -509,7 +513,7 @@
                  v-model="form.geminiAccountId"
                  :accounts="localAccounts.gemini"
                  default-option-text="使用共享账号池"
-                  :disabled="form.permissions !== 'all' && form.permissions !== 'gemini'"
+                  :disabled="!isServiceEnabled('gemini')"
                  :groups="localAccounts.geminiGroups"
                  placeholder="请选择Gemini账号"
                  platform="gemini"
@@ -523,7 +527,7 @@
                  v-model="form.openaiAccountId"
                  :accounts="localAccounts.openai"
                  default-option-text="使用共享账号池"
-                  :disabled="form.permissions !== 'all' && form.permissions !== 'openai'"
+                  :disabled="!isServiceEnabled('openai')"
                  :groups="localAccounts.openaiGroups"
                  placeholder="请选择OpenAI账号"
                  platform="openai"
@@ -537,7 +541,7 @@
                  v-model="form.bedrockAccountId"
                  :accounts="localAccounts.bedrock"
                  default-option-text="使用共享账号池"
-                  :disabled="form.permissions !== 'all' && form.permissions !== 'openai'"
+                  :disabled="!isServiceEnabled('claude')"
                  :groups="[]"
                  placeholder="请选择Bedrock账号"
                  platform="bedrock"
@@ -551,7 +555,7 @@
                  v-model="form.droidAccountId"
                  :accounts="localAccounts.droid"
                  default-option-text="使用共享账号池"
-                  :disabled="form.permissions !== 'all' && form.permissions !== 'droid'"
+                  :disabled="!isServiceEnabled('droid')"
                  :groups="localAccounts.droidGroups"
                  placeholder="请选择Droid账号"
                  platform="droid"
@@ -722,16 +726,29 @@
        </form>
      </div>
    </div>
+
+    <!-- ConfirmModal -->
+    <ConfirmModal
+      :cancel-text="confirmModalConfig.cancelText"
+      :confirm-text="confirmModalConfig.confirmText"
+      :message="confirmModalConfig.message"
+      :show="showConfirmModal"
+      :title="confirmModalConfig.title"
+      :type="confirmModalConfig.type"
+      @cancel="handleCancelModal"
+      @confirm="handleConfirmModal"
+    />
  </Teleport>
 </template>

 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'
 import { useClientsStore } from '@/stores/clients'
 import { useApiKeysStore } from '@/stores/apiKeys'
-import { apiClient } from '@/config/api'
+import * as httpApi from '@/utils/http_apis'
 import AccountSelector from '@/components/common/AccountSelector.vue'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'

 const props = defineProps({
  apiKey: {
@@ -762,6 +779,40 @@ const clientsStore = useClientsStore()
 const apiKeysStore = useApiKeysStore()
 const loading = ref(false)
 const accountsLoading = ref(false)
+
+// ConfirmModal 状态
+const showConfirmModal = ref(false)
+const confirmModalConfig = ref({
+  title: '',
+  message: '',
+  type: 'primary',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+const confirmResolve = ref(null)
+
+const showConfirm = (
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'primary'
+) => {
+  return new Promise((resolve) => {
+    confirmModalConfig.value = { title, message, confirmText, cancelText, type }
+    confirmResolve.value = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirmModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(true)
+}
+const handleCancelModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(false)
+}
+
 const localAccounts = ref({
  claude: [],
  gemini: [],
@@ -816,6 +867,50 @@ const form = reactive({
  ownerId: '' // 新增：所有者ID
 })

+// 多选服务
+const allServices = ['claude', 'gemini', 'openai', 'droid']
+const selectedServices = ref([...allServices])
+
+// 切换全部服务
+const toggleAllServices = (event) => {
+  if (event.target.checked) {
+    selectedServices.value = [...allServices]
+    form.permissions = 'all'
+  } else {
+    selectedServices.value = []
+    form.permissions = ''
+  }
+}
+
+// 更新权限
+const updatePermissions = () => {
+  if (selectedServices.value.length === allServices.length) {
+    form.permissions = 'all'
+  } else if (selectedServices.value.length === 1) {
+    form.permissions = selectedServices.value[0]
+  } else if (selectedServices.value.length > 1) {
+    form.permissions = selectedServices.value.join(',')
+  } else {
+    form.permissions = ''
+  }
+}
+
+// 检查服务是否启用
+const isServiceEnabled = (service) => {
+  return form.permissions === 'all' || selectedServices.value.includes(service)
+}
+
+// 根据 permissions 初始化 selectedServices
+const initSelectedServices = (permissions) => {
+  if (permissions === 'all') {
+    selectedServices.value = [...allServices]
+  } else if (permissions) {
+    selectedServices.value = permissions.split(',').filter((s) => allServices.includes(s))
+  } else {
+    selectedServices.value = []
+  }
+}
+
 // 添加限制的模型
 const addRestrictedModel = () => {
  if (form.modelInput && !form.restrictedModels.includes(form.modelInput)) {
@@ -869,18 +964,13 @@ const removeTag = (index) => {
 const updateApiKey = async () => {
  // 检查是否设置了时间窗口但费用限制为0
  if (form.rateLimitWindow && (!form.rateLimitCost || parseFloat(form.rateLimitCost) === 0)) {
-    let confirmed = false
-    if (window.showConfirm) {
-      confirmed = await window.showConfirm(
-        '费用限制提醒',
-        '您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n\n是否继续？',
-        '继续保存',
-        '返回修改'
-      )
-    } else {
-      // 降级方案
-      confirmed = confirm('您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n是否继续？')
-    }
+    const confirmed = await showConfirm(
+      '费用限制提醒',
+      '您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n\n是否继续？',
+      '继续保存',
+      '返回修改',
+      'warning'
+    )
    if (!confirmed) {
      return
    }
@@ -989,7 +1079,7 @@ const updateApiKey = async () => {
      data.ownerId = form.ownerId
    }

-    const result = await apiClient.put(`/admin/api-keys/${props.apiKey.id}`, data)
+    const result = await httpApi.put(`/admin/api-keys/${props.apiKey.id}`, data)

    if (result.success) {
      emit('success')
@@ -1019,15 +1109,15 @@ const refreshAccounts = async () => {
      droidData,
      groupsData
    ] = await Promise.all([
-      apiClient.get('/admin/claude-accounts'),
-      apiClient.get('/admin/claude-console-accounts'),
-      apiClient.get('/admin/gemini-accounts'),
-      apiClient.get('/admin/gemini-api-accounts'),
-      apiClient.get('/admin/openai-accounts'),
-      apiClient.get('/admin/openai-responses-accounts'),
-      apiClient.get('/admin/bedrock-accounts'),
-      apiClient.get('/admin/droid-accounts'),
-      apiClient.get('/admin/account-groups')
+      httpApi.get('/admin/claude-accounts'),
+      httpApi.get('/admin/claude-console-accounts'),
+      httpApi.get('/admin/gemini-accounts'),
+      httpApi.get('/admin/gemini-api-accounts'),
+      httpApi.get('/admin/openai-accounts'),
+      httpApi.get('/admin/openai-responses-accounts'),
+      httpApi.get('/admin/bedrock-accounts'),
+      httpApi.get('/admin/droid-accounts'),
+      httpApi.get('/admin/account-groups')
    ])

    // 合并Claude OAuth账户和Claude Console账户
@@ -1140,7 +1230,7 @@ const refreshAccounts = async () => {
 // 加载用户列表
 const loadUsers = async () => {
  try {
-    const response = await apiClient.get('/admin/users')
+    const response = await httpApi.get('/admin/users')
    if (response.success) {
      availableUsers.value = response.data || []
    }
@@ -1242,6 +1332,7 @@ onMounted(async () => {
  form.totalCostLimit = props.apiKey.totalCostLimit || ''
  form.weeklyOpusCostLimit = props.apiKey.weeklyOpusCostLimit || ''
  form.permissions = props.apiKey.permissions || 'all'
+  initSelectedServices(form.permissions)
  // 处理 Claude 账号（区分 OAuth 和 Console）
  if (props.apiKey.claudeConsoleAccountId) {
    form.claudeAccountId = `console:${props.apiKey.claudeConsoleAccountId}`
--- a/web/admin-spa/src/components/apikeys/ExpiryEditModal.vue
+++ b/web/admin-spa/src/components/apikeys/ExpiryEditModal.vue
@@ -211,11 +211,24 @@
        </div>
      </div>
    </div>
+
+    <!-- ConfirmModal -->
+    <ConfirmModal
+      :cancel-text="confirmModalConfig.cancelText"
+      :confirm-text="confirmModalConfig.confirmText"
+      :message="confirmModalConfig.message"
+      :show="showConfirmModal"
+      :title="confirmModalConfig.title"
+      :type="confirmModalConfig.type"
+      @cancel="handleCancelModal"
+      @confirm="handleConfirmModal"
+    />
  </Teleport>
 </template>

 <script setup>
 import { ref, reactive, computed, watch } from 'vue'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'

 const props = defineProps({
  show: {
@@ -232,6 +245,39 @@ const emit = defineEmits(['close', 'save'])

 const saving = ref(false)

+// ConfirmModal 状态
+const showConfirmModal = ref(false)
+const confirmModalConfig = ref({
+  title: '',
+  message: '',
+  type: 'primary',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+const confirmResolve = ref(null)
+
+const showConfirm = (
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'primary'
+) => {
+  return new Promise((resolve) => {
+    confirmModalConfig.value = { title, message, confirmText, cancelText, type }
+    confirmResolve.value = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirmModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(true)
+}
+const handleCancelModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(false)
+}
+
 // 表单数据
 const localForm = reactive({
  expireDuration: '',
@@ -401,21 +447,13 @@ const handleSave = () => {

 // 立即激活
 const handleActivateNow = async () => {
-  // 使用确认弹窗
-  let confirmed = true
-  if (window.showConfirm) {
-    confirmed = await window.showConfirm(
-      '激活 API Key',
-      `确定要立即激活此 API Key 吗？激活后将在 ${props.apiKey.activationDays || (props.apiKey.activationUnit === 'hours' ? 24 : 30)} ${props.apiKey.activationUnit === 'hours' ? '小时' : '天'}后自动过期。`,
-      '确定激活',
-      '取消'
-    )
-  } else {
-    // 降级方案
-    confirmed = confirm(
-      `确定要立即激活此 API Key 吗？激活后将在 ${props.apiKey.activationDays || (props.apiKey.activationUnit === 'hours' ? 24 : 30)} ${props.apiKey.activationUnit === 'hours' ? '小时' : '天'}后自动过期。`
-    )
-  }
+  const confirmed = await showConfirm(
+    '激活 API Key',
+    `确定要立即激活此 API Key 吗？激活后将在 ${props.apiKey.activationDays || (props.apiKey.activationUnit === 'hours' ? 24 : 30)} ${props.apiKey.activationUnit === 'hours' ? '小时' : '天'}后自动过期。`,
+    '确定激活',
+    '取消',
+    'warning'
+  )

  if (!confirmed) {
    return
--- a/web/admin-spa/src/components/apikeys/NewApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/NewApiKeyModal.vue
@@ -126,12 +126,25 @@
        </div>
      </div>
    </div>
+
+    <!-- ConfirmModal -->
+    <ConfirmModal
+      :cancel-text="confirmModalConfig.cancelText"
+      :confirm-text="confirmModalConfig.confirmText"
+      :message="confirmModalConfig.message"
+      :show="showConfirmModal"
+      :title="confirmModalConfig.title"
+      :type="confirmModalConfig.type"
+      @cancel="handleCancelModal"
+      @confirm="handleConfirmModal"
+    />
  </Teleport>
 </template>

 <script setup>
 import { ref, computed } from 'vue'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'

 const props = defineProps({
  apiKey: {
@@ -144,6 +157,39 @@ const emit = defineEmits(['close'])

 const showFullKey = ref(false)

+// ConfirmModal 状态
+const showConfirmModal = ref(false)
+const confirmModalConfig = ref({
+  title: '',
+  message: '',
+  type: 'primary',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+const confirmResolve = ref(null)
+
+const showConfirm = (
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'primary'
+) => {
+  return new Promise((resolve) => {
+    confirmModalConfig.value = { title, message, confirmText, cancelText, type }
+    confirmResolve.value = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirmModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(true)
+}
+const handleCancelModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(false)
+}
+
 // 获取 API Base URL 前缀
 const getBaseUrlPrefix = () => {
  // 优先使用环境变量配置的自定义前缀
@@ -249,45 +295,29 @@ const copyKeyOnly = async () => {

 // 关闭弹窗（带确认）
 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 confirmed = await showConfirm(
+    '关闭提醒',
+    '关闭后将无法再次查看完整的API Key，请确保已经妥善保存。\n\n确定要关闭吗？',
+    '确定关闭',
+    '取消',
+    'warning'
+  )
+  if (confirmed) {
+    emit('close')
  }
 }

 // 直接关闭（不带确认）
 const handleDirectClose = async () => {
-  if (window.showConfirm) {
-    const confirmed = await window.showConfirm(
-      '确定要关闭吗？',
-      '您还没有保存API Key，关闭后将无法再次查看。\n\n建议您先复制API Key再关闭。',
-      '仍然关闭',
-      '返回复制'
-    )
-    if (confirmed) {
-      emit('close')
-    }
-  } else {
-    // 降级方案
-    const confirmed = confirm('您还没有保存API Key，关闭后将无法再次查看。\n\n确定要关闭吗？')
-    if (confirmed) {
-      emit('close')
-    }
+  const confirmed = await showConfirm(
+    '确定要关闭吗？',
+    '您还没有保存API Key，关闭后将无法再次查看。\n\n建议您先复制API Key再关闭。',
+    '仍然关闭',
+    '返回复制',
+    'warning'
+  )
+  if (confirmed) {
+    emit('close')
  }
 }
 </script>
--- a/web/admin-spa/src/components/apikeys/RecordDetailModal.vue
+++ b/web/admin-spa/src/components/apikeys/RecordDetailModal.vue
@@ -155,7 +155,7 @@
 <script setup>
 import { computed } from 'vue'
 import dayjs from 'dayjs'
-import { formatNumber } from '@/utils/format'
+import { formatNumber } from '@/utils/tools'

 const props = defineProps({
  show: {
--- a/web/admin-spa/src/components/apikeys/RenewApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/RenewApiKeyModal.vue
@@ -97,8 +97,8 @@

 <script setup>
 import { ref, reactive, computed } from 'vue'
-import { showToast } from '@/utils/toast'
-import { apiClient } from '@/config/api'
+import { showToast } from '@/utils/tools'
+import * as httpApi from '@/utils/http_apis'

 const props = defineProps({
  apiKey: {
@@ -206,7 +206,7 @@ const renewApiKey = async () => {
      expiresAt: form.renewDuration === 'permanent' ? null : form.newExpiresAt
    }

-    const result = await apiClient.put(`/admin/api-keys/${props.apiKey.id}`, data)
+    const result = await httpApi.put(`/admin/api-keys/${props.apiKey.id}`, data)

    if (result.success) {
      showToast('API Key 续期成功', 'success')
--- a/web/admin-spa/src/components/apistats/ApiKeyInput.vue
+++ b/web/admin-spa/src/components/apistats/ApiKeyInput.vue
@@ -262,11 +262,11 @@ const hasValidInput = computed(() => {
 }

 :global(.dark) .wide-card-input:focus {
-  border-color: #60a5fa;
+  border-color: var(--primary-color);
  box-shadow:
-    0 0 0 3px rgba(96, 165, 250, 0.15),
+    0 0 0 3px rgba(var(--primary-rgb), 0.15),
    0 10px 15px -3px rgba(0, 0, 0, 0.4);
-  background: rgba(31, 41, 55, 0.95);
+  background: var(--glass-strong-color);
  color: #f3f4f6;
 }

@@ -289,18 +289,18 @@ const hasValidInput = computed(() => {
 }

 .btn-primary {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  box-shadow:
-    0 10px 15px -3px rgba(102, 126, 234, 0.3),
-    0 4px 6px -2px rgba(102, 126, 234, 0.05);
+    0 10px 15px -3px rgba(var(--primary-rgb), 0.3),
+    0 4px 6px -2px rgba(var(--primary-rgb), 0.05);
 }

 .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
-    0 20px 25px -5px rgba(102, 126, 234, 0.3),
-    0 10px 10px -5px rgba(102, 126, 234, 0.1);
+    0 20px 25px -5px rgba(var(--primary-rgb), 0.3),
+    0 10px 10px -5px rgba(var(--primary-rgb), 0.1);
 }

 .btn-primary:disabled {
@@ -322,8 +322,8 @@ const hasValidInput = computed(() => {
 }

 :global(.dark) .security-notice {
-  background: rgba(31, 41, 55, 0.8) !important;
-  border: 1px solid rgba(75, 85, 99, 0.5) !important;
+  background: var(--glass-strong-color) !important;
+  border: 1px solid var(--border-color) !important;
  color: #d1d5db !important;
 }

@@ -334,8 +334,8 @@ const hasValidInput = computed(() => {
 }

 :global(.dark) .security-notice:hover {
-  background: rgba(31, 41, 55, 0.9) !important;
-  border-color: rgba(75, 85, 99, 0.6) !important;
+  background: var(--glass-strong-color) !important;
+  border-color: var(--border-color) !important;
  color: #e5e7eb !important;
 }

@@ -371,7 +371,7 @@ const hasValidInput = computed(() => {
 }

 :global(.dark) .mode-switch-group {
-  background: #1f2937;
+  background: var(--bg-gradient-start);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 }

@@ -392,7 +392,7 @@ const hasValidInput = computed(() => {
 }

 :global(.dark) .mode-switch-btn {
-  color: #9ca3af;
+  color: var(--text-secondary);
 }

 .mode-switch-btn:hover:not(.active) {
@@ -407,12 +407,12 @@ const hasValidInput = computed(() => {

 .mode-switch-btn.active {
  color: white;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
 }

 .mode-switch-btn.active:hover {
-  box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 6px rgba(var(--primary-rgb), 0.3);
 }

 .mode-switch-btn i {
--- a/web/admin-spa/src/components/apistats/LimitConfig.vue
+++ b/web/admin-spa/src/components/apistats/LimitConfig.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex h-full flex-col gap-4 md:gap-6">
+  <div class="flex h-full flex-col gap-3 sm:gap-4 md:gap-6">
    <!-- 限制配置 / 聚合模式提示 -->
-    <div class="card flex h-full flex-col p-4 md:p-6">
+    <div class="card flex h-full flex-col p-3 sm:p-4 md:p-6">
      <h3
-        class="mb-3 flex items-center text-lg font-bold text-gray-900 dark:text-gray-100 md:mb-4 md:text-xl"
+        class="mb-2 flex items-center text-base font-bold text-gray-900 dark:text-gray-100 sm:mb-3 sm:text-lg md:mb-4 md:text-xl"
      >
        <i class="fas fa-shield-alt mr-2 text-sm text-red-500 md:mr-3 md:text-base" />
        {{ multiKeyMode ? '限制配置（聚合查询模式）' : '限制配置' }}
--- a/web/admin-spa/src/components/apistats/ModelUsageStats.vue
+++ b/web/admin-spa/src/components/apistats/ModelUsageStats.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="card p-4 md:p-6">
-    <div class="mb-4 md:mb-6">
+  <div class="card p-3 sm:p-4 md:p-6">
+    <div class="mb-2 sm:mb-3 md:mb-4">
      <h3
-        class="flex flex-col text-lg font-bold text-gray-900 dark:text-gray-100 sm:flex-row sm:items-center md:text-xl"
+        class="flex flex-col text-base font-bold text-gray-900 dark:text-gray-100 sm:flex-row sm:items-center sm:text-lg md:text-xl"
      >
        <span class="flex items-center">
          <i class="fas fa-robot mr-2 text-sm text-indigo-500 md:mr-3 md:text-base" />
          模型使用统计
        </span>
        <span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
-          >({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
+          >({{ periodLabel }})</span
        >
      </h3>
    </div>

    <!-- 模型统计加载状态 -->
-    <div v-if="modelStatsLoading" class="py-6 text-center md:py-8">
+    <div v-if="loading" class="py-6 text-center md:py-8">
      <i
        class="fas fa-spinner loading-spinner mb-2 text-xl text-gray-600 dark:text-gray-400 md:text-2xl"
      />
@@ -23,49 +23,41 @@
    </div>

    <!-- 模型统计数据 -->
-    <div v-else-if="modelStats.length > 0" class="space-y-3 md:space-y-4">
-      <div v-for="(model, index) in modelStats" :key="index" class="model-usage-item">
-        <div class="mb-2 flex items-start justify-between md:mb-3">
-          <div class="min-w-0 flex-1">
-            <h4 class="break-all text-base font-bold text-gray-900 dark:text-gray-100 md:text-lg">
+    <div v-else-if="stats.length > 0" class="space-y-2">
+      <div v-for="(model, index) in stats" :key="index" class="model-usage-item">
+        <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+          <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
+            <h4
+              class="cursor-pointer text-sm font-bold text-gray-900 hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
+              title="点击复制"
+              @click="copyModelName(model.model)"
+            >
              {{ model.model }}
+              <i class="fas fa-copy ml-1 text-xs text-gray-400" />
            </h4>
-            <p class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-              {{ model.requests }} 次请求
-            </p>
-          </div>
-          <div class="ml-3 flex-shrink-0 text-right">
-            <div class="text-base font-bold text-green-600 md:text-lg">
-              {{ model.formatted?.total || '$0.000000' }}
-            </div>
-            <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">总费用</div>
-          </div>
-        </div>
-
-        <div class="grid grid-cols-2 gap-2 text-xs md:grid-cols-4 md:gap-3 md:text-sm">
-          <div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
-            <div class="text-gray-600 dark:text-gray-400">输入 Token</div>
-            <div class="font-medium text-gray-900 dark:text-gray-100">
-              {{ formatNumber(model.inputTokens) }}
+            <div class="flex flex-wrap gap-x-2 text-xs text-gray-500 dark:text-gray-400">
+              <span>{{ model.requests }}次</span>
+              <span>输入:{{ formatNumber(model.inputTokens) }}</span>
+              <span>输出:{{ formatNumber(model.outputTokens) }}</span>
+              <span v-if="model.cacheCreateTokens"
+                >缓存创建:{{ formatNumber(model.cacheCreateTokens) }}</span
+              >
+              <span v-if="model.cacheReadTokens"
+                >缓存读取:{{ formatNumber(model.cacheReadTokens) }}</span
+              >
            </div>
          </div>
-          <div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
-            <div class="text-gray-600 dark:text-gray-400">输出 Token</div>
-            <div class="font-medium text-gray-900 dark:text-gray-100">
-              {{ formatNumber(model.outputTokens) }}
-            </div>
-          </div>
-          <div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
-            <div class="text-gray-600 dark:text-gray-400">缓存创建</div>
-            <div class="font-medium text-gray-900 dark:text-gray-100">
-              {{ formatNumber(model.cacheCreateTokens) }}
-            </div>
-          </div>
-          <div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
-            <div class="text-gray-600 dark:text-gray-400">缓存读取</div>
-            <div class="font-medium text-gray-900 dark:text-gray-100">
-              {{ formatNumber(model.cacheReadTokens) }}
-            </div>
+          <div class="flex-shrink-0 text-xs sm:text-sm">
+            <span class="text-gray-500">官方API</span>
+            <span class="ml-1 font-semibold text-green-600">
+              {{ model.formatted?.total || '$0.00' }}
+            </span>
+            <template v-if="serviceRates?.rates">
+              <span class="ml-2 text-gray-500">折合CC</span>
+              <span class="ml-1 font-semibold text-amber-600 dark:text-amber-400">
+                {{ calculateCcCost(model) }}
+              </span>
+            </template>
          </div>
        </div>
      </div>
@@ -74,19 +66,74 @@
    <!-- 无模型数据 -->
    <div v-else class="py-6 text-center text-gray-500 dark:text-gray-400 md:py-8">
      <i class="fas fa-chart-pie mb-3 text-2xl md:text-3xl" />
-      <p class="text-sm md:text-base">
-        暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据
-      </p>
+      <p class="text-sm md:text-base">暂无{{ periodLabel }}模型使用数据</p>
    </div>
  </div>
 </template>

 <script setup>
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useApiStatsStore } from '@/stores/apistats'
+import { copyText } from '@/utils/tools'
+
+const props = defineProps({
+  period: {
+    type: String,
+    default: 'daily',
+    validator: (value) => ['daily', 'monthly', 'alltime'].includes(value)
+  }
+})

 const apiStatsStore = useApiStatsStore()
-const { statsPeriod, modelStats, modelStatsLoading } = storeToRefs(apiStatsStore)
+const { dailyModelStats, monthlyModelStats, alltimeModelStats, modelStatsLoading, serviceRates } =
+  storeToRefs(apiStatsStore)
+
+// 根据 period 选择对应的数据
+const stats = computed(() => {
+  if (props.period === 'daily') return dailyModelStats.value
+  if (props.period === 'monthly') return monthlyModelStats.value
+  if (props.period === 'alltime') return alltimeModelStats.value
+  return []
+})
+
+const loading = computed(() => modelStatsLoading.value)
+
+const periodLabel = computed(() => {
+  if (props.period === 'daily') return '今日'
+  if (props.period === 'monthly') return '本月'
+  if (props.period === 'alltime') return '所有时间'
+  return ''
+})
+
+// 复制模型名称
+const copyModelName = (name) => copyText(name, '模型名称已复制')
+
+// 根据模型名称判断服务类型
+const getServiceFromModel = (model) => {
+  if (!model) return 'claude'
+  const m = model.toLowerCase()
+  if (m.includes('claude') || m.includes('sonnet') || m.includes('opus') || m.includes('haiku'))
+    return 'claude'
+  if (m.includes('gpt') || m.includes('o1') || m.includes('o3') || m.includes('o4')) return 'codex'
+  if (m.includes('gemini')) return 'gemini'
+  if (m.includes('droid') || m.includes('factory')) return 'droid'
+  if (m.includes('bedrock') || m.includes('amazon')) return 'bedrock'
+  if (m.includes('azure')) return 'azure'
+  return 'claude'
+}
+
+// 计算 CC 扣费
+const calculateCcCost = (model) => {
+  const cost = model.costs?.total || 0
+  if (!cost || !serviceRates.value?.rates) return '$0.00'
+  const service = getServiceFromModel(model.model)
+  const rate = serviceRates.value.rates[service] || 1.0
+  const ccCost = cost * rate
+  if (ccCost >= 1) return '$' + ccCost.toFixed(2)
+  if (ccCost >= 0.01) return '$' + ccCost.toFixed(4)
+  return '$' + ccCost.toFixed(6)
+}

 // 格式化数字
 const formatNumber = (num) => {
--- a/web/admin-spa/src/components/apistats/ServiceCostCards.vue
+++ b/web/admin-spa/src/components/apistats/ServiceCostCards.vue
@@ -0,0 +1,256 @@
+<template>
+  <div v-if="serviceRates && modelStats.length > 0" class="card p-3 sm:p-4 md:p-6">
+    <h3
+      class="mb-2 flex items-center justify-between text-base font-bold text-gray-900 dark:text-gray-100 sm:mb-3 sm:text-lg md:mb-4 md:text-xl"
+    >
+      <span class="flex items-center">
+        <i class="fas fa-coins mr-2 text-sm text-amber-500 md:mr-3 md:text-base" />
+        服务费用统计
+      </span>
+      <span class="text-xs font-normal text-gray-500 dark:text-gray-400">
+        CC 倍率基准: Claude = 1.0
+      </span>
+    </h3>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div
+        v-for="service in serviceStats"
+        :key="service.name"
+        class="rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50"
+      >
+        <!-- 服务名和倍率 -->
+        <div class="mb-2 flex items-center justify-between">
+          <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {{ service.label }}
+          </span>
+          <span
+            class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
+          >
+            {{ service.rate }}x
+          </span>
+        </div>
+
+        <!-- Token 详情 -->
+        <div class="mb-2 space-y-0.5 text-xs text-gray-600 dark:text-gray-400">
+          <div class="flex justify-between">
+            <span>输入</span>
+            <span class="text-gray-900 dark:text-gray-200">{{
+              formatNumber(service.inputTokens)
+            }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span>输出</span>
+            <span class="text-gray-900 dark:text-gray-200">{{
+              formatNumber(service.outputTokens)
+            }}</span>
+          </div>
+          <div v-if="service.cacheCreateTokens" class="flex justify-between">
+            <span>缓存创建</span>
+            <span class="text-gray-900 dark:text-gray-200">{{
+              formatNumber(service.cacheCreateTokens)
+            }}</span>
+          </div>
+          <div v-if="service.cacheReadTokens" class="flex justify-between">
+            <span>缓存读取</span>
+            <span class="text-gray-900 dark:text-gray-200">{{
+              formatNumber(service.cacheReadTokens)
+            }}</span>
+          </div>
+        </div>
+
+        <!-- 费用 -->
+        <div class="mb-2 space-y-0.5 border-t border-gray-200 pt-2 text-xs dark:border-gray-700">
+          <div class="flex justify-between">
+            <span class="text-gray-600 dark:text-gray-400">官方API</span>
+            <span class="font-semibold text-green-600 dark:text-green-400">
+              {{ service.officialCost }}
+            </span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-600 dark:text-gray-400">折合CC</span>
+            <span class="font-semibold text-amber-600 dark:text-amber-400">
+              {{ service.ccCost }}
+            </span>
+          </div>
+        </div>
+
+        <!-- 价格参考 -->
+        <div
+          v-if="service.pricing"
+          class="space-y-0.5 border-t border-gray-200 pt-2 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-500"
+        >
+          <div class="flex justify-between">
+            <span>输入</span>
+            <span>{{ service.pricing.input }}/M</span>
+          </div>
+          <div class="flex justify-between">
+            <span>输出</span>
+            <span>{{ service.pricing.output }}/M</span>
+          </div>
+          <div v-if="service.pricing.cacheCreate" class="flex justify-between">
+            <span>缓存创建</span>
+            <span>{{ service.pricing.cacheCreate }}/M</span>
+          </div>
+          <div v-if="service.pricing.cacheRead" class="flex justify-between">
+            <span>缓存读取</span>
+            <span>{{ service.pricing.cacheRead }}/M</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useApiStatsStore } from '@/stores/apistats'
+
+const apiStatsStore = useApiStatsStore()
+const { modelStats, serviceRates } = storeToRefs(apiStatsStore)
+
+// 服务标签映射
+const serviceLabels = {
+  claude: 'Claude',
+  codex: 'Codex',
+  gemini: 'Gemini',
+  droid: 'Droid',
+  bedrock: 'Bedrock',
+  azure: 'Azure',
+  ccr: 'CCR'
+}
+
+// 根据模型名称判断服务类型
+const getServiceFromModel = (model) => {
+  if (!model) return 'claude'
+  const m = model.toLowerCase()
+  if (m.includes('claude') || m.includes('sonnet') || m.includes('opus') || m.includes('haiku'))
+    return 'claude'
+  if (m.includes('gpt') || m.includes('o1') || m.includes('o3') || m.includes('o4')) return 'codex'
+  if (m.includes('gemini')) return 'gemini'
+  if (m.includes('droid') || m.includes('factory')) return 'droid'
+  if (m.includes('bedrock') || m.includes('amazon')) return 'bedrock'
+  if (m.includes('azure')) return 'azure'
+  return 'claude'
+}
+
+// 按服务聚合统计
+const serviceStats = computed(() => {
+  if (!serviceRates.value?.rates || !modelStats.value?.length) return []
+
+  const stats = {}
+
+  // 初始化所有服务
+  Object.keys(serviceRates.value.rates).forEach((service) => {
+    stats[service] = {
+      inputTokens: 0,
+      outputTokens: 0,
+      cacheCreateTokens: 0,
+      cacheReadTokens: 0,
+      cost: 0,
+      pricing: null
+    }
+  })
+
+  // 聚合模型数据
+  modelStats.value.forEach((model) => {
+    const service = getServiceFromModel(model.model)
+    if (stats[service]) {
+      stats[service].inputTokens += model.inputTokens || 0
+      stats[service].outputTokens += model.outputTokens || 0
+      stats[service].cacheCreateTokens += model.cacheCreateTokens || 0
+      stats[service].cacheReadTokens += model.cacheReadTokens || 0
+      stats[service].cost += model.costs?.total || 0
+      if (!stats[service].pricing && model.pricing) {
+        stats[service].pricing = model.pricing
+      }
+    }
+  })
+
+  // 转换为数组并计算 CC 费用
+  return Object.entries(stats)
+    .filter(
+      ([, data]) =>
+        data.inputTokens > 0 || data.outputTokens > 0 || data.cacheCreateTokens > 0 || data.cost > 0
+    )
+    .map(([service, data]) => {
+      const rate = serviceRates.value.rates[service] || 1.0
+      const ccCostValue = data.cost * rate
+      const p = data.pricing
+      return {
+        name: service,
+        label: serviceLabels[service] || service,
+        rate: rate,
+        inputTokens: data.inputTokens,
+        outputTokens: data.outputTokens,
+        cacheCreateTokens: data.cacheCreateTokens,
+        cacheReadTokens: data.cacheReadTokens,
+        officialCost: formatCost(data.cost),
+        ccCost: formatCost(ccCostValue),
+        pricing: p
+          ? {
+              input: formatCost(p.input * 1e6),
+              output: formatCost(p.output * 1e6),
+              cacheCreate: p.cacheCreate ? formatCost(p.cacheCreate * 1e6) : null,
+              cacheRead: p.cacheRead ? formatCost(p.cacheRead * 1e6) : null
+            }
+          : null
+      }
+    })
+    .sort((a, b) => b.inputTokens + b.outputTokens - (a.inputTokens + a.outputTokens))
+})
+
+// 格式化费用
+const formatCost = (cost) => {
+  if (!cost || cost === 0) return '$0.00'
+  if (cost >= 1) return '$' + cost.toFixed(2)
+  if (cost >= 0.01) return '$' + cost.toFixed(4)
+  return '$' + cost.toFixed(6)
+}
+
+// 格式化数字
+const formatNumber = (num) => {
+  if (!num) return '0'
+  if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B'
+  if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M'
+  if (num >= 1e3) return (num / 1e3).toFixed(1) + 'K'
+  return num.toLocaleString()
+}
+</script>
+
+<style scoped>
+.card {
+  background: var(--surface-color);
+  border-radius: 16px;
+  border: 1px solid var(--border-color);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.15),
+    0 10px 10px -5px rgba(0, 0, 0, 0.08);
+}
+
+:global(.dark) .card:hover {
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.5),
+    0 10px 10px -5px rgba(0, 0, 0, 0.35);
+}
+</style>
--- a/web/admin-spa/src/components/apistats/StatsOverview.vue
+++ b/web/admin-spa/src/components/apistats/StatsOverview.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="space-y-6 md:space-y-8">
+  <div class="space-y-4 sm:space-y-6 md:space-y-8">
    <div
-      class="grid grid-cols-1 items-stretch gap-4 md:gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]"
+      class="grid grid-cols-1 items-stretch gap-3 sm:gap-4 md:gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]"
    >
      <!-- 基础信息 / 批量概要 -->
      <div class="card-section">
@@ -60,9 +60,16 @@
        </div>

        <div v-else class="info-grid">
-          <div class="info-item">
+          <div
+            class="info-item cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50"
+            title="点击复制"
+            @click="copyText(statsData.name)"
+          >
            <p class="info-label">名称</p>
-            <p class="info-value break-all">{{ statsData.name }}</p>
+            <p class="info-value flex items-center gap-1 break-all">
+              {{ statsData.name }}
+              <i class="fas fa-copy text-xs text-gray-400" />
+            </p>
          </div>
          <div class="info-item">
            <p class="info-label">状态</p>
@@ -282,6 +289,7 @@ import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import dayjs from 'dayjs'
 import { useApiStatsStore } from '@/stores/apistats'
+import { copyText } from '@/utils/tools'

 const apiStatsStore = useApiStatsStore()
 const {
--- a/web/admin-spa/src/components/apistats/TokenDistribution.vue
+++ b/web/admin-spa/src/components/apistats/TokenDistribution.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="card p-4 md:p-6">
+  <div class="card p-3 sm:p-4 md:p-6">
    <h3
-      class="mb-3 flex flex-col text-lg font-bold text-gray-900 dark:text-gray-100 sm:flex-row sm:items-center md:mb-4 md:text-xl"
+      class="mb-2 flex flex-col text-base font-bold text-gray-900 dark:text-gray-100 sm:mb-3 sm:flex-row sm:items-center sm:text-lg md:mb-4 md:text-xl"
    >
      <span class="flex items-center">
        <i class="fas fa-coins mr-2 text-sm text-yellow-500 md:mr-3 md:text-base" />
--- a/web/admin-spa/src/components/common/ConfirmDialog.vue
+++ b/web/admin-spa/src/components/common/ConfirmDialog.vue
@@ -9,9 +9,25 @@
        <div class="modal-content mx-auto w-full max-w-md p-6">
          <div class="mb-6 flex items-start gap-4">
            <div
-              class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-amber-600"
+              :class="[
+                'flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl',
+                dialogType === 'danger'
+                  ? 'bg-gradient-to-br from-red-500 to-red-600'
+                  : dialogType === 'warning'
+                    ? 'bg-gradient-to-br from-amber-500 to-amber-600'
+                    : 'bg-primary'
+              ]"
            >
-              <i class="fas fa-exclamation-triangle text-lg text-white" />
+              <i
+                :class="[
+                  'text-lg text-white',
+                  dialogType === 'danger'
+                    ? 'fas fa-trash-alt'
+                    : dialogType === 'warning'
+                      ? 'fas fa-exclamation-triangle'
+                      : 'fas fa-question-circle'
+                ]"
+              />
            </div>
            <div class="flex-1">
              <h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
@@ -32,8 +48,14 @@
              {{ cancelText }}
            </button>
            <button
-              class="btn btn-warning px-6 py-3"
-              :class="{ 'cursor-not-allowed opacity-50': isProcessing }"
+              :class="[
+                'btn px-6 py-3',
+                dialogType === 'danger'
+                  ? 'btn-danger'
+                  : dialogType === 'warning'
+                    ? 'btn-warning'
+                    : 'btn-primary'
+              ]"
              :disabled="isProcessing"
              @click="handleConfirm"
            >
@@ -57,6 +79,7 @@ const title = ref('')
 const message = ref('')
 const confirmText = ref('确认')
 const cancelText = ref('取消')
+const dialogType = ref('primary') // primary | warning | danger
 let resolvePromise = null

 // 显示确认对话框
@@ -64,13 +87,15 @@ const showConfirm = (
  titleText,
  messageText,
  confirmTextParam = '确认',
-  cancelTextParam = '取消'
+  cancelTextParam = '取消',
+  type = 'primary'
 ) => {
  return new Promise((resolve) => {
    title.value = titleText
    message.value = messageText
    confirmText.value = confirmTextParam
    cancelText.value = cancelTextParam
+    dialogType.value = type
    isVisible.value = true
    isProcessing.value = false
    resolvePromise = resolve
@@ -155,8 +180,8 @@ defineExpose({
 }

 :global(.dark) .modal-content {
-  background: #1f2937;
-  border: 1px solid #374151;
+  background: var(--bg-gradient-start);
+  border: 1px solid var(--border-color);
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.8);
 }

@@ -172,6 +197,11 @@ defineExpose({
  @apply bg-amber-600 text-white hover:bg-amber-700 focus:ring-amber-500;
 }

+.btn-primary {
+  background-color: var(--primary-color);
+  @apply text-white hover:opacity-90 focus:ring-indigo-500;
+}
+
 .loading-spinner {
  @apply h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-white;
 }
@@ -208,7 +238,7 @@ defineExpose({
 }

 :global(.dark) .modal-content::-webkit-scrollbar-track {
-  background: #374151;
+  background: var(--bg-gradient-mid);
 }

 .modal-content::-webkit-scrollbar-thumb {
@@ -217,7 +247,7 @@ defineExpose({
 }

 :global(.dark) .modal-content::-webkit-scrollbar-thumb {
-  background: #4b5563;
+  background: var(--bg-gradient-end);
 }

 .modal-content::-webkit-scrollbar-thumb:hover {
--- a/web/admin-spa/src/components/common/ConfirmModal.vue
+++ b/web/admin-spa/src/components/common/ConfirmModal.vue
@@ -6,9 +6,25 @@
      >
        <div class="mb-6 flex items-start gap-4">
          <div
-            class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-yellow-400 to-yellow-500"
+            :class="[
+              'flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full',
+              type === 'danger'
+                ? 'bg-gradient-to-br from-red-400 to-red-500'
+                : type === 'warning'
+                  ? 'bg-gradient-to-br from-yellow-400 to-yellow-500'
+                  : 'bg-primary'
+            ]"
          >
-            <i class="fas fa-exclamation text-xl text-white" />
+            <i
+              :class="[
+                'text-xl text-white',
+                type === 'danger'
+                  ? 'fas fa-trash-alt'
+                  : type === 'warning'
+                    ? 'fas fa-exclamation'
+                    : 'fas fa-question'
+              ]"
+            />
          </div>
          <div class="flex-1">
            <h3 class="mb-2 text-lg font-bold text-gray-900 dark:text-white">
@@ -28,7 +44,14 @@
            {{ cancelText }}
          </button>
          <button
-            class="flex-1 rounded-xl bg-gradient-to-r from-yellow-500 to-orange-500 px-4 py-2.5 font-medium text-white shadow-sm transition-colors hover:from-yellow-600 hover:to-orange-600"
+            :class="[
+              'flex-1 rounded-xl px-4 py-2.5 font-medium text-white shadow-sm transition-all',
+              type === 'danger'
+                ? 'bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700'
+                : type === 'warning'
+                  ? 'bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600'
+                  : 'bg-primary hover:opacity-90'
+            ]"
            @click="$emit('confirm')"
          >
            {{ confirmText }}
@@ -60,6 +83,11 @@ defineProps({
  cancelText: {
    type: String,
    default: '取消'
+  },
+  type: {
+    type: String,
+    default: 'primary', // primary | warning | danger
+    validator: (value) => ['primary', 'warning', 'danger'].includes(value)
  }
 })

--- a/web/admin-spa/src/components/common/ThemeToggle.vue
+++ b/web/admin-spa/src/components/common/ThemeToggle.vue
@@ -1,21 +1,87 @@
 <template>
  <div class="theme-toggle-container">
    <!-- 紧凑模式：仅显示图标按钮 -->
-    <button
-      v-if="mode === 'compact'"
-      class="theme-toggle-button"
-      :title="themeTooltip"
-      @click="handleCycleTheme"
-    >
-      <transition mode="out-in" name="fade">
-        <i v-if="themeStore.themeMode === 'light'" key="sun" class="fas fa-sun" />
-        <i v-else-if="themeStore.themeMode === 'dark'" key="moon" class="fas fa-moon" />
-        <i v-else key="auto" class="fas fa-circle-half-stroke" />
-      </transition>
-    </button>
+    <div v-if="mode === 'compact'" class="flex items-center gap-2">
+      <!-- 色系切换按钮 -->
+      <div class="relative">
+        <button
+          class="color-scheme-button"
+          :title="`色系: ${themeStore.currentColorScheme.name}`"
+          @click="toggleColorMenu"
+        >
+          <span class="color-dot" :style="{ background: themeStore.currentColorScheme.primary }" />
+        </button>
+        <!-- 色系下拉菜单 -->
+        <transition name="dropdown">
+          <div v-if="showColorMenu" class="color-menu">
+            <button
+              v-for="(scheme, key) in themeStore.ColorSchemes"
+              :key="key"
+              class="color-option"
+              :class="{ active: themeStore.colorScheme === key }"
+              :title="scheme.name"
+              @click="selectColorScheme(key)"
+            >
+              <span
+                class="color-preview"
+                :style="{
+                  background: `linear-gradient(135deg, ${scheme.primary} 0%, ${scheme.secondary} 100%)`
+                }"
+              />
+              <span class="color-name">{{ scheme.name }}</span>
+            </button>
+          </div>
+        </transition>
+      </div>
+      <!-- 主题切换按钮 -->
+      <button class="theme-toggle-button" :title="themeTooltip" @click="handleCycleTheme">
+        <transition mode="out-in" name="fade">
+          <i v-if="themeStore.themeMode === 'light'" key="sun" class="fas fa-sun" />
+          <i v-else-if="themeStore.themeMode === 'dark'" key="moon" class="fas fa-moon" />
+          <i v-else key="auto" class="fas fa-circle-half-stroke" />
+        </transition>
+      </button>
+    </div>

    <!-- 下拉菜单模式 - 改为创意切换开关 -->
    <div v-else-if="mode === 'dropdown'" class="theme-switch-wrapper">
+      <!-- 色系切换按钮 -->
+      <div class="relative mr-3">
+        <button
+          class="color-scheme-button-lg"
+          :title="`色系: ${themeStore.currentColorScheme.name}`"
+          @click="toggleColorMenu"
+        >
+          <span
+            class="color-dot-lg"
+            :style="{
+              background: `linear-gradient(135deg, ${themeStore.currentColorScheme.primary} 0%, ${themeStore.currentColorScheme.secondary} 100%)`
+            }"
+          />
+          <i class="fas fa-palette ml-1 text-xs opacity-60" />
+        </button>
+        <!-- 色系下拉菜单 -->
+        <transition name="dropdown">
+          <div v-if="showColorMenu" class="color-menu">
+            <button
+              v-for="(scheme, key) in themeStore.ColorSchemes"
+              :key="key"
+              class="color-option"
+              :class="{ active: themeStore.colorScheme === key }"
+              :title="scheme.name"
+              @click="selectColorScheme(key)"
+            >
+              <span
+                class="color-preview"
+                :style="{
+                  background: `linear-gradient(135deg, ${scheme.primary} 0%, ${scheme.secondary} 100%)`
+                }"
+              />
+              <span class="color-name">{{ scheme.name }}</span>
+            </button>
+          </div>
+        </transition>
+      </div>
      <button
        class="theme-switch"
        :class="{
@@ -67,7 +133,7 @@
 </template>

 <script setup>
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useThemeStore } from '@/stores/theme'

 // Props
@@ -88,6 +154,9 @@ defineProps({
 // Store
 const themeStore = useThemeStore()

+// 色系菜单状态
+const showColorMenu = ref(false)
+
 // 主题选项配置
 const themeOptions = [
  {
@@ -124,6 +193,34 @@ const handleCycleTheme = () => {
 const selectTheme = (mode) => {
  themeStore.setThemeMode(mode)
 }
+
+const toggleColorMenu = () => {
+  showColorMenu.value = !showColorMenu.value
+}
+
+const selectColorScheme = (scheme) => {
+  themeStore.setColorScheme(scheme)
+  showColorMenu.value = false
+}
+
+// 点击外部关闭菜单
+const handleClickOutside = (e) => {
+  if (
+    !e.target.closest('.color-scheme-button') &&
+    !e.target.closest('.color-scheme-button-lg') &&
+    !e.target.closest('.color-menu')
+  ) {
+    showColorMenu.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
 </script>

 <style scoped>
@@ -205,10 +302,10 @@ const selectTheme = (mode) => {
  padding: 4px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow:
-    0 4px 15px rgba(102, 126, 234, 0.3),
+    0 4px 15px color-mix(in srgb, var(--primary-color) 30%, transparent),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
@@ -218,7 +315,7 @@ const selectTheme = (mode) => {
 .theme-switch:hover {
  transform: scale(1.05);
  box-shadow:
-    0 6px 20px rgba(102, 126, 234, 0.4),
+    0 6px 20px color-mix(in srgb, var(--primary-color) 40%, transparent),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }

@@ -241,16 +338,15 @@ const selectTheme = (mode) => {
    inset 0 1px 2px rgba(255, 255, 255, 0.05);
 }

-/* 自动模式样式 - 静态蓝紫渐变设计（优化版） */
+/* 自动模式样式 - 使用主题色混合 */
 .theme-switch.is-auto {
  background: linear-gradient(
    135deg,
-    #c4b5fd 0%,
-    /* 更柔和的起始：淡紫 */ #a78bfa 15%,
-    /* 浅紫 */ #818cf8 40%,
-    /* 紫蓝 */ #6366f1 60%,
-    /* 靛蓝 */ #4f46e5 85%,
-    /* 深蓝紫 */ #4338ca 100% /* 更深的结束：深紫 */
+    color-mix(in srgb, var(--accent-color) 70%, white) 0%,
+    var(--accent-color) 25%,
+    color-mix(in srgb, var(--primary-color) 80%, var(--accent-color)) 50%,
+    var(--primary-color) 75%,
+    var(--secondary-color) 100%
  );
  border-color: rgba(255, 255, 255, 0.2);
  position: relative;
@@ -258,7 +354,7 @@ const selectTheme = (mode) => {
  background-size: 120% 120%;
  background-position: center;
  box-shadow:
-    0 4px 15px rgba(139, 92, 246, 0.25),
+    0 4px 15px color-mix(in srgb, var(--secondary-color) 25%, transparent),
    inset 0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 -1px 3px rgba(0, 0, 0, 0.1);
 }
@@ -426,7 +522,7 @@ const selectTheme = (mode) => {

 .handle-icon .fa-circle-half-stroke {
  color: rgba(255, 255, 255, 0.9);
-  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.5));
+  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-color) 50%, transparent));
  font-size: 15px;
 }

@@ -508,4 +604,78 @@ const selectTheme = (mode) => {
    @apply hidden;
  }
 }
+
+/* 色系切换按钮样式 */
+.color-scheme-button {
+  @apply flex items-center justify-center;
+  @apply h-9 w-9 rounded-full;
+  @apply bg-white/90 dark:bg-gray-800/90;
+  @apply hover:bg-white dark:hover:bg-gray-700;
+  @apply border border-gray-200/50 dark:border-gray-600/50;
+  @apply transition-all duration-200 ease-out;
+  @apply shadow-md hover:shadow-lg;
+  @apply hover:scale-110 active:scale-95;
+  cursor: pointer;
+}
+
+.color-scheme-button-lg {
+  @apply flex items-center justify-center;
+  @apply h-9 rounded-full px-3;
+  @apply bg-white/90 dark:bg-gray-800/90;
+  @apply hover:bg-white dark:hover:bg-gray-700;
+  @apply border border-gray-200/50 dark:border-gray-600/50;
+  @apply transition-all duration-200 ease-out;
+  @apply shadow-md hover:shadow-lg;
+  @apply text-gray-600 dark:text-gray-300;
+  cursor: pointer;
+}
+
+.color-dot {
+  @apply h-5 w-5 rounded-full;
+  @apply shadow-inner;
+  transition: transform 0.2s ease;
+}
+
+.color-dot-lg {
+  @apply h-5 w-5 rounded-full;
+  @apply shadow-inner;
+}
+
+.color-scheme-button:hover .color-dot {
+  transform: scale(1.1);
+}
+
+/* 色系下拉菜单 */
+.color-menu {
+  @apply absolute left-0 top-full mt-2;
+  @apply bg-white dark:bg-gray-800;
+  @apply rounded-xl shadow-xl;
+  @apply border border-gray-200 dark:border-gray-700;
+  @apply min-w-[140px] p-2;
+  @apply z-50;
+}
+
+.color-option {
+  @apply flex w-full items-center gap-2;
+  @apply rounded-lg px-3 py-2;
+  @apply text-sm text-gray-700 dark:text-gray-300;
+  @apply hover:bg-gray-100 dark:hover:bg-gray-700;
+  @apply transition-all duration-150;
+  cursor: pointer;
+}
+
+.color-option.active {
+  @apply bg-gray-100 dark:bg-gray-700;
+  @apply font-medium;
+}
+
+.color-preview {
+  @apply h-5 w-5 rounded-full;
+  @apply shadow-sm;
+  @apply flex-shrink-0;
+}
+
+.color-name {
+  @apply flex-1 text-left;
+}
 </style>
--- a/web/admin-spa/src/components/common/ToastNotification.vue
+++ b/web/admin-spa/src/components/common/ToastNotification.vue
@@ -163,8 +163,8 @@ defineExpose({
 }

 :global(.dark) .toast {
-  background: #1f2937;
-  border: 1px solid #374151;
+  background: var(--bg-gradient-start);
+  border: 1px solid var(--border-color);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }

@@ -234,8 +234,8 @@ defineExpose({
 }

 :global(.dark) .toast-close:hover {
-  background: #374151;
-  color: #9ca3af;
+  background: var(--bg-gradient-mid);
+  color: var(--text-secondary);
 }

 .toast-progress {
--- a/web/admin-spa/src/components/dashboard/ModelDistribution.vue
+++ b/web/admin-spa/src/components/dashboard/ModelDistribution.vue
@@ -52,7 +52,7 @@ import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { Chart } from 'chart.js/auto'
 import { useDashboardStore } from '@/stores/dashboard'
 import { useChartConfig } from '@/composables/useChartConfig'
-import { formatNumber } from '@/utils/format'
+import { formatNumber } from '@/utils/tools'

 const dashboardStore = useDashboardStore()
 const chartCanvas = ref(null)
--- a/web/admin-spa/src/components/dashboard/UsageTrend.vue
+++ b/web/admin-spa/src/components/dashboard/UsageTrend.vue
@@ -39,8 +39,10 @@ import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { Chart } from 'chart.js/auto'
 import { useDashboardStore } from '@/stores/dashboard'
 import { useChartConfig } from '@/composables/useChartConfig'
+import { useThemeStore } from '@/stores/theme'

 const dashboardStore = useDashboardStore()
+const themeStore = useThemeStore()
 const chartCanvas = ref(null)
 let chart = null

@@ -83,16 +85,16 @@ const createChart = () => {
        {
          label: '请求次数',
          data: dashboardStore.trendData.map((item) => item.requests),
-          borderColor: '#667eea',
-          backgroundColor: getGradient(ctx, '#667eea', 0.1),
+          borderColor: themeStore.currentColorScheme.primary,
+          backgroundColor: getGradient(ctx, themeStore.currentColorScheme.primary, 0.1),
          yAxisID: 'y',
          tension: 0.4
        },
        {
          label: 'Token使用量',
          data: dashboardStore.trendData.map((item) => item.tokens),
-          borderColor: '#f093fb',
-          backgroundColor: getGradient(ctx, '#f093fb', 0.1),
+          borderColor: themeStore.currentColorScheme.accent,
+          backgroundColor: getGradient(ctx, themeStore.currentColorScheme.accent, 0.1),
          yAxisID: 'y1',
          tension: 0.4
        }
@@ -169,6 +171,14 @@ watch(
  { deep: true }
 )

+// 监听色系变化，重新创建图表
+watch(
+  () => themeStore.colorScheme,
+  () => {
+    createChart()
+  }
+)
+
 onMounted(() => {
  createChart()
 })
--- a/web/admin-spa/src/components/layout/AppHeader.vue
+++ b/web/admin-spa/src/components/layout/AppHeader.vue
@@ -51,7 +51,7 @@
        <!-- 用户菜单 -->
        <div class="user-menu-container relative">
          <button
-            class="user-menu-button flex items-center gap-2 rounded-2xl bg-gradient-to-r from-blue-500 to-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95 sm:px-4 sm:py-2.5"
+            class="user-menu-button flex items-center gap-2 rounded-2xl px-3 py-2 text-sm font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95 sm:px-4 sm:py-2.5"
            @click="userMenuOpen = !userMenuOpen"
          >
            <i class="fas fa-user-circle text-sm sm:text-base" />
@@ -263,16 +263,29 @@
      </form>
    </div>
  </div>
+
+  <!-- ConfirmModal -->
+  <ConfirmModal
+    :cancel-text="confirmModalConfig.cancelText"
+    :confirm-text="confirmModalConfig.confirmText"
+    :message="confirmModalConfig.message"
+    :show="showConfirmModal"
+    :title="confirmModalConfig.title"
+    :type="confirmModalConfig.type"
+    @cancel="handleCancelModal"
+    @confirm="handleConfirmModal"
+  />
 </template>

 <script setup>
 import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import { showToast } from '@/utils/toast'
-import { apiClient } from '@/config/api'
+import { showToast } from '@/utils/tools'
+import * as httpApi from '@/utils/http_apis'
 import LogoTitle from '@/components/common/LogoTitle.vue'
 import ThemeToggle from '@/components/common/ThemeToggle.vue'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'

 const router = useRouter()
 const authStore = useAuthStore()
@@ -308,6 +321,39 @@ const changePasswordForm = reactive({
  newUsername: ''
 })

+// ConfirmModal 状态
+const showConfirmModal = ref(false)
+const confirmModalConfig = ref({
+  title: '',
+  message: '',
+  type: 'primary',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+const confirmResolve = ref(null)
+
+const showConfirm = (
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'primary'
+) => {
+  return new Promise((resolve) => {
+    confirmModalConfig.value = { title, message, confirmText, cancelText, type }
+    confirmResolve.value = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirmModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(true)
+}
+const handleCancelModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(false)
+}
+
 // 检查更新（同时获取版本信息）
 const checkForUpdates = async () => {
  if (versionInfo.value.checkingUpdate) {
@@ -317,7 +363,7 @@ const checkForUpdates = async () => {
  versionInfo.value.checkingUpdate = true

  try {
-    const result = await apiClient.get('/admin/check-updates')
+    const result = await httpApi.get('/admin/check-updates')

    if (result.success) {
      const data = result.data
@@ -397,7 +443,7 @@ const changePassword = async () => {
  changePasswordLoading.value = true

  try {
-    const data = await apiClient.post('/web/auth/change-password', {
+    const data = await httpApi.post('/web/auth/change-password', {
      currentPassword: changePasswordForm.currentPassword,
      newPassword: changePasswordForm.newPassword,
      newUsername: changePasswordForm.newUsername || undefined
@@ -426,8 +472,15 @@ const changePassword = async () => {
 }

 // 退出登录
-const logout = () => {
-  if (confirm('确定要退出登录吗？')) {
+const logout = async () => {
+  const confirmed = await showConfirm(
+    '退出登录',
+    '确定要退出登录吗？',
+    '确定退出',
+    '取消',
+    'warning'
+  )
+  if (confirmed) {
    authStore.logout()
    router.push('/login')
    showToast('已安全退出', 'success')
@@ -465,6 +518,12 @@ onUnmounted(() => {
  position: relative;
  overflow: hidden;
  min-height: 38px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
+}
+
+.user-menu-button:hover {
+  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
 }

 /* 添加光泽效果 */
--- a/web/admin-spa/src/components/layout/MainLayout.vue
+++ b/web/admin-spa/src/components/layout/MainLayout.vue
@@ -39,6 +39,7 @@ const tabRouteMap = computed(() => {
    dashboard: '/dashboard',
    apiKeys: '/api-keys',
    accounts: '/accounts',
+    quotaCards: '/quota-cards',
    tutorial: '/tutorial',
    settings: '/settings'
  }
@@ -67,6 +68,7 @@ const initActiveTab = () => {
      Dashboard: 'dashboard',
      ApiKeys: 'apiKeys',
      Accounts: 'accounts',
+      QuotaCards: 'quotaCards',
      Tutorial: 'tutorial',
      Settings: 'settings'
    }
@@ -96,6 +98,7 @@ watch(
        Dashboard: 'dashboard',
        ApiKeys: 'apiKeys',
        Accounts: 'accounts',
+        QuotaCards: 'quotaCards',
        Tutorial: 'tutorial',
        Settings: 'settings'
      }
--- a/web/admin-spa/src/components/layout/TabBar.vue
+++ b/web/admin-spa/src/components/layout/TabBar.vue
@@ -56,7 +56,8 @@ const tabs = computed(() => {
  const baseTabs = [
    { key: 'dashboard', name: '仪表板', shortName: '仪表板', icon: 'fas fa-tachometer-alt' },
    { key: 'apiKeys', name: 'API Keys', shortName: 'API', icon: 'fas fa-key' },
-    { key: 'accounts', name: '账户管理', shortName: '账户', icon: 'fas fa-user-circle' }
+    { key: 'accounts', name: '账户管理', shortName: '账户', icon: 'fas fa-user-circle' },
+    { key: 'quotaCards', name: '额度卡', shortName: '额度卡', icon: 'fas fa-ticket-alt' }
  ]

  // 只有在 LDAP 启用时才显示用户管理
--- a/web/admin-spa/src/components/user/CreateApiKeyModal.vue
+++ b/web/admin-spa/src/components/user/CreateApiKeyModal.vue
@@ -173,7 +173,7 @@
 <script setup>
 import { ref, reactive, watch } from 'vue'
 import { useUserStore } from '@/stores/user'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'

 const props = defineProps({
  show: {
--- a/web/admin-spa/src/components/user/UserApiKeysManager.vue
+++ b/web/admin-spa/src/components/user/UserApiKeysManager.vue
@@ -249,7 +249,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'
 import CreateApiKeyModal from './CreateApiKeyModal.vue'
 import ViewApiKeyModal from './ViewApiKeyModal.vue'
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
--- a/web/admin-spa/src/components/user/UserUsageStats.vue
+++ b/web/admin-spa/src/components/user/UserUsageStats.vue
@@ -351,7 +351,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'

 const userStore = useUserStore()

--- a/web/admin-spa/src/components/user/ViewApiKeyModal.vue
+++ b/web/admin-spa/src/components/user/ViewApiKeyModal.vue
@@ -197,7 +197,7 @@

 <script setup>
 import { ref } from 'vue'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'

 defineProps({
  show: {
--- a/web/admin-spa/src/composables/useChartConfig.js
+++ b/web/admin-spa/src/composables/useChartConfig.js
@@ -1,6 +1,9 @@
 import { Chart } from 'chart.js/auto'
+import { useThemeStore } from '@/stores/theme'

 export function useChartConfig() {
+  const themeStore = useThemeStore()
+
  // 设置Chart.js默认配置
  Chart.defaults.font.family =
    "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
@@ -24,6 +27,12 @@ export function useChartConfig() {
    return gradient
  }

+  // 获取当前主题的颜色方案
+  const getThemeColors = () => {
+    const scheme = themeStore.currentColorScheme
+    return [scheme.primary, scheme.secondary, scheme.accent, '#4facfe', '#00f2fe']
+  }
+
  // 通用图表选项
  const commonOptions = {
    responsive: true,
@@ -91,9 +100,12 @@ export function useChartConfig() {
    }
  }

-  // 颜色方案
+  // 颜色方案 - 动态获取主题色
  const colorSchemes = {
-    primary: ['#667eea', '#764ba2', '#f093fb', '#4facfe', '#00f2fe'],
+    get primary() {
+      const scheme = themeStore.currentColorScheme
+      return [scheme.primary, scheme.secondary, scheme.accent, '#4facfe', '#00f2fe']
+    },
    success: ['#10b981', '#059669', '#34d399', '#6ee7b7', '#a7f3d0'],
    warning: ['#f59e0b', '#d97706', '#fbbf24', '#fcd34d', '#fde68a'],
    danger: ['#ef4444', '#dc2626', '#f87171', '#fca5a5', '#fecaca']
@@ -101,6 +113,7 @@ export function useChartConfig() {

  return {
    getGradient,
+    getThemeColors,
    commonOptions,
    colorSchemes
  }
--- a/web/admin-spa/src/config/api.js
+++ b/web/admin-spa/src/config/api.js
@@ -1,210 +0,0 @@
-// API 配置
-import { APP_CONFIG, getLoginUrl } from './app'
-
-// 开发环境使用 /webapi 前缀，生产环境不使用前缀
-export const API_PREFIX = APP_CONFIG.apiPrefix
-
-// 创建完整的 API URL
-export function createApiUrl(path) {
-  // 确保路径以 / 开头
-  if (!path.startsWith('/')) {
-    path = '/' + path
-  }
-  return API_PREFIX + path
-}
-
-// API 请求的基础配置
-export function getRequestConfig(token) {
-  const config = {
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  }
-
-  if (token) {
-    config.headers['Authorization'] = `Bearer ${token}`
-  }
-
-  return config
-}
-
-// 统一的 API 请求类
-class ApiClient {
-  constructor() {
-    this.baseURL = API_PREFIX
-  }
-
-  // 获取认证 token
-  getAuthToken() {
-    const authToken = localStorage.getItem('authToken')
-    return authToken || null
-  }
-
-  // 构建请求配置
-  buildConfig(options = {}) {
-    const config = {
-      headers: {
-        'Content-Type': 'application/json',
-        ...options.headers
-      },
-      ...options
-    }
-
-    // 添加认证 token
-    const token = this.getAuthToken()
-    if (token) {
-      config.headers['Authorization'] = `Bearer ${token}`
-    }
-
-    return config
-  }
-
-  // 处理响应
-  async handleResponse(response) {
-    // 401 未授权，需要重新登录
-    if (response.status === 401) {
-      // 如果当前已经在登录页面，不要再次跳转
-      const currentPath = window.location.pathname + window.location.hash
-      const isLoginPage = currentPath.includes('/login') || currentPath.endsWith('/')
-
-      if (!isLoginPage) {
-        localStorage.removeItem('authToken')
-        // 使用统一的登录URL
-        window.location.href = getLoginUrl()
-      }
-      throw new Error('Unauthorized')
-    }
-
-    // 尝试解析 JSON
-    const contentType = response.headers.get('content-type')
-    if (contentType && contentType.includes('application/json')) {
-      const data = await response.json()
-
-      // 如果响应不成功，抛出错误
-      if (!response.ok) {
-        // 创建一个包含完整错误信息的错误对象
-        const error = new Error(data.message || `HTTP ${response.status}`)
-        // 保留完整的响应数据，以便错误处理时可以访问详细信息
-        error.response = {
-          status: response.status,
-          data: data
-        }
-        // 为了向后兼容，也保留原始的 message
-        error.message = data.message || error.message
-        throw error
-      }
-
-      return data
-    }
-
-    // 非 JSON 响应
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-    }
-
-    return response
-  }
-
-  // GET 请求
-  async get(url, options = {}) {
-    // 处理查询参数
-    let fullUrl = createApiUrl(url)
-    if (options.params) {
-      const params = new URLSearchParams(options.params)
-      fullUrl += '?' + params.toString()
-    }
-
-    // 移除 params 避免传递给 fetch
-    // eslint-disable-next-line no-unused-vars
-    const { params, ...configOptions } = options
-    const config = this.buildConfig({
-      ...configOptions,
-      method: 'GET'
-    })
-
-    try {
-      const response = await fetch(fullUrl, config)
-      return await this.handleResponse(response)
-    } catch (error) {
-      console.error('API GET Error:', error)
-      throw error
-    }
-  }
-
-  // POST 请求
-  async post(url, data = null, options = {}) {
-    const fullUrl = createApiUrl(url)
-    const config = this.buildConfig({
-      ...options,
-      method: 'POST',
-      body: data ? JSON.stringify(data) : undefined
-    })
-
-    try {
-      const response = await fetch(fullUrl, config)
-      return await this.handleResponse(response)
-    } catch (error) {
-      console.error('API POST Error:', error)
-      throw error
-    }
-  }
-
-  // PUT 请求
-  async put(url, data = null, options = {}) {
-    const fullUrl = createApiUrl(url)
-    const config = this.buildConfig({
-      ...options,
-      method: 'PUT',
-      body: data ? JSON.stringify(data) : undefined
-    })
-
-    try {
-      const response = await fetch(fullUrl, config)
-      return await this.handleResponse(response)
-    } catch (error) {
-      console.error('API PUT Error:', error)
-      throw error
-    }
-  }
-
-  // PATCH 请求
-  async patch(url, data = null, options = {}) {
-    const fullUrl = createApiUrl(url)
-    const config = this.buildConfig({
-      ...options,
-      method: 'PATCH',
-      body: data ? JSON.stringify(data) : undefined
-    })
-
-    try {
-      const response = await fetch(fullUrl, config)
-      return await this.handleResponse(response)
-    } catch (error) {
-      console.error('API PATCH Error:', error)
-      throw error
-    }
-  }
-
-  // DELETE 请求
-  async delete(url, options = {}) {
-    const fullUrl = createApiUrl(url)
-    const { data, ...restOptions } = options
-
-    const config = this.buildConfig({
-      ...restOptions,
-      method: 'DELETE',
-      body: data ? JSON.stringify(data) : undefined
-    })
-
-    try {
-      const response = await fetch(fullUrl, config)
-      return await this.handleResponse(response)
-    } catch (error) {
-      console.error('API DELETE Error:', error)
-      throw error
-    }
-  }
-}
-
-// 导出单例实例
-export const apiClient = new ApiClient()
--- a/web/admin-spa/src/config/apiStats.js
+++ b/web/admin-spa/src/config/apiStats.js
@@ -1,97 +0,0 @@
-// API Stats 专用 API 客户端
-// 与管理员 API 隔离，不需要认证
-
-class ApiStatsClient {
-  constructor() {
-    this.baseURL = window.location.origin
-    // 开发环境需要为 admin 路径添加 /webapi 前缀
-    this.isDev = import.meta.env.DEV
-  }
-
-  async request(url, options = {}) {
-    try {
-      // 在开发环境中，为 /admin 路径添加 /webapi 前缀
-      if (this.isDev && url.startsWith('/admin')) {
-        url = '/webapi' + url
-      }
-
-      const response = await fetch(`${this.baseURL}${url}`, {
-        headers: {
-          'Content-Type': 'application/json',
-          ...options.headers
-        },
-        ...options
-      })
-
-      const data = await response.json()
-
-      if (!response.ok) {
-        throw new Error(data.message || `请求失败: ${response.status}`)
-      }
-
-      return data
-    } catch (error) {
-      console.error('API Stats request error:', error)
-      throw error
-    }
-  }
-
-  // 获取 API Key ID
-  async getKeyId(apiKey) {
-    return this.request('/apiStats/api/get-key-id', {
-      method: 'POST',
-      body: JSON.stringify({ apiKey })
-    })
-  }
-
-  // 获取用户统计数据
-  async getUserStats(apiId) {
-    return this.request('/apiStats/api/user-stats', {
-      method: 'POST',
-      body: JSON.stringify({ apiId })
-    })
-  }
-
-  // 获取模型使用统计
-  async getUserModelStats(apiId, period = 'daily') {
-    return this.request('/apiStats/api/user-model-stats', {
-      method: 'POST',
-      body: JSON.stringify({ apiId, period })
-    })
-  }
-
-  // 获取 OEM 设置（用于网站名称和图标）
-  async getOemSettings() {
-    try {
-      return await this.request('/admin/oem-settings')
-    } catch (error) {
-      console.error('Failed to load OEM settings:', error)
-      return {
-        success: true,
-        data: {
-          siteName: 'Claude Relay Service',
-          siteIcon: '',
-          siteIconData: ''
-        }
-      }
-    }
-  }
-
-  // 批量查询统计数据
-  async getBatchStats(apiIds) {
-    return this.request('/apiStats/api/batch-stats', {
-      method: 'POST',
-      body: JSON.stringify({ apiIds })
-    })
-  }
-
-  // 批量查询模型统计
-  async getBatchModelStats(apiIds, period = 'daily') {
-    return this.request('/apiStats/api/batch-model-stats', {
-      method: 'POST',
-      body: JSON.stringify({ apiIds, period })
-    })
-  }
-}
-
-export const apiStatsClient = new ApiStatsClient()
--- a/web/admin-spa/src/config/app.js
+++ b/web/admin-spa/src/config/app.js
@@ -1,28 +1,13 @@
-// 应用配置
 export const APP_CONFIG = {
-  // 应用基础路径
  basePath: import.meta.env.VITE_APP_BASE_URL || (import.meta.env.DEV ? '/admin/' : '/web/admin/'),
-
-  // 应用标题
-  title: import.meta.env.VITE_APP_TITLE || 'Claude Relay Service - 管理后台',
-
-  // 是否为开发环境
-  isDev: import.meta.env.DEV,
-
-  // API 前缀
  apiPrefix: import.meta.env.DEV ? '/webapi' : ''
 }

-// 获取完整的应用URL
 export function getAppUrl(path = '') {
-  // 确保路径以 / 开头
-  if (path && !path.startsWith('/')) {
-    path = '/' + path
-  }
+  if (path && !path.startsWith('/')) path = '/' + path
  return APP_CONFIG.basePath + (path.startsWith('#') ? path : '#' + path)
 }

-// 获取登录页面URL
 export function getLoginUrl() {
  return getAppUrl('/login')
 }
--- a/web/admin-spa/src/router/index.js
+++ b/web/admin-spa/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useUserStore } from '@/stores/user'
 import { APP_CONFIG } from '@/config/app'
+import { showToast } from '@/utils/tools'

 // 路由懒加载
 const LoginView = () => import('@/views/LoginView.vue')
@@ -17,6 +18,7 @@ const AccountUsageRecordsView = () => import('@/views/AccountUsageRecordsView.vu
 const TutorialView = () => import('@/views/TutorialView.vue')
 const SettingsView = () => import('@/views/SettingsView.vue')
 const ApiStatsView = () => import('@/views/ApiStatsView.vue')
+const QuotaCardsView = () => import('@/views/QuotaCardsView.vue')

 const routes = [
  {
@@ -159,6 +161,18 @@ const routes = [
      }
    ]
  },
+  {
+    path: '/quota-cards',
+    component: MainLayout,
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        name: 'QuotaCards',
+        component: QuotaCardsView
+      }
+    ]
+  },
  // 捕获所有未匹配的路由
  {
    path: '/:pathMatch(.*)*',
@@ -203,8 +217,6 @@ router.beforeEach(async (to, from, next) => {
      } catch (error) {
        // If the error is about disabled account, redirect to login with error
        if (error.message && error.message.includes('disabled')) {
-          // Import showToast to display the error
-          const { showToast } = await import('@/utils/toast')
          showToast(error.message, 'error')
        }
        return next('/user-login')
--- a/web/admin-spa/src/stores/accounts.js
+++ b/web/admin-spa/src/stores/accounts.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { apiClient } from '@/config/api'
+import * as httpApi from '@/utils/http_apis'

 export const useAccountsStore = defineStore('accounts', () => {
  // 状态
@@ -24,7 +24,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.get('/admin/claude-accounts')
+      const response = await httpApi.getClaudeAccounts()
      if (response.success) {
        claudeAccounts.value = response.data || []
      } else {
@@ -43,7 +43,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.get('/admin/claude-console-accounts')
+      const response = await httpApi.getClaudeConsoleAccounts()
      if (response.success) {
        claudeConsoleAccounts.value = response.data || []
      } else {
@@ -62,7 +62,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.get('/admin/bedrock-accounts')
+      const response = await httpApi.getBedrockAccounts()
      if (response.success) {
        bedrockAccounts.value = response.data || []
      } else {
@@ -81,7 +81,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.get('/admin/gemini-accounts')
+      const response = await httpApi.getGeminiAccounts()
      if (response.success) {
        geminiAccounts.value = response.data || []
      } else {
@@ -100,7 +100,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.get('/admin/openai-accounts')
+      const response = await httpApi.getOpenAIAccounts()
      if (response.success) {
        openaiAccounts.value = response.data || []
      } else {
@@ -119,7 +119,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.get('/admin/azure-openai-accounts')
+      const response = await httpApi.getAzureOpenAIAccounts()
      if (response.success) {
        azureOpenaiAccounts.value = response.data || []
      } else {
@@ -138,7 +138,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.get('/admin/openai-responses-accounts')
+      const response = await httpApi.getOpenAIResponsesAccounts()
      if (response.success) {
        openaiResponsesAccounts.value = response.data || []
      } else {
@@ -157,7 +157,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.get('/admin/droid-accounts')
+      const response = await httpApi.getDroidAccounts()
      if (response.success) {
        droidAccounts.value = response.data || []
      } else {
@@ -199,7 +199,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post('/admin/claude-accounts', data)
+      const response = await httpApi.createClaudeAccount(data)
      if (response.success) {
        await fetchClaudeAccounts()
        return response.data
@@ -219,7 +219,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post('/admin/claude-console-accounts', data)
+      const response = await httpApi.createClaudeConsoleAccount(data)
      if (response.success) {
        await fetchClaudeConsoleAccounts()
        return response.data
@@ -239,7 +239,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post('/admin/bedrock-accounts', data)
+      const response = await httpApi.createBedrockAccount(data)
      if (response.success) {
        await fetchBedrockAccounts()
        return response.data
@@ -259,7 +259,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post('/admin/gemini-accounts', data)
+      const response = await httpApi.createGeminiAccount(data)
      if (response.success) {
        await fetchGeminiAccounts()
        return response.data
@@ -279,7 +279,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post('/admin/openai-accounts', data)
+      const response = await httpApi.createOpenAIAccount(data)
      if (response.success) {
        await fetchOpenAIAccounts()
        return response.data
@@ -299,7 +299,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post('/admin/droid-accounts', data)
+      const response = await httpApi.createDroidAccount(data)
      if (response.success) {
        await fetchDroidAccounts()
        return response.data
@@ -319,7 +319,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/droid-accounts/${id}`, data)
+      const response = await httpApi.updateDroidAccount(id, data)
      if (response.success) {
        await fetchDroidAccounts()
        return response.data
@@ -339,7 +339,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post('/admin/azure-openai-accounts', data)
+      const response = await httpApi.createAzureOpenAIAccount(data)
      if (response.success) {
        await fetchAzureOpenAIAccounts()
        return response.data
@@ -359,7 +359,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post('/admin/openai-responses-accounts', data)
+      const response = await httpApi.createOpenAIResponsesAccount(data)
      if (response.success) {
        await fetchOpenAIResponsesAccounts()
        return response.data
@@ -379,7 +379,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post('/admin/gemini-api-accounts', data)
+      const response = await httpApi.createGeminiApiAccount(data)
      if (response.success) {
        await fetchGeminiAccounts()
        return response.data
@@ -399,7 +399,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/claude-accounts/${id}`, data)
+      const response = await httpApi.updateClaudeAccount(id, data)
      if (response.success) {
        await fetchClaudeAccounts()
        return response
@@ -419,7 +419,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/claude-console-accounts/${id}`, data)
+      const response = await httpApi.updateClaudeConsoleAccount(id, data)
      if (response.success) {
        await fetchClaudeConsoleAccounts()
        return response
@@ -439,7 +439,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/bedrock-accounts/${id}`, data)
+      const response = await httpApi.updateBedrockAccount(id, data)
      if (response.success) {
        await fetchBedrockAccounts()
        return response
@@ -459,7 +459,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/gemini-accounts/${id}`, data)
+      const response = await httpApi.updateGeminiAccount(id, data)
      if (response.success) {
        await fetchGeminiAccounts()
        return response
@@ -479,7 +479,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/openai-accounts/${id}`, data)
+      const response = await httpApi.updateOpenAIAccount(id, data)
      if (response.success) {
        await fetchOpenAIAccounts()
        return response
@@ -499,7 +499,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/azure-openai-accounts/${id}`, data)
+      const response = await httpApi.updateAzureOpenAIAccount(id, data)
      if (response.success) {
        await fetchAzureOpenAIAccounts()
        return response
@@ -519,7 +519,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/openai-responses-accounts/${id}`, data)
+      const response = await httpApi.updateOpenAIResponsesAccount(id, data)
      if (response.success) {
        await fetchOpenAIResponsesAccounts()
        return response
@@ -539,7 +539,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/gemini-api-accounts/${id}`, data)
+      const response = await httpApi.updateGeminiApiAccount(id, data)
      if (response.success) {
        await fetchGeminiAccounts()
        return response
@@ -578,7 +578,7 @@ export const useAccountsStore = defineStore('accounts', () => {
        endpoint = `/admin/openai-accounts/${id}/toggle`
      }

-      const response = await apiClient.put(endpoint)
+      const response = await httpApi.toggleAccountStatus(endpoint)
      if (response.success) {
        if (platform === 'claude') {
          await fetchClaudeAccounts()
@@ -633,7 +633,7 @@ export const useAccountsStore = defineStore('accounts', () => {
        endpoint = `/admin/openai-accounts/${id}`
      }

-      const response = await apiClient.delete(endpoint)
+      const response = await httpApi.deleteAccountByEndpoint(endpoint)
      if (response.success) {
        if (platform === 'claude') {
          await fetchClaudeAccounts()
@@ -669,7 +669,7 @@ export const useAccountsStore = defineStore('accounts', () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post(`/admin/claude-accounts/${id}/refresh`)
+      const response = await httpApi.refreshClaudeAccount(id)
      if (response.success) {
        await fetchClaudeAccounts()
        return response
@@ -687,7 +687,7 @@ export const useAccountsStore = defineStore('accounts', () => {
  // 生成Claude OAuth URL
  const generateClaudeAuthUrl = async (proxyConfig) => {
    try {
-      const response = await apiClient.post('/admin/claude-accounts/generate-auth-url', proxyConfig)
+      const response = await httpApi.generateClaudeAuthUrl(proxyConfig)
      if (response.success) {
        return response.data // 返回整个对象，包含authUrl和sessionId
      } else {
@@ -702,7 +702,7 @@ export const useAccountsStore = defineStore('accounts', () => {
  // 交换Claude OAuth Code
  const exchangeClaudeCode = async (data) => {
    try {
-      const response = await apiClient.post('/admin/claude-accounts/exchange-code', data)
+      const response = await httpApi.exchangeClaudeCode(data)
      if (response.success) {
        return response.data
      } else {
@@ -717,10 +717,7 @@ export const useAccountsStore = defineStore('accounts', () => {
  // 生成Claude Setup Token URL
  const generateClaudeSetupTokenUrl = async (proxyConfig) => {
    try {
-      const response = await apiClient.post(
-        '/admin/claude-accounts/generate-setup-token-url',
-        proxyConfig
-      )
+      const response = await httpApi.generateClaudeSetupTokenUrl(proxyConfig)
      if (response.success) {
        return response.data // 返回整个对象，包含authUrl和sessionId
      } else {
@@ -735,10 +732,7 @@ export const useAccountsStore = defineStore('accounts', () => {
  // 交换Claude Setup Token Code
  const exchangeClaudeSetupTokenCode = async (data) => {
    try {
-      const response = await apiClient.post(
-        '/admin/claude-accounts/exchange-setup-token-code',
-        data
-      )
+      const response = await httpApi.exchangeClaudeSetupToken(data)
      if (response.success) {
        return response.data
      } else {
@@ -753,7 +747,7 @@ export const useAccountsStore = defineStore('accounts', () => {
  // Cookie自动授权 - 普通OAuth
  const oauthWithCookie = async (payload) => {
    try {
-      const response = await apiClient.post('/admin/claude-accounts/oauth-with-cookie', payload)
+      const response = await httpApi.claudeOAuthWithCookie(payload)
      if (response.success) {
        return response.data
      } else {
@@ -768,10 +762,7 @@ export const useAccountsStore = defineStore('accounts', () => {
  // Cookie自动授权 - Setup Token
  const oauthSetupTokenWithCookie = async (payload) => {
    try {
-      const response = await apiClient.post(
-        '/admin/claude-accounts/setup-token-with-cookie',
-        payload
-      )
+      const response = await httpApi.claudeSetupTokenWithCookie(payload)
      if (response.success) {
        return response.data
      } else {
@@ -786,7 +777,7 @@ export const useAccountsStore = defineStore('accounts', () => {
  // 生成Gemini OAuth URL
  const generateGeminiAuthUrl = async (proxyConfig) => {
    try {
-      const response = await apiClient.post('/admin/gemini-accounts/generate-auth-url', proxyConfig)
+      const response = await httpApi.generateGeminiAuthUrl(proxyConfig)
      if (response.success) {
        return response.data // 返回整个对象，包含authUrl和sessionId
      } else {
@@ -801,7 +792,7 @@ export const useAccountsStore = defineStore('accounts', () => {
  // 交换Gemini OAuth Code
  const exchangeGeminiCode = async (data) => {
    try {
-      const response = await apiClient.post('/admin/gemini-accounts/exchange-code', data)
+      const response = await httpApi.exchangeGeminiCode(data)
      if (response.success) {
        return response.data
      } else {
@@ -815,60 +806,33 @@ export const useAccountsStore = defineStore('accounts', () => {

  // 生成OpenAI OAuth URL
  const generateOpenAIAuthUrl = async (proxyConfig) => {
-    try {
-      const response = await apiClient.post('/admin/openai-accounts/generate-auth-url', proxyConfig)
-      if (response.success) {
-        return response.data // 返回整个对象，包含authUrl和sessionId
-      } else {
-        throw new Error(response.message || '生成授权URL失败')
-      }
-    } catch (err) {
-      error.value = err.message
-      throw err
-    }
+    const response = await httpApi.generateOpenAIAuthUrl(proxyConfig)
+    if (response.success) return response.data
+    error.value = response.message || '生成授权URL失败'
+    return null
  }

  // 生成Droid OAuth URL
  const generateDroidAuthUrl = async (proxyConfig) => {
    error.value = null
-    try {
-      const response = await apiClient.post('/admin/droid-accounts/generate-auth-url', proxyConfig)
-      if (response.success) {
-        return response.data
-      } else {
-        throw new Error(response.message || '生成授权URL失败')
-      }
-    } catch (err) {
-      error.value = err.message
-      throw err
-    }
+    const response = await httpApi.generateDroidAuthUrl(proxyConfig)
+    if (response.success) return response.data
+    error.value = response.message || '生成授权URL失败'
+    return null
  }

  // 交换OpenAI OAuth Code
  const exchangeOpenAICode = async (data) => {
-    try {
-      const response = await apiClient.post('/admin/openai-accounts/exchange-code', data)
-      if (response.success) {
-        return response.data
-      } else {
-        throw new Error(response.message || '交换授权码失败')
-      }
-    } catch (err) {
-      error.value = err.message
-      throw err
-    }
+    const response = await httpApi.exchangeOpenAICode(data)
+    if (response.success) return response.data
+    error.value = response.message || '交换授权码失败'
+    return null
  }

  // 交换Droid OAuth Code
  const exchangeDroidCode = async (data) => {
    error.value = null
-    try {
-      const response = await apiClient.post('/admin/droid-accounts/exchange-code', data)
-      return response
-    } catch (err) {
-      error.value = err.message
-      throw err
-    }
+    return await httpApi.exchangeDroidCode(data)
  }

  // 排序账户
--- a/web/admin-spa/src/stores/apiKeys.js
+++ b/web/admin-spa/src/stores/apiKeys.js
@@ -1,9 +1,16 @@
-import { apiClient } from '@/config/api'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import {
+  getApiKeys,
+  createApiKey as apiCreateApiKey,
+  updateApiKey as apiUpdateApiKey,
+  toggleApiKey as apiToggleApiKey,
+  deleteApiKey as apiDeleteApiKey,
+  getApiKeyStats,
+  getApiKeyTags
+} from '@/utils/http_apis'

 export const useApiKeysStore = defineStore('apiKeys', () => {
-  // 状态
  const apiKeys = ref([])
  const loading = ref(false)
  const error = ref(null)
@@ -11,14 +18,11 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
  const sortBy = ref('')
  const sortOrder = ref('asc')

-  // Actions
-
-  // 获取API Keys列表
  const fetchApiKeys = async () => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.get('/admin/api-keys')
+      const response = await getApiKeys()
      if (response.success) {
        apiKeys.value = response.data || []
      } else {
@@ -32,12 +36,11 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
    }
  }

-  // 创建API Key
  const createApiKey = async (data) => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.post('/admin/api-keys', data)
+      const response = await apiCreateApiKey(data)
      if (response.success) {
        await fetchApiKeys()
        return response.data
@@ -52,12 +55,11 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
    }
  }

-  // 更新API Key
  const updateApiKey = async (id, data) => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/api-keys/${id}`, data)
+      const response = await apiUpdateApiKey(id, data)
      if (response.success) {
        await fetchApiKeys()
        return response
@@ -72,12 +74,11 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
    }
  }

-  // 切换API Key状态
  const toggleApiKey = async (id) => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/api-keys/${id}/toggle`)
+      const response = await apiToggleApiKey(id)
      if (response.success) {
        await fetchApiKeys()
        return response
@@ -92,12 +93,11 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
    }
  }

-  // 续期API Key
  const renewApiKey = async (id, data) => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.put(`/admin/api-keys/${id}`, data)
+      const response = await apiUpdateApiKey(id, data)
      if (response.success) {
        await fetchApiKeys()
        return response
@@ -112,12 +112,11 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
    }
  }

-  // 删除API Key
  const deleteApiKey = async (id) => {
    loading.value = true
    error.value = null
    try {
-      const response = await apiClient.delete(`/admin/api-keys/${id}`)
+      const response = await apiDeleteApiKey(id)
      if (response.success) {
        await fetchApiKeys()
        return response
@@ -132,12 +131,9 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
    }
  }

-  // 获取API Key统计
  const fetchApiKeyStats = async (id, timeRange = 'all') => {
    try {
-      const response = await apiClient.get(`/admin/api-keys/${id}/stats`, {
-        params: { timeRange }
-      })
+      const response = await getApiKeyStats(id, { timeRange })
      if (response.success) {
        return response.stats
      } else {
@@ -149,7 +145,6 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
    }
  }

-  // 排序API Keys
  const sortApiKeys = (field) => {
    if (sortBy.value === field) {
      sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
@@ -159,10 +154,9 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
    }
  }

-  // 获取已存在的标签
  const fetchTags = async () => {
    try {
-      const response = await apiClient.get('/admin/api-keys/tags')
+      const response = await getApiKeyTags()
      if (response.success) {
        return response.data || []
      } else {
@@ -174,7 +168,6 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
    }
  }

-  // 重置store
  const reset = () => {
    apiKeys.value = []
    loading.value = false
@@ -185,15 +178,12 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
  }

  return {
-    // State
    apiKeys,
    loading,
    error,
    statsTimeRange,
    sortBy,
    sortOrder,
-
-    // Actions
    fetchApiKeys,
    createApiKey,
    updateApiKey,
--- a/web/admin-spa/src/stores/apistats.js
+++ b/web/admin-spa/src/stores/apistats.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import { apiStatsClient } from '@/config/apiStats'
+import * as httpApi from '@/utils/http_apis'

 export const useApiStatsStore = defineStore('apistats', () => {
  // 状态
@@ -13,8 +13,12 @@ export const useApiStatsStore = defineStore('apistats', () => {
  const statsPeriod = ref('daily')
  const statsData = ref(null)
  const modelStats = ref([])
+  const dailyModelStats = ref([])
+  const monthlyModelStats = ref([])
+  const alltimeModelStats = ref([])
  const dailyStats = ref(null)
  const monthlyStats = ref(null)
+  const alltimeStats = ref(null)
  const oemSettings = ref({
    siteName: '',
    siteIcon: '',
@@ -29,6 +33,9 @@ export const useApiStatsStore = defineStore('apistats', () => {
  const individualStats = ref([]) // 各个 Key 的独立数据
  const invalidKeys = ref([]) // 无效的 Keys 列表

+  // 服务倍率配置
+  const serviceRates = ref(null)
+
  // 计算属性
  const currentPeriodData = computed(() => {
    const defaultData = {
@@ -46,16 +53,20 @@ export const useApiStatsStore = defineStore('apistats', () => {
    if (multiKeyMode.value && aggregatedStats.value) {
      if (statsPeriod.value === 'daily') {
        return aggregatedStats.value.dailyUsage || defaultData
-      } else {
+      } else if (statsPeriod.value === 'monthly') {
        return aggregatedStats.value.monthlyUsage || defaultData
+      } else {
+        return aggregatedStats.value.alltimeUsage || defaultData
      }
    }

    // 单个 Key 模式下使用原有逻辑
    if (statsPeriod.value === 'daily') {
      return dailyStats.value || defaultData
-    } else {
+    } else if (statsPeriod.value === 'monthly') {
      return monthlyStats.value || defaultData
+    } else {
+      return alltimeStats.value || defaultData
    }
  })

@@ -113,13 +124,13 @@ export const useApiStatsStore = defineStore('apistats', () => {

    try {
      // 获取 API Key ID
-      const idResult = await apiStatsClient.getKeyId(trimmedKey)
+      const idResult = await httpApi.getKeyId(trimmedKey)

      if (idResult.success) {
        apiId.value = idResult.data.id

        // 使用 apiId 查询统计数据
-        const statsResult = await apiStatsClient.getUserStats(apiId.value)
+        const statsResult = await httpApi.getUserStats(apiId.value)

        if (statsResult.success) {
          statsData.value = statsResult.data
@@ -132,6 +143,9 @@ export const useApiStatsStore = defineStore('apistats', () => {

          // 更新 URL
          updateURL()
+
+          // 保存 API Key 到 localStorage
+          saveApiKeyToStorage()
        } else {
          throw new Error(statsResult.message || '查询失败')
        }
@@ -156,14 +170,44 @@ export const useApiStatsStore = defineStore('apistats', () => {
    // 并行加载今日和本月的数据
    await Promise.all([loadPeriodStats('daily'), loadPeriodStats('monthly')])

-    // 加载当前选择时间段的模型统计
-    await loadModelStats(statsPeriod.value)
+    // 并行加载三个时间段的模型统计
+    await loadAllModelStats()
+  }
+
+  // 加载所有时间段的模型统计
+  async function loadAllModelStats() {
+    if (!apiId.value) return
+
+    modelStatsLoading.value = true
+
+    try {
+      const [dailyResult, monthlyResult, alltimeResult] = await Promise.all([
+        httpApi.getUserModelStats(apiId.value, 'daily'),
+        httpApi.getUserModelStats(apiId.value, 'monthly'),
+        httpApi.getUserModelStats(apiId.value, 'alltime')
+      ])
+
+      dailyModelStats.value = dailyResult.success ? dailyResult.data || [] : []
+      monthlyModelStats.value = monthlyResult.success ? monthlyResult.data || [] : []
+      alltimeModelStats.value = alltimeResult.success ? alltimeResult.data || [] : []
+
+      // 保持 modelStats 兼容性（用于现有组件）
+      modelStats.value = dailyModelStats.value
+    } catch (err) {
+      console.error('Load all model stats error:', err)
+      dailyModelStats.value = []
+      monthlyModelStats.value = []
+      alltimeModelStats.value = []
+      modelStats.value = []
+    } finally {
+      modelStatsLoading.value = false
+    }
  }

  // 加载指定时间段的统计数据
  async function loadPeriodStats(period) {
    try {
-      const result = await apiStatsClient.getUserModelStats(apiId.value, period)
+      const result = await httpApi.getUserModelStats(apiId.value, period)

      if (result.success) {
        // 计算汇总数据
@@ -194,8 +238,10 @@ export const useApiStatsStore = defineStore('apistats', () => {
        // 存储到对应的时间段数据
        if (period === 'daily') {
          dailyStats.value = summary
-        } else {
+        } else if (period === 'monthly') {
          monthlyStats.value = summary
+        } else if (period === 'alltime') {
+          alltimeStats.value = summary
        }
      } else {
        console.warn(`Failed to load ${period} stats:`, result.message)
@@ -212,7 +258,7 @@ export const useApiStatsStore = defineStore('apistats', () => {
    modelStatsLoading.value = true

    try {
-      const result = await apiStatsClient.getUserModelStats(apiId.value, period)
+      const result = await httpApi.getUserModelStats(apiId.value, period)

      if (result.success) {
        modelStats.value = result.data || []
@@ -244,7 +290,8 @@ export const useApiStatsStore = defineStore('apistats', () => {
    // 如果对应时间段的数据还没有加载，则加载它
    if (
      (period === 'daily' && !dailyStats.value) ||
-      (period === 'monthly' && !monthlyStats.value)
+      (period === 'monthly' && !monthlyStats.value) ||
+      (period === 'alltime' && !alltimeStats.value)
    ) {
      await loadPeriodStats(period)
    }
@@ -263,7 +310,7 @@ export const useApiStatsStore = defineStore('apistats', () => {
    modelStats.value = []

    try {
-      const result = await apiStatsClient.getUserStats(apiId.value)
+      const result = await httpApi.getUserStats(apiId.value)

      if (result.success) {
        statsData.value = result.data
@@ -296,7 +343,7 @@ export const useApiStatsStore = defineStore('apistats', () => {
  async function loadOemSettings() {
    oemLoading.value = true
    try {
-      const result = await apiStatsClient.getOemSettings()
+      const result = await httpApi.getOemSettings()
      if (result && result.success && result.data) {
        oemSettings.value = { ...oemSettings.value, ...result.data }
      }
@@ -313,6 +360,19 @@ export const useApiStatsStore = defineStore('apistats', () => {
    }
  }

+  // 加载服务倍率配置
+  async function loadServiceRates() {
+    try {
+      const result = await httpApi.getServiceRates()
+      if (result && result.success && result.data) {
+        serviceRates.value = result.data
+      }
+    } catch (err) {
+      console.error('Error loading service rates:', err)
+      serviceRates.value = null
+    }
+  }
+
  // 工具函数

  // 格式化费用
@@ -340,6 +400,18 @@ export const useApiStatsStore = defineStore('apistats', () => {
    }
  }

+  // 保存 API Key 到 localStorage
+  function saveApiKeyToStorage() {
+    if (apiKey.value) {
+      localStorage.setItem('lastApiKey', apiKey.value)
+    }
+  }
+
+  // 从 localStorage 加载 API Key
+  function loadApiKeyFromStorage() {
+    return localStorage.getItem('lastApiKey')
+  }
+
  // 批量查询统计数据
  async function queryBatchStats() {
    const keys = parseApiKeys()
@@ -359,7 +431,7 @@ export const useApiStatsStore = defineStore('apistats', () => {

    try {
      // 批量获取 API Key IDs
-      const idResults = await Promise.allSettled(keys.map((key) => apiStatsClient.getKeyId(key)))
+      const idResults = await Promise.allSettled(keys.map((key) => httpApi.getKeyId(key)))

      const validIds = []
      const validKeys = []
@@ -381,7 +453,7 @@ export const useApiStatsStore = defineStore('apistats', () => {
      apiKeys.value = validKeys

      // 批量查询统计数据
-      const batchResult = await apiStatsClient.getBatchStats(validIds)
+      const batchResult = await httpApi.getBatchStats(validIds)

      if (batchResult.success) {
        aggregatedStats.value = batchResult.data.aggregated
@@ -417,7 +489,7 @@ export const useApiStatsStore = defineStore('apistats', () => {
    modelStatsLoading.value = true

    try {
-      const result = await apiStatsClient.getBatchModelStats(apiIds.value, period)
+      const result = await httpApi.getBatchModelStats(apiIds.value, period)

      if (result.success) {
        modelStats.value = result.data || []
@@ -465,8 +537,12 @@ export const useApiStatsStore = defineStore('apistats', () => {
  function clearData() {
    statsData.value = null
    modelStats.value = []
+    dailyModelStats.value = []
+    monthlyModelStats.value = []
+    alltimeModelStats.value = []
    dailyStats.value = null
    monthlyStats.value = null
+    alltimeStats.value = null
    error.value = ''
    statsPeriod.value = 'daily'
    apiId.value = null
@@ -496,8 +572,12 @@ export const useApiStatsStore = defineStore('apistats', () => {
    statsPeriod,
    statsData,
    modelStats,
+    dailyModelStats,
+    monthlyModelStats,
+    alltimeModelStats,
    dailyStats,
    monthlyStats,
+    alltimeStats,
    oemSettings,
    // 多 Key 模式状态
    multiKeyMode,
@@ -506,6 +586,7 @@ export const useApiStatsStore = defineStore('apistats', () => {
    aggregatedStats,
    individualStats,
    invalidKeys,
+    serviceRates,

    // Computed
    currentPeriodData,
@@ -515,12 +596,15 @@ export const useApiStatsStore = defineStore('apistats', () => {
    queryStats,
    queryBatchStats,
    loadAllPeriodStats,
+    loadAllModelStats,
    loadPeriodStats,
    loadModelStats,
    loadBatchModelStats,
    switchPeriod,
    loadStatsWithApiId,
    loadOemSettings,
+    loadServiceRates,
+    loadApiKeyFromStorage,
    clearData,
    clearInput,
    reset
--- a/web/admin-spa/src/stores/auth.js
+++ b/web/admin-spa/src/stores/auth.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import router from '@/router'
-import { apiClient } from '@/config/api'
+import { login as apiLogin, getAuthUser, getOemSettings } from '@/utils/http_apis'

 export const useAuthStore = defineStore('auth', () => {
  // 状态
@@ -29,7 +29,7 @@ export const useAuthStore = defineStore('auth', () => {
    loginError.value = ''

    try {
-      const result = await apiClient.post('/web/auth/login', credentials)
+      const result = await apiLogin(credentials)

      if (result.success) {
        authToken.value = result.token
@@ -66,16 +66,13 @@ export const useAuthStore = defineStore('auth', () => {

  async function verifyToken() {
    try {
-      // /web/auth/user 已做完整 token 验证（session 存在性、完整性）
-      // 成功返回即表示 token 有效，无需再调用 dashboard
-      const userResult = await apiClient.get('/web/auth/user')
+      const userResult = await getAuthUser()
      if (!userResult.success || !userResult.user) {
        logout()
        return
      }
      username.value = userResult.user.username
    } catch (error) {
-      // token 无效，需要重新登录
      logout()
    }
  }
@@ -83,11 +80,10 @@ export const useAuthStore = defineStore('auth', () => {
  async function loadOemSettings() {
    oemLoading.value = true
    try {
-      const result = await apiClient.get('/admin/oem-settings')
+      const result = await getOemSettings()
      if (result.success && result.data) {
        oemSettings.value = { ...oemSettings.value, ...result.data }

-        // 设置favicon
        if (result.data.siteIconData || result.data.siteIcon) {
          const link = document.querySelector("link[rel*='icon']") || document.createElement('link')
          link.type = 'image/x-icon'
@@ -96,7 +92,6 @@ export const useAuthStore = defineStore('auth', () => {
          document.getElementsByTagName('head')[0].appendChild(link)
        }

-        // 设置页面标题
        if (result.data.siteName) {
          document.title = `${result.data.siteName} - 管理后台`
        }
--- a/web/admin-spa/src/stores/clients.js
+++ b/web/admin-spa/src/stores/clients.js
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { apiClient } from '@/config/api'
+import { getSupportedClients } from '@/utils/http_apis'

 export const useClientsStore = defineStore('clients', {
  state: () => ({
@@ -11,7 +11,6 @@ export const useClientsStore = defineStore('clients', {
  actions: {
    async loadSupportedClients() {
      if (this.supportedClients.length > 0) {
-        // 如果已经加载过，不重复加载
        return this.supportedClients
      }

@@ -19,7 +18,7 @@ export const useClientsStore = defineStore('clients', {
      this.error = null

      try {
-        const response = await apiClient.get('/admin/supported-clients')
+        const response = await getSupportedClients()

        if (response.success) {
          this.supportedClients = response.data || []
--- a/web/admin-spa/src/stores/dashboard.js
+++ b/web/admin-spa/src/stores/dashboard.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import { apiClient } from '@/config/api'
-import { showToast } from '@/utils/toast'
+import { getDashboard, getUsageCosts, getUsageStats } from '@/utils/http_apis'
+import { showToast } from '@/utils/tools'

 export const useDashboardStore = defineStore('dashboard', () => {
  // 状态
@@ -221,9 +221,9 @@ export const useDashboardStore = defineStore('dashboard', () => {
      }

      const [dashboardResponse, todayCostsResponse, totalCostsResponse] = await Promise.all([
-        apiClient.get('/admin/dashboard'),
-        apiClient.get(`/admin/usage-costs?period=${costsParams.today}`),
-        apiClient.get(`/admin/usage-costs?period=${costsParams.all}`)
+        getDashboard(),
+        getUsageCosts(costsParams.today),
+        getUsageCosts(costsParams.all)
      ])

      if (dashboardResponse.success) {
@@ -363,7 +363,7 @@ export const useDashboardStore = defineStore('dashboard', () => {
        url += `granularity=day&days=${days}`
      }

-      const response = await apiClient.get(url)
+      const response = await getUsageStats(url)
      if (response.success) {
        trendData.value = response.data
      }
@@ -448,7 +448,7 @@ export const useDashboardStore = defineStore('dashboard', () => {
        }
      }

-      const response = await apiClient.get(url)
+      const response = await getUsageStats(url)
      if (response.success) {
        dashboardModelStats.value = response.data
      }
@@ -535,7 +535,7 @@ export const useDashboardStore = defineStore('dashboard', () => {

      url += `&metric=${metric}`

-      const response = await apiClient.get(url)
+      const response = await getUsageStats(url)
      if (response.success) {
        apiKeysTrendData.value = {
          data: response.data || [],
@@ -618,7 +618,7 @@ export const useDashboardStore = defineStore('dashboard', () => {

      url += `&group=${group}`

-      const response = await apiClient.get(url)
+      const response = await getUsageStats(url)
      if (response.success) {
        accountUsageTrendData.value = {
          data: response.data || [],
--- a/web/admin-spa/src/stores/settings.js
+++ b/web/admin-spa/src/stores/settings.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { apiClient } from '@/config/api'
+import { getOemSettings, updateOemSettings } from '@/utils/http_apis'

 export const useSettingsStore = defineStore('settings', () => {
  // 状态
@@ -8,25 +8,22 @@ export const useSettingsStore = defineStore('settings', () => {
    siteName: 'Claude Relay Service',
    siteIcon: '',
    siteIconData: '',
-    showAdminButton: true, // 控制管理后台按钮的显示
+    showAdminButton: true,
+    apiStatsNotice: { enabled: false, title: '', content: '' },
    updatedAt: null
  })

  const loading = ref(false)
  const saving = ref(false)

-  // 移除自定义API请求方法，使用统一的apiClient
-
  // Actions
  const loadOemSettings = async () => {
    loading.value = true
    try {
-      const result = await apiClient.get('/admin/oem-settings')
+      const result = await getOemSettings()

      if (result && result.success) {
        oemSettings.value = { ...oemSettings.value, ...result.data }
-
-        // 应用设置到页面
        applyOemSettings()
      }

@@ -42,12 +39,10 @@ export const useSettingsStore = defineStore('settings', () => {
  const saveOemSettings = async (settings) => {
    saving.value = true
    try {
-      const result = await apiClient.put('/admin/oem-settings', settings)
+      const result = await updateOemSettings(settings)

      if (result && result.success) {
        oemSettings.value = { ...oemSettings.value, ...result.data }
-
-        // 应用设置到页面
        applyOemSettings()
      }

@@ -66,6 +61,7 @@ export const useSettingsStore = defineStore('settings', () => {
      siteIcon: '',
      siteIconData: '',
      showAdminButton: true,
+      apiStatsNotice: { enabled: false, title: '', content: '' },
      updatedAt: null
    }

--- a/web/admin-spa/src/stores/theme.js
+++ b/web/admin-spa/src/stores/theme.js
@@ -8,10 +8,158 @@ export const ThemeMode = {
  AUTO: 'auto'
 }

+// 中国传统色系预设
+export const ColorSchemes = {
+  purple: {
+    name: '默认紫',
+    nameEn: 'Purple',
+    primary: '#667eea',
+    secondary: '#764ba2',
+    accent: '#f093fb',
+    gradientStart: '#667eea',
+    gradientMid: '#764ba2',
+    gradientEnd: '#f093fb',
+    // 玻璃态背景色（亮色模式）
+    glassStrong: 'rgba(255, 255, 255, 0.95)',
+    glass: 'rgba(255, 255, 255, 0.1)',
+    // 暗黑模式
+    darkPrimary: '#818cf8',
+    darkSecondary: '#a78bfa',
+    darkAccent: '#c084fc',
+    darkGradientStart: '#1f2937',
+    darkGradientMid: '#374151',
+    darkGradientEnd: '#4b5563',
+    darkGlassStrong: 'rgba(31, 41, 55, 0.95)',
+    darkGlass: 'rgba(0, 0, 0, 0.2)'
+  },
+  celadon: {
+    name: '青瓷',
+    nameEn: 'Celadon',
+    primary: '#7faaaf',
+    secondary: '#5d8a8e',
+    accent: '#a8d8dc',
+    gradientStart: '#7faaaf',
+    gradientMid: '#5d8a8e',
+    gradientEnd: '#3d6a6e',
+    glassStrong: 'rgba(248, 253, 253, 0.95)',
+    glass: 'rgba(168, 216, 220, 0.1)',
+    darkPrimary: '#9fcacd',
+    darkSecondary: '#7daaae',
+    darkAccent: '#c8f8fc',
+    darkGradientStart: '#1a2a2b',
+    darkGradientMid: '#2a3a3b',
+    darkGradientEnd: '#3a4a4b',
+    darkGlassStrong: 'rgba(26, 42, 43, 0.95)',
+    darkGlass: 'rgba(0, 20, 20, 0.2)'
+  },
+  cinnabar: {
+    name: '朱砂',
+    nameEn: 'Cinnabar',
+    primary: '#c45a5a',
+    secondary: '#8b3a3a',
+    accent: '#e8a0a0',
+    gradientStart: '#c45a5a',
+    gradientMid: '#8b3a3a',
+    gradientEnd: '#5c2a2a',
+    glassStrong: 'rgba(255, 252, 252, 0.95)',
+    glass: 'rgba(232, 160, 160, 0.1)',
+    darkPrimary: '#e47a7a',
+    darkSecondary: '#ab5a5a',
+    darkAccent: '#f8c0c0',
+    darkGradientStart: '#2a1a1a',
+    darkGradientMid: '#3a2a2a',
+    darkGradientEnd: '#4a3a3a',
+    darkGlassStrong: 'rgba(42, 26, 26, 0.95)',
+    darkGlass: 'rgba(20, 0, 0, 0.2)'
+  },
+  jade: {
+    name: '墨玉',
+    nameEn: 'Jade',
+    primary: '#4a7c59',
+    secondary: '#2d5a3d',
+    accent: '#7eb08c',
+    gradientStart: '#4a7c59',
+    gradientMid: '#2d5a3d',
+    gradientEnd: '#1a3d28',
+    glassStrong: 'rgba(250, 255, 252, 0.95)',
+    glass: 'rgba(126, 176, 140, 0.1)',
+    darkPrimary: '#6a9c79',
+    darkSecondary: '#4d7a5d',
+    darkAccent: '#9ed0ac',
+    darkGradientStart: '#1a2a1e',
+    darkGradientMid: '#2a3a2e',
+    darkGradientEnd: '#3a4a3e',
+    darkGlassStrong: 'rgba(26, 42, 30, 0.95)',
+    darkGlass: 'rgba(0, 20, 10, 0.2)'
+  },
+  indigo: {
+    name: '藏蓝',
+    nameEn: 'Indigo',
+    primary: '#3a5a8c',
+    secondary: '#2a4066',
+    accent: '#6a8ab8',
+    gradientStart: '#3a5a8c',
+    gradientMid: '#2a4066',
+    gradientEnd: '#1a2a44',
+    glassStrong: 'rgba(250, 252, 255, 0.95)',
+    glass: 'rgba(106, 138, 184, 0.1)',
+    darkPrimary: '#5a7aac',
+    darkSecondary: '#4a6086',
+    darkAccent: '#8aaad8',
+    darkGradientStart: '#1a1a2a',
+    darkGradientMid: '#2a2a3a',
+    darkGradientEnd: '#3a3a4a',
+    darkGlassStrong: 'rgba(26, 26, 42, 0.95)',
+    darkGlass: 'rgba(0, 0, 20, 0.2)'
+  },
+  amber: {
+    name: '琥珀',
+    nameEn: 'Amber',
+    primary: '#c49a3a',
+    secondary: '#8b6914',
+    accent: '#e8c86a',
+    gradientStart: '#c49a3a',
+    gradientMid: '#8b6914',
+    gradientEnd: '#5c4a0a',
+    glassStrong: 'rgba(255, 253, 248, 0.95)',
+    glass: 'rgba(232, 200, 106, 0.1)',
+    darkPrimary: '#e4ba5a',
+    darkSecondary: '#ab8934',
+    darkAccent: '#f8e88a',
+    darkGradientStart: '#2a2a1a',
+    darkGradientMid: '#3a3a2a',
+    darkGradientEnd: '#4a4a3a',
+    darkGlassStrong: 'rgba(42, 42, 26, 0.95)',
+    darkGlass: 'rgba(20, 20, 0, 0.2)'
+  },
+  rouge: {
+    name: '胭脂',
+    nameEn: 'Rouge',
+    primary: '#b85a6a',
+    secondary: '#8a3a4a',
+    accent: '#e8a0b0',
+    gradientStart: '#b85a6a',
+    gradientMid: '#8a3a4a',
+    gradientEnd: '#5c2a3a',
+    glassStrong: 'rgba(255, 250, 252, 0.95)',
+    glass: 'rgba(232, 160, 176, 0.1)',
+    darkPrimary: '#d87a8a',
+    darkSecondary: '#aa5a6a',
+    darkAccent: '#f8c0d0',
+    darkGradientStart: '#2a1a1e',
+    darkGradientMid: '#3a2a2e',
+    darkGradientEnd: '#4a3a3e',
+    darkGlassStrong: 'rgba(42, 26, 30, 0.95)',
+    darkGlass: 'rgba(20, 0, 10, 0.2)'
+  }
+}
+
 export const useThemeStore = defineStore('theme', () => {
  // 状态 - 支持三种模式：light, dark, auto
  const themeMode = ref(ThemeMode.AUTO)
  const systemPrefersDark = ref(false)
+  // 色系状态
+  const colorScheme = ref('purple')

  // 计算属性 - 实际的暗黑模式状态
  const isDarkMode = computed(() => {
@@ -30,6 +178,11 @@ export const useThemeStore = defineStore('theme', () => {
    return isDarkMode.value ? ThemeMode.DARK : ThemeMode.LIGHT
  })

+  // 计算属性 - 当前色系配置
+  const currentColorScheme = computed(() => {
+    return ColorSchemes[colorScheme.value] || ColorSchemes.purple
+  })
+
  // 初始化主题
  const initTheme = () => {
    // 检测系统主题偏好
@@ -46,6 +199,12 @@ export const useThemeStore = defineStore('theme', () => {
      themeMode.value = ThemeMode.AUTO
    }

+    // 从 localStorage 读取保存的色系
+    const savedColorScheme = localStorage.getItem('colorScheme')
+    if (savedColorScheme && ColorSchemes[savedColorScheme]) {
+      colorScheme.value = savedColorScheme
+    }
+
    // 应用主题
    applyTheme()

@@ -62,6 +221,71 @@ export const useThemeStore = defineStore('theme', () => {
    } else {
      root.classList.remove('dark')
    }
+
+    // 应用色系 CSS 变量
+    applyColorScheme()
+  }
+
+  // 应用色系 CSS 变量
+  const applyColorScheme = () => {
+    const root = document.documentElement
+    const scheme = currentColorScheme.value
+    const dark = isDarkMode.value
+
+    const primary = dark ? scheme.darkPrimary : scheme.primary
+    const secondary = dark ? scheme.darkSecondary : scheme.secondary
+    const accent = dark ? scheme.darkAccent : scheme.accent
+
+    // 设置主题色
+    root.style.setProperty('--primary-color', primary)
+    root.style.setProperty('--secondary-color', secondary)
+    root.style.setProperty('--accent-color', accent)
+
+    // 设置背景渐变
+    root.style.setProperty(
+      '--bg-gradient-start',
+      dark ? scheme.darkGradientStart : scheme.gradientStart
+    )
+    root.style.setProperty('--bg-gradient-mid', dark ? scheme.darkGradientMid : scheme.gradientMid)
+    root.style.setProperty('--bg-gradient-end', dark ? scheme.darkGradientEnd : scheme.gradientEnd)
+
+    // 设置玻璃态背景色
+    root.style.setProperty(
+      '--glass-strong-color',
+      dark ? scheme.darkGlassStrong : scheme.glassStrong
+    )
+    root.style.setProperty('--glass-color', dark ? scheme.darkGlass : scheme.glass)
+
+    // 设置表面颜色（卡片背景等）
+    root.style.setProperty('--surface-color', dark ? scheme.darkGlassStrong : scheme.glassStrong)
+    root.style.setProperty('--table-bg', dark ? scheme.darkGlassStrong : scheme.glassStrong)
+    root.style.setProperty('--input-bg', dark ? scheme.darkGlassStrong : scheme.glassStrong)
+
+    // 解析颜色为 RGB 值用于 rgba()
+    const hexToRgb = (hex) => {
+      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+      return result
+        ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`
+        : '102, 126, 234'
+    }
+
+    const primaryRgb = hexToRgb(primary)
+    const secondaryRgb = hexToRgb(secondary)
+    const accentRgb = hexToRgb(accent)
+
+    // 设置 RGB 变量用于 rgba()
+    root.style.setProperty('--primary-rgb', primaryRgb)
+    root.style.setProperty('--secondary-rgb', secondaryRgb)
+    root.style.setProperty('--accent-rgb', accentRgb)
+
+    // 设置表格 hover 颜色（暗黑模式透明度更高）
+    root.style.setProperty('--table-hover', `rgba(${primaryRgb}, ${dark ? 0.1 : 0.05})`)
+
+    // 设置边框颜色（基于主题色）
+    root.style.setProperty('--border-color', `rgba(${primaryRgb}, ${dark ? 0.25 : 0.2})`)
+
+    // 设置输入框边框
+    root.style.setProperty('--input-border', `rgba(${primaryRgb}, ${dark ? 0.3 : 0.25})`)
  }

  // 设置主题模式
@@ -79,12 +303,33 @@ export const useThemeStore = defineStore('theme', () => {
    themeMode.value = modes[nextIndex]
  }

+  // 设置色系
+  const setColorScheme = (scheme) => {
+    if (ColorSchemes[scheme]) {
+      colorScheme.value = scheme
+    }
+  }
+
+  // 循环切换色系
+  const cycleColorScheme = () => {
+    const schemes = Object.keys(ColorSchemes)
+    const currentIndex = schemes.indexOf(colorScheme.value)
+    const nextIndex = (currentIndex + 1) % schemes.length
+    colorScheme.value = schemes[nextIndex]
+  }
+
  // 监听主题模式变化，自动保存到 localStorage 并应用
  watch(themeMode, (newMode) => {
    localStorage.setItem('themeMode', newMode)
    applyTheme()
  })

+  // 监听色系变化，自动保存到 localStorage 并应用
+  watch(colorScheme, (newScheme) => {
+    localStorage.setItem('colorScheme', newScheme)
+    applyColorScheme()
+  })
+
  // 监听系统主题偏好变化
  watch(systemPrefersDark, () => {
    // 只有在 auto 模式下才需要重新应用主题
@@ -132,15 +377,20 @@ export const useThemeStore = defineStore('theme', () => {
    isDarkMode,
    currentTheme,
    systemPrefersDark,
+    colorScheme,
+    currentColorScheme,

    // Constants
    ThemeMode,
+    ColorSchemes,

    // Actions
    initTheme,
    setThemeMode,
    cycleThemeMode,
    watchSystemTheme,
+    setColorScheme,
+    cycleColorScheme,

    // 兼容旧版 API
    toggleTheme,
--- a/web/admin-spa/src/stores/user.js
+++ b/web/admin-spa/src/stores/user.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import axios from 'axios'
-import { showToast } from '@/utils/toast'
-import { API_PREFIX } from '@/config/api'
+import { showToast } from '@/utils/tools'
+import { API_PREFIX } from '@/utils/http_apis'

 const API_BASE = `${API_PREFIX}/users`

--- a/web/admin-spa/src/utils/format.js
+++ b/web/admin-spa/src/utils/format.js
@@ -1,74 +0,0 @@
-// 数字格式化函数
-export function formatNumber(num) {
-  if (num === null || num === undefined) return '0'
-
-  const absNum = Math.abs(num)
-
-  if (absNum >= 1e9) {
-    return (num / 1e9).toFixed(2) + 'B'
-  } else if (absNum >= 1e6) {
-    return (num / 1e6).toFixed(2) + 'M'
-  } else if (absNum >= 1e3) {
-    return (num / 1e3).toFixed(1) + 'K'
-  }
-
-  return num.toLocaleString()
-}
-
-// 日期格式化函数
-export function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
-  if (!date) return ''
-
-  const d = new Date(date)
-
-  const year = d.getFullYear()
-  const month = String(d.getMonth() + 1).padStart(2, '0')
-  const day = String(d.getDate()).padStart(2, '0')
-  const hours = String(d.getHours()).padStart(2, '0')
-  const minutes = String(d.getMinutes()).padStart(2, '0')
-  const seconds = String(d.getSeconds()).padStart(2, '0')
-
-  return format
-    .replace('YYYY', year)
-    .replace('MM', month)
-    .replace('DD', day)
-    .replace('HH', hours)
-    .replace('mm', minutes)
-    .replace('ss', seconds)
-}
-
-// 相对时间格式化
-export function formatRelativeTime(date) {
-  if (!date) return ''
-
-  const now = new Date()
-  const past = new Date(date)
-  const diffMs = now - past
-  const diffSecs = Math.floor(diffMs / 1000)
-  const diffMins = Math.floor(diffSecs / 60)
-  const diffHours = Math.floor(diffMins / 60)
-  const diffDays = Math.floor(diffHours / 24)
-
-  if (diffDays > 0) {
-    return `${diffDays}天前`
-  } else if (diffHours > 0) {
-    return `${diffHours}小时前`
-  } else if (diffMins > 0) {
-    return `${diffMins}分钟前`
-  } else {
-    return '刚刚'
-  }
-}
-
-// 字节格式化
-export function formatBytes(bytes, decimals = 2) {
-  if (bytes === 0) return '0 Bytes'
-
-  const k = 1024
-  const dm = decimals < 0 ? 0 : decimals
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
-}
--- a/web/admin-spa/src/utils/http_apis.js
+++ b/web/admin-spa/src/utils/http_apis.js
@@ -0,0 +1,262 @@
+import axios from 'axios'
+import { APP_CONFIG, getLoginUrl } from '@/config/app'
+
+export const API_PREFIX = APP_CONFIG.apiPrefix
+
+const axiosInstance = axios.create({
+  baseURL: APP_CONFIG.apiPrefix,
+  timeout: 30000,
+  headers: { 'Content-Type': 'application/json' }
+})
+
+axiosInstance.interceptors.request.use((config) => {
+  const token = localStorage.getItem('authToken')
+  if (token) config.headers['Authorization'] = `Bearer ${token}`
+  return config
+})
+
+axiosInstance.interceptors.response.use(
+  (response) => response.data,
+  (error) => {
+    if (error.response?.status === 401) {
+      const path = window.location.pathname + window.location.hash
+      if (!path.includes('/login') && !path.endsWith('/')) {
+        localStorage.removeItem('authToken')
+        window.location.href = getLoginUrl()
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
+// 通用请求函数 - 只会 resolve，调用方无需 try-catch
+const request = async (config) => {
+  try {
+    return await axiosInstance(config)
+  } catch (error) {
+    console.error('Request failed:', error)
+    const data = error.response?.data
+    if (data && typeof data.success !== 'undefined') return data
+    const status = error.response?.status
+    const messages = {
+      401: '未授权，请重新登录',
+      403: '无权限访问',
+      404: '请求的资源不存在',
+      500: '服务器内部错误'
+    }
+    return { success: false, message: messages[status] || error.message || '请求失败' }
+  }
+}
+
+const get = (url, config) => request({ method: 'get', url, ...config })
+const post = (url, data, config) => request({ method: 'post', url, data, ...config })
+const put = (url, data, config) => request({ method: 'put', url, data, ...config })
+const patch = (url, data, config) => request({ method: 'patch', url, data, ...config })
+const del = (url, config) => request({ method: 'delete', url, ...config })
+
+// 模型
+export const getModels = () => get('/apiStats/models')
+export const getModelsByService = (service) => get('/apiStats/models', { params: { service } })
+
+// API Key 测试
+export const testClaudeApiKey = (data) => post('/apiStats/api-key/test', data)
+export const testGeminiApiKey = (data) => post('/apiStats/api-key/test-gemini', data)
+export const testOpenAIApiKey = (data) => post('/apiStats/api-key/test-openai', data)
+
+// API Stats
+export const getKeyId = (apiKey) => post('/apiStats/api/get-key-id', { apiKey })
+export const getUserStats = (apiId) => post('/apiStats/api/user-stats', { apiId })
+export const getUserModelStats = (apiId, period = 'daily') =>
+  post('/apiStats/api/user-model-stats', { apiId, period })
+export const getBatchStats = (apiIds) => post('/apiStats/api/batch-stats', { apiIds })
+export const getBatchModelStats = (apiIds, period = 'daily') =>
+  post('/apiStats/api/batch-model-stats', { apiIds, period })
+
+// 认证
+export const login = (credentials) => post('/web/auth/login', credentials)
+export const getAuthUser = () => get('/web/auth/user')
+
+// OEM 设置
+export const getOemSettings = () => get('/admin/oem-settings')
+export const updateOemSettings = (data) => put('/admin/oem-settings', data)
+
+// 服务倍率配置（公开接口）
+export const getServiceRates = () => get('/apiStats/service-rates')
+
+// 仪表板
+export const getDashboard = () => get('/admin/dashboard')
+export const getUsageCosts = (period) => get(`/admin/usage-costs?period=${period}`)
+export const getUsageStats = (url) => get(url)
+
+// 客户端
+export const getSupportedClients = () => get('/admin/supported-clients')
+
+// API Keys
+export const getApiKeys = () => get('/admin/api-keys')
+export const getApiKeysWithParams = (params) => get(`/admin/api-keys?${params}`)
+export const createApiKey = (data) => post('/admin/api-keys', data)
+export const updateApiKey = (id, data) => put(`/admin/api-keys/${id}`, data)
+export const toggleApiKey = (id) => put(`/admin/api-keys/${id}/toggle`)
+export const deleteApiKey = (id) => del(`/admin/api-keys/${id}`)
+export const getApiKeyStats = (id, params) => get(`/admin/api-keys/${id}/stats`, { params })
+export const getApiKeyTags = () => get('/admin/api-keys/tags')
+export const getApiKeyUsedModels = () => get('/admin/api-keys/used-models')
+export const getApiKeysBatchStats = (data) => post('/admin/api-keys/batch-stats', data)
+export const getApiKeysBatchLastUsage = (data) => post('/admin/api-keys/batch-last-usage', data)
+export const getDeletedApiKeys = () => get('/admin/api-keys/deleted')
+export const getApiKeysCostSortStatus = () => get('/admin/api-keys/cost-sort-status')
+export const restoreApiKey = (id) => post(`/admin/api-keys/${id}/restore`)
+export const permanentDeleteApiKey = (id) => del(`/admin/api-keys/${id}/permanent`)
+export const clearAllDeletedApiKeys = () => del('/admin/api-keys/deleted/clear-all')
+export const batchDeleteApiKeys = (data) => del('/admin/api-keys/batch', { data })
+export const updateApiKeyExpiration = (id, data) =>
+  request({ method: 'patch', url: `/admin/api-keys/${id}/expiration`, data })
+
+// Claude 账户
+export const getClaudeAccounts = () => get('/admin/claude-accounts')
+export const createClaudeAccount = (data) => post('/admin/claude-accounts', data)
+export const updateClaudeAccount = (id, data) => put(`/admin/claude-accounts/${id}`, data)
+export const deleteClaudeAccount = (id) => del(`/admin/claude-accounts/${id}`)
+export const refreshClaudeAccount = (id) => post(`/admin/claude-accounts/${id}/refresh`)
+export const generateClaudeAuthUrl = (data) =>
+  post('/admin/claude-accounts/generate-auth-url', data)
+export const exchangeClaudeCode = (data) => post('/admin/claude-accounts/exchange-code', data)
+export const generateClaudeSetupTokenUrl = (data) =>
+  post('/admin/claude-accounts/generate-setup-token-url', data)
+export const exchangeClaudeSetupToken = (data) =>
+  post('/admin/claude-accounts/exchange-setup-token', data)
+export const claudeOAuthWithCookie = (data) =>
+  post('/admin/claude-accounts/oauth-with-cookie', data)
+export const claudeSetupTokenWithCookie = (data) =>
+  post('/admin/claude-accounts/setup-token-with-cookie', data)
+export const generateClaudeWorkosAuthUrl = (data) =>
+  post('/admin/claude-accounts/generate-workos-auth-url', data)
+
+// Claude Console 账户
+export const getClaudeConsoleAccounts = () => get('/admin/claude-console-accounts')
+export const createClaudeConsoleAccount = (data) => post('/admin/claude-console-accounts', data)
+export const updateClaudeConsoleAccount = (id, data) =>
+  put(`/admin/claude-console-accounts/${id}`, data)
+export const deleteClaudeConsoleAccount = (id) => del(`/admin/claude-console-accounts/${id}`)
+
+// Bedrock 账户
+export const getBedrockAccounts = () => get('/admin/bedrock-accounts')
+export const createBedrockAccount = (data) => post('/admin/bedrock-accounts', data)
+export const updateBedrockAccount = (id, data) => put(`/admin/bedrock-accounts/${id}`, data)
+export const deleteBedrockAccount = (id) => del(`/admin/bedrock-accounts/${id}`)
+
+// Gemini 账户
+export const getGeminiAccounts = () => get('/admin/gemini-accounts')
+export const createGeminiAccount = (data) => post('/admin/gemini-accounts', data)
+export const updateGeminiAccount = (id, data) => put(`/admin/gemini-accounts/${id}`, data)
+export const deleteGeminiAccount = (id) => del(`/admin/gemini-accounts/${id}`)
+export const generateGeminiAuthUrl = (data) =>
+  post('/admin/gemini-accounts/generate-auth-url', data)
+export const exchangeGeminiCode = (data) => post('/admin/gemini-accounts/exchange-code', data)
+
+// Gemini API 账户
+export const createGeminiApiAccount = (data) => post('/admin/gemini-api-accounts', data)
+export const updateGeminiApiAccount = (id, data) => put(`/admin/gemini-api-accounts/${id}`, data)
+
+// OpenAI 账户
+export const getOpenAIAccounts = () => get('/admin/openai-accounts')
+export const createOpenAIAccount = (data) => post('/admin/openai-accounts', data)
+export const updateOpenAIAccount = (id, data) => put(`/admin/openai-accounts/${id}`, data)
+export const deleteOpenAIAccount = (id) => del(`/admin/openai-accounts/${id}`)
+export const generateOpenAIAuthUrl = (data) =>
+  post('/admin/openai-accounts/generate-auth-url', data)
+export const exchangeOpenAICode = (data) => post('/admin/openai-accounts/exchange-code', data)
+
+// OpenAI Responses 账户
+export const getOpenAIResponsesAccounts = () => get('/admin/openai-responses-accounts')
+export const createOpenAIResponsesAccount = (data) => post('/admin/openai-responses-accounts', data)
+export const updateOpenAIResponsesAccount = (id, data) =>
+  put(`/admin/openai-responses-accounts/${id}`, data)
+export const deleteOpenAIResponsesAccount = (id) => del(`/admin/openai-responses-accounts/${id}`)
+
+// Azure OpenAI 账户
+export const getAzureOpenAIAccounts = () => get('/admin/azure-openai-accounts')
+export const createAzureOpenAIAccount = (data) => post('/admin/azure-openai-accounts', data)
+export const updateAzureOpenAIAccount = (id, data) =>
+  put(`/admin/azure-openai-accounts/${id}`, data)
+export const deleteAzureOpenAIAccount = (id) => del(`/admin/azure-openai-accounts/${id}`)
+
+// Droid 账户
+export const getDroidAccounts = () => get('/admin/droid-accounts')
+export const createDroidAccount = (data) => post('/admin/droid-accounts', data)
+export const updateDroidAccount = (id, data) => put(`/admin/droid-accounts/${id}`, data)
+export const deleteDroidAccount = (id) => del(`/admin/droid-accounts/${id}`)
+export const generateDroidAuthUrl = (data) => post('/admin/droid-accounts/generate-auth-url', data)
+export const exchangeDroidCode = (data) => post('/admin/droid-accounts/exchange-code', data)
+
+// CCR 账户
+export const getCcrAccounts = () => get('/admin/ccr-accounts')
+export const createCcrAccount = (data) => post('/admin/ccr-accounts', data)
+export const updateCcrAccount = (id, data) => put(`/admin/ccr-accounts/${id}`, data)
+export const deleteCcrAccount = (id) => del(`/admin/ccr-accounts/${id}`)
+
+// Gemini API 账户
+export const getGeminiApiAccounts = () => get('/admin/gemini-api-accounts')
+
+// 账户通用操作
+export const toggleAccountStatus = (endpoint) => put(endpoint)
+export const deleteAccountByEndpoint = (endpoint) => del(endpoint)
+export const testAccountByEndpoint = (endpoint) => post(endpoint)
+export const updateAccountByEndpoint = (endpoint, data) => put(endpoint, data)
+
+// 账户使用统计
+export const getClaudeAccountsUsage = () => get('/admin/claude-accounts/usage')
+export const getAccountsBindingCounts = () => get('/admin/accounts/binding-counts')
+export const getAccountUsageHistory = (id, platform, days = 30) =>
+  get(`/admin/accounts/${id}/usage-history?platform=${platform}&days=${days}`)
+
+// 账户组
+export const getAccountGroups = () => get('/admin/account-groups')
+export const createAccountGroup = (data) => post('/admin/account-groups', data)
+export const updateAccountGroup = (id, data) => put(`/admin/account-groups/${id}`, data)
+export const deleteAccountGroup = (id) => del(`/admin/account-groups/${id}`)
+
+// 用户管理
+export const getUsers = () => get('/admin/users')
+export const createUser = (data) => post('/admin/users', data)
+export const updateUser = (id, data) => put(`/admin/users/${id}`, data)
+export const deleteUser = (id) => del(`/admin/users/${id}`)
+export const updateUserRole = (id, data) => put(`/admin/users/${id}/role`, data)
+export const getUserUsageStats = (id, params) => get(`/admin/users/${id}/usage-stats`, { params })
+
+// 使用记录
+export const getApiKeyUsageRecords = (id, params) =>
+  get(`/admin/api-keys/${id}/usage-records`, { params })
+export const getAccountUsageRecords = (type, id, params) =>
+  get(`/admin/${type}-accounts/${id}/usage-records`, { params })
+
+// 系统日志
+export const getSystemLogs = (params) => get('/admin/logs', { params })
+
+// 配额卡片
+export const getQuotaCards = () => get('/admin/quota-cards')
+export const createQuotaCard = (data) => post('/admin/quota-cards', data)
+export const updateQuotaCard = (id, data) => put(`/admin/quota-cards/${id}`, data)
+export const deleteQuotaCard = (id) => del(`/admin/quota-cards/${id}`)
+export const redeemQuotaCard = (data) => post('/admin/quota-cards/redeem', data)
+
+// 账户测试
+export const testAccount = (type, id) => post(`/admin/${type}-accounts/${id}/test`)
+export const getAccountTestHistory = (type, id) => get(`/admin/${type}-accounts/${id}/test-history`)
+
+// 定时测试
+export const getScheduledTests = () => get('/admin/scheduled-tests')
+export const createScheduledTest = (data) => post('/admin/scheduled-tests', data)
+export const updateScheduledTest = (id, data) => put(`/admin/scheduled-tests/${id}`, data)
+export const deleteScheduledTest = (id) => del(`/admin/scheduled-tests/${id}`)
+
+// 统一 User-Agent
+export const getUnifiedUserAgent = () => get('/admin/unified-user-agent')
+
+// 账户 API Keys 管理
+export const getAccountApiKeys = (type, id) => get(`/admin/${type}-accounts/${id}/api-keys`)
+export const updateAccountApiKeys = (type, id, data) =>
+  put(`/admin/${type}-accounts/${id}/api-keys`, data)
+
+export default { get, post, put, patch, del, request }
+export { get, post, put, patch, del }
--- a/web/admin-spa/src/utils/toast.js
+++ b/web/admin-spa/src/utils/toast.js
@@ -1,71 +0,0 @@
-// Toast 通知管理
-let toastContainer = null
-let toastId = 0
-
-export function showToast(message, type = 'info', title = '', duration = 3000) {
-  // 创建容器
-  if (!toastContainer) {
-    toastContainer = document.createElement('div')
-    toastContainer.id = 'toast-container'
-    toastContainer.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 10000;'
-    document.body.appendChild(toastContainer)
-  }
-
-  // 创建 toast
-  const id = ++toastId
-  const toast = document.createElement('div')
-  toast.className = `toast rounded-2xl p-4 shadow-2xl backdrop-blur-sm toast-${type}`
-  toast.style.cssText = `
-    position: relative;
-    min-width: 320px;
-    max-width: 500px;
-    margin-bottom: 16px;
-    transform: translateX(100%);
-    transition: transform 0.3s ease-in-out;
-  `
-
-  const iconMap = {
-    success: 'fas fa-check-circle',
-    error: 'fas fa-times-circle',
-    warning: 'fas fa-exclamation-triangle',
-    info: 'fas fa-info-circle'
-  }
-
-  // 处理消息中的换行符，转换为 HTML 换行
-  const formattedMessage = message.replace(/\n/g, '<br>')
-
-  toast.innerHTML = `
-    <div class="flex items-start gap-3">
-      <div class="flex-shrink-0 mt-0.5">
-        <i class="${iconMap[type]} text-lg"></i>
-      </div>
-      <div class="flex-1 min-w-0">
-        ${title ? `<h4 class="font-semibold text-sm mb-1">${title}</h4>` : ''}
-        <p class="text-sm opacity-90 leading-relaxed">${formattedMessage}</p>
-      </div>
-      <button onclick="this.parentElement.parentElement.remove()" 
-              class="flex-shrink-0 text-white/70 hover:text-white transition-colors ml-2">
-        <i class="fas fa-times"></i>
-      </button>
-    </div>
-  `
-
-  toastContainer.appendChild(toast)
-
-  // 触发动画
-  setTimeout(() => {
-    toast.style.transform = 'translateX(0)'
-  }, 10)
-
-  // 自动移除
-  if (duration > 0) {
-    setTimeout(() => {
-      toast.style.transform = 'translateX(100%)'
-      setTimeout(() => {
-        toast.remove()
-      }, 300)
-    }, duration)
-  }
-
-  return id
-}
--- a/web/admin-spa/src/utils/tools.js
+++ b/web/admin-spa/src/utils/tools.js
@@ -0,0 +1,128 @@
+// Toast 通知管理
+let toastContainer = null
+let toastId = 0
+
+export const showToast = (message, type = 'info', title = '', duration = 3000) => {
+  // 创建容器
+  if (!toastContainer) {
+    toastContainer = document.createElement('div')
+    toastContainer.id = 'toast-container'
+    toastContainer.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 10000;'
+    document.body.appendChild(toastContainer)
+  }
+
+  const id = ++toastId
+  const toast = document.createElement('div')
+  toast.className = `toast rounded-2xl p-4 shadow-2xl backdrop-blur-sm toast-${type}`
+  toast.style.cssText = `
+    position: relative;
+    min-width: 320px;
+    max-width: 500px;
+    margin-bottom: 16px;
+    transform: translateX(100%);
+    transition: transform 0.3s ease-in-out;
+  `
+
+  const iconMap = {
+    success: 'fas fa-check-circle',
+    error: 'fas fa-times-circle',
+    warning: 'fas fa-exclamation-triangle',
+    info: 'fas fa-info-circle'
+  }
+
+  toast.innerHTML = `
+    <div class="flex items-start gap-3">
+      <div class="flex-shrink-0 mt-0.5">
+        <i class="${iconMap[type]} text-lg"></i>
+      </div>
+      <div class="flex-1 min-w-0">
+        ${title ? `<h4 class="font-semibold text-sm mb-1">${title}</h4>` : ''}
+        <p class="text-sm opacity-90 leading-relaxed">${message.replace(/\n/g, '<br>')}</p>
+      </div>
+      <button onclick="this.parentElement.parentElement.remove()"
+              class="flex-shrink-0 text-white/70 hover:text-white transition-colors ml-2">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+  `
+
+  toastContainer.appendChild(toast)
+  setTimeout(() => (toast.style.transform = 'translateX(0)'), 10)
+
+  if (duration > 0) {
+    setTimeout(() => {
+      toast.style.transform = 'translateX(100%)'
+      setTimeout(() => toast.remove(), 300)
+    }, duration)
+  }
+
+  return id
+}
+
+// 复制文本到剪贴板
+export const copyText = async (text, successMsg = '已复制') => {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+    } else {
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+    }
+    showToast(successMsg, 'success')
+    return true
+  } catch (error) {
+    console.error('Failed to copy:', error)
+    showToast('复制失败', 'error')
+    return false
+  }
+}
+
+// 数字格式化
+export const formatNumber = (num) => {
+  if (num === null || num === undefined) return '0'
+  const absNum = Math.abs(num)
+  if (absNum >= 1e9) return (num / 1e9).toFixed(2) + 'B'
+  if (absNum >= 1e6) return (num / 1e6).toFixed(2) + 'M'
+  if (absNum >= 1e3) return (num / 1e3).toFixed(1) + 'K'
+  return num.toLocaleString()
+}
+
+// 日期格式化
+export const formatDate = (date, format = 'YYYY-MM-DD HH:mm:ss') => {
+  if (!date) return ''
+  const d = new Date(date)
+  const pad = (n) => String(n).padStart(2, '0')
+  return format
+    .replace('YYYY', d.getFullYear())
+    .replace('MM', pad(d.getMonth() + 1))
+    .replace('DD', pad(d.getDate()))
+    .replace('HH', pad(d.getHours()))
+    .replace('mm', pad(d.getMinutes()))
+    .replace('ss', pad(d.getSeconds()))
+}
+
+// 相对时间格式化
+export const formatRelativeTime = (date) => {
+  if (!date) return ''
+  const diffMs = new Date() - new Date(date)
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMins / 60)
+  const diffDays = Math.floor(diffHours / 24)
+  if (diffDays > 0) return `${diffDays}天前`
+  if (diffHours > 0) return `${diffHours}小时前`
+  if (diffMins > 0) return `${diffMins}分钟前`
+  return '刚刚'
+}
+
+// 字节格式化
+export const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals < 0 ? 0 : decimals)) + ' ' + sizes[i]
+}
--- a/web/admin-spa/src/views/AccountUsageRecordsView.vue
+++ b/web/admin-spa/src/views/AccountUsageRecordsView.vue
@@ -301,9 +301,9 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import dayjs from 'dayjs'
 import { useRoute, useRouter } from 'vue-router'
-import { apiClient } from '@/config/api'
-import { showToast } from '@/utils/toast'
-import { formatNumber } from '@/utils/format'
+import * as httpApi from '@/utils/http_apis'
+import { showToast } from '@/utils/tools'
+import { formatNumber } from '@/utils/tools'
 import RecordDetailModal from '@/components/apikeys/RecordDetailModal.vue'

 const route = useRoute()
@@ -437,7 +437,7 @@ const syncResponseState = (data) => {
 const fetchRecords = async (page = pagination.currentPage) => {
  loading.value = true
  try {
-    const response = await apiClient.get(`/admin/accounts/${accountId.value}/usage-records`, {
+    const response = await httpApi.get(`/admin/accounts/${accountId.value}/usage-records`, {
      params: buildParams(page)
    })
    syncResponseState(response.data || {})
@@ -492,7 +492,7 @@ const exportCsv = async () => {
    const maxPages = 50 // 50 * 200 = 10000，超过后端 5000 上限已足够

    while (page <= totalPages && page <= maxPages) {
-      const response = await apiClient.get(`/admin/accounts/${accountId.value}/usage-records`, {
+      const response = await httpApi.get(`/admin/accounts/${accountId.value}/usage-records`, {
        params: { ...buildParams(page), pageSize: 200 }
      })
      const payload = response.data || {}
--- a/web/admin-spa/src/views/AccountsView.vue
+++ b/web/admin-spa/src/views/AccountsView.vue
@@ -150,6 +150,22 @@
              <span>{{ showCheckboxes ? '取消选择' : '选择' }}</span>
            </button>

+            <!-- 分组管理按钮 -->
+            <div class="relative">
+              <el-tooltip content="管理账户分组" effect="dark" placement="bottom">
+                <button
+                  class="group relative flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 hover:shadow-md dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-500 sm:w-auto"
+                  @click="showGroupManagementModal = true"
+                >
+                  <div
+                    class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
+                  ></div>
+                  <i class="fas fa-layer-group relative text-purple-500" />
+                  <span class="relative">分组</span>
+                </button>
+              </el-tooltip>
+            </div>
+
            <!-- 批量删除按钮 -->
            <button
              v-if="selectedAccounts.length > 0"
@@ -460,8 +476,9 @@
                    <div class="min-w-0">
                      <div class="flex items-center gap-2">
                        <div
-                          class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
-                          :title="account.name"
+                          class="cursor-pointer truncate text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
+                          title="点击复制"
+                          @click.stop="copyText(account.name)"
                        >
                          {{ account.name }}
                        </div>
@@ -1355,7 +1372,11 @@
                />
              </div>
              <div>
-                <h4 class="text-sm font-semibold text-gray-900">
+                <h4
+                  class="cursor-pointer text-sm font-semibold text-gray-900 hover:text-blue-600 dark:hover:text-blue-400"
+                  title="点击复制"
+                  @click.stop="copyText(account.name || account.email)"
+                >
                  {{ account.name || account.email }}
                </h4>
                <div class="mt-0.5 flex items-center gap-2">
@@ -2045,13 +2066,21 @@
        </p>
      </div>
    </el-dialog>
+
+    <!-- 分组管理弹窗 -->
+    <GroupManagementModal
+      v-if="showGroupManagementModal"
+      @close="showGroupManagementModal = false"
+      @refresh="loadAccountGroups"
+    />
  </div>
 </template>

 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
-import { showToast } from '@/utils/toast'
-import { apiClient } from '@/config/api'
+import { showToast } from '@/utils/tools'
+import { copyText } from '@/utils/tools'
+import * as httpApi from '@/utils/http_apis'
 import { useConfirm } from '@/composables/useConfirm'
 import AccountForm from '@/components/accounts/AccountForm.vue'
 import CcrAccountForm from '@/components/accounts/CcrAccountForm.vue'
@@ -2062,6 +2091,7 @@ import AccountScheduledTestModal from '@/components/accounts/AccountScheduledTes
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
 import CustomDropdown from '@/components/common/CustomDropdown.vue'
 import ActionDropdown from '@/components/common/ActionDropdown.vue'
+import GroupManagementModal from '@/components/accounts/GroupManagementModal.vue'

 // 使用确认弹窗
 const { showConfirmModal, confirmOptions, showConfirm, handleConfirm, handleCancel } = useConfirm()
@@ -2133,6 +2163,9 @@ const scheduledTestAccount = ref(null)
 // 账户统计弹窗状态
 const showAccountStatsModal = ref(false)

+// 分组管理弹窗状态
+const showGroupManagementModal = ref(false)
+
 // 表格横向滚动检测
 const tableContainerRef = ref(null)
 const needsHorizontalScroll = ref(false)
@@ -2204,16 +2237,16 @@ const platformGroupMap = {

 // 平台请求处理器
 const platformRequestHandlers = {
-  claude: (params) => apiClient.get('/admin/claude-accounts', { params }),
-  'claude-console': (params) => apiClient.get('/admin/claude-console-accounts', { params }),
-  bedrock: (params) => apiClient.get('/admin/bedrock-accounts', { params }),
-  gemini: (params) => apiClient.get('/admin/gemini-accounts', { params }),
-  openai: (params) => apiClient.get('/admin/openai-accounts', { params }),
-  azure_openai: (params) => apiClient.get('/admin/azure-openai-accounts', { params }),
-  'openai-responses': (params) => apiClient.get('/admin/openai-responses-accounts', { params }),
-  ccr: (params) => apiClient.get('/admin/ccr-accounts', { params }),
-  droid: (params) => apiClient.get('/admin/droid-accounts', { params }),
-  'gemini-api': (params) => apiClient.get('/admin/gemini-api-accounts', { params })
+  claude: () => httpApi.getClaudeAccounts(),
+  'claude-console': () => httpApi.getClaudeConsoleAccounts(),
+  bedrock: () => httpApi.getBedrockAccounts(),
+  gemini: () => httpApi.getGeminiAccounts(),
+  openai: () => httpApi.getOpenAIAccounts(),
+  azure_openai: () => httpApi.getAzureOpenAIAccounts(),
+  'openai-responses': () => httpApi.getOpenAIResponsesAccounts(),
+  ccr: () => httpApi.getCcrAccounts(),
+  droid: () => httpApi.getDroidAccounts(),
+  'gemini-api': () => httpApi.getGeminiApiAccounts()
 }

 const allPlatformKeys = Object.keys(platformRequestHandlers)
@@ -2431,25 +2464,17 @@ const openAccountUsageModal = async (account) => {
  accountUsageOverview.value = {}
  accountUsageGeneratedAt.value = ''

-  try {
-    const response = await apiClient.get(
-      `/admin/accounts/${account.id}/usage-history?platform=${account.platform}&days=30`
-    )
-
-    if (response.success) {
-      const data = response.data || {}
-      accountUsageHistory.value = data.history || []
-      accountUsageSummary.value = data.summary || {}
-      accountUsageOverview.value = data.overview || {}
-      accountUsageGeneratedAt.value = data.generatedAt || ''
-    } else {
-      showToast(response.error || '加载账号使用详情失败', 'error')
-    }
-  } catch (error) {
-    showToast('加载账号使用详情失败', 'error')
-  } finally {
-    accountUsageLoading.value = false
+  const response = await httpApi.getAccountUsageHistory(account.id, account.platform, 30)
+  if (response.success) {
+    const data = response.data || {}
+    accountUsageHistory.value = data.history || []
+    accountUsageSummary.value = data.summary || {}
+    accountUsageOverview.value = data.overview || {}
+    accountUsageGeneratedAt.value = data.generatedAt || ''
+  } else {
+    showToast(response.error || '加载账号使用详情失败', 'error')
  }
+  accountUsageLoading.value = false
 }

 const closeAccountUsageModal = () => {
@@ -2459,7 +2484,16 @@ const closeAccountUsageModal = () => {
 }

 // 测试账户连通性相关函数
-const supportedTestPlatforms = ['claude', 'claude-console']
+const supportedTestPlatforms = [
+  'claude',
+  'claude-console',
+  'bedrock',
+  'gemini',
+  'openai-responses',
+  'azure-openai',
+  'droid',
+  'ccr'
+]

 const canTestAccount = (account) => {
  return !!account && supportedTestPlatforms.includes(account.platform)
@@ -2947,27 +2981,9 @@ const loadAccounts = async (forceReload = false) => {
    })

    if (openaiResponsesRaw.length > 0) {
-      let autoRecoveryConfigMap = {}
-      try {
-        const configsRes = await apiClient.get(
-          '/admin/openai-responses-accounts/auto-recovery-configs'
-        )
-        if (configsRes.success && Array.isArray(configsRes.data)) {
-          autoRecoveryConfigMap = configsRes.data.reduce((map, config) => {
-            if (config?.accountId) {
-              map[config.accountId] = config
-            }
-            return map
-          }, {})
-        }
-      } catch (error) {
-        console.debug('Failed to load auto-recovery configs:', error)
-      }
-
      const responsesAccounts = openaiResponsesRaw.map((acc) => {
        const boundApiKeysCount = counts.openaiAccountId?.[`responses:${acc.id}`] || 0
-        const autoRecoveryConfig = autoRecoveryConfigMap[acc.id] || acc.autoRecoveryConfig || null
-        return { ...acc, platform: 'openai-responses', boundApiKeysCount, autoRecoveryConfig }
+        return { ...acc, platform: 'openai-responses', boundApiKeysCount }
      })

      allAccounts.push(...responsesAccounts)
@@ -3019,24 +3035,15 @@ const loadAccounts = async (forceReload = false) => {

 // 异步加载 Claude 账户的 Usage 数据
 const loadClaudeUsage = async () => {
-  try {
-    const response = await apiClient.get('/admin/claude-accounts/usage')
-    if (response.success && response.data) {
-      const usageMap = response.data
-
-      // 更新账户列表中的 claudeUsage 数据
-      accounts.value = accounts.value.map((account) => {
-        if (account.platform === 'claude' && usageMap[account.id]) {
-          return {
-            ...account,
-            claudeUsage: usageMap[account.id]
-          }
-        }
-        return account
-      })
-    }
-  } catch (error) {
-    console.debug('Failed to load Claude usage data:', error)
+  const response = await httpApi.getClaudeAccountsUsage()
+  if (response.success && response.data) {
+    const usageMap = response.data
+    accounts.value = accounts.value.map((account) => {
+      if (account.platform === 'claude' && usageMap[account.id]) {
+        return { ...account, claudeUsage: usageMap[account.id] }
+      }
+      return account
+    })
  }
 }

@@ -3104,53 +3111,31 @@ const clearSearch = () => {

 // 加载绑定计数（轻量级接口，用于显示"绑定: X 个API Key"）
 const loadBindingCounts = async (forceReload = false) => {
-  if (!forceReload && bindingCountsLoaded.value) {
-    return // 使用缓存数据
-  }
-
-  try {
-    const response = await apiClient.get('/admin/accounts/binding-counts')
-    if (response.success) {
-      bindingCounts.value = response.data || {}
-      bindingCountsLoaded.value = true
-    }
-  } catch (error) {
-    // 静默处理错误，绑定计数显示为 0
-    bindingCounts.value = {}
+  if (!forceReload && bindingCountsLoaded.value) return
+  const response = await httpApi.getAccountsBindingCounts()
+  if (response.success) {
+    bindingCounts.value = response.data || {}
+    bindingCountsLoaded.value = true
  }
 }

 // 加载API Keys列表（保留用于其他功能，如删除账户时显示绑定信息）
 const loadApiKeys = async (forceReload = false) => {
-  if (!forceReload && apiKeysLoaded.value) {
-    return // 使用缓存数据
-  }
-
-  try {
-    const response = await apiClient.get('/admin/api-keys')
-    if (response.success) {
-      apiKeys.value = response.data?.items || response.data || []
-      apiKeysLoaded.value = true
-    }
-  } catch (error) {
-    // 静默处理错误
+  if (!forceReload && apiKeysLoaded.value) return
+  const response = await httpApi.getApiKeys()
+  if (response.success) {
+    apiKeys.value = response.data?.items || response.data || []
+    apiKeysLoaded.value = true
  }
 }

 // 加载账户分组列表（缓存版本）
 const loadAccountGroups = async (forceReload = false) => {
-  if (!forceReload && groupsLoaded.value) {
-    return // 使用缓存数据
-  }
-
-  try {
-    const response = await apiClient.get('/admin/account-groups')
-    if (response.success) {
-      accountGroups.value = response.data || []
-      groupsLoaded.value = true
-    }
-  } catch (error) {
-    // 静默处理错误
+  if (!forceReload && groupsLoaded.value) return
+  const response = await httpApi.getAccountGroups()
+  if (response.success) {
+    accountGroups.value = response.data || []
+    groupsLoaded.value = true
  }
 }

@@ -3435,20 +3420,10 @@ const resolveAccountDeleteEndpoint = (account) => {

 const performAccountDeletion = async (account) => {
  const endpoint = resolveAccountDeleteEndpoint(account)
-  if (!endpoint) {
-    return { success: false, message: '不支持的账户类型' }
-  }
-
-  try {
-    const data = await apiClient.delete(endpoint)
-    if (data.success) {
-      return { success: true, data }
-    }
-    return { success: false, message: data.message || '删除失败' }
-  } catch (error) {
-    const message = error.response?.data?.message || error.message || '删除失败'
-    return { success: false, message }
-  }
+  if (!endpoint) return { success: false, message: '不支持的账户类型' }
+  const data = await httpApi.deleteAccountByEndpoint(endpoint)
+  if (data.success) return { success: true, data }
+  return { success: false, message: data.message || '删除失败' }
 }

 // 删除账户
@@ -3579,17 +3554,13 @@ const batchDeleteAccounts = async () => {
 const resetAccountStatus = async (account) => {
  if (account.isResetting) return

-  let confirmed = false
-  if (window.showConfirm) {
-    confirmed = await window.showConfirm(
-      '重置账户状态',
-      '确定要重置此账户的所有异常状态吗？这将清除限流状态、401错误计数等所有异常标记。',
-      '确定重置',
-      '取消'
-    )
-  } else {
-    confirmed = confirm('确定要重置此账户的所有异常状态吗？')
-  }
+  const confirmed = await showConfirm(
+    '重置账户状态',
+    '确定要重置此账户的所有异常状态吗？这将清除限流状态、401错误计数等所有异常标记。',
+    '确定重置',
+    '取消',
+    'warning'
+  )

  if (!confirmed) return

@@ -3620,18 +3591,16 @@ const resetAccountStatus = async (account) => {
      return
    }

-    const data = await apiClient.post(endpoint)
-
+    const data = await httpApi.testAccountByEndpoint(endpoint)
    if (data.success) {
      showToast('账户状态已重置', 'success')
-      // 强制刷新，绕过前端缓存，确保最终一致性
      loadAccounts(true)
    } else {
      showToast(data.message || '状态重置失败', 'error')
    }
+    account.isResetting = false
  } catch (error) {
-    showToast('状态重置失败', 'error')
-  } finally {
+    showToast(error.message || '状态重置失败', 'error')
    account.isResetting = false
  }
 }
@@ -3639,49 +3608,43 @@ const resetAccountStatus = async (account) => {
 // 切换调度状态
 const toggleSchedulable = async (account) => {
  if (account.isTogglingSchedulable) return
+  account.isTogglingSchedulable = true

-  try {
-    account.isTogglingSchedulable = true
-
-    let endpoint
-    if (account.platform === 'claude') {
-      endpoint = `/admin/claude-accounts/${account.id}/toggle-schedulable`
-    } else if (account.platform === 'claude-console') {
-      endpoint = `/admin/claude-console-accounts/${account.id}/toggle-schedulable`
-    } else if (account.platform === 'bedrock') {
-      endpoint = `/admin/bedrock-accounts/${account.id}/toggle-schedulable`
-    } else if (account.platform === 'gemini') {
-      endpoint = `/admin/gemini-accounts/${account.id}/toggle-schedulable`
-    } else if (account.platform === 'openai') {
-      endpoint = `/admin/openai-accounts/${account.id}/toggle-schedulable`
-    } else if (account.platform === 'azure_openai') {
-      endpoint = `/admin/azure-openai-accounts/${account.id}/toggle-schedulable`
-    } else if (account.platform === 'openai-responses') {
-      endpoint = `/admin/openai-responses-accounts/${account.id}/toggle-schedulable`
-    } else if (account.platform === 'ccr') {
-      endpoint = `/admin/ccr-accounts/${account.id}/toggle-schedulable`
-    } else if (account.platform === 'droid') {
-      endpoint = `/admin/droid-accounts/${account.id}/toggle-schedulable`
-    } else if (account.platform === 'gemini-api') {
-      endpoint = `/admin/gemini-api-accounts/${account.id}/toggle-schedulable`
-    } else {
-      showToast('该账户类型暂不支持调度控制', 'warning')
-      return
-    }
-
-    const data = await apiClient.put(endpoint)
-
-    if (data.success) {
-      account.schedulable = data.schedulable
-      showToast(data.schedulable ? '已启用调度' : '已禁用调度', 'success')
-    } else {
-      showToast(data.message || '操作失败', 'error')
-    }
-  } catch (error) {
-    showToast('切换调度状态失败', 'error')
-  } finally {
+  let endpoint
+  if (account.platform === 'claude') {
+    endpoint = `/admin/claude-accounts/${account.id}/toggle-schedulable`
+  } else if (account.platform === 'claude-console') {
+    endpoint = `/admin/claude-console-accounts/${account.id}/toggle-schedulable`
+  } else if (account.platform === 'bedrock') {
+    endpoint = `/admin/bedrock-accounts/${account.id}/toggle-schedulable`
+  } else if (account.platform === 'gemini') {
+    endpoint = `/admin/gemini-accounts/${account.id}/toggle-schedulable`
+  } else if (account.platform === 'openai') {
+    endpoint = `/admin/openai-accounts/${account.id}/toggle-schedulable`
+  } else if (account.platform === 'azure_openai') {
+    endpoint = `/admin/azure-openai-accounts/${account.id}/toggle-schedulable`
+  } else if (account.platform === 'openai-responses') {
+    endpoint = `/admin/openai-responses-accounts/${account.id}/toggle-schedulable`
+  } else if (account.platform === 'ccr') {
+    endpoint = `/admin/ccr-accounts/${account.id}/toggle-schedulable`
+  } else if (account.platform === 'droid') {
+    endpoint = `/admin/droid-accounts/${account.id}/toggle-schedulable`
+  } else if (account.platform === 'gemini-api') {
+    endpoint = `/admin/gemini-api-accounts/${account.id}/toggle-schedulable`
+  } else {
+    showToast('该账户类型暂不支持调度控制', 'warning')
    account.isTogglingSchedulable = false
+    return
  }
+
+  const data = await httpApi.toggleAccountStatus(endpoint)
+  if (data.success) {
+    account.schedulable = data.schedulable
+    showToast(data.schedulable ? '已启用调度' : '已禁用调度', 'success')
+  } else {
+    showToast(data.message || '操作失败', 'error')
+  }
+  account.isTogglingSchedulable = false
 }

 // 处理创建成功
@@ -4479,29 +4442,18 @@ const handleSaveAccountExpiry = async ({ accountId, expiresAt }) => {
        return
    }

-    const data = await apiClient.put(endpoint, {
-      expiresAt: expiresAt || null
-    })
-
+    const data = await httpApi.updateAccountByEndpoint(endpoint, { expiresAt: expiresAt || null })
    if (data.success) {
      showToast('账户到期时间已更新', 'success')
-      // 更新本地数据
      account.expiresAt = expiresAt || null
      closeAccountExpiryEdit()
    } else {
      showToast(data.message || '更新失败', 'error')
-      // 重置保存状态
-      if (expiryEditModalRef.value) {
-        expiryEditModalRef.value.resetSaving()
-      }
+      if (expiryEditModalRef.value) expiryEditModalRef.value.resetSaving()
    }
  } catch (error) {
-    console.error('更新账户过期时间失败:', error)
-    showToast('更新失败', 'error')
-    // 重置保存状态
-    if (expiryEditModalRef.value) {
-      expiryEditModalRef.value.resetSaving()
-    }
+    showToast(error.message || '更新失败', 'error')
+    if (expiryEditModalRef.value) expiryEditModalRef.value.resetSaving()
  }
 }

@@ -4616,28 +4568,41 @@ onUnmounted(() => {
 }

 .dark .table-container::-webkit-scrollbar-track {
-  background: #374151;
+  background: var(--bg-gradient-mid);
 }

 .dark .table-container::-webkit-scrollbar-thumb {
-  background: #4b5563;
+  background: var(--bg-gradient-end);
 }

 .dark .table-container::-webkit-scrollbar-thumb:hover {
-  background: #6b7280;
+  background: var(--text-secondary);
 }

-/* 表格行样式 */
-.table-row {
-  transition: all 0.2s ease;
+/* 统一 hover 背景 - 所有 td 使用主题色 */
+.table-container tbody tr:hover > td {
+  background-color: rgba(var(--primary-rgb), 0.06) !important;
 }

-.table-row:hover {
-  background-color: rgba(0, 0, 0, 0.02);
+.dark .table-container tbody tr:hover > td {
+  background-color: rgba(var(--primary-rgb), 0.16) !important;
 }

-.dark .table-row:hover {
-  background-color: rgba(255, 255, 255, 0.02);
+/* 所有 td 的斑马纹背景 */
+.table-container tbody tr:nth-child(odd) > td {
+  background-color: #ffffff;
+}
+
+.table-container tbody tr:nth-child(even) > td {
+  background-color: #f9fafb;
+}
+
+.dark .table-container tbody tr:nth-child(odd) > td {
+  background-color: var(--bg-gradient-start);
+}
+
+.dark .table-container tbody tr:nth-child(even) > td {
+  background-color: var(--bg-gradient-mid);
 }

 /* 表头左侧固定列背景 - 使用纯色避免滚动时重叠 */
@@ -4649,7 +4614,7 @@ onUnmounted(() => {

 .dark .table-container thead .checkbox-column,
 .dark .table-container thead .name-column {
-  background: linear-gradient(to bottom, #374151, #1f2937);
+  background: linear-gradient(to bottom, var(--bg-gradient-mid), var(--bg-gradient-start));
 }

 /* 表头右侧操作列背景 - 使用纯色避免滚动时重叠 */
@@ -4659,39 +4624,7 @@ onUnmounted(() => {
 }

 .dark .table-container thead .operations-column {
-  background: linear-gradient(to bottom, #374151, #1f2937);
-}
-
-/* tbody 中的左侧固定列背景处理 - 使用纯色避免滚动时重叠 */
-.table-container tbody tr:nth-child(odd) .checkbox-column,
-.table-container tbody tr:nth-child(odd) .name-column {
-  background-color: #ffffff;
-}
-
-.table-container tbody tr:nth-child(even) .checkbox-column,
-.table-container tbody tr:nth-child(even) .name-column {
-  background-color: #f9fafb;
-}
-
-.dark .table-container tbody tr:nth-child(odd) .checkbox-column,
-.dark .table-container tbody tr:nth-child(odd) .name-column {
-  background-color: #1f2937;
-}
-
-.dark .table-container tbody tr:nth-child(even) .checkbox-column,
-.dark .table-container tbody tr:nth-child(even) .name-column {
-  background-color: #374151;
-}
-
-/* hover 状态下的左侧固定列背景 */
-.table-container tbody tr:hover .checkbox-column,
-.table-container tbody tr:hover .name-column {
-  background-color: #eff6ff;
-}
-
-.dark .table-container tbody tr:hover .checkbox-column,
-.dark .table-container tbody tr:hover .name-column {
-  background-color: #1e3a5f;
+  background: linear-gradient(to bottom, var(--bg-gradient-mid), var(--bg-gradient-start));
 }

 /* 名称列右侧阴影（分隔效果） */
@@ -4703,32 +4636,6 @@ onUnmounted(() => {
  box-shadow: 8px 0 12px -8px rgba(30, 41, 59, 0.45);
 }

-/* tbody 中的操作列背景处理 - 使用纯色避免滚动时重叠 */
-.table-container tbody tr:nth-child(odd) .operations-column {
-  background-color: #ffffff;
-}
-
-.table-container tbody tr:nth-child(even) .operations-column {
-  background-color: #f9fafb;
-}
-
-.dark .table-container tbody tr:nth-child(odd) .operations-column {
-  background-color: #1f2937;
-}
-
-.dark .table-container tbody tr:nth-child(even) .operations-column {
-  background-color: #374151;
-}
-
-/* hover 状态下的操作列背景 */
-.table-container tbody tr:hover .operations-column {
-  background-color: #eff6ff;
-}
-
-.dark .table-container tbody tr:hover .operations-column {
-  background-color: #1e3a5f;
-}
-
 /* 操作列左侧阴影 */
 .table-container tbody .operations-column {
  box-shadow: -8px 0 12px -8px rgba(15, 23, 42, 0.16);
--- a/web/admin-spa/src/views/ApiKeyUsageRecordsView.vue
+++ b/web/admin-spa/src/views/ApiKeyUsageRecordsView.vue
@@ -295,9 +295,9 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import dayjs from 'dayjs'
 import { useRoute, useRouter } from 'vue-router'
-import { apiClient } from '@/config/api'
-import { showToast } from '@/utils/toast'
-import { formatNumber } from '@/utils/format'
+import * as httpApi from '@/utils/http_apis'
+import { showToast } from '@/utils/tools'
+import { formatNumber } from '@/utils/tools'
 import RecordDetailModal from '@/components/apikeys/RecordDetailModal.vue'

 const route = useRoute()
@@ -410,7 +410,7 @@ const syncResponseState = (data) => {
 const fetchRecords = async (page = pagination.currentPage) => {
  loading.value = true
  try {
-    const response = await apiClient.get(`/admin/api-keys/${keyId.value}/usage-records`, {
+    const response = await httpApi.get(`/admin/api-keys/${keyId.value}/usage-records`, {
      params: buildParams(page)
    })
    syncResponseState(response.data || {})
@@ -465,7 +465,7 @@ const exportCsv = async () => {
    const maxPages = 50 // 50 * 200 = 10000，超过后端 5000 上限已足够

    while (page <= totalPages && page <= maxPages) {
-      const response = await apiClient.get(`/admin/api-keys/${keyId.value}/usage-records`, {
+      const response = await httpApi.get(`/admin/api-keys/${keyId.value}/usage-records`, {
        params: { ...buildParams(page), pageSize: 200 }
      })
      const payload = response.data || {}
--- a/web/admin-spa/src/views/ApiKeysView.vue
+++ b/web/admin-spa/src/views/ApiKeysView.vue
@@ -425,16 +425,13 @@
                  </tr>
                </thead>
                <tbody>
-                  <template v-for="(key, index) in paginatedApiKeys" :key="key.id">
+                  <template v-for="key in paginatedApiKeys" :key="key.id">
                    <!-- API Key 主行 - 添加斑马条纹和增强分隔 -->
                    <tr
                      :class="[
-                        'table-row transition-all duration-150',
-                        index % 2 === 0
-                          ? 'bg-white dark:bg-gray-800/40'
-                          : 'bg-gray-50/70 dark:bg-gray-700/30',
+                        'table-row',
                        'border-b-2 border-gray-200/80 dark:border-gray-700/50',
-                        'hover:bg-blue-50/60 hover:shadow-sm dark:hover:bg-blue-900/20'
+                        'hover:shadow-sm'
                      ]"
                    >
                      <td
@@ -458,8 +455,9 @@
                        <div class="min-w-0">
                          <!-- 名称 -->
                          <div
-                            class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
-                            :title="key.name"
+                            class="cursor-pointer truncate text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
+                            title="点击复制"
+                            @click.stop="copyText(key.name)"
                          >
                            {{ key.name }}
                          </div>
@@ -1265,7 +1263,11 @@
                    @change="updateSelectAllState"
                  />
                  <div>
-                    <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                    <h4
+                      class="cursor-pointer text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
+                      title="点击复制"
+                      @click.stop="copyText(key.name)"
+                    >
                      {{ key.name }}
                    </h4>
                    <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
@@ -1854,8 +1856,9 @@
                          </div>
                          <div class="min-w-0">
                            <div
-                              class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
-                              :title="key.name"
+                              class="cursor-pointer truncate text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
+                              title="点击复制"
+                              @click.stop="copyText(key.name)"
                            >
                              {{ key.name }}
                            </div>
@@ -2114,14 +2117,26 @@
      @close="showUsageDetailModal = false"
      @open-timeline="openTimeline"
    />
+
+    <ConfirmModal
+      :cancel-text="confirmModalConfig.cancelText"
+      :confirm-text="confirmModalConfig.confirmText"
+      :message="confirmModalConfig.message"
+      :show="showConfirmModal"
+      :title="confirmModalConfig.title"
+      :type="confirmModalConfig.type"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+    />
  </div>
 </template>

 <script setup>
 import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { showToast } from '@/utils/toast'
-import { apiClient } from '@/config/api'
+import { showToast } from '@/utils/tools'
+import { copyText } from '@/utils/tools'
+import * as httpApi from '@/utils/http_apis'
 import { useAuthStore } from '@/stores/auth'
 import * as XLSX from 'xlsx-js-style'
 import CreateApiKeyModal from '@/components/apikeys/CreateApiKeyModal.vue'
@@ -2135,6 +2150,7 @@ import UsageDetailModal from '@/components/apikeys/UsageDetailModal.vue'
 import LimitProgressBar from '@/components/apikeys/LimitProgressBar.vue'
 import CustomDropdown from '@/components/common/CustomDropdown.vue'
 import ActionDropdown from '@/components/common/ActionDropdown.vue'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'

 // 响应式数据
 const router = useRouter()
@@ -2304,6 +2320,39 @@ const renewingApiKey = ref(null)
 const newApiKeyData = ref(null)
 const batchApiKeyData = ref([])

+// ConfirmModal 状态
+const showConfirmModal = ref(false)
+const confirmModalConfig = ref({
+  title: '',
+  message: '',
+  type: 'primary',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+const confirmResolve = ref(null)
+
+const showConfirm = (
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'primary'
+) => {
+  return new Promise((resolve) => {
+    confirmModalConfig.value = { title, message, confirmText, cancelText, type }
+    confirmResolve.value = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirm = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(true)
+}
+const handleCancel = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(false)
+}
+
 // 计算排序后的API Keys（现在由后端处理，这里直接返回）
 const sortedApiKeys = computed(() => {
  // 后端已经处理了筛选、搜索和排序，直接返回
@@ -2396,15 +2445,15 @@ const loadAccounts = async (forceRefresh = false) => {
      droidData,
      groupsData
    ] = await Promise.all([
-      apiClient.get('/admin/claude-accounts'),
-      apiClient.get('/admin/claude-console-accounts'),
-      apiClient.get('/admin/gemini-accounts'),
-      apiClient.get('/admin/gemini-api-accounts'), // 加载 Gemini-API 账号
-      apiClient.get('/admin/openai-accounts'),
-      apiClient.get('/admin/openai-responses-accounts'), // 加载 OpenAI-Responses 账号
-      apiClient.get('/admin/bedrock-accounts'),
-      apiClient.get('/admin/droid-accounts'),
-      apiClient.get('/admin/account-groups')
+      httpApi.getClaudeAccounts(),
+      httpApi.getClaudeConsoleAccounts(),
+      httpApi.getGeminiAccounts(),
+      httpApi.getGeminiApiAccounts(),
+      httpApi.getOpenAIAccounts(),
+      httpApi.getOpenAIResponsesAccounts(),
+      httpApi.getBedrockAccounts(),
+      httpApi.getDroidAccounts(),
+      httpApi.getAccountGroups()
    ])

    // 合并Claude OAuth账户和Claude Console账户
@@ -2510,7 +2559,7 @@ const loadAccounts = async (forceRefresh = false) => {
 // 加载已使用的模型列表
 const loadUsedModels = async () => {
  try {
-    const data = await apiClient.get('/admin/api-keys/used-models')
+    const data = await httpApi.get('/admin/api-keys/used-models')
    if (data.success) {
      availableModels.value = data.data || []
    }
@@ -2599,7 +2648,7 @@ const loadApiKeys = async (clearStatsCache = true) => {
      params.set('timeRange', globalDateFilter.preset)
    }

-    const data = await apiClient.get(`/admin/api-keys?${params.toString()}`)
+    const data = await httpApi.getApiKeysWithParams(params.toString())
    if (data.success) {
      // 更新数据
      apiKeys.value = data.data?.items || []
@@ -2680,7 +2729,7 @@ const loadPageStats = async () => {
      requestBody.endDate = endDate
    }

-    const response = await apiClient.post('/admin/api-keys/batch-stats', requestBody)
+    const response = await httpApi.post('/admin/api-keys/batch-stats', requestBody)

    if (response.success && response.data) {
      // 更新缓存
@@ -2734,7 +2783,7 @@ const loadPageLastUsage = async () => {
  keyIds.forEach((id) => lastUsageLoading.value.add(id))

  try {
-    const response = await apiClient.post('/admin/api-keys/batch-last-usage', { keyIds })
+    const response = await httpApi.post('/admin/api-keys/batch-last-usage', { keyIds })

    if (response.success && response.data) {
      // 更新缓存
@@ -2765,7 +2814,7 @@ const loadDeletedApiKeys = async () => {
  activeTab.value = 'deleted'
  deletedApiKeysLoading.value = true
  try {
-    const data = await apiClient.get('/admin/api-keys/deleted')
+    const data = await httpApi.get('/admin/api-keys/deleted')
    if (data.success) {
      deletedApiKeys.value = data.apiKeys || []
    }
@@ -2844,7 +2893,7 @@ let costSortStatusTimer = null
 // 获取费用排序索引状态
 const fetchCostSortStatus = async () => {
  try {
-    const data = await apiClient.get('/admin/api-keys/cost-sort-status')
+    const data = await httpApi.get('/admin/api-keys/cost-sort-status')
    if (data.success) {
      costSortStatus.value = data.data || {}

@@ -3193,7 +3242,7 @@ const loadApiKeyModelStats = async (keyId, forceReload = false) => {

    url += '?' + params.toString()

-    const data = await apiClient.get(url)
+    const data = await httpApi.get(url)
    if (data.success) {
      apiKeyModelStats.value[keyId] = data.data || []
    }
@@ -3845,27 +3894,19 @@ const toggleApiKeyStatus = async (key) => {

  // 禁用时需要二次确认
  if (key.isActive) {
-    if (window.showConfirm) {
-      confirmed = await window.showConfirm(
-        '禁用 API Key',
-        `确定要禁用 API Key "${key.name}" 吗？禁用后所有使用此 Key 的请求将返回 401 错误。`,
-        '确定禁用',
-        '取消'
-      )
-    } else {
-      // 降级方案
-      confirmed = confirm(
-        `确定要禁用 API Key "${key.name}" 吗？禁用后所有使用此 Key 的请求将返回 401 错误。`
-      )
-    }
+    confirmed = await showConfirm(
+      '禁用 API Key',
+      `确定要禁用 API Key "${key.name}" 吗？禁用后所有使用此 Key 的请求将返回 401 错误。`,
+      '确定禁用',
+      '取消',
+      'warning'
+    )
  }

  if (!confirmed) return

  try {
-    const data = await apiClient.put(`/admin/api-keys/${key.id}`, {
-      isActive: !key.isActive
-    })
+    const data = await httpApi.updateApiKey(key.id, { isActive: !key.isActive })

    if (data.success) {
      showToast(`API Key 已${key.isActive ? '禁用' : '激活'}`, 'success')
@@ -3885,24 +3926,18 @@ const toggleApiKeyStatus = async (key) => {
 // 更新API Key图标
 // 删除API Key
 const deleteApiKey = async (keyId) => {
-  let confirmed = false
-
-  if (window.showConfirm) {
-    confirmed = await window.showConfirm(
-      '删除 API Key',
-      '确定要删除这个 API Key 吗？此操作不可恢复。',
-      '确定删除',
-      '取消'
-    )
-  } else {
-    // 降级方案
-    confirmed = confirm('确定要删除这个 API Key 吗？此操作不可恢复。')
-  }
+  const confirmed = await showConfirm(
+    '删除 API Key',
+    '确定要删除这个 API Key 吗？此操作不可恢复。',
+    '确定删除',
+    '取消',
+    'danger'
+  )

  if (!confirmed) return

  try {
-    const data = await apiClient.delete(`/admin/api-keys/${keyId}`)
+    const data = await httpApi.deleteApiKey(keyId)
    if (data.success) {
      showToast('API Key 已删除', 'success')
      // 从选中列表中移除
@@ -3922,24 +3957,18 @@ const deleteApiKey = async (keyId) => {

 // 恢复API Key
 const restoreApiKey = async (keyId) => {
-  let confirmed = false
-
-  if (window.showConfirm) {
-    confirmed = await window.showConfirm(
-      '恢复 API Key',
-      '确定要恢复这个 API Key 吗？恢复后可以重新使用。',
-      '确定恢复',
-      '取消'
-    )
-  } else {
-    // 降级方案
-    confirmed = confirm('确定要恢复这个 API Key 吗？恢复后可以重新使用。')
-  }
+  const confirmed = await showConfirm(
+    '恢复 API Key',
+    '确定要恢复这个 API Key 吗？恢复后可以重新使用。',
+    '确定恢复',
+    '取消',
+    'primary'
+  )

  if (!confirmed) return

  try {
-    const data = await apiClient.post(`/admin/api-keys/${keyId}/restore`)
+    const data = await httpApi.restoreApiKey(keyId)
    if (data.success) {
      showToast('API Key 已成功恢复', 'success')
      // 刷新已删除列表
@@ -3956,24 +3985,18 @@ const restoreApiKey = async (keyId) => {

 // 彻底删除API Key
 const permanentDeleteApiKey = async (keyId) => {
-  let confirmed = false
-
-  if (window.showConfirm) {
-    confirmed = await window.showConfirm(
-      '彻底删除 API Key',
-      '确定要彻底删除这个 API Key 吗？此操作不可恢复，所有相关数据将被永久删除。',
-      '确定彻底删除',
-      '取消'
-    )
-  } else {
-    // 降级方案
-    confirmed = confirm('确定要彻底删除这个 API Key 吗？此操作不可恢复，所有相关数据将被永久删除。')
-  }
+  const confirmed = await showConfirm(
+    '彻底删除 API Key',
+    '确定要彻底删除这个 API Key 吗？此操作不可恢复，所有相关数据将被永久删除。',
+    '确定彻底删除',
+    '取消',
+    'danger'
+  )

  if (!confirmed) return

  try {
-    const data = await apiClient.delete(`/admin/api-keys/${keyId}/permanent`)
+    const data = await httpApi.permanentDeleteApiKey(keyId)
    if (data.success) {
      showToast('API Key 已彻底删除', 'success')
      // 刷新已删除列表
@@ -3994,24 +4017,18 @@ const clearAllDeletedApiKeys = async () => {
    return
  }

-  let confirmed = false
-
-  if (window.showConfirm) {
-    confirmed = await window.showConfirm(
-      '清空所有已删除的 API Keys',
-      `确定要彻底删除全部 ${count} 个已删除的 API Keys 吗？此操作不可恢复，所有相关数据将被永久删除。`,
-      '确定清空全部',
-      '取消'
-    )
-  } else {
-    // 降级方案
-    confirmed = confirm(`确定要彻底删除全部 ${count} 个已删除的 API Keys 吗？此操作不可恢复。`)
-  }
+  const confirmed = await showConfirm(
+    '清空所有已删除的 API Keys',
+    `确定要彻底删除全部 ${count} 个已删除的 API Keys 吗？此操作不可恢复，所有相关数据将被永久删除。`,
+    '确定清空全部',
+    '取消',
+    'danger'
+  )

  if (!confirmed) return

  try {
-    const data = await apiClient.delete('/admin/api-keys/deleted/clear-all')
+    const data = await httpApi.del('/admin/api-keys/deleted/clear-all')
    if (data.success) {
      showToast(data.message || '已清空所有已删除的 API Keys', 'success')

@@ -4040,21 +4057,20 @@ const batchDeleteApiKeys = async () => {
    return
  }

-  let confirmed = false
-  const message = `确定要删除选中的 ${selectedCount} 个 API Key 吗？此操作不可恢复。`
-
-  if (window.showConfirm) {
-    confirmed = await window.showConfirm('批量删除 API Keys', message, '确定删除', '取消')
-  } else {
-    confirmed = confirm(message)
-  }
+  const confirmed = await showConfirm(
+    '批量删除 API Keys',
+    `确定要删除选中的 ${selectedCount} 个 API Key 吗？此操作不可恢复。`,
+    '确定删除',
+    '取消',
+    'danger'
+  )

  if (!confirmed) return

  const keyIds = [...selectedApiKeys.value]

  try {
-    const data = await apiClient.delete('/admin/api-keys/batch', {
+    const data = await httpApi.del('/admin/api-keys/batch', {
      data: { keyIds }
    })

@@ -4136,7 +4152,7 @@ const closeExpiryEdit = () => {
 const handleSaveExpiry = async ({ keyId, expiresAt, activateNow }) => {
  try {
    // 使用新的PATCH端点来修改过期时间
-    const data = await apiClient.patch(`/admin/api-keys/${keyId}/expiration`, {
+    const data = await httpApi.updateApiKeyExpiration(keyId, {
      expiresAt: expiresAt || null,
      activateNow: activateNow || false
    })
@@ -4873,27 +4889,41 @@ onUnmounted(() => {
 }

 .dark .table-container::-webkit-scrollbar-track {
-  background: #374151;
+  background: var(--bg-gradient-mid);
 }

 .dark .table-container::-webkit-scrollbar-thumb {
-  background: #4b5563;
+  background: var(--bg-gradient-end);
 }

 .dark .table-container::-webkit-scrollbar-thumb:hover {
-  background: #6b7280;
+  background: var(--text-secondary);
 }

-.table-row {
-  transition: background-color 0.2s ease;
+/* 统一 hover 背景 - 所有 td 使用主题色 */
+.table-container tbody tr:hover > td {
+  background-color: rgba(var(--primary-rgb), 0.06) !important;
 }

-.table-row:hover {
-  background-color: rgba(0, 0, 0, 0.02);
+.dark .table-container tbody tr:hover > td {
+  background-color: rgba(var(--primary-rgb), 0.16) !important;
 }

-.dark .table-row:hover {
-  background-color: rgba(255, 255, 255, 0.02);
+/* 所有 td 的斑马纹背景 */
+.table-container tbody tr:nth-child(odd) > td {
+  background-color: #ffffff;
+}
+
+.table-container tbody tr:nth-child(even) > td {
+  background-color: #f9fafb;
+}
+
+.dark .table-container tbody tr:nth-child(odd) > td {
+  background-color: var(--bg-gradient-start);
+}
+
+.dark .table-container tbody tr:nth-child(even) > td {
+  background-color: var(--bg-gradient-mid);
 }

 /* 固定操作列在右侧，兼容浅色和深色模式 */
@@ -4910,33 +4940,7 @@ onUnmounted(() => {
 }

 .dark .table-container thead .operations-column {
-  background: linear-gradient(to bottom, #374151, #1f2937);
-}
-
-/* tbody 中的操作列背景处理 - 使用纯色避免滚动时重叠 */
-.table-container tbody tr:nth-child(odd) .operations-column {
-  background-color: #ffffff;
-}
-
-.table-container tbody tr:nth-child(even) .operations-column {
-  background-color: #f9fafb;
-}
-
-.dark .table-container tbody tr:nth-child(odd) .operations-column {
-  background-color: #1f2937;
-}
-
-.dark .table-container tbody tr:nth-child(even) .operations-column {
-  background-color: #374151;
-}
-
-/* hover 状态下的操作列背景 */
-.table-container tbody tr:hover .operations-column {
-  background-color: #eff6ff;
-}
-
-.dark .table-container tbody tr:hover .operations-column {
-  background-color: #1e3a5f;
+  background: linear-gradient(to bottom, var(--bg-gradient-mid), var(--bg-gradient-start));
 }

 .table-container tbody .operations-column {
@@ -4963,39 +4967,7 @@ onUnmounted(() => {

 .dark .table-container thead .checkbox-column,
 .dark .table-container thead .name-column {
-  background: linear-gradient(to bottom, #374151, #1f2937);
-}
-
-/* tbody 中的左侧固定列背景处理 - 使用纯色避免滚动时重叠 */
-.table-container tbody tr:nth-child(odd) .checkbox-column,
-.table-container tbody tr:nth-child(odd) .name-column {
-  background-color: #ffffff;
-}
-
-.table-container tbody tr:nth-child(even) .checkbox-column,
-.table-container tbody tr:nth-child(even) .name-column {
-  background-color: #f9fafb;
-}
-
-.dark .table-container tbody tr:nth-child(odd) .checkbox-column,
-.dark .table-container tbody tr:nth-child(odd) .name-column {
-  background-color: #1f2937;
-}
-
-.dark .table-container tbody tr:nth-child(even) .checkbox-column,
-.dark .table-container tbody tr:nth-child(even) .name-column {
-  background-color: #374151;
-}
-
-/* hover 状态下的左侧固定列背景 */
-.table-container tbody tr:hover .checkbox-column,
-.table-container tbody tr:hover .name-column {
-  background-color: #eff6ff;
-}
-
-.dark .table-container tbody tr:hover .checkbox-column,
-.dark .table-container tbody tr:hover .name-column {
-  background-color: #1e3a5f;
+  background: linear-gradient(to bottom, var(--bg-gradient-mid), var(--bg-gradient-start));
 }

 /* 名称列右侧阴影（分隔效果） */
--- a/web/admin-spa/src/views/ApiStatsView.vue
+++ b/web/admin-spa/src/views/ApiStatsView.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="min-h-screen p-4 md:p-6" :class="isDarkMode ? 'gradient-bg-dark' : 'gradient-bg'">
+  <div
+    class="min-h-screen p-2 sm:p-4 md:p-6"
+    :class="isDarkMode ? 'gradient-bg-dark' : 'gradient-bg'"
+  >
    <!-- 顶部导航 -->
-    <div class="glass-strong mb-6 rounded-3xl p-4 shadow-xl md:mb-8 md:p-6">
-      <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
+    <div
+      class="glass-strong mb-4 rounded-2xl p-3 shadow-xl sm:mb-6 sm:rounded-3xl sm:p-4 md:mb-8 md:p-6"
+    >
+      <div class="flex flex-col items-center justify-between gap-3 sm:gap-4 md:flex-row">
        <LogoTitle
          :loading="oemLoading"
          :logo-src="oemSettings.siteIconData || oemSettings.siteIcon"
@@ -44,10 +49,10 @@
    </div>

    <!-- Tab 切换 -->
-    <div class="mb-6 md:mb-8">
+    <div class="mb-4 sm:mb-6 md:mb-8">
      <div class="flex justify-center">
        <div
-          class="inline-flex w-full max-w-md rounded-full border border-white/20 bg-white/10 p-1 shadow-lg backdrop-blur-xl md:w-auto"
+          class="inline-flex w-full max-w-md rounded-full border border-white/20 bg-white/10 p-1 shadow-lg backdrop-blur-xl sm:w-auto"
        >
          <button
            :class="['tab-pill-button', currentTab === 'stats' ? 'active' : '']"
@@ -73,7 +78,7 @@
      <ApiKeyInput />

      <!-- 错误提示 -->
-      <div v-if="error" class="mb-6 md:mb-8">
+      <div v-if="error" class="mb-4 sm:mb-6 md:mb-8">
        <div
          class="rounded-xl border border-red-500/30 bg-red-500/20 p-3 text-sm text-red-800 backdrop-blur-sm dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-200 md:p-4 md:text-base"
        >
@@ -84,11 +89,13 @@

      <!-- 统计数据展示区域 -->
      <div v-if="statsData" class="fade-in">
-        <div class="glass-strong rounded-3xl p-4 shadow-xl md:p-6">
+        <div class="glass-strong rounded-2xl p-3 shadow-xl sm:rounded-3xl sm:p-4 md:p-6">
          <!-- 时间范围选择器 -->
-          <div class="mb-4 border-b border-gray-200 pb-4 dark:border-gray-700 md:mb-6 md:pb-6">
+          <div
+            class="mb-3 border-b border-gray-200 pb-3 dark:border-gray-700 sm:mb-4 sm:pb-4 md:mb-6 md:pb-6"
+          >
            <div
-              class="flex flex-col items-start justify-between gap-3 md:flex-row md:items-center md:gap-4"
+              class="flex flex-col items-start justify-between gap-2 sm:gap-3 md:flex-row md:items-center md:gap-4"
            >
              <div class="flex items-center gap-2 md:gap-3">
                <i class="fas fa-clock text-base text-blue-500 md:text-lg" />
@@ -100,7 +107,7 @@
                <button
                  class="flex flex-1 items-center justify-center gap-1 px-4 py-2 text-xs font-medium md:flex-none md:gap-2 md:px-6 md:text-sm"
                  :class="['period-btn', { active: statsPeriod === 'daily' }]"
-                  :disabled="loading || modelStatsLoading"
+                  :disabled="loading"
                  @click="switchPeriod('daily')"
                >
                  <i class="fas fa-calendar-day text-xs md:text-sm" />
@@ -109,22 +116,71 @@
                <button
                  class="flex flex-1 items-center justify-center gap-1 px-4 py-2 text-xs font-medium md:flex-none md:gap-2 md:px-6 md:text-sm"
                  :class="['period-btn', { active: statsPeriod === 'monthly' }]"
-                  :disabled="loading || modelStatsLoading"
+                  :disabled="loading"
                  @click="switchPeriod('monthly')"
                >
                  <i class="fas fa-calendar-alt text-xs md:text-sm" />
                  本月
                </button>
-                <!-- 测试按钮 - 仅在单Key模式下显示 -->
                <button
-                  v-if="!multiKeyMode"
-                  class="test-btn flex items-center justify-center gap-1 px-4 py-2 text-xs font-medium md:gap-2 md:px-6 md:text-sm"
+                  class="flex flex-1 items-center justify-center gap-1 px-4 py-2 text-xs font-medium md:flex-none md:gap-2 md:px-6 md:text-sm"
+                  :class="['period-btn', { active: statsPeriod === 'alltime' }]"
                  :disabled="loading"
-                  @click="openTestModal"
+                  @click="switchPeriod('alltime')"
                >
-                  <i class="fas fa-vial text-xs md:text-sm" />
-                  测试
+                  <i class="fas fa-infinity text-xs md:text-sm" />
+                  全部
                </button>
+                <!-- 测试按钮下拉菜单 - 仅在单Key模式下显示 -->
+                <div v-if="!multiKeyMode" class="relative">
+                  <button
+                    :class="[
+                      'test-btn flex items-center justify-center gap-1 px-4 py-2 text-xs font-medium md:gap-2 md:px-6 md:text-sm',
+                      !hasAnyTestPermission ? 'cursor-not-allowed opacity-50' : ''
+                    ]"
+                    :disabled="loading || !hasAnyTestPermission"
+                    :title="
+                      hasAnyTestPermission
+                        ? '测试 API'
+                        : `当前 Key 可用服务: ${availableServicesText}`
+                    "
+                    @click="toggleTestMenu"
+                  >
+                    <i class="fas fa-vial text-xs md:text-sm" />
+                    测试
+                    <i class="fas fa-chevron-down ml-1 text-xs" />
+                  </button>
+                  <!-- 下拉菜单 -->
+                  <div
+                    v-if="showTestMenu"
+                    class="absolute right-0 top-full z-50 mt-1 min-w-[140px] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+                  >
+                    <button
+                      v-if="canTestClaude"
+                      class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                      @click="openTestModal('claude')"
+                    >
+                      <i class="fas fa-robot text-orange-500" />
+                      Claude
+                    </button>
+                    <button
+                      v-if="canTestGemini"
+                      class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                      @click="openTestModal('gemini')"
+                    >
+                      <i class="fas fa-gem text-blue-500" />
+                      Gemini
+                    </button>
+                    <button
+                      v-if="canTestOpenAI"
+                      class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                      @click="openTestModal('openai')"
+                    >
+                      <i class="fas fa-code text-green-500" />
+                      Codex
+                    </button>
+                  </div>
+                </div>
              </div>
            </div>
          </div>
@@ -134,7 +190,7 @@

          <!-- Token 分布和限制配置 -->
          <div
-            class="mb-6 mt-6 grid grid-cols-1 gap-4 md:mb-8 md:mt-8 md:gap-6 xl:grid-cols-2 xl:items-stretch"
+            class="mb-4 mt-4 grid grid-cols-1 gap-3 sm:mb-6 sm:mt-6 sm:gap-4 md:mb-8 md:mt-8 md:gap-6 xl:grid-cols-2 xl:items-stretch"
          >
            <TokenDistribution class="h-full" />
            <template v-if="multiKeyMode">
@@ -145,8 +201,15 @@
            </template>
          </div>

-          <!-- 模型使用统计 -->
-          <ModelUsageStats />
+          <!-- 服务费用统计卡片 -->
+          <ServiceCostCards class="mb-4 sm:mb-6" />
+
+          <!-- 模型使用统计 - 三个时间段 -->
+          <div class="space-y-4 sm:space-y-6">
+            <ModelUsageStats period="daily" />
+            <ModelUsageStats period="monthly" />
+            <ModelUsageStats period="alltime" />
+          </div>
        </div>
      </div>
    </div>
@@ -162,9 +225,56 @@
    <ApiKeyTestModal
      :api-key-name="statsData?.name || ''"
      :api-key-value="apiKey"
+      :service-type="testServiceType"
      :show="showTestModal"
      @close="closeTestModal"
    />
+
+    <!-- API Stats 通知弹框 -->
+    <Teleport to="body">
+      <Transition name="fade">
+        <div
+          v-if="showNotice"
+          class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+          @click.self="dismissNotice"
+        >
+          <div
+            class="w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl dark:bg-gray-800"
+            @click.stop
+          >
+            <div class="mb-4 flex items-center gap-3">
+              <div
+                class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 text-white"
+              >
+                <i class="fas fa-bell" />
+              </div>
+              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                {{ oemSettings.apiStatsNotice?.title || '通知' }}
+              </h3>
+            </div>
+            <p
+              class="mb-4 whitespace-pre-wrap text-sm leading-relaxed text-gray-600 dark:text-gray-300"
+            >
+              {{ oemSettings.apiStatsNotice?.content }}
+            </p>
+            <label class="mb-4 flex cursor-pointer items-center gap-2">
+              <input
+                v-model="dontShowAgain"
+                class="h-4 w-4 rounded border-gray-300 text-blue-500 focus:ring-blue-500"
+                type="checkbox"
+              />
+              <span class="text-sm text-gray-600 dark:text-gray-400">本次会话不再显示</span>
+            </label>
+            <button
+              class="w-full rounded-xl bg-gradient-to-r from-blue-500 to-cyan-500 px-4 py-2.5 font-medium text-white transition-all hover:from-blue-600 hover:to-cyan-600"
+              @click="dismissNotice"
+            >
+              知道了
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
  </div>
 </template>

@@ -182,6 +292,7 @@ import TokenDistribution from '@/components/apistats/TokenDistribution.vue'
 import LimitConfig from '@/components/apistats/LimitConfig.vue'
 import AggregatedStatsCard from '@/components/apistats/AggregatedStatsCard.vue'
 import ModelUsageStats from '@/components/apistats/ModelUsageStats.vue'
+import ServiceCostCards from '@/components/apistats/ServiceCostCards.vue'
 import TutorialView from './TutorialView.vue'
 import ApiKeyTestModal from '@/components/apikeys/ApiKeyTestModal.vue'

@@ -199,7 +310,6 @@ const {
  apiKey,
  apiId,
  loading,
-  modelStatsLoading,
  oemLoading,
  error,
  statsPeriod,
@@ -208,13 +318,77 @@ const {
  multiKeyMode
 } = storeToRefs(apiStatsStore)

-const { queryStats, switchPeriod, loadStatsWithApiId, loadOemSettings, reset } = apiStatsStore
+const {
+  queryStats,
+  switchPeriod,
+  loadStatsWithApiId,
+  loadOemSettings,
+  loadServiceRates,
+  loadApiKeyFromStorage,
+  reset
+} = apiStatsStore

 // 测试弹窗状态
 const showTestModal = ref(false)
+const showTestMenu = ref(false)
+const testServiceType = ref('claude')
+
+// 通知弹框状态
+const showNotice = ref(false)
+const dontShowAgain = ref(false)
+const NOTICE_STORAGE_KEY = 'apiStatsNoticeRead'
+
+// 检查是否可以测试 Claude（权限包含 claude 或 all）
+const canTestClaude = computed(() => {
+  const permissions = statsData.value?.permissions
+  if (!permissions) return true // 默认允许
+  return permissions === 'all' || permissions.includes('claude')
+})
+
+// 检查是否可以测试 Gemini
+const canTestGemini = computed(() => {
+  const permissions = statsData.value?.permissions
+  if (!permissions) return true
+  return permissions === 'all' || permissions.includes('gemini')
+})
+
+// 检查是否可以测试 OpenAI
+const canTestOpenAI = computed(() => {
+  const permissions = statsData.value?.permissions
+  if (!permissions) return true
+  return permissions === 'all' || permissions.includes('openai')
+})
+
+// 检查是否有任何测试权限
+const hasAnyTestPermission = computed(() => {
+  return canTestClaude.value || canTestGemini.value || canTestOpenAI.value
+})
+
+// 可用服务文本
+const availableServicesText = computed(() => {
+  const permissions = statsData.value?.permissions
+  if (!permissions || permissions === 'all') return '全部服务'
+  const serviceNames = {
+    claude: 'Claude',
+    gemini: 'Gemini',
+    openai: 'OpenAI',
+    droid: 'Droid'
+  }
+  return permissions
+    .split(',')
+    .map((s) => serviceNames[s.trim()] || s.trim())
+    .join(', ')
+})
+
+// 切换测试菜单
+const toggleTestMenu = () => {
+  showTestMenu.value = !showTestMenu.value
+}

 // 打开测试弹窗
-const openTestModal = () => {
+const openTestModal = (serviceType = 'claude') => {
+  testServiceType.value = serviceType
+  showTestMenu.value = false
  showTestModal.value = true
 }

@@ -223,6 +397,29 @@ const closeTestModal = () => {
  showTestModal.value = false
 }

+// 关闭通知弹框
+const dismissNotice = () => {
+  showNotice.value = false
+  if (dontShowAgain.value) {
+    sessionStorage.setItem(NOTICE_STORAGE_KEY, '1')
+  }
+}
+
+// 检查是否显示通知
+const checkNotice = () => {
+  const notice = oemSettings.value?.apiStatsNotice
+  if (notice?.enabled && notice?.content && !sessionStorage.getItem(NOTICE_STORAGE_KEY)) {
+    showNotice.value = true
+  }
+}
+
+// 点击外部关闭菜单
+const handleClickOutside = (event) => {
+  if (showTestMenu.value && !event.target.closest('.relative')) {
+    showTestMenu.value = false
+  }
+}
+
 // 处理键盘快捷键
 const handleKeyDown = (event) => {
  // Ctrl/Cmd + Enter 查询
@@ -240,14 +437,15 @@ const handleKeyDown = (event) => {
 }

 // 初始化
-onMounted(() => {
+onMounted(async () => {
  // API Stats Page loaded

  // 初始化主题（因为该页面不在 MainLayout 内）
  themeStore.initTheme()

-  // 加载 OEM 设置
-  loadOemSettings()
+  // 加载 OEM 设置和服务倍率
+  await Promise.all([loadOemSettings(), loadServiceRates()])
+  checkNotice()

  // 检查 URL 参数
  const urlApiId = route.query.apiId
@@ -259,19 +457,34 @@ onMounted(() => {
  ) {
    // 如果 URL 中有 apiId，直接使用 apiId 加载数据
    apiId.value = urlApiId
+    // 同时从 localStorage 填充 API Key 到输入框
+    const savedApiKey = loadApiKeyFromStorage()
+    if (savedApiKey) {
+      apiKey.value = savedApiKey
+    }
    loadStatsWithApiId()
  } else if (urlApiKey && urlApiKey.length > 10) {
    // 向后兼容，支持 apiKey 参数
    apiKey.value = urlApiKey
+  } else {
+    // 没有 URL 参数，检查 localStorage
+    const savedApiKey = loadApiKeyFromStorage()
+    if (savedApiKey && savedApiKey.length > 10) {
+      apiKey.value = savedApiKey
+      queryStats()
+    }
  }

  // 添加键盘事件监听
  document.addEventListener('keydown', handleKeyDown)
+  // 添加点击外部关闭菜单监听
+  document.addEventListener('click', handleClickOutside)
 })

 // 清理
 onUnmounted(() => {
  document.removeEventListener('keydown', handleKeyDown)
+  document.removeEventListener('click', handleClickOutside)
 })

 // 监听 API Key 变化
@@ -285,7 +498,12 @@ watch(apiKey, (newValue) => {
 <style scoped>
 /* 渐变背景 */
 .gradient-bg {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  background: linear-gradient(
+    135deg,
+    var(--bg-gradient-start) 0%,
+    var(--bg-gradient-mid) 50%,
+    var(--bg-gradient-end) 100%
+  );
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
@@ -293,7 +511,12 @@ watch(apiKey, (newValue) => {

 /* 暗色模式的渐变背景 */
 .gradient-bg-dark {
-  background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
+  background: linear-gradient(
+    135deg,
+    var(--bg-gradient-start) 0%,
+    var(--bg-gradient-mid) 50%,
+    var(--bg-gradient-end) 100%
+  );
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
@@ -307,9 +530,9 @@ watch(apiKey, (newValue) => {
  right: 0;
  bottom: 0;
  background:
-    radial-gradient(circle at 20% 80%, rgba(240, 147, 251, 0.2) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.2) 0%, transparent 50%),
-    radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
+    radial-gradient(circle at 20% 80%, rgba(var(--accent-rgb), 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(var(--primary-rgb), 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(var(--secondary-rgb), 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
 }
@@ -323,9 +546,9 @@ watch(apiKey, (newValue) => {
  right: 0;
  bottom: 0;
  background:
-    radial-gradient(circle at 20% 80%, rgba(100, 116, 139, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(71, 85, 105, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 40% 40%, rgba(30, 41, 59, 0.1) 0%, transparent 50%);
+    radial-gradient(circle at 20% 80%, rgba(var(--accent-rgb), 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(var(--primary-rgb), 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(var(--secondary-rgb), 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
 }
@@ -353,7 +576,7 @@ watch(apiKey, (newValue) => {

 /* 标题渐变 */
 .header-title {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
@@ -430,13 +653,13 @@ watch(apiKey, (newValue) => {

 /* 管理后台按钮 - 精致版本 */
 .admin-button-refined {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  text-decoration: none;
  box-shadow:
-    0 4px 12px rgba(102, 126, 234, 0.25),
+    0 4px 12px rgba(var(--primary-rgb), 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
@@ -460,16 +683,16 @@ watch(apiKey, (newValue) => {
  left: 0;
  right: 0;
  bottom: 0;
-  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
 }

 .admin-button-refined:hover {
  transform: translateY(-2px) scale(1.02);
-  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  box-shadow:
-    0 8px 20px rgba(118, 75, 162, 0.35),
+    0 8px 20px rgba(var(--secondary-rgb), 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
@@ -481,10 +704,10 @@ watch(apiKey, (newValue) => {

 /* 暗色模式下的悬停效果 */
 :global(.dark) .admin-button-refined:hover {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-color: rgba(147, 51, 234, 0.4);
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  border-color: rgba(var(--secondary-rgb), 0.4);
  box-shadow:
-    0 8px 20px rgba(102, 126, 234, 0.3),
+    0 8px 20px rgba(var(--primary-rgb), 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  color: white;
 }
@@ -513,11 +736,11 @@ watch(apiKey, (newValue) => {
 }

 .period-btn.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  box-shadow:
-    0 10px 15px -3px rgba(102, 126, 234, 0.3),
-    0 4px 6px -2px rgba(102, 126, 234, 0.05);
+    0 10px 15px -3px rgba(var(--primary-rgb), 0.3),
+    0 4px 6px -2px rgba(var(--primary-rgb), 0.05);
  transform: translateY(-1px);
 }

@@ -618,7 +841,7 @@ watch(apiKey, (newValue) => {

 .tab-pill-button.active {
  background: white;
-  color: #764ba2;
+  color: var(--secondary-color);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
@@ -667,4 +890,14 @@ watch(apiKey, (newValue) => {
    transform: translateY(0);
  }
 }
+
+/* 通知弹框动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>
--- a/web/admin-spa/src/views/DashboardView.vue
+++ b/web/admin-spa/src/views/DashboardView.vue
@@ -899,15 +899,15 @@ function createUsageTrendChart() {
      {
        label: '输入Token',
        data: inputData,
-        borderColor: 'rgb(102, 126, 234)',
-        backgroundColor: 'rgba(102, 126, 234, 0.1)',
+        borderColor: themeStore.currentColorScheme.primary,
+        backgroundColor: `${themeStore.currentColorScheme.primary}1a`,
        tension: 0.3
      },
      {
        label: '输出Token',
        data: outputData,
-        borderColor: 'rgb(240, 147, 251)',
-        backgroundColor: 'rgba(240, 147, 251, 0.1)',
+        borderColor: themeStore.currentColorScheme.accent,
+        backgroundColor: `${themeStore.currentColorScheme.accent}1a`,
        tension: 0.3
      },
      {
@@ -920,8 +920,8 @@ function createUsageTrendChart() {
      {
        label: '缓存读取Token',
        data: cacheReadData,
-        borderColor: 'rgb(147, 51, 234)',
-        backgroundColor: 'rgba(147, 51, 234, 0.1)',
+        borderColor: themeStore.currentColorScheme.secondary,
+        backgroundColor: `${themeStore.currentColorScheme.secondary}1a`,
        tension: 0.3
      },
      {
@@ -1569,6 +1569,19 @@ watch(isDarkMode, () => {
  })
 })

+// 监听色系变化，重新创建图表
+watch(
+  () => themeStore.colorScheme,
+  () => {
+    nextTick(() => {
+      createModelUsageChart()
+      createUsageTrendChart()
+      createApiKeysUsageTrendChart()
+      createAccountUsageTrendChart()
+    })
+  }
+)
+
 // 初始化
 onMounted(async () => {
  // 加载所有数据
--- a/web/admin-spa/src/views/QuotaCardsView.vue
+++ b/web/admin-spa/src/views/QuotaCardsView.vue
@@ -0,0 +1,987 @@
+<template>
+  <div class="tab-content">
+    <div class="card p-4 sm:p-6">
+      <!-- Header -->
+      <div class="mb-4 flex flex-col gap-4 sm:mb-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <h3 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100 sm:mb-2 sm:text-xl">
+              额度卡管理
+            </h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400 sm:text-base">
+              管理额度卡和时间卡，用户可核销增加额度
+            </p>
+          </div>
+          <button
+            class="inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            @click="showCreateModal = true"
+          >
+            <i class="fas fa-plus mr-2" />
+            创建卡片
+          </button>
+        </div>
+
+        <!-- Stats Cards -->
+        <div class="grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
+          <div class="stat-card">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="mb-1 text-xs font-semibold text-gray-600 dark:text-gray-400 sm:text-sm">
+                  总卡片数
+                </p>
+                <p class="text-xl font-bold text-gray-900 dark:text-gray-100 sm:text-2xl">
+                  {{ stats.total }}
+                </p>
+              </div>
+              <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-blue-500 to-blue-600">
+                <i class="fas fa-ticket-alt" />
+              </div>
+            </div>
+          </div>
+
+          <div class="stat-card">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="mb-1 text-xs font-semibold text-gray-600 dark:text-gray-400 sm:text-sm">
+                  未使用
+                </p>
+                <p class="text-xl font-bold text-green-600 dark:text-green-400 sm:text-2xl">
+                  {{ stats.unused }}
+                </p>
+              </div>
+              <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-green-500 to-green-600">
+                <i class="fas fa-check-circle" />
+              </div>
+            </div>
+          </div>
+
+          <div class="stat-card">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="mb-1 text-xs font-semibold text-gray-600 dark:text-gray-400 sm:text-sm">
+                  已核销
+                </p>
+                <p class="text-xl font-bold text-purple-600 dark:text-purple-400 sm:text-2xl">
+                  {{ stats.redeemed }}
+                </p>
+              </div>
+              <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-purple-500 to-purple-600">
+                <i class="fas fa-exchange-alt" />
+              </div>
+            </div>
+          </div>
+
+          <div class="stat-card">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="mb-1 text-xs font-semibold text-gray-600 dark:text-gray-400 sm:text-sm">
+                  已撤销
+                </p>
+                <p class="text-xl font-bold text-red-600 dark:text-red-400 sm:text-2xl">
+                  {{ stats.revoked }}
+                </p>
+              </div>
+              <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-red-500 to-red-600">
+                <i class="fas fa-ban" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Tab Navigation -->
+        <div class="border-b border-gray-200 dark:border-gray-700">
+          <nav aria-label="Tabs" class="-mb-px flex space-x-8">
+            <button
+              v-for="tab in tabs"
+              :key="tab.id"
+              :class="[
+                'whitespace-nowrap border-b-2 px-1 py-2 text-sm font-medium',
+                activeTab === tab.id
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-500 dark:hover:text-gray-300'
+              ]"
+              @click="activeTab = tab.id"
+            >
+              {{ tab.name }}
+            </button>
+          </nav>
+        </div>
+      </div>
+
+      <!-- Loading -->
+      <div v-if="loading" class="flex items-center justify-center py-12">
+        <i class="fas fa-spinner fa-spin mr-2 text-blue-500" />
+        <span class="text-gray-500 dark:text-gray-400">加载中...</span>
+      </div>
+
+      <!-- Cards Table -->
+      <div v-else-if="activeTab === 'cards'" class="overflow-x-auto">
+        <!-- Batch Actions -->
+        <div
+          v-if="selectedCards.length > 0"
+          class="mb-3 flex items-center gap-3 rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20"
+        >
+          <span class="text-sm text-blue-700 dark:text-blue-300">
+            已选择 {{ selectedCards.length }} 张卡片
+          </span>
+          <button
+            class="rounded-lg bg-red-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-600"
+            @click="deleteSelectedCards"
+          >
+            <i class="fas fa-trash mr-1" />
+            批量删除
+          </button>
+          <button
+            class="rounded-lg bg-gray-200 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+            @click="selectedCards = []"
+          >
+            取消选择
+          </button>
+        </div>
+
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+          <thead class="bg-gray-50 dark:bg-gray-700/50">
+            <tr>
+              <th class="w-10 px-4 py-3">
+                <input
+                  :checked="isAllSelected"
+                  class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                  :indeterminate="isIndeterminate"
+                  type="checkbox"
+                  @change="toggleSelectAll"
+                />
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                卡号
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                类型
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                额度/时间
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                状态
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                核销用户
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                创建时间
+              </th>
+              <th
+                class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                操作
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-800">
+            <tr
+              v-for="card in cards"
+              :key="card.id"
+              :class="[
+                'hover:bg-gray-50 dark:hover:bg-gray-700/50',
+                selectedCards.includes(card.id) ? 'bg-blue-50 dark:bg-blue-900/10' : ''
+              ]"
+            >
+              <td class="whitespace-nowrap px-4 py-3">
+                <input
+                  v-if="card.status === 'unused'"
+                  :checked="selectedCards.includes(card.id)"
+                  class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                  type="checkbox"
+                  @change="toggleSelectCard(card.id)"
+                />
+              </td>
+              <td class="whitespace-nowrap px-4 py-3">
+                <code
+                  class="cursor-pointer rounded bg-gray-100 px-2 py-1 font-mono text-xs hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"
+                  title="点击复制"
+                  @click="copyText(card.code)"
+                >
+                  {{ card.code }}
+                </code>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3">
+                <span
+                  :class="[
+                    'inline-flex rounded-full px-2 py-1 text-xs font-medium',
+                    card.type === 'quota'
+                      ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
+                      : card.type === 'time'
+                        ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+                        : 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300'
+                  ]"
+                >
+                  {{
+                    card.type === 'quota' ? '额度卡' : card.type === 'time' ? '时间卡' : '组合卡'
+                  }}
+                </span>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900 dark:text-white">
+                <span v-if="card.type === 'quota' || card.type === 'combo'"
+                  >{{ card.quotaAmount }} CC</span
+                >
+                <span v-if="card.type === 'combo'"> + </span>
+                <span v-if="card.type === 'time' || card.type === 'combo'">
+                  {{ card.timeAmount }}
+                  {{ card.timeUnit === 'hours' ? '小时' : card.timeUnit === 'days' ? '天' : '月' }}
+                </span>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3">
+                <span
+                  :class="[
+                    'inline-flex rounded-full px-2 py-1 text-xs font-medium',
+                    card.status === 'unused'
+                      ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+                      : card.status === 'redeemed'
+                        ? 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300'
+                        : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
+                  ]"
+                >
+                  {{
+                    card.status === 'unused'
+                      ? '未使用'
+                      : card.status === 'redeemed'
+                        ? '已核销'
+                        : '已撤销'
+                  }}
+                </span>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+                {{ card.redeemedByUsername || '-' }}
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+                {{ formatDate(card.createdAt) }}
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-right">
+                <button
+                  v-if="card.status === 'unused'"
+                  class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
+                  title="删除"
+                  @click="deleteCard(card)"
+                >
+                  <i class="fas fa-trash" />
+                </button>
+              </td>
+            </tr>
+            <tr v-if="cards.length === 0">
+              <td
+                class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400"
+                colspan="8"
+              >
+                暂无卡片数据
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- 分页 -->
+        <div
+          v-if="totalCards > 0"
+          class="flex flex-col items-center justify-between gap-3 border-t border-gray-200 px-4 py-3 dark:border-gray-700 sm:flex-row"
+        >
+          <div class="flex items-center gap-4">
+            <span class="text-sm text-gray-600 dark:text-gray-400">
+              共 {{ totalCards }} 条记录
+            </span>
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-gray-600 dark:text-gray-400">每页</span>
+              <select
+                v-model="pageSize"
+                class="rounded-md border border-gray-200 bg-white px-2 py-1 text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300"
+                @change="changePageSize"
+              >
+                <option v-for="size in pageSizeOptions" :key="size" :value="size">
+                  {{ size }}
+                </option>
+              </select>
+              <span class="text-sm text-gray-600 dark:text-gray-400">条</span>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <button
+              class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+              :disabled="currentPage === 1"
+              @click="changePage(currentPage - 1)"
+            >
+              <i class="fas fa-chevron-left" />
+            </button>
+            <span class="text-sm text-gray-600 dark:text-gray-400">
+              {{ currentPage }} / {{ totalPages }}
+            </span>
+            <button
+              class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+              :disabled="currentPage >= totalPages"
+              @click="changePage(currentPage + 1)"
+            >
+              <i class="fas fa-chevron-right" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Redemptions Table -->
+      <div v-else-if="activeTab === 'redemptions'" class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+          <thead class="bg-gray-50 dark:bg-gray-700/50">
+            <tr>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                卡号
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                用户
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                API Key
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                增加额度
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                状态
+              </th>
+              <th
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                核销时间
+              </th>
+              <th
+                class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-300"
+              >
+                操作
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-800">
+            <tr
+              v-for="redemption in redemptions"
+              :key="redemption.id"
+              class="hover:bg-gray-50 dark:hover:bg-gray-700/50"
+            >
+              <td class="whitespace-nowrap px-4 py-3">
+                <code
+                  class="cursor-pointer rounded bg-gray-100 px-2 py-1 font-mono text-xs hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"
+                  title="点击复制"
+                  @click="copyText(redemption.cardCode)"
+                >
+                  {{ redemption.cardCode }}
+                </code>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3">
+                <span
+                  class="cursor-pointer text-sm text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
+                  title="点击复制"
+                  @click="copyText(redemption.username || redemption.userId)"
+                >
+                  {{ redemption.username || redemption.userId }}
+                </span>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3">
+                <span
+                  class="cursor-pointer text-sm text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
+                  title="点击复制"
+                  @click="copyText(redemption.apiKeyName || redemption.apiKeyId)"
+                >
+                  {{ redemption.apiKeyName || redemption.apiKeyId }}
+                </span>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900 dark:text-white">
+                <span v-if="redemption.quotaAdded > 0">{{ redemption.quotaAdded }} CC</span>
+                <span v-if="redemption.quotaAdded > 0 && redemption.timeAdded > 0"> + </span>
+                <span v-if="redemption.timeAdded > 0">
+                  {{ redemption.timeAdded }}
+                  {{
+                    redemption.timeUnit === 'hours'
+                      ? '小时'
+                      : redemption.timeUnit === 'days'
+                        ? '天'
+                        : '月'
+                  }}
+                </span>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3">
+                <span
+                  :class="[
+                    'inline-flex rounded-full px-2 py-1 text-xs font-medium',
+                    redemption.status === 'active'
+                      ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+                      : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
+                  ]"
+                >
+                  {{ redemption.status === 'active' ? '有效' : '已撤销' }}
+                </span>
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+                {{ formatDate(redemption.timestamp) }}
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 text-right">
+                <button
+                  v-if="redemption.status === 'active'"
+                  class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
+                  title="撤销核销"
+                  @click="revokeRedemption(redemption)"
+                >
+                  <i class="fas fa-undo" />
+                </button>
+              </td>
+            </tr>
+            <tr v-if="redemptions.length === 0">
+              <td
+                class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400"
+                colspan="7"
+              >
+                暂无核销记录
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Create Card Modal -->
+    <Teleport to="body">
+      <div
+        v-if="showCreateModal"
+        class="modal fixed inset-0 z-50 flex items-center justify-center p-4"
+      >
+        <div class="modal-content mx-auto w-full max-w-lg p-6">
+          <!-- Header -->
+          <div class="mb-6 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <div
+                class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600"
+              >
+                <i class="fas fa-ticket-alt text-white" />
+              </div>
+              <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">创建额度卡</h3>
+            </div>
+            <button
+              class="p-1 text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+              @click="showCreateModal = false"
+            >
+              <i class="fas fa-times text-xl" />
+            </button>
+          </div>
+
+          <!-- Form -->
+          <div class="space-y-4">
+            <div>
+              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
+                >卡片类型</label
+              >
+              <select
+                v-model="newCard.type"
+                class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+              >
+                <option value="quota">额度卡</option>
+                <option value="time">时间卡</option>
+                <option value="combo">组合卡</option>
+              </select>
+            </div>
+
+            <div v-if="newCard.type === 'quota' || newCard.type === 'combo'">
+              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
+                >额度数量 (CC)</label
+              >
+              <input
+                v-model.number="newCard.quotaAmount"
+                class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                min="0"
+                step="0.1"
+                type="number"
+              />
+            </div>
+
+            <div v-if="newCard.type === 'time' || newCard.type === 'combo'">
+              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
+                >时间数量</label
+              >
+              <div class="flex gap-2">
+                <input
+                  v-model.number="newCard.timeAmount"
+                  class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                  min="1"
+                  type="number"
+                />
+                <select
+                  v-model="newCard.timeUnit"
+                  class="block rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                >
+                  <option value="hours">小时</option>
+                  <option value="days">天</option>
+                  <option value="months">月</option>
+                </select>
+              </div>
+            </div>
+
+            <div>
+              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
+                >批量生成数量</label
+              >
+              <input
+                v-model.number="newCard.count"
+                class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                max="100"
+                min="1"
+                type="number"
+              />
+            </div>
+
+            <div>
+              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
+                >备注（可选）</label
+              >
+              <input
+                v-model="newCard.note"
+                class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                placeholder="例如：新年促销卡"
+                type="text"
+              />
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <div class="mt-6 flex gap-3">
+            <button
+              class="flex-1 rounded-xl bg-gray-100 px-4 py-2.5 font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+              type="button"
+              @click="showCreateModal = false"
+            >
+              取消
+            </button>
+            <button
+              class="flex-1 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 px-4 py-2.5 font-medium text-white shadow-sm transition-colors hover:from-blue-600 hover:to-blue-700 disabled:opacity-50"
+              :disabled="creating"
+              type="button"
+              @click="createCard"
+            >
+              <i v-if="creating" class="fas fa-spinner fa-spin mr-2" />
+              {{ creating ? '创建中...' : '创建' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- Result Modal -->
+    <Teleport to="body">
+      <div
+        v-if="showResultModal"
+        class="modal fixed inset-0 z-50 flex items-center justify-center p-4"
+      >
+        <div class="modal-content mx-auto w-full max-w-lg p-6">
+          <!-- Header -->
+          <div class="mb-6 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <div
+                class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-green-500 to-green-600"
+              >
+                <i class="fas fa-check text-white" />
+              </div>
+              <div>
+                <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">创建成功</h3>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  已创建 {{ createdCards.length }} 张卡片
+                </p>
+              </div>
+            </div>
+            <button
+              class="p-1 text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+              @click="showResultModal = false"
+            >
+              <i class="fas fa-times text-xl" />
+            </button>
+          </div>
+
+          <!-- Card List -->
+          <div class="mb-4 max-h-60 overflow-y-auto rounded-lg bg-gray-50 p-3 dark:bg-gray-700/50">
+            <div
+              v-for="(card, index) in createdCards"
+              :key="card.id"
+              class="flex items-center justify-between border-b border-gray-200 py-2 last:border-0 dark:border-gray-600"
+            >
+              <div class="flex items-center gap-2">
+                <span class="text-xs text-gray-400">{{ index + 1 }}.</span>
+                <code class="font-mono text-sm text-gray-900 dark:text-white">{{ card.code }}</code>
+              </div>
+              <span class="text-xs text-gray-500 dark:text-gray-400">
+                <template v-if="card.type === 'quota' || card.type === 'combo'">
+                  {{ card.quotaAmount }} CC
+                </template>
+                <template v-if="card.type === 'combo'"> + </template>
+                <template v-if="card.type === 'time' || card.type === 'combo'">
+                  {{ card.timeAmount }}
+                  {{ card.timeUnit === 'hours' ? '小时' : card.timeUnit === 'days' ? '天' : '月' }}
+                </template>
+              </span>
+            </div>
+          </div>
+
+          <!-- Warning -->
+          <div
+            class="mb-4 rounded-lg border border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-700 dark:bg-yellow-900/20"
+          >
+            <div class="flex items-start gap-2">
+              <i class="fas fa-exclamation-triangle mt-0.5 text-yellow-500" />
+              <p class="text-sm text-yellow-700 dark:text-yellow-300">
+                请立即下载或复制卡号，关闭后将无法再次查看完整卡号列表。
+              </p>
+            </div>
+          </div>
+
+          <!-- Actions -->
+          <div class="flex gap-3">
+            <button
+              class="flex-1 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 px-4 py-2.5 font-medium text-white shadow-sm transition-colors hover:from-blue-600 hover:to-blue-700"
+              type="button"
+              @click="downloadCards"
+            >
+              <i class="fas fa-download mr-2" />
+              下载 TXT
+            </button>
+            <button
+              class="flex-1 rounded-xl bg-gray-100 px-4 py-2.5 font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+              type="button"
+              @click="copyAllCards"
+            >
+              <i class="fas fa-copy mr-2" />
+              复制全部
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+    <!-- Confirm Modal -->
+    <ConfirmModal
+      :cancel-text="confirmModalConfig.cancelText"
+      :confirm-text="confirmModalConfig.confirmText"
+      :message="confirmModalConfig.message"
+      :show="showConfirmModal"
+      :title="confirmModalConfig.title"
+      :type="confirmModalConfig.type"
+      @cancel="handleCancelModal"
+      @confirm="handleConfirmModal"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'
+import * as httpApi from '@/utils/http_apis'
+import { showToast } from '@/utils/tools'
+import { copyText } from '@/utils/tools'
+
+const loading = ref(false)
+const creating = ref(false)
+const showCreateModal = ref(false)
+const showResultModal = ref(false)
+const showConfirmModal = ref(false)
+const confirmModalConfig = ref({
+  title: '',
+  message: '',
+  type: 'primary',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+const confirmResolve = ref(null)
+const createdCards = ref([])
+const activeTab = ref('cards')
+const selectedCards = ref([])
+
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(20)
+const pageSizeOptions = [10, 20, 50, 100]
+const totalCards = ref(0)
+
+const tabs = [
+  { id: 'cards', name: '卡片列表' },
+  { id: 'redemptions', name: '核销记录' }
+]
+
+const stats = ref({
+  total: 0,
+  unused: 0,
+  redeemed: 0,
+  revoked: 0,
+  expired: 0
+})
+
+const cards = ref([])
+const redemptions = ref([])
+
+// 可选择的卡片（只有未使用的才能选择）
+const selectableCards = computed(() => cards.value.filter((c) => c.status === 'unused'))
+
+// 是否全选
+const isAllSelected = computed(
+  () =>
+    selectableCards.value.length > 0 && selectedCards.value.length === selectableCards.value.length
+)
+
+// 是否部分选中
+const isIndeterminate = computed(
+  () => selectedCards.value.length > 0 && selectedCards.value.length < selectableCards.value.length
+)
+
+// 切换全选
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    selectedCards.value = []
+  } else {
+    selectedCards.value = selectableCards.value.map((c) => c.id)
+  }
+}
+
+// 切换单个选择
+const toggleSelectCard = (cardId) => {
+  const index = selectedCards.value.indexOf(cardId)
+  if (index === -1) {
+    selectedCards.value.push(cardId)
+  } else {
+    selectedCards.value.splice(index, 1)
+  }
+}
+
+const newCard = ref({
+  type: 'quota',
+  quotaAmount: 10,
+  timeAmount: 30,
+  timeUnit: 'days',
+  count: 1,
+  note: ''
+})
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString('zh-CN')
+}
+
+const showConfirm = (
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'primary'
+) => {
+  return new Promise((resolve) => {
+    confirmModalConfig.value = { title, message, confirmText, cancelText, type }
+    confirmResolve.value = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirmModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(true)
+}
+const handleCancelModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(false)
+}
+
+const loadCards = async () => {
+  loading.value = true
+  try {
+    const offset = (currentPage.value - 1) * pageSize.value
+    const [cardsData, statsData, redemptionsData] = await Promise.all([
+      httpApi.get(`/admin/quota-cards?limit=${pageSize.value}&offset=${offset}`),
+      httpApi.get('/admin/quota-cards/stats'),
+      httpApi.get('/admin/redemptions')
+    ])
+
+    cards.value = cardsData.data?.cards || []
+    totalCards.value = cardsData.data?.total || 0
+    stats.value = statsData.data || stats.value
+    redemptions.value = redemptionsData.data?.redemptions || []
+  } catch (error) {
+    console.error('Failed to load cards:', error)
+    showToast('加载卡片数据失败', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 分页计算
+const totalPages = computed(() => Math.ceil(totalCards.value / pageSize.value))
+
+// 页码变化
+const changePage = (page) => {
+  currentPage.value = page
+  selectedCards.value = []
+  loadCards()
+}
+
+// 每页条数变化
+const changePageSize = () => {
+  currentPage.value = 1
+  selectedCards.value = []
+  loadCards()
+}
+
+const createCard = async () => {
+  creating.value = true
+  try {
+    const result = await httpApi.post('/admin/quota-cards', newCard.value)
+    showCreateModal.value = false
+
+    // 处理返回的卡片数据
+    const data = result.data
+    if (Array.isArray(data)) {
+      createdCards.value = data
+    } else if (data) {
+      createdCards.value = [data]
+    } else {
+      createdCards.value = []
+    }
+
+    // 显示结果弹窗
+    if (createdCards.value.length > 0) {
+      showResultModal.value = true
+    }
+
+    showToast(`成功创建 ${createdCards.value.length} 张卡片`, 'success')
+    loadCards()
+  } catch (error) {
+    console.error('Failed to create card:', error)
+    showToast(error.message || '创建卡片失败', 'error')
+  } finally {
+    creating.value = false
+  }
+}
+
+// 下载卡片
+const downloadCards = () => {
+  if (createdCards.value.length === 0) return
+
+  const content = createdCards.value
+    .map((card) => {
+      let label = ''
+      if (card.type === 'quota' || card.type === 'combo') {
+        label += `${card.quotaAmount}CC`
+      }
+      if (card.type === 'combo') {
+        label += '_'
+      }
+      if (card.type === 'time' || card.type === 'combo') {
+        const unitMap = { hours: 'h', days: 'd', months: 'm' }
+        label += `${card.timeAmount}${unitMap[card.timeUnit] || card.timeUnit}`
+      }
+      return `${label} ${card.code}`
+    })
+    .join('\n')
+
+  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 = `quota-cards-${timestamp}.txt`
+
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+
+  showToast('卡片文件已下载', 'success')
+}
+
+// 复制所有卡号
+const copyAllCards = async () => {
+  if (createdCards.value.length === 0) return
+
+  const content = createdCards.value.map((card) => card.code).join('\n')
+
+  try {
+    await navigator.clipboard.writeText(content)
+    showToast('已复制所有卡号', 'success')
+  } catch (error) {
+    console.error('Failed to copy:', error)
+    showToast('复制失败', 'error')
+  }
+}
+
+const deleteCard = async (card) => {
+  const confirmed = await showConfirm(
+    '删除卡片',
+    `确定删除卡片 ${card.code}？`,
+    '确定删除',
+    '取消',
+    'danger'
+  )
+  if (!confirmed) return
+
+  try {
+    await httpApi.del(`/admin/quota-cards/${card.id}`)
+    showToast('卡片已删除', 'success')
+    loadCards()
+  } catch (error) {
+    console.error('Failed to delete card:', error)
+    showToast(error.message || '删除卡片失败', 'error')
+  }
+}
+
+const deleteSelectedCards = async () => {
+  const confirmed = await showConfirm(
+    '批量删除',
+    `确定删除选中的 ${selectedCards.value.length} 张卡片？`,
+    '确定删除',
+    '取消',
+    'danger'
+  )
+  if (!confirmed) return
+
+  try {
+    await Promise.all(selectedCards.value.map((id) => httpApi.del(`/admin/quota-cards/${id}`)))
+    showToast(`已删除 ${selectedCards.value.length} 张卡片`, 'success')
+    selectedCards.value = []
+    loadCards()
+  } catch (error) {
+    console.error('Failed to delete cards:', error)
+    showToast(error.message || '批量删除失败', 'error')
+  }
+}
+
+const revokeRedemption = async (redemption) => {
+  const reason = prompt('撤销原因（可选）：')
+  if (reason === null) return
+
+  try {
+    await httpApi.post(`/admin/redemptions/${redemption.id}/revoke`, { reason })
+    showToast('核销已撤销', 'success')
+    loadCards()
+  } catch (error) {
+    console.error('Failed to revoke redemption:', error)
+    showToast(error.message || '撤销核销失败', 'error')
+  }
+}
+
+onMounted(() => {
+  loadCards()
+})
+</script>
--- a/web/admin-spa/src/views/SettingsView.vue
+++ b/web/admin-spa/src/views/SettingsView.vue
@@ -48,6 +48,18 @@
            <i class="fas fa-robot mr-2"></i>
            Claude 转发
          </button>
+          <button
+            :class="[
+              'border-b-2 pb-2 text-sm font-medium transition-colors',
+              activeSection === 'serviceRates'
+                ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+            ]"
+            @click="activeSection = 'serviceRates'"
+          >
+            <i class="fas fa-balance-scale mr-2"></i>
+            服务倍率
+          </button>
        </nav>
      </div>

@@ -194,6 +206,68 @@
                  </td>
                </tr>

+                <!-- API Stats 通知 -->
+                <tr class="border-b border-gray-100 dark:border-gray-700">
+                  <td class="w-48 whitespace-nowrap px-6 py-4">
+                    <div class="flex items-center">
+                      <div
+                        class="mr-3 flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-600"
+                      >
+                        <i class="fas fa-bell text-xs text-white" />
+                      </div>
+                      <div>
+                        <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                          统计页通知
+                        </div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">API Stats</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4">
+                    <div class="flex items-center">
+                      <label class="inline-flex cursor-pointer items-center">
+                        <input
+                          v-model="oemSettings.apiStatsNotice.enabled"
+                          class="peer sr-only"
+                          type="checkbox"
+                        />
+                        <div
+                          class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
+                        ></div>
+                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{{
+                          oemSettings.apiStatsNotice.enabled ? '已启用' : '已禁用'
+                        }}</span>
+                      </label>
+                    </div>
+                    <div v-if="oemSettings.apiStatsNotice.enabled" class="mt-3 space-y-3">
+                      <div>
+                        <label class="mb-1 block text-xs text-gray-500 dark:text-gray-400">
+                          标题
+                        </label>
+                        <input
+                          v-model="oemSettings.apiStatsNotice.title"
+                          class="form-input w-full max-w-md dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                          maxlength="100"
+                          placeholder="通知标题"
+                          type="text"
+                        />
+                      </div>
+                      <div>
+                        <label class="mb-1 block text-xs text-gray-500 dark:text-gray-400">
+                          内容
+                        </label>
+                        <textarea
+                          v-model="oemSettings.apiStatsNotice.content"
+                          class="form-input w-full max-w-md resize-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                          maxlength="2000"
+                          placeholder="通知内容（支持换行）"
+                          rows="3"
+                        ></textarea>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+
                <!-- 操作按钮 -->
                <tr>
                  <td class="px-6 py-6" colspan="2">
@@ -1025,6 +1099,113 @@
            </div>
          </div>
        </div>
+
+        <!-- 服务倍率配置部分 -->
+        <div v-show="activeSection === 'serviceRates'">
+          <!-- 加载状态 -->
+          <div v-if="serviceRatesLoading" class="py-12 text-center">
+            <div class="loading-spinner mx-auto mb-4"></div>
+            <p class="text-gray-500 dark:text-gray-400">正在加载配置...</p>
+          </div>
+
+          <div v-else>
+            <!-- 说明卡片 -->
+            <div
+              class="mb-6 rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-6 dark:from-blue-900/20 dark:to-indigo-900/20"
+            >
+              <div class="flex items-start">
+                <div
+                  class="mr-4 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white"
+                >
+                  <i class="fas fa-info"></i>
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+                    服务倍率说明
+                  </h3>
+                  <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                    服务倍率用于计算不同服务消耗的虚拟额度（CC）。以
+                    <strong>{{ serviceRates.baseService || 'claude' }}</strong>
+                    为基准（倍率 1.0），其他服务按倍率换算。例如：Gemini 倍率 0.5 表示消耗 1 USD
+                    只扣除 0.5 CC 额度。
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- 倍率配置表格 -->
+            <div class="rounded-lg bg-white/80 p-6 shadow-lg backdrop-blur-sm dark:bg-gray-800/80">
+              <div class="mb-4 flex items-center justify-between">
+                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+                  <i class="fas fa-sliders-h mr-2 text-blue-500"></i>
+                  倍率配置
+                </h2>
+                <button
+                  class="rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600 disabled:opacity-50"
+                  :disabled="serviceRatesSaving"
+                  @click="saveServiceRates"
+                >
+                  <i class="fas fa-save mr-2"></i>
+                  {{ serviceRatesSaving ? '保存中...' : '保存配置' }}
+                </button>
+              </div>
+
+              <div class="space-y-4">
+                <div
+                  v-for="(rate, service) in serviceRates.rates"
+                  :key="service"
+                  class="flex items-center justify-between rounded-lg border border-gray-200 p-4 dark:border-gray-700"
+                >
+                  <div class="flex items-center">
+                    <div
+                      class="mr-3 flex h-10 w-10 items-center justify-center rounded-lg"
+                      :class="getServiceIconClass(service)"
+                    >
+                      <i class="text-white" :class="getServiceIcon(service)"></i>
+                    </div>
+                    <div>
+                      <div class="font-medium text-gray-900 dark:text-gray-100">
+                        {{ getServiceName(service) }}
+                      </div>
+                      <div class="text-xs text-gray-500 dark:text-gray-400">
+                        {{ service }}
+                        <span
+                          v-if="service === serviceRates.baseService"
+                          class="ml-2 rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
+                        >
+                          基准服务
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <input
+                      v-model.number="serviceRates.rates[service]"
+                      class="w-24 rounded-lg border border-gray-300 px-3 py-2 text-center text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                      max="10"
+                      min="0.1"
+                      step="0.1"
+                      type="number"
+                    />
+                    <span class="text-sm text-gray-500 dark:text-gray-400">倍</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 更新信息 -->
+              <div
+                v-if="serviceRates.updatedAt"
+                class="mt-4 rounded-lg bg-gray-50 p-3 text-sm text-gray-500 dark:bg-gray-700/50 dark:text-gray-400"
+              >
+                <i class="fas fa-history mr-2"></i>
+                最后更新：{{ formatDateTime(serviceRates.updatedAt) }}
+                <span v-if="serviceRates.updatedBy" class="ml-2">
+                  由 <strong>{{ serviceRates.updatedBy }}</strong> 修改
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
      </div>
    </div>
  </div>
@@ -1603,15 +1784,28 @@
        </div>
      </div>
    </div>
+
+    <!-- ConfirmModal -->
+    <ConfirmModal
+      :cancel-text="confirmModalConfig.cancelText"
+      :confirm-text="confirmModalConfig.confirmText"
+      :message="confirmModalConfig.message"
+      :show="showConfirmModal"
+      :title="confirmModalConfig.title"
+      :type="confirmModalConfig.type"
+      @cancel="handleCancelModal"
+      @confirm="handleConfirmModal"
+    />
  </div>
 </template>

 <script setup>
 import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
 import { storeToRefs } from 'pinia'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'
 import { useSettingsStore } from '@/stores/settings'
-import { apiClient } from '@/config/api'
+import * as httpApi from '@/utils/http_apis'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'

 // 定义组件名称，用于keep-alive排除
 defineOptions({
@@ -1634,6 +1828,39 @@ const isMounted = ref(true)
 // API请求取消控制器
 const abortController = ref(new AbortController())

+// ConfirmModal 状态
+const showConfirmModal = ref(false)
+const confirmModalConfig = ref({
+  title: '',
+  message: '',
+  type: 'primary',
+  confirmText: '确认',
+  cancelText: '取消'
+})
+const confirmResolve = ref(null)
+
+const showConfirm = (
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'primary'
+) => {
+  return new Promise((resolve) => {
+    confirmModalConfig.value = { title, message, confirmText, cancelText, type }
+    confirmResolve.value = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirmModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(true)
+}
+const handleCancelModal = () => {
+  showConfirmModal.value = false
+  confirmResolve.value?.(false)
+}
+
 // 计算属性：隐藏管理后台按钮（反转 showAdminButton 的值）
 const hideAdminButton = computed({
  get() {
@@ -1688,6 +1915,24 @@ const claudeConfig = ref({
  updatedBy: null
 })

+// 服务倍率配置
+const serviceRatesLoading = ref(false)
+const serviceRatesSaving = ref(false)
+const serviceRates = ref({
+  baseService: 'claude',
+  rates: {
+    claude: 1.0,
+    codex: 1.0,
+    gemini: 1.0,
+    droid: 1.0,
+    bedrock: 1.0,
+    azure: 1.0,
+    ccr: 1.0
+  },
+  updatedAt: null,
+  updatedBy: null
+})
+
 // 平台表单相关
 const showAddPlatformModal = ref(false)
 const editingPlatform = ref(null)
@@ -1727,6 +1972,8 @@ const sectionWatcher = watch(activeSection, async (newSection) => {
    await loadWebhookConfig()
  } else if (newSection === 'claude') {
    await loadClaudeConfig()
+  } else if (newSection === 'serviceRates') {
+    await loadServiceRates()
  }
 })

@@ -1854,6 +2101,9 @@ onMounted(async () => {
    if (activeSection.value === 'webhook') {
      await loadWebhookConfig()
    }
+    if (activeSection.value === 'serviceRates') {
+      await loadServiceRates()
+    }
  } catch (error) {
    showToast('加载设置失败', 'error')
  }
@@ -1890,7 +2140,7 @@ onBeforeUnmount(() => {
 const loadWebhookConfig = async () => {
  if (!isMounted.value) return
  try {
-    const response = await apiClient.get('/admin/webhook/config', {
+    const response = await httpApi.get('/admin/webhook/config', {
      signal: abortController.value.signal
    })
    if (response.success && isMounted.value) {
@@ -1923,7 +2173,7 @@ const saveWebhookConfig = async () => {
      }
    }

-    const response = await apiClient.post('/admin/webhook/config', payload, {
+    const response = await httpApi.post('/admin/webhook/config', payload, {
      signal: abortController.value.signal
    })
    if (response.success && isMounted.value) {
@@ -1943,7 +2193,7 @@ const loadClaudeConfig = async () => {
  if (!isMounted.value) return
  claudeConfigLoading.value = true
  try {
-    const response = await apiClient.get('/admin/claude-relay-config', {
+    const response = await httpApi.get('/admin/claude-relay-config', {
      signal: abortController.value.signal
    })
    if (response.success && isMounted.value) {
@@ -1996,7 +2246,7 @@ const saveClaudeConfig = async () => {
      concurrentRequestQueueTimeoutMs: claudeConfig.value.concurrentRequestQueueTimeoutMs
    }

-    const response = await apiClient.put('/admin/claude-relay-config', payload, {
+    const response = await httpApi.put('/admin/claude-relay-config', payload, {
      signal: abortController.value.signal
    })
    if (response.success && isMounted.value) {
@@ -2015,6 +2265,103 @@ const saveClaudeConfig = async () => {
  }
 }

+// 加载服务倍率配置
+const loadServiceRates = async () => {
+  if (!isMounted.value) return
+  serviceRatesLoading.value = true
+  try {
+    const response = await httpApi.get('/admin/service-rates', {
+      signal: abortController.value.signal
+    })
+    if (response.success && isMounted.value) {
+      serviceRates.value = {
+        baseService: response.data?.baseService || 'claude',
+        rates: response.data?.rates || serviceRates.value.rates,
+        updatedAt: response.data?.updatedAt,
+        updatedBy: response.data?.updatedBy
+      }
+    }
+  } catch (error) {
+    if (error.name === 'AbortError') return
+    if (!isMounted.value) return
+    console.error('加载服务倍率配置失败:', error)
+  } finally {
+    if (isMounted.value) {
+      serviceRatesLoading.value = false
+    }
+  }
+}
+
+// 保存服务倍率配置
+const saveServiceRates = async () => {
+  if (!isMounted.value) return
+  serviceRatesSaving.value = true
+  try {
+    const response = await httpApi.put(
+      '/admin/service-rates',
+      {
+        rates: serviceRates.value.rates,
+        baseService: serviceRates.value.baseService
+      },
+      { signal: abortController.value.signal }
+    )
+    if (response.success && isMounted.value) {
+      serviceRates.value.updatedAt = response.data?.updatedAt || new Date().toISOString()
+      serviceRates.value.updatedBy = response.data?.updatedBy
+      showToast('服务倍率配置已保存', 'success')
+    }
+  } catch (error) {
+    if (error.name === 'AbortError') return
+    if (!isMounted.value) return
+    showToast('保存服务倍率配置失败', 'error')
+    console.error(error)
+  } finally {
+    if (isMounted.value) {
+      serviceRatesSaving.value = false
+    }
+  }
+}
+
+// 服务图标和名称映射
+const getServiceIcon = (service) => {
+  const icons = {
+    claude: 'fas fa-robot',
+    codex: 'fas fa-code',
+    gemini: 'fas fa-gem',
+    droid: 'fas fa-android',
+    bedrock: 'fab fa-aws',
+    azure: 'fab fa-microsoft',
+    ccr: 'fas fa-server'
+  }
+  return icons[service] || 'fas fa-cog'
+}
+
+const getServiceIconClass = (service) => {
+  const classes = {
+    claude: 'bg-gradient-to-br from-orange-500 to-amber-600',
+    codex: 'bg-gradient-to-br from-green-500 to-emerald-600',
+    gemini: 'bg-gradient-to-br from-blue-500 to-indigo-600',
+    droid: 'bg-gradient-to-br from-green-600 to-lime-600',
+    bedrock: 'bg-gradient-to-br from-yellow-500 to-orange-600',
+    azure: 'bg-gradient-to-br from-blue-600 to-cyan-600',
+    ccr: 'bg-gradient-to-br from-purple-500 to-pink-600'
+  }
+  return classes[service] || 'bg-gradient-to-br from-gray-500 to-gray-600'
+}
+
+const getServiceName = (service) => {
+  const names = {
+    claude: 'Claude',
+    codex: 'Codex (OpenAI)',
+    gemini: 'Gemini',
+    droid: 'Droid',
+    bedrock: 'AWS Bedrock',
+    azure: 'Azure OpenAI',
+    ccr: 'CCR'
+  }
+  return names[service] || service
+}
+
 // 验证 URL
 const validateUrl = () => {
  // Bark和SMTP平台不需要验证URL
@@ -2126,14 +2473,14 @@ const savePlatform = async () => {
    let response
    if (editingPlatform.value) {
      // 更新平台
-      response = await apiClient.put(
+      response = await httpApi.put(
        `/admin/webhook/platforms/${editingPlatform.value.id}`,
        platformForm.value,
        { signal: abortController.value.signal }
      )
    } else {
      // 添加平台
-      response = await apiClient.post('/admin/webhook/platforms', platformForm.value, {
+      response = await httpApi.post('/admin/webhook/platforms', platformForm.value, {
        signal: abortController.value.signal
      })
    }
@@ -2193,12 +2540,12 @@ const editPlatform = (platform) => {
 const deletePlatform = async (id) => {
  if (!isMounted.value) return

-  if (!confirm('确定要删除这个平台吗？')) {
+  if (!(await showConfirm('删除平台', '确定要删除这个平台吗？', '删除', '取消', 'danger'))) {
    return
  }

  try {
-    const response = await apiClient.delete(`/admin/webhook/platforms/${id}`, {
+    const response = await httpApi.del(`/admin/webhook/platforms/${id}`, {
      signal: abortController.value.signal
    })
    if (response.success && isMounted.value) {
@@ -2218,7 +2565,7 @@ const togglePlatform = async (id) => {
  if (!isMounted.value) return

  try {
-    const response = await apiClient.post(
+    const response = await httpApi.post(
      `/admin/webhook/platforms/${id}/toggle`,
      {},
      {
@@ -2273,7 +2620,7 @@ const testPlatform = async (platform) => {
      testData.url = platform.url
    }

-    const response = await apiClient.post('/admin/webhook/test', testData, {
+    const response = await httpApi.post('/admin/webhook/test', testData, {
      signal: abortController.value.signal
    })
    if (response.success && isMounted.value) {
@@ -2296,7 +2643,7 @@ const testPlatformForm = async () => {

  testingConnection.value = true
  try {
-    const response = await apiClient.post('/admin/webhook/test', platformForm.value, {
+    const response = await httpApi.post('/admin/webhook/test', platformForm.value, {
      signal: abortController.value.signal
    })
    if (response.success && isMounted.value) {
@@ -2319,7 +2666,7 @@ const sendTestNotification = async () => {
  if (!isMounted.value) return

  try {
-    const response = await apiClient.post(
+    const response = await httpApi.post(
      '/admin/webhook/test-notification',
      {},
      {
@@ -2467,7 +2814,8 @@ const saveOemSettings = async () => {
      siteName: oemSettings.value.siteName,
      siteIcon: oemSettings.value.siteIcon,
      siteIconData: oemSettings.value.siteIconData,
-      showAdminButton: oemSettings.value.showAdminButton
+      showAdminButton: oemSettings.value.showAdminButton,
+      apiStatsNotice: oemSettings.value.apiStatsNotice
    }
    const result = await settingsStore.saveOemSettings(settings)
    if (result && result.success) {
@@ -2482,7 +2830,16 @@ const saveOemSettings = async () => {

 // 重置OEM设置
 const resetOemSettings = async () => {
-  if (!confirm('确定要重置为默认设置吗？\n\n这将清除所有自定义的网站名称和图标设置。')) return
+  if (
+    !(await showConfirm(
+      '重置设置',
+      '确定要重置为默认设置吗？\n\n这将清除所有自定义的网站名称和图标设置。',
+      '重置',
+      '取消',
+      'warning'
+    ))
+  )
+    return

  try {
    const result = await settingsStore.resetOemSettings()
@@ -2548,8 +2905,8 @@ const formatDateTime = settingsStore.formatDateTime
 }

 :root.dark .card {
-  background: #1f2937;
-  border: 1px solid #374151;
+  background: var(--bg-gradient-start);
+  border: 1px solid var(--border-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
 }

@@ -2560,7 +2917,7 @@ const formatDateTime = settingsStore.formatDateTime
 }

 :root.dark .table-container {
-  border: 1px solid #4b5563;
+  border: 1px solid var(--border-color);
 }

 .table-row {
@@ -2572,7 +2929,7 @@ const formatDateTime = settingsStore.formatDateTime
 }

 :root.dark .table-row:hover {
-  background-color: #374151;
+  background-color: var(--bg-gradient-mid);
 }

 .form-input {
--- a/web/admin-spa/src/views/UserDashboardView.vue
+++ b/web/admin-spa/src/views/UserDashboardView.vue
@@ -340,7 +340,7 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { useThemeStore } from '@/stores/theme'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'
 import ThemeToggle from '@/components/common/ThemeToggle.vue'
 import UserApiKeysManager from '@/components/user/UserApiKeysManager.vue'
 import UserUsageStats from '@/components/user/UserUsageStats.vue'
--- a/web/admin-spa/src/views/UserLoginView.vue
+++ b/web/admin-spa/src/views/UserLoginView.vue
@@ -150,7 +150,7 @@ import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { useThemeStore } from '@/stores/theme'
-import { showToast } from '@/utils/toast'
+import { showToast } from '@/utils/tools'
 import ThemeToggle from '@/components/common/ThemeToggle.vue'

 const router = useRouter()
--- a/web/admin-spa/src/views/UserManagementView.vue
+++ b/web/admin-spa/src/views/UserManagementView.vue
@@ -476,8 +476,8 @@

 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { apiClient } from '@/config/api'
-import { showToast } from '@/utils/toast'
+import * as httpApi from '@/utils/http_apis'
+import { showToast } from '@/utils/tools'
 import { debounce } from 'lodash-es'
 import UserUsageStatsModal from '@/components/admin/UserUsageStatsModal.vue'
 import ChangeRoleModal from '@/components/admin/ChangeRoleModal.vue'
@@ -564,8 +564,8 @@ const loadUsers = async () => {
    }

    const [usersResponse, statsResponse] = await Promise.all([
-      apiClient.get('/users', { params }),
-      apiClient.get('/users/stats/overview')
+      httpApi.get('/users', { params }),
+      httpApi.get('/users/stats/overview')
    ])

    if (usersResponse.success) {
@@ -631,7 +631,7 @@ const handleConfirmAction = async () => {

  try {
    if (action === 'toggleStatus') {
-      const response = await apiClient.patch(`/users/${user.id}/status`, {
+      const response = await httpApi.patch(`/users/${user.id}/status`, {
        isActive: !user.isActive
      })

@@ -643,7 +643,7 @@ const handleConfirmAction = async () => {
        showToast(`User ${user.isActive ? 'disabled' : 'enabled'} successfully`, 'success')
      }
    } else if (action === 'disableKeys') {
-      const response = await apiClient.post(`/users/${user.id}/disable-keys`)
+      const response = await httpApi.post(`/users/${user.id}/disable-keys`)

      if (response.success) {
        showToast(`Disabled ${response.disabledCount} API keys`, 'success')
--- a/web/admin-spa/tailwind.config.js
+++ b/web/admin-spa/tailwind.config.js
@@ -4,6 +4,32 @@ export default {
  darkMode: 'class',
  theme: {
    extend: {
+      colors: {
+        // 主题色 - 使用 CSS 变量
+        primary: {
+          DEFAULT: 'var(--primary-color)',
+          rgb: 'rgb(var(--primary-rgb))'
+        },
+        secondary: {
+          DEFAULT: 'var(--secondary-color)',
+          rgb: 'rgb(var(--secondary-rgb))'
+        },
+        accent: {
+          DEFAULT: 'var(--accent-color)',
+          rgb: 'rgb(var(--accent-rgb))'
+        },
+        // 表面颜色
+        surface: 'var(--surface-color)',
+        'glass-strong': 'var(--glass-strong-color)',
+        glass: 'var(--glass-color)'
+      },
+      backgroundColor: {
+        'theme-surface': 'var(--surface-color)',
+        'theme-glass': 'var(--glass-strong-color)'
+      },
+      borderColor: {
+        'theme-border': 'var(--border-color)'
+      },
      animation: {
        gradient: 'gradient 8s ease infinite',
        float: 'float 6s ease-in-out infinite',