feat(frontend): 优化弹窗组件架构和用户体验

- 使用 BaseDialog 替代旧版 Modal 组件
- 添加平滑过渡动画和更好的可访问性支持
- 新增 ExportProgressDialog 导出进度弹窗
- 优化所有账号管理和使用记录相关弹窗
- 更新国际化文案，改进用户交互体验
- 精简依赖，减少 package.json 体积

backend/internal/repository/account_repo.go

@@ -186,7 +186,7 @@ func (r *accountRepository) BatchUpdateLastUsed(ctx context.Context, updates map
 		ids = append(ids, id)
 	}
 
-	caseSql += " END WHERE id IN ?"
+	caseSql += " END WHERE id IN ? AND deleted_at IS NULL"
 	args = append(args, ids)
 
 	return r.db.WithContext(ctx).Exec(caseSql, args...).Error

backend/internal/repository/proxy_repo.go

@@ -119,6 +119,7 @@ func (r *proxyRepository) CountAccountsByProxyID(ctx context.Context, proxyID in
 	var count int64
 	err := r.db.WithContext(ctx).Table("accounts").
 		Where("proxy_id = ?", proxyID).
+		Where("deleted_at IS NULL").
 		Count(&count).Error
 	return count, err
 }
@@ -134,6 +135,7 @@ func (r *proxyRepository) GetAccountCountsForProxies(ctx context.Context) (map[i
 		Table("accounts").
 		Select("proxy_id, COUNT(*) as count").
 		Where("proxy_id IS NOT NULL").
+		Where("deleted_at IS NULL").
 		Group("proxy_id").
 		Scan(&results).Error
 	if err != nil {

backend/internal/repository/usage_log_repo.go

@@ -182,6 +182,7 @@ func (r *usageLogRepository) GetDashboardStats(ctx context.Context) (*DashboardS
 			COUNT(CASE WHEN rate_limited_at IS NOT NULL AND rate_limit_reset_at > ? THEN 1 END) as ratelimit_accounts,
 			COUNT(CASE WHEN overload_until IS NOT NULL AND overload_until > ? THEN 1 END) as overload_accounts
 		FROM accounts
+		WHERE deleted_at IS NULL
 	`, service.StatusActive, service.StatusError, now, now).Scan(&accountStats).Error; err != nil {
 		return nil, err
 	}

frontend/package.json

@@ -14,13 +14,16 @@
     "@vueuse/core": "^10.7.0",
     "axios": "^1.6.2",
     "chart.js": "^4.4.1",
+    "file-saver": "^2.0.5",
     "pinia": "^2.1.7",
     "vue": "^3.4.0",
     "vue-chartjs": "^5.3.0",
     "vue-i18n": "^9.14.5",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/node": "^20.10.5",
     "@vitejs/plugin-vue": "^5.2.3",
     "autoprefixer": "^10.4.16",

frontend/src/components/account/AccountTestModal.vue

@@ -362,6 +362,10 @@ const resetState = () => {
 }
 
 const handleClose = () => {
+  // 防止在连接测试进行中关闭对话框
+  if (status.value === 'connecting') {
+    return
+  }
   closeEventSource()
   emit('close')
 }

frontend/src/components/account/CreateAccountModal.vue

@@ -2,7 +2,7 @@
   <BaseDialog
     :show="show"
     :title="t('admin.accounts.createAccount')"
-    width="wide"
+    width="normal"
     @close="handleClose"
   >
     <!-- Step Indicator for OAuth accounts -->

frontend/src/components/account/EditAccountModal.vue

@@ -2,7 +2,7 @@
   <BaseDialog
     :show="show"
     :title="t('admin.accounts.editAccount')"
-    width="wide"
+    width="normal"
     @close="handleClose"
   >
     <form

frontend/src/components/account/ReAuthAccountModal.vue

@@ -2,7 +2,7 @@
   <BaseDialog
     :show="show"
     :title="t('admin.accounts.reAuthorizeAccount')"
-    width="wide"
+    width="normal"
     @close="handleClose"
   >
     <div v-if="account" class="space-y-4">

frontend/src/components/account/SyncFromCrsModal.vue

@@ -151,6 +151,10 @@ watch(
 )
 
 const handleClose = () => {
+  // 防止在同步进行中关闭对话框
+  if (syncing.value) {
+    return
+  }
   emit('close')
 }
 

frontend/src/components/common/BaseDialog.vue

 <template>
   <Teleport to="body">
-    <div
-      v-if="show"
-      class="modal-overlay"
-      aria-labelledby="modal-title"
-      role="dialog"
-      aria-modal="true"
-      @click.self="handleClose"
-    >
-      <!-- Modal panel -->
-      <div :class="['modal-content', widthClasses]" @click.stop>
-        <!-- Header -->
-        <div class="modal-header">
-          <h3 id="modal-title" class="modal-title">
-            {{ title }}
-          </h3>
-          <button
-            @click="emit('close')"
-            class="-mr-2 rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-dark-500 dark:hover:bg-dark-700 dark:hover:text-dark-300"
-            aria-label="Close modal"
-          >
-            <svg
-              class="h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
+    <Transition name="modal">
+      <div
+        v-if="show"
+        class="modal-overlay"
+        :aria-labelledby="dialogId"
+        role="dialog"
+        aria-modal="true"
+        @click.self="handleClose"
+      >
+        <!-- Modal panel -->
+        <div ref="dialogRef" :class="['modal-content', widthClasses]" @click.stop>
+          <!-- Header -->
+          <div class="modal-header">
+            <h3 :id="dialogId" class="modal-title">
+              {{ title }}
+            </h3>
+            <button
+              @click="emit('close')"
+              class="-mr-2 rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-dark-500 dark:hover:bg-dark-700 dark:hover:text-dark-300"
+              aria-label="Close modal"
             >
-              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
+              <svg
+                class="h-5 w-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
 
-        <!-- Body -->
-        <div class="modal-body">
-          <slot></slot>
-        </div>
+          <!-- Body -->
+          <div class="modal-body">
+            <slot></slot>
+          </div>
 
-        <!-- Footer -->
-        <div v-if="$slots.footer" class="modal-footer">
-          <slot name="footer"></slot>
+          <!-- Footer -->
+          <div v-if="$slots.footer" class="modal-footer">
+            <slot name="footer"></slot>
+          </div>
         </div>
       </div>
-    </div>
+    </Transition>
   </Teleport>
 </template>
 
 <script setup lang="ts">
-import { computed, watch, onMounted, onUnmounted } from 'vue'
+import { computed, watch, onMounted, onUnmounted, ref, nextTick } from 'vue'
+
+// 生成唯一ID以避免多个对话框时ID冲突
+let dialogIdCounter = 0
+const dialogId = `modal-title-${++dialogIdCounter}`
+
+// 焦点管理
+const dialogRef = ref<HTMLElement | null>(null)
+let previousActiveElement: HTMLElement | null = null
 
 type DialogWidth = 'narrow' | 'normal' | 'wide' | 'extra-wide' | 'full'
 
@@ -72,12 +82,15 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 
 const widthClasses = computed(() => {
+  // Width guidance: narrow=confirm/short prompts, normal=standard forms,
+  // wide=multi-section forms or rich content, extra-wide=analytics/tables,
+  // full=full-screen or very dense layouts.
   const widths: Record<DialogWidth, string> = {
     narrow: 'max-w-md',
     normal: 'max-w-lg',
-    wide: 'max-w-4xl',
-    'extra-wide': 'max-w-6xl',
-    full: 'max-w-7xl'
+    wide: 'w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl',
+    'extra-wide': 'w-full sm:max-w-3xl md:max-w-4xl lg:max-w-5xl xl:max-w-6xl',
+    full: 'w-full sm:max-w-4xl md:max-w-5xl lg:max-w-6xl xl:max-w-7xl'
   }
   return widths[props.width]
 })
@@ -94,14 +107,31 @@ const handleEscape = (event: KeyboardEvent) => {
   }
 }
 
-// Prevent body scroll when modal is open
+// Prevent body scroll when modal is open and manage focus
 watch(
   () => props.show,
-  (isOpen) => {
+  async (isOpen) => {
     if (isOpen) {
-      document.body.style.overflow = 'hidden'
+      // 保存当前焦点元素
+      previousActiveElement = document.activeElement as HTMLElement
+      // 使用CSS类而不是直接操作style,更易于管理多个对话框
+      document.body.classList.add('modal-open')
+
+      // 等待DOM更新后设置焦点到对话框
+      await nextTick()
+      if (dialogRef.value) {
+        const firstFocusable = dialogRef.value.querySelector<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        )
+        firstFocusable?.focus()
+      }
     } else {
-      document.body.style.overflow = ''
+      document.body.classList.remove('modal-open')
+      // 恢复之前的焦点
+      if (previousActiveElement && typeof previousActiveElement.focus === 'function') {
+        previousActiveElement.focus()
+      }
+      previousActiveElement = null
     }
   },
   { immediate: true }
@@ -113,6 +143,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('keydown', handleEscape)
-  document.body.style.overflow = ''
+  // 确保组件卸载时移除滚动锁定
+  document.body.classList.remove('modal-open')
 })
 </script>

frontend/src/components/common/ExportProgressDialog.vue

+<template>
+  <BaseDialog :show="show" :title="t('usage.exporting')" width="narrow" @close="handleCancel">
+    <div class="space-y-4">
+      <div class="text-sm text-gray-600 dark:text-gray-400">
+        {{ t('usage.exportingProgress') }}
+      </div>
+      <div class="flex items-center justify-between text-sm text-gray-700 dark:text-gray-300">
+        <span>{{ t('usage.exportedCount', { current, total }) }}</span>
+        <span class="font-medium text-gray-900 dark:text-white">{{ normalizedProgress }}%</span>
+      </div>
+      <div class="h-2 w-full rounded-full bg-gray-200 dark:bg-dark-700">
+        <div
+          role="progressbar"
+          :aria-valuenow="normalizedProgress"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :aria-label="`${t('usage.exportingProgress')}: ${normalizedProgress}%`"
+          class="h-2 rounded-full bg-primary-600 transition-all"
+          :style="{ width: `${normalizedProgress}%` }"
+        ></div>
+      </div>
+      <div v-if="estimatedTime" class="text-xs text-gray-500 dark:text-gray-400" aria-live="polite" aria-atomic="true">
+        {{ t('usage.estimatedTime', { time: estimatedTime }) }}
+      </div>
+    </div>
+
+    <template #footer>
+      <button
+        @click="handleCancel"
+        type="button"
+        class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:border-dark-600 dark:bg-dark-700 dark:text-gray-200 dark:hover:bg-dark-600 dark:focus:ring-offset-dark-800"
+      >
+        {{ t('usage.cancelExport') }}
+      </button>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import BaseDialog from './BaseDialog.vue'
+
+interface Props {
+  show: boolean
+  progress: number
+  current: number
+  total: number
+  estimatedTime: string
+}
+
+interface Emits {
+  (e: 'cancel'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const { t } = useI18n()
+
+const normalizedProgress = computed(() => {
+  const value = Number.isFinite(props.progress) ? props.progress : 0
+  return Math.min(100, Math.max(0, Math.round(value)))
+})
+
+const handleCancel = () => {
+  emit('cancel')
+}
+</script>

frontend/src/components/common/Modal.vue

-<template>
-  <Teleport to="body">
-    <div
-      v-if="show"
-      class="modal-overlay"
-      aria-labelledby="modal-title"
-      role="dialog"
-      aria-modal="true"
-      @click.self="handleClose"
-    >
-      <!-- Modal panel -->
-      <div :class="['modal-content', sizeClasses]" @click.stop>
-        <!-- Header -->
-        <div class="modal-header">
-          <h3 id="modal-title" class="modal-title">
-            {{ title }}
-          </h3>
-          <button
-            @click="emit('close')"
-            class="-mr-2 rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-dark-500 dark:hover:bg-dark-700 dark:hover:text-dark-300"
-            aria-label="Close modal"
-          >
-            <svg
-              class="h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        <!-- Body -->
-        <div class="modal-body">
-          <slot></slot>
-        </div>
-
-        <!-- Footer -->
-        <div v-if="$slots.footer" class="modal-footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, watch, onMounted, onUnmounted } from 'vue'
-
-type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
-
-interface Props {
-  show: boolean
-  title: string
-  size?: ModalSize
-  closeOnEscape?: boolean
-  closeOnClickOutside?: boolean
-}
-
-interface Emits {
-  (e: 'close'): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'md',
-  closeOnEscape: true,
-  closeOnClickOutside: false
-})
-
-const emit = defineEmits<Emits>()
-
-const sizeClasses = computed(() => {
-  const sizes: Record<ModalSize, string> = {
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    '2xl': 'max-w-5xl',
-    full: 'max-w-4xl'
-  }
-  return sizes[props.size]
-})
-
-const handleClose = () => {
-  if (props.closeOnClickOutside) {
-    emit('close')
-  }
-}
-
-const handleEscape = (event: KeyboardEvent) => {
-  if (props.show && props.closeOnEscape && event.key === 'Escape') {
-    emit('close')
-  }
-}
-
-// Prevent body scroll when modal is open
-watch(
-  () => props.show,
-  (isOpen) => {
-    console.log('[Modal] show changed to:', isOpen)
-    if (isOpen) {
-      document.body.style.overflow = 'hidden'
-    } else {
-      document.body.style.overflow = ''
-    }
-  },
-  { immediate: true }
-)
-
-onMounted(() => {
-  document.addEventListener('keydown', handleEscape)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleEscape)
-  document.body.style.overflow = ''
-})
-</script>

frontend/src/components/common/index.ts

 // Export all common components
 export { default as DataTable } from './DataTable.vue'
 export { default as Pagination } from './Pagination.vue'
-export { default as Modal } from './Modal.vue'
 export { default as BaseDialog } from './BaseDialog.vue'
 export { default as ConfirmDialog } from './ConfirmDialog.vue'
 export { default as StatCard } from './StatCard.vue'
@@ -9,6 +8,7 @@ export { default as Toast } from './Toast.vue'
 export { default as LoadingSpinner } from './LoadingSpinner.vue'
 export { default as EmptyState } from './EmptyState.vue'
 export { default as LocaleSwitcher } from './LocaleSwitcher.vue'
+export { default as ExportProgressDialog } from './ExportProgressDialog.vue'
 
 // Export types
 export type { Column } from './types'

frontend/src/i18n/locales/en.ts

@@ -326,7 +326,8 @@ export default {
     customKeyHint: 'Only letters, numbers, underscores and hyphens allowed. Minimum 16 characters.',
     customKeyTooShort: 'Custom key must be at least 16 characters',
     customKeyInvalidChars: 'Custom key can only contain letters, numbers, underscores, and hyphens',
-    customKeyRequired: 'Please enter a custom key'
+    customKeyRequired: 'Please enter a custom key',
+    ccSwitchNotInstalled: 'CC-Switch is not installed or the protocol handler is not registered. Please install CC-Switch first or manually copy the API key.'
   },
 
   // Usage
@@ -345,6 +346,12 @@ export default {
     allApiKeys: 'All API Keys',
     timeRange: 'Time Range',
     exportCsv: 'Export CSV',
+    exportExcel: 'Export Excel',
+    exportingProgress: 'Exporting data...',
+    exportedCount: 'Exported {current}/{total} records',
+    estimatedTime: 'Estimated time remaining: {time}',
+    cancelExport: 'Cancel Export',
+    exportCancelled: 'Export cancelled',
     exporting: 'Exporting...',
     preparingExport: 'Preparing export...',
     model: 'Model',
@@ -368,6 +375,8 @@ export default {
     noDataToExport: 'No data to export',
     exportSuccess: 'Usage data exported successfully',
     exportFailed: 'Failed to export usage data',
+    exportExcelSuccess: 'Usage data exported successfully (Excel format)',
+    exportExcelFailed: 'Failed to export usage data',
     billingType: 'Billing',
     balance: 'Balance',
     subscription: 'Subscription'
@@ -1291,6 +1300,7 @@ export default {
       account: 'Account',
       group: 'Group',
       requestId: 'Request ID',
+      requestIdCopied: 'Request ID copied',
       allModels: 'All Models',
       allAccounts: 'All Accounts',
       allGroups: 'All Groups',
@@ -1300,6 +1310,10 @@ export default {
       outputCost: 'Output Cost',
       cacheCreationCost: 'Cache Creation Cost',
       cacheReadCost: 'Cache Read Cost',
+      inputTokens: 'Input Tokens',
+      outputTokens: 'Output Tokens',
+      cacheCreationTokens: 'Cache Creation Tokens',
+      cacheReadTokens: 'Cache Read Tokens',
       failedToLoad: 'Failed to load usage records'
     },
 

frontend/src/i18n/locales/zh.ts

@@ -322,7 +322,8 @@ export default {
     customKeyHint: '仅允许字母、数字、下划线和连字符，最少16个字符。',
     customKeyTooShort: '自定义密钥至少需要16个字符',
     customKeyInvalidChars: '自定义密钥只能包含字母、数字、下划线和连字符',
-    customKeyRequired: '请输入自定义密钥'
+    customKeyRequired: '请输入自定义密钥',
+    ccSwitchNotInstalled: 'CC-Switch 未安装或协议处理程序未注册。请先安装 CC-Switch 或手动复制 API 密钥。'
   },
 
   // Usage
@@ -341,6 +342,12 @@ export default {
     allApiKeys: '全部密钥',
     timeRange: '时间范围',
     exportCsv: '导出 CSV',
+    exportExcel: '导出 Excel',
+    exportingProgress: '正在导出数据...',
+    exportedCount: '已导出 {current}/{total} 条',
+    estimatedTime: '预计剩余时间：{time}',
+    cancelExport: '取消导出',
+    exportCancelled: '导出已取消',
     exporting: '导出中...',
     preparingExport: '正在准备导出...',
     model: '模型',
@@ -364,6 +371,8 @@ export default {
     noDataToExport: '没有可导出的数据',
     exportSuccess: '使用数据导出成功',
     exportFailed: '使用数据导出失败',
+    exportExcelSuccess: '使用数据导出成功（Excel格式）',
+    exportExcelFailed: '使用数据导出失败',
     billingType: '消费类型',
     balance: '余额',
     subscription: '订阅'
@@ -1490,6 +1499,7 @@ export default {
       account: '账户',
       group: '分组',
       requestId: '请求ID',
+      requestIdCopied: '请求ID已复制',
       allModels: '全部模型',
       allAccounts: '全部账户',
       allGroups: '全部分组',
@@ -1499,6 +1509,10 @@ export default {
       outputCost: '输出成本',
       cacheCreationCost: '缓存创建成本',
       cacheReadCost: '缓存读取成本',
+      inputTokens: '输入 Token',
+      outputTokens: '输出 Token',
+      cacheCreationTokens: '缓存创建 Token',
+      cacheReadTokens: '缓存读取 Token',
       failedToLoad: '加载使用记录失败'
     },
 

frontend/src/style.css

@@ -79,6 +79,20 @@
     @apply hover:from-red-600 hover:to-red-700 hover:shadow-lg hover:shadow-red-500/30;
   }
 
+  .btn-success {
+    @apply bg-gradient-to-r from-emerald-500 to-emerald-600;
+    @apply text-white shadow-md shadow-emerald-500/25;
+    @apply hover:from-emerald-600 hover:to-emerald-700 hover:shadow-lg hover:shadow-emerald-500/30;
+    @apply dark:shadow-emerald-500/20;
+  }
+
+  .btn-warning {
+    @apply bg-gradient-to-r from-amber-500 to-amber-600;
+    @apply text-white shadow-md shadow-amber-500/25;
+    @apply hover:from-amber-600 hover:to-amber-700 hover:shadow-lg hover:shadow-amber-500/30;
+    @apply dark:shadow-amber-500/20;
+  }
+
   .btn-sm {
     @apply rounded-lg px-3 py-1.5 text-xs;
   }
@@ -130,6 +144,20 @@
     -moz-appearance: textfield;
   }
 
+  /* ============ 玻璃效果 ============ */
+  .glass {
+    @apply bg-white/80 backdrop-blur-xl dark:bg-dark-800/80;
+  }
+
+  .glass-card {
+    @apply bg-white/70 dark:bg-dark-800/70;
+    @apply backdrop-blur-xl;
+    @apply rounded-2xl;
+    @apply border border-white/20 dark:border-dark-700/50;
+    @apply shadow-glass;
+    @apply transition-all duration-300;
+  }
+
   /* ============ 卡片样式 ============ */
   .card {
     @apply bg-white dark:bg-dark-800/50;
@@ -151,6 +179,20 @@
     @apply shadow-glass;
   }
 
+  .card-header {
+    @apply border-b border-gray-100 dark:border-dark-700;
+    @apply px-6 py-4;
+  }
+
+  .card-body {
+    @apply p-6;
+  }
+
+  .card-footer {
+    @apply border-t border-gray-100 dark:border-dark-700;
+    @apply px-6 py-4;
+  }
+
   /* ============ 统计卡片 ============ */
   .stat-card {
     @apply card p-5;
@@ -256,6 +298,10 @@
     @apply bg-gray-100 text-gray-700 dark:bg-dark-700 dark:text-dark-300;
   }
 
+  .badge-purple {
+    @apply bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400;
+  }
+
   /* ============ 下拉菜单 ============ */
   .dropdown {
     @apply absolute z-50;
@@ -283,15 +329,19 @@
   }
 
   .modal-content {
+    @apply w-full;
+    @apply max-h-[95vh] sm:max-h-[90vh];
     @apply bg-white dark:bg-dark-800;
     @apply rounded-2xl shadow-2xl;
-    @apply w-full;
-    @apply max-h-[90vh] overflow-y-auto;
+    @apply border border-gray-200 dark:border-dark-700;
+    @apply flex flex-col;
   }
 
   .modal-header {
-    @apply border-b border-gray-100 px-6 py-4 dark:border-dark-700;
+    @apply border-b border-gray-200 px-4 py-3 dark:border-dark-700;
+    @apply sm:px-6 sm:py-4;
     @apply flex items-center justify-between;
+    @apply flex-shrink-0;
   }
 
   .modal-title {
@@ -299,12 +349,69 @@
   }
 
   .modal-body {
-    @apply px-6 py-4;
+    @apply px-4 py-3;
+    @apply sm:px-6 sm:py-4;
+    @apply flex-1 overflow-y-auto;
   }
 
   .modal-footer {
-    @apply border-t border-gray-100 px-6 py-4 dark:border-dark-700;
+    @apply border-t border-gray-200 px-4 py-3 dark:border-dark-700;
+    @apply sm:px-6 sm:py-4;
     @apply flex items-center justify-end gap-3;
+    @apply flex-shrink-0;
+  }
+
+  /* 防止body滚动的工具类 */
+  body.modal-open {
+    overflow: hidden;
+  }
+
+  .modal-enter-active {
+    transition: opacity 250ms ease-out;
+  }
+
+  .modal-leave-active {
+    transition: opacity 200ms ease-in;
+  }
+
+  .modal-enter-from,
+  .modal-leave-to {
+    opacity: 0;
+  }
+
+  .modal-enter-active .modal-content {
+    transition: transform 250ms ease-out, opacity 250ms ease-out;
+  }
+
+  .modal-leave-active .modal-content {
+    transition: transform 200ms ease-in, opacity 200ms ease-in;
+  }
+
+  .modal-enter-from .modal-content,
+  .modal-leave-to .modal-content {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  .modal-enter-to .modal-content,
+  .modal-leave-from .modal-content {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .modal-enter-active,
+    .modal-leave-active,
+    .modal-enter-active .modal-content,
+    .modal-leave-active .modal-content {
+      transition-duration: 1ms;
+      transition-delay: 0ms;
+    }
+
+    .modal-enter-from .modal-content,
+    .modal-leave-to .modal-content {
+      transform: none;
+    }
   }
 
   /* ============ Dialog ============ */

frontend/src/views/admin/AccountsView.vue

@@ -105,65 +105,65 @@
 
       <template #table>
         <!-- Bulk Actions Bar -->
-      <div
-        v-if="selectedAccountIds.length > 0"
-        class="card border-primary-200 bg-primary-50 px-4 py-3 dark:border-primary-800 dark:bg-primary-900/20"
-      >
-        <div class="flex flex-wrap items-center justify-between gap-3">
-          <div class="flex flex-wrap items-center gap-2">
-            <span class="text-sm font-medium text-primary-900 dark:text-primary-100">
-              {{ t('admin.accounts.bulkActions.selected', { count: selectedAccountIds.length }) }}
-            </span>
-            <button
-              @click="selectCurrentPageAccounts"
-              class="text-xs font-medium text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
-            >
-              {{ t('admin.accounts.bulkActions.selectCurrentPage') }}
-            </button>
-            <span class="text-gray-300 dark:text-primary-800">•</span>
-            <button
-              @click="selectedAccountIds = []"
-              class="text-xs font-medium text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
-            >
-              {{ t('admin.accounts.bulkActions.clear') }}
-            </button>
-          </div>
-          <div class="flex items-center gap-2">
-            <button @click="handleBulkDelete" class="btn btn-danger btn-sm">
-              <svg
-                class="mr-1.5 h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="1.5"
+        <div
+          v-if="selectedAccountIds.length > 0"
+          class="mb-[5px] mt-[10px] px-5 py-1"
+        >
+          <div class="flex flex-wrap items-center justify-between gap-3">
+            <div class="flex flex-wrap items-center gap-2">
+              <span class="text-sm font-medium text-primary-900 dark:text-primary-100">
+                {{ t('admin.accounts.bulkActions.selected', { count: selectedAccountIds.length }) }}
+              </span>
+              <button
+                @click="selectCurrentPageAccounts"
+                class="text-xs font-medium text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
               >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-                />
-              </svg>
-              {{ t('admin.accounts.bulkActions.delete') }}
-            </button>
-            <button @click="showBulkEditModal = true" class="btn btn-primary btn-sm">
-              <svg
-                class="mr-1.5 h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="1.5"
+                {{ t('admin.accounts.bulkActions.selectCurrentPage') }}
+              </button>
+              <span class="text-gray-300 dark:text-primary-800">•</span>
+              <button
+                @click="selectedAccountIds = []"
+                class="text-xs font-medium text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
               >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-                />
-              </svg>
-              {{ t('admin.accounts.bulkActions.edit') }}
-            </button>
+                {{ t('admin.accounts.bulkActions.clear') }}
+              </button>
+            </div>
+            <div class="flex items-center gap-2">
+              <button @click="handleBulkDelete" class="btn btn-danger btn-sm">
+                <svg
+                  class="mr-1.5 h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                  />
+                </svg>
+                {{ t('admin.accounts.bulkActions.delete') }}
+              </button>
+              <button @click="showBulkEditModal = true" class="btn btn-primary btn-sm">
+                <svg
+                  class="mr-1.5 h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                  />
+                </svg>
+                {{ t('admin.accounts.bulkActions.edit') }}
+              </button>
+            </div>
           </div>
         </div>
-      </div>
 
       <DataTable :columns="columns" :data="accounts" :loading="loading">
           <template #cell-select="{ row }">

frontend/src/views/user/KeysView.vue

@@ -301,7 +301,7 @@
     <BaseDialog
       :show="showCreateModal || showEditModal"
       :title="showEditModal ? t('keys.editKey') : t('keys.createKey')"
-      width="narrow"
+      width="normal"
       @close="closeModals"
     >
       <form id="key-form" @submit.prevent="handleSubmit" class="space-y-5">
@@ -878,7 +878,20 @@ const importToCcswitch = (apiKey: string) => {
     usageAutoInterval: '30'
   })
   const deeplink = `ccswitch://v1/import?${params.toString()}`
-  window.open(deeplink, '_self')
+
+  try {
+    window.open(deeplink, '_self')
+
+    // Check if the protocol handler worked by detecting if we're still focused
+    setTimeout(() => {
+      if (document.hasFocus()) {
+        // Still focused means the protocol handler likely failed
+        appStore.showError(t('keys.ccSwitchNotInstalled'))
+      }
+    }, 100)
+  } catch (error) {
+    appStore.showError(t('keys.ccSwitchNotInstalled'))
+  }
 }
 
 onMounted(() => {