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

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

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

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

web/admin-spa/src/components/layout/AppHeader.vue

@@ -1,11 +1,11 @@
 <template>
   <!-- 顶部导航 -->
   <div
-    class="glass-strong rounded-3xl p-6 mb-8 shadow-xl"
+    class="glass-strong rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-6 mb-4 sm:mb-6 md:mb-8 shadow-xl"
     style="z-index: 10; position: relative;"
   >
-    <div class="flex flex-col md:flex-row justify-between items-center gap-4">
-      <div class="flex items-center gap-4">
+    <div class="flex flex-col sm:flex-row justify-between items-center gap-3 sm:gap-4">
+      <div class="flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto justify-center sm:justify-start">
         <LogoTitle 
           :loading="oemLoading"
           :title="oemSettings.siteName"
@@ -15,8 +15,8 @@
         >
           <template #after-title>
             <!-- 版本信息 -->
-            <div class="flex items-center gap-2">
-              <span class="text-sm text-gray-400 font-mono">v{{ versionInfo.current || '...' }}</span>
+            <div class="flex items-center gap-1 sm:gap-2">
+              <span class="text-xs sm:text-sm text-gray-400 font-mono">v{{ versionInfo.current || '...' }}</span>
               <!-- 更新提示 -->
               <a 
                 v-if="versionInfo.hasUpdate" 
@@ -35,11 +35,11 @@
       <!-- 用户菜单 -->
       <div class="relative user-menu-container">
         <button 
-          class="btn btn-primary px-4 py-3 flex items-center gap-2 relative"
+          class="btn btn-primary px-3 sm:px-4 py-2 sm:py-3 flex items-center gap-1 sm:gap-2 relative text-sm sm:text-base"
           @click="userMenuOpen = !userMenuOpen"
         >
           <i class="fas fa-user-circle" />
-          <span>{{ currentUser.username || 'Admin' }}</span>
+          <span class="hidden sm:inline">{{ currentUser.username || 'Admin' }}</span>
           <i
             class="fas fa-chevron-down text-xs transition-transform duration-200"
             :class="{ 'rotate-180': userMenuOpen }"
@@ -49,7 +49,7 @@
         <!-- 悬浮菜单 -->
         <div 
           v-if="userMenuOpen" 
-          class="absolute right-0 top-full mt-2 w-56 bg-white rounded-xl shadow-xl border border-gray-200 py-2 user-menu-dropdown"
+          class="absolute right-0 top-full mt-2 w-48 sm:w-56 bg-white rounded-xl shadow-xl border border-gray-200 py-2 user-menu-dropdown"
           style="z-index: 999999;"
           @click.stop
         >
@@ -138,9 +138,9 @@
   <!-- 修改账户信息模态框 -->
   <div
     v-if="showChangePasswordModal"
-    class="fixed inset-0 modal z-50 flex items-center justify-center p-4"
+    class="fixed inset-0 modal z-50 flex items-center justify-center p-3 sm:p-4"
   >
-    <div class="modal-content w-full max-w-md p-8 mx-auto max-h-[90vh] flex flex-col">
+    <div class="modal-content w-full max-w-md p-4 sm:p-6 md:p-8 mx-auto max-h-[90vh] flex flex-col">
       <div class="flex items-center justify-between mb-6">
         <div class="flex items-center gap-3">
           <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">

web/admin-spa/src/components/layout/MainLayout.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="min-h-screen p-6">
+  <div class="min-h-screen p-3 sm:p-4 md:p-6">
     <!-- 顶部导航 -->
     <AppHeader />
     
     <!-- 主内容区域 -->
     <div
-      class="glass-strong rounded-3xl p-6 shadow-xl"
-      style="z-index: 1; min-height: calc(100vh - 240px);"
+      class="glass-strong rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-6 shadow-xl"
+      style="z-index: 1; min-height: calc(100vh - 120px);"
     >
       <!-- 标签栏 -->
       <TabBar

web/admin-spa/src/components/layout/TabBar.vue

@@ -1,16 +1,38 @@
 <template>
-  <div class="flex flex-wrap gap-2 mb-6 bg-white/10 rounded-2xl p-2 backdrop-blur-sm">
-    <button 
-      v-for="tab in tabs" 
-      :key="tab.key"
-      :class="[
-        'tab-btn flex-1 py-3 px-6 text-sm font-semibold transition-all duration-300',
-        activeTab === tab.key ? 'active' : 'text-gray-700 hover:bg-white/10 hover:text-gray-900'
-      ]"
-      @click="$emit('tab-change', tab.key)"
-    >
-      <i :class="tab.icon + ' mr-2'" />{{ tab.name }}
-    </button>
+  <div class="mb-4 sm:mb-6">
+    <!-- 移动端下拉选择器 -->
+    <div class="block sm:hidden bg-white/10 rounded-xl p-2 backdrop-blur-sm">
+      <select 
+        :value="activeTab"
+        class="w-full px-4 py-3 bg-white/90 rounded-lg text-gray-700 font-semibold focus:outline-none focus:ring-2 focus:ring-primary-color"
+        @change="$emit('tab-change', $event.target.value)"
+      >
+        <option
+          v-for="tab in tabs"
+          :key="tab.key"
+          :value="tab.key"
+        >
+          {{ tab.name }}
+        </option>
+      </select>
+    </div>
+    
+    <!-- 桌面端标签栏 -->
+    <div class="hidden sm:flex flex-wrap gap-2 bg-white/10 rounded-2xl p-2 backdrop-blur-sm">
+      <button 
+        v-for="tab in tabs" 
+        :key="tab.key"
+        :class="[
+          'tab-btn flex-1 py-2 sm:py-3 px-3 sm:px-4 md:px-6 text-xs sm:text-sm font-semibold transition-all duration-300',
+          activeTab === tab.key ? 'active' : 'text-gray-700 hover:bg-white/10 hover:text-gray-900'
+        ]"
+        @click="$emit('tab-change', tab.key)"
+      >
+        <i :class="tab.icon + ' mr-1 sm:mr-2'" />
+        <span class="hidden md:inline">{{ tab.name }}</span>
+        <span class="md:hidden">{{ tab.shortName || tab.name }}</span>
+      </button>
+    </div>
   </div>
 </template>
 
@@ -25,11 +47,11 @@ defineProps({
 defineEmits(['tab-change'])
 
 const tabs = [
-  { key: 'dashboard', name: '仪表板', icon: 'fas fa-tachometer-alt' },
-  { key: 'apiKeys', name: 'API Keys', icon: 'fas fa-key' },
-  { key: 'accounts', name: '账户管理', icon: 'fas fa-user-circle' },
-  { key: 'tutorial', name: '使用教程', icon: 'fas fa-graduation-cap' },
-  { key: 'settings', name: '其他设置', icon: 'fas fa-cogs' }
+  { 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: 'tutorial', name: '使用教程', shortName: '教程', icon: 'fas fa-graduation-cap' },
+  { key: 'settings', name: '其他设置', shortName: '设置', icon: 'fas fa-cogs' }
 ]
 </script>