Upload 64 files

config.py

@@ -57,9 +57,9 @@ PLATFORM_STYLES = {
 
 # API调用节流控制配置
 PLATFORM_LIMITS = {
-    'openai': 30,
-    'anthropic': 30,  
-    'google': 30,    
+    'openai': 50,
+    'anthropic': 50,  
+    'google': 50,    
     'deepseek': 50,   
     'default': 10   
 }

core/cron.py

@@ -0,0 +1,88 @@
+"""
+定时任务模块 - 定期更新所有API密钥
+"""
+import json
+import os
+import time
+import sched
+import threading
+import sqlite3
+from core.update import update
+from utils.db import get_db_connection
+from config import API_KEYS_FILE
+
+# 定义更新间隔（12小时，单位：秒）
+UPDATE_INTERVAL = 12 * 60 * 60
+
+def update_all_keys():
+    """
+    更新所有API密钥
+    """
+    print(f"[{time.strftime('%Y-%m-%d %H:%M:%S')}] 开始更新所有API密钥...")
+    
+    # 从SQLite数据库获取所有密钥ID
+    conn = get_db_connection()
+    key_ids = []
+    
+    try:
+        cursor = conn.cursor()
+        cursor.execute('SELECT id FROM api_keys')
+        rows = cursor.fetchall()
+        key_ids = [row['id'] for row in rows]
+    except sqlite3.Error as e:
+        print(f"从数据库获取密钥时出错: {str(e)}")
+        
+        # 备用方案：尝试从JSON文件读取
+        if os.path.exists(API_KEYS_FILE):
+            try:
+                with open(API_KEYS_FILE, "r", encoding="utf-8") as f:
+                    data = json.load(f)
+                key_ids = [key["id"] for key in data.get("api_keys", [])]
+            except Exception as e:
+                print(f"读取API密钥文件失败: {str(e)}")
+                return
+    finally:
+        if conn:
+            conn.close()
+    
+    # 如果没有找到密钥，则退出
+    if not key_ids:
+        print("没有找到API密钥，跳过更新")
+        return
+    
+    # 逐个更新API密钥
+    for key_id in key_ids:
+        result = update(key_id)
+        if result["success"]:
+            print(f"  - 密钥 {key_id} 更新成功")
+        else:
+            print(f"  - 密钥 {key_id} 更新失败: {result['message']}")
+    
+    print(f"[{time.strftime('%Y-%m-%d %H:%M:%S')}] 完成所有API密钥更新")
+
+def run_scheduler():
+    """
+    运行定时任务
+    """
+    scheduler = sched.scheduler(time.time, time.sleep)
+    
+    def scheduled_update():
+        update_all_keys()
+        # 再次安排下一次更新
+        scheduler.enter(UPDATE_INTERVAL, 1, scheduled_update, ())
+    
+    # 首次安排更新
+    scheduler.enter(UPDATE_INTERVAL, 1, scheduled_update, ())
+    
+    print(f"定时任务已启动，每 {UPDATE_INTERVAL // 3600} 小时更新一次API密钥")
+    scheduler.run()
+
+if __name__ == "__main__":
+    # 在单独的线程中运行定时任务，避免阻塞主线程
+    scheduler_thread = threading.Thread(target=run_scheduler)
+    scheduler_thread.daemon = True  # 设置为守护线程，当主线程退出时自动结束
+    scheduler_thread.start()
+    
+    # 保持主线程运行（可选，根据实际需求）
+    while True:
+        time.sleep(60)

core/update.py

@@ -0,0 +1,139 @@
+"""
+API密钥更新模块 - 提供API密钥的验证和更新功能
+"""
+import json
+import os
+import sqlite3
+from datetime import datetime
+from core.api_manager import get_api_manager
+from utils.db import get_db_connection
+from config import API_KEYS_FILE
+
+def update(key_id):
+    """
+    更新指定ID的API密钥
+    
+    Args:
+        key_id (str): 要更新的API密钥ID
+        
+    Returns:
+        dict: 包含更新结果的字典，成功时返回更新后的密钥信息，失败时返回错误信息
+    """
+    # 从SQLite数据库中获取密钥信息
+    conn = get_db_connection()
+    try:
+        cursor = conn.cursor()
+        cursor.execute('SELECT * FROM api_keys WHERE id = ?', (key_id,))
+        row = cursor.fetchone()
+        
+        if row is None:
+            # 数据库中找不到，尝试从JSON文件加载
+            # 这是为了支持旧版本的兼容
+            if os.path.exists(API_KEYS_FILE):
+                try:
+                    with open(API_KEYS_FILE, "r", encoding="utf-8") as f:
+                        data = json.load(f)
+                    
+                    for key in data.get("api_keys", []):
+                        if key.get("id") == key_id:
+                            key_data = key
+                            break
+                    else:
+                        return {"success": False, "message": f"未找到ID为 {key_id} 的API密钥"}
+                except Exception as e:
+                    return {"success": False, "message": f"读取API密钥文件失败: {str(e)}"}
+            else:
+                return {"success": False, "message": f"未找到ID为 {key_id} 的API密钥"}
+        else:
+            key_data = dict(row)
+        
+        # 获取平台和密钥
+        platform = key_data.get("platform")
+        api_key = key_data.get("key")
+        
+        # 获取API管理器
+        api_manager = get_api_manager()
+        
+        # 调用API管理器验证密钥
+        try:
+            result = api_manager.execute(platform, "validate_api_key", api_key)
+        except Exception as e:
+            return {"success": False, "message": f"验证API密钥时出错: {str(e)}"}
+        
+        # 当前时间
+        current_time = datetime.now().isoformat()
+        
+        # 将布尔值转换为整数
+        success_int = 1 if result.get("success", False) else 0
+        
+        # 更新密钥信息到SQLite数据库
+        try:
+            cursor.execute('''
+            UPDATE api_keys
+            SET states = ?, balance = ?, success = ?, return_message = ?, updated_at = ?
+            WHERE id = ?
+            ''', (
+                result.get("states", ""),
+                result.get("balance", 0),
+                success_int,
+                result.get("return_message", ""),
+                current_time,
+                key_id
+            ))
+            
+            # 如果数据库中没有此记录（可能是旧的JSON格式数据），则插入新记录
+            if cursor.rowcount == 0 and 'id' in key_data:
+                cursor.execute('''
+                INSERT OR REPLACE INTO api_keys
+                (id, platform, name, key, created_at, updated_at, success, return_message, states, balance)
+                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+                ''', (
+                    key_data.get("id"),
+                    key_data.get("platform"),
+                    key_data.get("name"),
+                    key_data.get("key"),
+                    key_data.get("created_at", current_time),
+                    current_time,
+                    success_int,
+                    result.get("return_message", ""),
+                    result.get("states", ""),
+                    result.get("balance", 0)
+                ))
+            
+            conn.commit()
+            
+            # 获取更新后的完整记录
+            cursor.execute('SELECT * FROM api_keys WHERE id = ?', (key_id,))
+            updated_row = cursor.fetchone()
+            
+            if updated_row:
+                updated_data = dict(updated_row)
+                # 将布尔值转换为布尔类型
+                updated_data['success'] = bool(updated_data['success'])
+                
+                return {
+                    "success": True, 
+                    "message": "API密钥更新成功",
+                    "data": updated_data
+                }
+            else:
+                # 如果以某种方式在更新过程中密钥被删除
+                return {"success": False, "message": f"更新期间ID为 {key_id} 的API密钥已被删除"}
+            
+        except sqlite3.Error as e:
+            conn.rollback()
+            return {"success": False, "message": f"更新数据库中的API密钥失败: {str(e)}"}
+        
+    except sqlite3.Error as e:
+        return {"success": False, "message": f"从数据库获取API密钥时出错: {str(e)}"}
+    finally:
+        if conn:
+            conn.close()
+
+if __name__ == "__main__":
+    # 可以在这里添加命令行参数解析的代码，用于直接从命令行调用
+    import sys
+    if len(sys.argv) > 1:
+        key_id = sys.argv[1]
+        result = update(key_id)
+        print(json.dumps(result, indent=2, ensure_ascii=False))

models/api_key.py

@@ -103,7 +103,7 @@ class ApiKeyManager:
             conn.commit()
             
             # 自动调用update函数验证密钥
-            from update import update
+            from core.update import update
             try:
                 print(f"[自动验证] 正在验证密钥 ID: {new_key_id}")
                 update_result = update(new_key_id)
@@ -253,7 +253,7 @@ class ApiKeyManager:
             conn.commit()
             
             # 在批量添加完成后，启动一个单独的线程来验证所有新添加的密钥
-            from update import update
+            from core.update import update
             from threading import Thread
             
             def validate_keys():

routes/api.py

@@ -70,7 +70,7 @@ def bulk_add_api_keys():
 @api_bp.route('/keys/update/<key_id>', methods=['POST', 'GET'])
 def update_api_key_status(key_id):
     """更新API密钥状态"""
-    from update import update
+    from core.update import update
     try:
         print(f"正在更新密钥ID: {key_id}")
         result = update(key_id)

static/js/api-key-manager/bulk-actions.js

@@ -5,6 +5,15 @@
 
 // 切换单个密钥的选择状态
 function toggleKeySelection(keyId) {
+    // 检查密钥是否符合当前视图（有效/无效）
+    const key = this.apiKeys.find(k => k.id === keyId);
+    
+    // 如果密钥不存在或者密钥状态与当前视图不符，不进行任何操作
+    if (!key || (this.currentView === 'valid' && key.success !== true) || 
+               (this.currentView === 'invalid' && key.success !== false)) {
+        return;
+    }
+    
     const index = this.selectedKeys.indexOf(keyId);
     if (index === -1) {
         // 添加到选中数组
@@ -26,9 +35,12 @@ function togglePlatformSelection(platformId) {
         // 添加到选中平台数组
         this.selectedPlatforms.push(platformId);
         
-        // 选中该平台下的所有密钥
+        // 选中该平台下的所有符合当前视图的密钥
         this.apiKeys.forEach(key => {
-            if (key.platform === platformId && !this.selectedKeys.includes(key.id)) {
+            // 只选择符合当前视图的密钥
+            if (key.platform === platformId && !this.selectedKeys.includes(key.id) && 
+                ((this.currentView === 'valid' && key.success === true) || 
+                 (this.currentView === 'invalid' && key.success === false))) {
                 this.selectedKeys.push(key.id);
             }
         });
@@ -51,9 +63,15 @@ function updatePlatformSelectionStates() {
     // 清空当前选中的平台
     this.selectedPlatforms = [];
     
-    // 对于每个平台，检查该平台下的所有密钥是否都被选中
+    // 对于每个平台，检查该平台下符合当前视图的所有密钥是否都被选中
     platforms.forEach(platform => {
-        const platformKeys = this.apiKeys.filter(key => key.platform === platform.id);
+        // 筛选出符合当前视图的平台密钥
+        const platformKeys = this.apiKeys.filter(key => 
+            key.platform === platform.id && 
+            ((this.currentView === 'valid' && key.success === true) || 
+             (this.currentView === 'invalid' && key.success === false))
+        );
+        
         const allSelected = platformKeys.length > 0 && 
                             platformKeys.every(key => this.selectedKeys.includes(key.id));
         
@@ -65,17 +83,24 @@ function updatePlatformSelectionStates() {
 
 // 获取所有可见密钥ID
 function getAllVisibleKeyIds() {
-    // 获取DOM中的所有可见密钥元素
-    const keyElements = document.querySelectorAll('[data-key-id]');
-    const keyIds = [];
-    keyElements.forEach(el => {
-        // 只收集可见元素的ID
-        if (window.getComputedStyle(el).display !== 'none') {
-            const keyId = el.getAttribute('data-key-id');
-            if (keyId) keyIds.push(keyId);
-        }
-    });
-    return keyIds;
+    // 基于当前视图状态和JavaScript筛选而不是仅依赖DOM
+    const visibleIds = this.apiKeys
+        .filter(key => {
+            // 应用当前视图筛选
+            if (this.currentView === 'valid' && key.success !== true) return false;
+            if (this.currentView === 'invalid' && key.success !== false) return false;
+            
+            // 应用平台筛选
+            if (!this.platformFilters[key.platform]) return false;
+            
+            // 应用搜索筛选
+            if (this.searchTerm && !this.matchesSearch(key.name, key.key)) return false;
+            
+            return true;
+        })
+        .map(key => key.id);
+    
+    return visibleIds;
 }
 
 // 切换全选/取消全选

static/js/api-key-manager/core.js

@@ -18,6 +18,12 @@ function initApiKeyManager() {
     const savedPlatformFilters = localStorage.getItem('platformFilters');
     const parsedPlatformFilters = savedPlatformFilters ? JSON.parse(savedPlatformFilters) : {};
     
+    // 从localStorage读取当前视图状态，如果有的话
+    const savedView = localStorage.getItem('keyView');
+    if (savedView === 'valid' || savedView === 'invalid') {
+        this.currentView = savedView;
+    }
+    
     // 初始化平台状态，优先使用保存的状态
     platforms.forEach(platform => {
         this.platformStates[platform.id] = parsedPlatformStates[platform.id] !== undefined 

static/js/api-key-manager/main-manager.js

@@ -8,6 +8,7 @@ function apiKeyManager() {
         platformFilters: {}, // 平台筛选状态
         platformIds: [], // 所有平台ID列表
         allPlatformsSelected: true, // 是否选择所有平台
+        currentView: 'valid', // 当前视图：'valid'（有效）或'invalid'（无效）
         searchTerm: '',
         showAddModal: false,
         showDeleteConfirm: false,
@@ -131,11 +132,37 @@ function apiKeyManager() {
             return hasPlatformKeys.apply(this, arguments);
         },
         
-        // 平台是否应该显示（基于筛选条件）
+        // 平台是否应该显示（基于筛选条件和当前视图）
         isPlatformVisible(platformId) {
             return isPlatformVisible.apply(this, arguments);
         },
         
+        // 切换当前视图（有效/无效密钥）
+        switchView(view) {
+            if (this.currentView !== view) {
+                this.currentView = view;
+                // 保存用户的选择到localStorage
+                localStorage.setItem('keyView', view);
+                
+                // 重置选择状态
+                this.selectedKeys = [];
+                this.selectedPlatforms = [];
+                
+                // 重新加载API密钥数据
+                this.loadApiKeys();
+            }
+        },
+        
+        // 判断密钥是否在当前视图中可见
+        isKeyVisibleInCurrentView(key) {
+            if (this.currentView === 'valid') {
+                return key.success === true;
+            } else if (this.currentView === 'invalid') {
+                return key.success === false;
+            }
+            return true; // 默认都显示
+        },
+        
         // 获取所有平台
         getPlatforms() {
             return getPlatforms.apply(this, arguments);

static/js/api-key-manager/platform-utils.js

@@ -13,23 +13,56 @@ function togglePlatform(platformId) {
 
 // 获取平台API密钥数量
 function getPlatformKeyCount(platformId, filtered = false) {
-    if (filtered && this.searchTerm !== '') {
-        return this.apiKeys.filter(key => 
-            key.platform === platformId && 
-            this.matchesSearch(key.name, key.key)
-        ).length;
-    }
-    return this.apiKeys.filter(key => key.platform === platformId).length;
+    return this.apiKeys.filter(key => {
+        // 基础过滤 - 匹配平台
+        if (key.platform !== platformId) return false;
+        
+        // 视图过滤
+        if (this.currentView === 'valid' && key.success !== true) return false;
+        if (this.currentView === 'invalid' && key.success !== false) return false;
+        
+        // 搜索过滤
+        if (filtered && this.searchTerm !== '' && !this.matchesSearch(key.name, key.key)) return false;
+        
+        return true;
+    }).length;
+}
+
+// 获取平台有效API密钥数量
+function getPlatformValidKeyCount(platformId) {
+    return this.apiKeys.filter(key => 
+        key.platform === platformId && key.success === true
+    ).length;
 }
 
-// 平台是否有API密钥
+// 获取平台无效API密钥数量
+function getPlatformInvalidKeyCount(platformId) {
+    return this.apiKeys.filter(key => 
+        key.platform === platformId && key.success === false
+    ).length;
+}
+
+// 平台是否有API密钥（考虑当前视图状态）
 function hasPlatformKeys(platformId) {
     return this.getPlatformKeyCount(platformId) > 0;
 }
 
-// 平台是否应该显示（基于筛选条件）
+// 平台是否应该显示（基于筛选条件和当前视图状态）
 function isPlatformVisible(platformId) {
-    return this.platformFilters[platformId] === true;
+    // 首先检查平台是否在筛选条件中
+    if (this.platformFilters[platformId] !== true) {
+        return false;
+    }
+    
+    // 然后检查当前视图下该平台是否有密钥
+    const hasKeysInCurrentView = this.apiKeys.some(key => {
+        if (key.platform !== platformId) return false;
+        if (this.currentView === 'valid' && key.success !== true) return false;
+        if (this.currentView === 'invalid' && key.success !== false) return false;
+        return true;
+    });
+    
+    return hasKeysInCurrentView;
 }
 
 // 获取所有平台

static/js/api-key-manager/ui-utils.js

@@ -63,6 +63,12 @@ function showNotification(message, type = 'info') {
 
 // 获取总API密钥数量
 function totalKeyCount() {
+    // 根据当前视图过滤密钥
+    if (this.currentView === 'valid') {
+        return this.apiKeys.filter(key => key.success === true).length;
+    } else if (this.currentView === 'invalid') {
+        return this.apiKeys.filter(key => key.success === false).length;
+    }
     return this.apiKeys.length;
 }
 

templates/base.html

@@ -75,22 +75,34 @@
     <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
     {% block head %}{% endblock %}
 </head>
-<body class="bg-gray-50 text-gray-900 min-h-screen">
+<body class="bg-gray-50 text-gray-900 min-h-screen" x-data="apiKeyManager()">
     
     <!-- 顶部导航 -->
     <header class="bg-white shadow">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
-            <h1 class="text-2xl font-bold text-primary-700">
-                API密钥管理系统
-            </h1>
-            <div class="flex items-center space-x-4">
-                <!-- 退出按钮 -->
-                <a href="{{ url_for('web.logout') }}" class="flex items-center px-3 py-2 text-sm font-medium text-primary-700 hover:text-primary-900 hover:bg-primary-50 rounded-md transition-colors">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-                    </svg>
-                    退出登录
-                </a>
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <!-- 三栏布局：标题、选项卡（居中）和退出按钮 -->
+            <div class="grid grid-cols-3 items-center">
+                <!-- 左侧 - 标题 -->
+                <div class="flex items-center justify-start">
+                    <h1 class="text-2xl font-bold text-primary-700">
+                        API密钥管理系统
+                    </h1>
+                </div>
+                
+                <!-- 中间 - 选项卡居中 -->
+                <div class="flex justify-center">
+                    {% block header_tabs %}{% endblock %}
+                </div>
+                
+                <!-- 右侧 - 退出按钮 -->
+                <div class="flex items-center justify-end">
+                    <a href="{{ url_for('web.logout') }}" class="flex items-center px-3 py-2 text-sm font-medium text-primary-700 hover:text-primary-900 hover:bg-primary-50 rounded-md transition-colors">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                        </svg>
+                        退出登录
+                    </a>
+                </div>
             </div>
         </div>
     </header>

templates/components/api_key_list.html

@@ -71,7 +71,7 @@
         <!-- 如果平台有API密钥且被筛选器选中，搜索模式下仅当该平台有匹配结果时显示 -->
         <div 
             x-cloak
-            x-show="!isLoading && isPlatformVisible('{{ platform.id }}') && (searchTerm === '' && hasPlatformKeys('{{ platform.id }}') || (searchTerm !== '' && apiKeys.filter(key => key.platform === '{{ platform.id }}' && matchesSearch(key.name, key.key)).length > 0))"
+            x-show="!isLoading && isPlatformVisible('{{ platform.id }}') && (searchTerm === '' && hasPlatformKeys('{{ platform.id }}') || (searchTerm !== '' && apiKeys.filter(key => key.platform === '{{ platform.id }}' && (currentView === 'valid' ? key.success === true : key.success === false) && matchesSearch(key.name, key.key)).length > 0))"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 transform scale-95"
             x-transition:enter-end="opacity-100 transform scale-100"
@@ -170,7 +170,7 @@
                 <!-- 平台内的API密钥 -->
                 {% for key in platform_keys %}
                     <div 
-                        x-show="matchesSearch('{{ key.name }}', '{{ key.key }}')"
+                        x-show="(currentView === 'valid' && {{ key.success|lower }} === true || currentView === 'invalid' && {{ key.success|lower }} === false) && matchesSearch('{{ key.name }}', '{{ key.key }}')"
                         class="px-6 py-4 hover:bg-gray-50 transition-colors duration-150 flex flex-col md:flex-row md:items-center md:justify-between group"
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="opacity-0"
@@ -234,10 +234,10 @@
                                 <!-- 如果存在更新时间，显示更新时间 -->
                                 {% if key.updated_at %}
                                 <div class="flex items-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-blue-500 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-gray-500 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                     </svg>
-                                    <span class="text-xs text-blue-600">更新: {{ key.updated_at.split('T')[1].split('.')[0] }}</span>
+                                    <span class="text-xs text-gray-600">更新: {{ key.updated_at.split('T')[1].split('.')[0] }}</span>
                                 </div>
                                 {% endif %}
                             </div>
@@ -342,7 +342,8 @@
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                         </svg>
-                        <p x-show="searchTerm === ''">此平台暂无API密钥</p>
+                        <p x-show="searchTerm === '' && currentView === 'valid'">此平台暂无有效API密钥</p>
+                        <p x-show="searchTerm === '' && currentView === 'invalid'">此平台暂无无效API密钥</p>
                         <p x-show="searchTerm !== ''">没有找到匹配的API密钥</p>
                         <button 
                             @click="showAddModal = true; newKey.platform = '{{ platform.id }}'"

templates/components/states.html

@@ -19,7 +19,7 @@
 <!-- 全局搜索无结果时显示 -->
 <div 
     x-cloak
-    x-show="!isLoading && searchTerm !== '' && apiKeys.filter(key => platformFilters[key.platform] && matchesSearch(key.name, key.key)).length === 0"
+    x-show="!isLoading && searchTerm !== '' && apiKeys.filter(key => platformFilters[key.platform] && (currentView === 'valid' ? key.success === true : key.success === false) && matchesSearch(key.name, key.key)).length === 0"
     class="bg-white rounded-lg shadow-md p-8 text-center"
 >
     <div class="flex flex-col items-center">

templates/components/tabs.html

@@ -0,0 +1,29 @@
+<!-- 密钥状态标签页切换 -->
+<div class="flex items-center bg-gray-100 p-1 rounded-lg shadow-sm">
+    <button
+        @click="switchView('valid')"
+        class="relative inline-flex items-center px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 min-w-24 justify-center"
+        :class="{
+            'bg-white text-primary-700 shadow-sm': currentView === 'valid',
+            'text-gray-500 hover:text-gray-700': currentView !== 'valid'
+        }"
+    >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        有效密钥
+    </button>
+    <button
+        @click="switchView('invalid')"
+        class="relative inline-flex items-center px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 min-w-24 justify-center"
+        :class="{
+            'bg-white text-red-700 shadow-sm': currentView === 'invalid',
+            'text-gray-500 hover:text-gray-700': currentView !== 'invalid'
+        }"
+    >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        无效密钥
+    </button>
+</div>

templates/index.html

@@ -4,8 +4,12 @@
 {# 样式已移动到static/css/style.css #}
 {% endblock %}
 
+{% block header_tabs %}
+{% include "components/tabs.html" %}
+{% endblock %}
+
 {% block content %}
-<div x-data="apiKeyManager()" x-cloak>
+<div x-cloak>
     {% include "components/toolbar.html" %}
     
     <!-- 分组的API密钥列表 -->