Upload 41 files

app.py

@@ -1,89 +1,101 @@
-"""
-API密钥管理系统 - 主应用文件
-提供API密钥的添加、编辑、删除和管理功能
-"""
-import os
-import time
-import datetime
-import pytz
-from flask import Flask, redirect, url_for, request, jsonify
-from werkzeug.middleware.proxy_fix import ProxyFix
-
-# 导入配置
-from config import SECRET_KEY
-
-# 设置时区为UTC+8 (亚洲/上海)，兼容Linux和Windows环境
-os.environ['TZ'] = 'Asia/Shanghai'
-try:
-    # Linux环境设置
-    time.tzset()
-except AttributeError:
-    # Windows环境不支持tzset，使用pytz设置
-    pass
-
-# 确保datetime使用正确的时区
-default_tz = pytz.timezone('Asia/Shanghai')
-
-# 导入路由蓝图
-from routes.web import web_bp
-from routes.api import api_bp
-
-# 导入认证模块
-from utils.auth import AuthManager
-
-# 创建Flask应用
-app = Flask(__name__)
-# 应用ProxyFix中间件，使应用能够获取用户真实IP
-app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1)
-app.secret_key = SECRET_KEY
-
-# 设置静态文件缓存控制
-@app.after_request
-def add_cache_headers(response):
-    """为静态资源添加缓存控制头"""
-    if request.path.startswith('/static/'):
-        # 设置缓存时间 - CSS、JS和图片缓存1年
-        max_age = 31536000  # 1年的秒数
-        
-        # 根据文件类型设置不同的缓存策略
-        if request.path.endswith(('.css', '.js')):
-            # CSS和JS文件缓存1年
-            response.headers['Cache-Control'] = f'public, max-age={max_age}'
-        elif request.path.endswith(('.png', '.jpg', '.jpeg', '.gif', '.ico', '.svg')):
-            # 图片文件缓存1年
-            response.headers['Cache-Control'] = f'public, max-age={max_age}'
-        else:
-            # 其他静态文件缓存1周
-            response.headers['Cache-Control'] = 'public, max-age=604800'
-            
-        # 添加其他有用的缓存头
-        response.headers['Vary'] = 'Accept-Encoding'
-        
-    return response
-
-# 认证中间件 - 验证所有请求
-@app.before_request
-def authenticate():
-    """请求拦截器 - 验证所有需要认证的请求"""
-    # 登录和静态资源路径不需要验证
-    if request.path == '/login' or request.path.startswith('/static/'):
-        return
-    
-    # 从Cookie中获取令牌
-    token = request.cookies.get('auth_token')
-    
-    # 验证令牌
-    if not AuthManager.verify_token(token):
-        # 如果是AJAX请求，返回401状态码
-        if request.headers.get('X-Requested-With') == 'XMLHttpRequest' or request.path.startswith('/api/'):
-            return jsonify({"success": False, "error": "未授权访问"}), 401
-        # 否则重定向到登录页面
-        return redirect(url_for('web.login'))
-
-# 注册蓝图
-app.register_blueprint(web_bp)
-app.register_blueprint(api_bp)
-
-# 入口点
-if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=7860)
+"""
+API密钥管理系统 - 主应用文件
+提供API密钥的添加、编辑、删除和管理功能
+"""
+import os
+import time
+import pytz
+from flask import Flask, redirect, url_for, request, jsonify
+from flask_compress import Compress
+from werkzeug.middleware.proxy_fix import ProxyFix
+
+# 导入配置
+from config import SECRET_KEY
+
+# 设置时区为UTC+8 (亚洲/上海)，兼容Linux和Windows环境
+os.environ['TZ'] = 'Asia/Shanghai'
+try:
+    # Linux环境设置
+    time.tzset()
+except AttributeError:
+    # Windows环境不支持tzset，使用pytz设置
+    pass
+
+# 确保datetime使用正确的时区
+default_tz = pytz.timezone('Asia/Shanghai')
+
+# 导入路由蓝图
+from routes.web import web_bp
+from routes.api import api_bp
+
+# 导入认证模块
+from utils.auth import AuthManager
+
+# 创建Flask应用
+app = Flask(__name__)
+# 初始化Compress
+compress = Compress()
+# 配置Compress
+app.config['COMPRESS_MIMETYPES'] = [
+    'text/html', 'text/css', 'text/xml', 'application/json',
+    'application/javascript', 'text/javascript', 'text/plain'
+]
+app.config['COMPRESS_LEVEL'] = 6  # gzip压缩级别 (1-9)
+app.config['COMPRESS_MIN_SIZE'] = 500  # 最小压缩尺寸（字节）
+app.config['COMPRESS_ALGORITHM'] = 'br,gzip'  # 优先使用brotli，然后是gzip
+# 应用压缩
+compress.init_app(app)
+# 应用ProxyFix中间件，使应用能够获取用户真实IP
+app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1)
+app.secret_key = SECRET_KEY
+
+# 设置静态文件缓存控制
+@app.after_request
+def add_cache_headers(response):
+    """为静态资源添加缓存控制头"""
+    if request.path.startswith('/static/'):
+        # 设置缓存时间 - CSS、JS和图片缓存1年
+        max_age = 31536000  # 1年的秒数
+        
+        # 根据文件类型设置不同的缓存策略
+        if request.path.endswith(('.css', '.js')):
+            # CSS和JS文件缓存1年
+            response.headers['Cache-Control'] = f'public, max-age={max_age}'
+        elif request.path.endswith(('.png', '.jpg', '.jpeg', '.gif', '.ico', '.svg')):
+            # 图片文件缓存1年
+            response.headers['Cache-Control'] = f'public, max-age={max_age}'
+        else:
+            # 其他静态文件缓存1周
+            response.headers['Cache-Control'] = 'public, max-age=604800'
+            
+        # 添加其他有用的缓存头
+        response.headers['Vary'] = 'Accept-Encoding'
+        
+    return response
+
+# 认证中间件 - 验证所有请求
+@app.before_request
+def authenticate():
+    """请求拦截器 - 验证所有需要认证的请求"""
+    # 登录和静态资源路径不需要验证
+    if request.path == '/login' or request.path.startswith('/static/'):
+        return
+    
+    # 从Cookie中获取令牌
+    token = request.cookies.get('auth_token')
+    
+    # 验证令牌
+    if not AuthManager.verify_token(token):
+        # 如果是AJAX请求，返回401状态码
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest' or request.path.startswith('/api/'):
+            return jsonify({"success": False, "error": "未授权访问"}), 401
+        # 否则重定向到登录页面
+        return redirect(url_for('web.login'))
+
+# 注册蓝图
+app.register_blueprint(web_bp)
+app.register_blueprint(api_bp)
+
+# 入口点
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=7860)

models/api_key.py

@@ -5,6 +5,7 @@ import json
 import uuid
 from datetime import datetime
 import os
+import pytz
 from config import API_KEYS_FILE
 
 class ApiKeyManager:
@@ -40,16 +41,16 @@ class ApiKeyManager:
         """添加新的API密钥"""
         api_keys_data = ApiKeyManager.load_keys()
         
-        # 过滤掉key中的单引号，防止存储时出错
-        if key and "'" in key:
-            key = key.replace("'", "")
+        # 过滤掉key中的单引号、双引号、小括号、方括号和空格，防止存储时出错
+        if key:
+            key = key.replace("'", "").replace('"', "").replace('(', "").replace(')', "").replace('[', "").replace(']', "").replace(' ', "")
         
         new_key = {
             "id": str(uuid.uuid4()),
             "platform": platform,
             "name": name,
             "key": key,
-            "created_at": datetime.now().isoformat()
+            "created_at": datetime.now(pytz.timezone('Asia/Shanghai')).isoformat()
         }
         
         api_keys_data["api_keys"].append(new_key)
@@ -87,14 +88,57 @@ class ApiKeyManager:
         
         return deleted_count
     
+    @staticmethod
+    def bulk_add_keys(keys_data):
+        """批量添加多个API密钥
+        
+        Args:
+            keys_data: 包含多个密钥信息的列表，每个元素包含platform、name、key
+            
+        Returns:
+            添加的密钥列表
+        """
+        if not keys_data:
+            return []
+        
+        api_keys_data = ApiKeyManager.load_keys()
+        added_keys = []
+        
+        now = datetime.now(pytz.timezone('Asia/Shanghai')).isoformat()
+        
+        for key_info in keys_data:
+            platform = key_info.get("platform")
+            name = key_info.get("name")
+            key = key_info.get("key")
+            
+            # 过滤掉key中的单引号、双引号、小括号、方括号和空格，防止存储时出错
+            if key:
+                key = key.replace("'", "").replace('"', "").replace('(', "").replace(')', "").replace('[', "").replace(']', "").replace(' ', "")
+            
+            new_key = {
+                "id": str(uuid.uuid4()),
+                "platform": platform,
+                "name": name,
+                "key": key,
+                "created_at": now
+            }
+            
+            api_keys_data["api_keys"].append(new_key)
+            added_keys.append(new_key)
+        
+        # 一次性保存所有添加的密钥
+        ApiKeyManager.save_keys(api_keys_data)
+        
+        return added_keys
+    
     @staticmethod
     def update_key(key_id, name, key):
         """更新API密钥信息"""
         api_keys_data = ApiKeyManager.load_keys()
         
-        # 过滤掉key中的单引号，防止存储时出错
-        if key and "'" in key:
-            key = key.replace("'", "")
+        # 过滤掉key中的单引号、双引号、小括号、方括号和空格，防止存储时出错
+        if key:
+            key = key.replace("'", "").replace('"', "").replace('(', "").replace(')', "").replace('[', "").replace(']', "").replace(' ', "")
             
         updated_key = None
         for k in api_keys_data["api_keys"]:

routes/api.py

@@ -49,6 +49,24 @@ def bulk_delete_api_keys():
         "message": f"成功删除 {deleted_count} 个API密钥"
     })
 
+@api_bp.route('/keys/bulk-add', methods=['POST'])
+def bulk_add_api_keys():
+    """批量添加多个API密钥"""
+    data = request.json
+    keys_data = data.get("keys", [])
+    
+    if not keys_data:
+        return jsonify({"success": False, "error": "没有提供要添加的密钥数据"}), 400
+    
+    added_keys = ApiKeyManager.bulk_add_keys(keys_data)
+    
+    return jsonify({
+        "success": True,
+        "added_count": len(added_keys),
+        "keys": added_keys,
+        "message": f"成功添加 {len(added_keys)} 个API密钥"
+    })
+
 @api_bp.route('/keys/<key_id>', methods=['PUT'])
 def edit_api_key(key_id):
     """更新API密钥信息"""

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

@@ -0,0 +1,155 @@
+/**
+ * API密钥管理器 - 密钥创建模块
+ * 包含API密钥的添加功能
+ */
+
+// 添加API密钥
+async function addApiKey() {
+    if (!this.newKey.platform || !this.newKey.key) {
+        this.errorMessage = '请填写所有必填字段。';
+        return;
+    }
+    
+    // 如果名称为空，生成自动名称
+    if (!this.newKey.name.trim()) {
+        const date = new Date();
+        const dateStr = date.toLocaleDateString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit'
+        }).replace(/\//g, '-');
+        const timeStr = date.toLocaleTimeString('zh-CN', {
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+        this.newKey.name = `${dateStr} ${timeStr}`;
+    }
+    
+    // 保存当前选择的平台类型
+    localStorage.setItem('lastSelectedPlatform', this.newKey.platform);
+    
+    this.isSubmitting = true;
+    this.errorMessage = '';
+    
+    try {
+        // 处理输入文本：去除单引号、双引号、小括号、方括号、空格，然后分行
+        const lines = this.newKey.key
+            .split('\n')
+            .map(line => line.replace(/['"\(\)\[\]\s]/g, '')) // 去除单引号、双引号、小括号、方括号和空格
+            .filter(line => line.length > 0); // 过滤掉空行
+        
+        // 从每一行中提取逗号分隔的非空元素，作为单独的key
+        let keysWithDuplicates = [];
+        for (const line of lines) {
+            const lineKeys = line.split(',')
+                .filter(item => item.length > 0); // 过滤掉空元素
+            
+            // 将每个非空元素添加到数组
+            keysWithDuplicates.push(...lineKeys);
+        }
+        
+        if (keysWithDuplicates.length === 0) {
+            this.errorMessage = '请输入至少一个有效的API密钥。';
+            this.isSubmitting = false;
+            return;
+        }
+        
+        // 去除输入中重复的key（同一次提交中的重复）
+        const inputDuplicatesCount = keysWithDuplicates.length - new Set(keysWithDuplicates).size;
+        const keys = [...new Set(keysWithDuplicates)]; // 使用Set去重，得到唯一的keys数组
+        
+        // 过滤掉已存在于同一平台的重复key
+        const currentPlatform = this.newKey.platform;
+        const existingKeys = this.apiKeys
+            .filter(apiKey => apiKey.platform === currentPlatform)
+            .map(apiKey => apiKey.key);
+        
+        const uniqueKeys = keys.filter(key => !existingKeys.includes(key));
+        const duplicateCount = keys.length - uniqueKeys.length;
+        
+        // 如果所有key都重复，显示错误消息并退出
+        if (uniqueKeys.length === 0) {
+            this.errorMessage = '所有输入的API密钥在当前平台中已存在。';
+            this.isSubmitting = false;
+            return;
+        }
+        
+        // 准备批量添加的数据
+        const keysData = uniqueKeys.map(keyText => ({
+            platform: this.newKey.platform,
+            name: this.newKey.name,
+            key: keyText
+        }));
+        
+        // 记录重复和唯一的key数量，用于显示通知
+        const skippedCount = duplicateCount;
+        const addedCount = uniqueKeys.length;
+        
+        // 使用批量添加API一次性添加所有密钥
+        const response = await fetch('/api/keys/bulk-add', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ keys: keysData }),
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            // 关闭模态框并重置表单
+            this.showAddModal = false;
+            this.newKey = {
+                platform: this.newKey.platform, // 保留平台选择
+                name: '',
+                key: ''
+            };
+            
+            // 使用Toast风格的通知提示
+            const Toast = Swal.mixin({
+                toast: true,
+                position: 'top-end',
+                showConfirmButton: false,
+                timer: 2500,
+                timerProgressBar: true,
+                didOpen: (toast) => {
+                    toast.onmouseenter = Swal.stopTimer;
+                    toast.onmouseleave = Swal.resumeTimer;
+                }
+            });
+            
+            // 重新加载API密钥数据而不刷新页面
+            this.loadApiKeys();
+
+            // 构建通知消息
+            let title = `已添加 ${addedCount} 个API密钥`;
+            
+            // 根据不同情况显示通知
+            if (inputDuplicatesCount > 0 && skippedCount > 0) {
+                // 既有输入中的重复，也有数据库中的重复
+                title += `，跳过 ${inputDuplicatesCount} 个输入重复和 ${skippedCount} 个已存在密钥`;
+            } else if (inputDuplicatesCount > 0) {
+                // 只有输入中的重复
+                title += `，跳过 ${inputDuplicatesCount} 个输入重复密钥`;
+            } else if (skippedCount > 0) {
+                // 只有数据库中的重复
+                title += `，跳过 ${skippedCount} 个已存在密钥`;
+            }
+            
+            Toast.fire({
+                icon: 'success',
+                title: title,
+                background: '#f0fdf4',
+                iconColor: '#16a34a'
+            });
+        } else {
+            // 处理批量添加失败
+            this.errorMessage = data.error || `添加操作失败: ${data.message || '未知错误'}`;
+        }
+    } catch (error) {
+        console.error('添加API密钥失败:', error);
+        this.errorMessage = '服务器错误，请重试。';
+    } finally {
+        this.isSubmitting = false;
+    }
+}

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

@@ -0,0 +1,144 @@
+/**
+ * API密钥管理器 - 密钥删除模块
+ * 包含API密钥的删除功能
+ */
+
+// 删除API密钥
+function deleteApiKey(id, name) {
+    this.deleteKeyId = id;
+    this.deleteKeyName = name;
+    this.showDeleteConfirm = true;
+}
+
+// 确认删除（单个或批量）
+async function confirmDelete() {
+    if (this.isBulkDelete) {
+        if (this.selectedKeys.length === 0) return;
+        
+        this.isDeleting = true;
+        
+        try {
+            const response = await fetch('/api/keys/bulk-delete', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ ids: this.selectedKeys }),
+            });
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                // 关闭模态框，清空选中数组
+                this.showDeleteConfirm = false;
+                this.isBulkDelete = false;
+                const deletedCount = data.deleted_count || this.selectedKeys.length;
+                
+                // 清空选中数组
+                this.selectedKeys = [];
+                this.selectedPlatforms = [];
+                
+                // 使用Toast风格的通知提示
+                const Toast = Swal.mixin({
+                    toast: true,
+                    position: 'top-end',
+                    showConfirmButton: false,
+                    timer: 1500,
+                    timerProgressBar: true,
+                    didOpen: (toast) => {
+                        toast.onmouseenter = Swal.stopTimer;
+                        toast.onmouseleave = Swal.resumeTimer;
+                    }
+                });
+                
+                // 重新加载API密钥数据而不刷新页面
+                this.loadApiKeys();
+
+                Toast.fire({
+                    icon: 'success',
+                    title: `成功删除 ${deletedCount} 个API密钥`,
+                    background: '#fee2e2',
+                    iconColor: '#ef4444'
+                });
+            } else {
+                Swal.fire({
+                    icon: 'error',
+                    title: '批量删除失败',
+                    text: data.error || '删除操作未能完成，请重试',
+                    confirmButtonColor: '#0284c7'
+                });
+            }
+        } catch (error) {
+            console.error('批量删除API密钥失败:', error);
+            Swal.fire({
+                icon: 'error',
+                title: '服务器错误',
+                text: '无法完成删除操作，请稍后重试',
+                confirmButtonColor: '#0284c7'
+            });
+        } finally {
+            this.isDeleting = false;
+        }
+    } else {
+        // 单个删除逻辑
+        if (!this.deleteKeyId) return;
+        
+        this.isDeleting = true;
+        
+        try {
+            const response = await fetch(`/api/keys/${this.deleteKeyId}`, {
+                method: 'DELETE',
+            });
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                // 从本地数组中移除 (创建新数组)
+                this.apiKeys = [...this.apiKeys.filter(key => key.id !== this.deleteKeyId)];
+
+                // 关闭模态框
+                this.showDeleteConfirm = false;
+                
+                // 使用Toast风格的通知提示
+                const Toast = Swal.mixin({
+                    toast: true,
+                    position: 'top-end',
+                    showConfirmButton: false,
+                    timer: 1500,
+                    timerProgressBar: true,
+                    didOpen: (toast) => {
+                        toast.onmouseenter = Swal.stopTimer;
+                        toast.onmouseleave = Swal.resumeTimer;
+                    }
+                });
+                
+                // 重新加载API密钥数据而不刷新页面
+                this.loadApiKeys();
+
+                Toast.fire({
+                    icon: 'success',
+                    title: 'API密钥已删除',
+                    background: '#fee2e2',
+                    iconColor: '#ef4444'
+                });
+            } else {
+                Swal.fire({
+                    icon: 'error',
+                    title: '删除失败',
+                    text: data.message || '删除操作未能完成，请重试',
+                    confirmButtonColor: '#0284c7'
+                });
+            }
+        } catch (error) {
+            console.error('删除API密钥失败:', error);
+            Swal.fire({
+                icon: 'error',
+                title: '服务器错误',
+                text: '无法完成删除操作，请稍后重试',
+                confirmButtonColor: '#0284c7'
+            });
+        } finally {
+            this.isDeleting = false;
+        }
+    }
+}

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

@@ -0,0 +1,148 @@
+/**
+ * API密钥管理器 - 密钥编辑模块
+ * 包含API密钥的编辑和更新功能
+ */
+
+// 打开编辑API密钥模态框
+function editApiKey(id, name, key, platform) {
+    // 如果platform参数不存在，尝试从apiKeys中查找
+    if (!platform) {
+        const apiKey = this.apiKeys.find(key => key.id === id);
+        if (apiKey) {
+            platform = apiKey.platform;
+        }
+    }
+    
+    this.editKey = {
+        id: id,
+        name: name,
+        key: key,
+        platform: platform
+    };
+    this.showEditModal = true;
+    this.errorMessage = '';
+    
+    // 聚焦到名称输入框
+    setTimeout(() => {
+        document.getElementById('edit-name').focus();
+    }, 100);
+}
+
+// 更新API密钥
+async function updateApiKey() {
+    if (!this.editKey.key) {
+        this.errorMessage = '请填写API密钥值。';
+        return;
+    }
+    
+    this.isSubmitting = true;
+    this.errorMessage = '';
+    
+    try {
+        // 检查修改后的key是否与同一平台下的其他key重复
+        const currentPlatform = this.editKey.platform;
+        const currentId = this.editKey.id;
+        // 过滤掉单引号、双引号、小括号、方括号和空格，与添加密钥时保持一致
+        const editedKey = this.editKey.key.replace(/['"\,\(\)\[\]\s]/g, '');
+        
+        // 获取同平台下除当前key外的所有key
+        const duplicateKey = this.apiKeys.find(apiKey => 
+            apiKey.platform === currentPlatform && 
+            apiKey.id !== currentId && 
+            apiKey.key === editedKey
+        );
+        
+        // 如果发现重复key，则自动删除当前key
+        if (duplicateKey) {
+            // 删除当前key
+            const deleteResponse = await fetch(`/api/keys/${currentId}`, {
+                method: 'DELETE',
+            });
+            
+            const deleteData = await deleteResponse.json();
+            
+            if (deleteData.success) {
+                // 关闭模态框
+                this.showEditModal = false;
+                
+                // 使用Toast风格的通知提示
+                const Toast = Swal.mixin({
+                    toast: true,
+                    position: 'top-end',
+                    showConfirmButton: false,
+                    timer: 2500,
+                    timerProgressBar: true,
+                    didOpen: (toast) => {
+                        toast.onmouseenter = Swal.stopTimer;
+                        toast.onmouseleave = Swal.resumeTimer;
+                    }
+                });
+                
+                // 重新加载API密钥数据而不刷新页面
+                this.loadApiKeys();
+
+                Toast.fire({
+                    icon: 'info',
+                    title: '发现重复密钥，已自动删除',
+                    background: '#e0f2fe',
+                    iconColor: '#0284c7'
+                });
+                
+                return;
+            } else {
+                this.errorMessage = '发现重复密钥，但自动删除失败，请手动处理。';
+                this.isSubmitting = false;
+                return;
+            }
+        }
+        
+        // 如果没有重复，正常更新
+        const response = await fetch(`/api/keys/${this.editKey.id}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                name: this.editKey.name,
+                key: editedKey
+            }),
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            // 关闭模态框
+            this.showEditModal = false;
+            
+            // 使用Toast风格的通知提示
+            const Toast = Swal.mixin({
+                toast: true,
+                position: 'top-end',
+                showConfirmButton: false,
+                timer: 1500,
+                timerProgressBar: true,
+                didOpen: (toast) => {
+                    toast.onmouseenter = Swal.stopTimer;
+                    toast.onmouseleave = Swal.resumeTimer;
+                }
+            });
+            
+            // 重新加载API密钥数据而不刷新页面
+            this.loadApiKeys();
+
+            Toast.fire({
+                icon: 'success',
+                title: 'API密钥已更新',
+                background: '#f0fdf4',
+                iconColor: '#16a34a'
+            });
+        } else {
+            this.errorMessage = data.error || '更新失败，请重试。';
+        }
+    } catch (error) {
+        console.error('更新API密钥失败:', error);
+        this.errorMessage = '服务器错误，请重试。';
+    } finally {
+        this.isSubmitting = false;
+    }
+}

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

@@ -0,0 +1,55 @@
+/**
+ * API密钥管理器 - 密钥加载模块
+ * 包含API密钥的加载功能
+ */
+
+// 加载API密钥
+async function loadApiKeys() {
+    this.isLoading = true;
+    const startTime = Date.now();
+    try {
+        // 通过AJAX获取完整的HTML部分而不仅仅是JSON数据
+        const response = await fetch('/?ajax=1');
+        const html = await response.text();
+        
+        // 创建一个临时容器来解析HTML
+        const tempContainer = document.createElement('div');
+        tempContainer.innerHTML = html;
+        
+        // 提取新的API密钥列表HTML
+        const newKeyListHtml = tempContainer.querySelector('.space-y-6').outerHTML;
+        
+        // 替换当前页面上的API密钥列表
+        document.querySelector('.space-y-6').outerHTML = newKeyListHtml;
+        
+        // 重新初始化必要的事件监听器和组件
+        initScrollContainers();
+        
+        // 同时更新本地数据
+        const jsonResponse = await fetch('/api/keys');
+        const data = await jsonResponse.json();
+        this.apiKeys = [...(data.api_keys || [])];
+        
+        // 显式重置 selectedKeys 和 selectedPlatforms
+        this.selectedKeys = [];
+        this.selectedPlatforms = [];
+        
+        // 确保加载动画至少显示200毫秒，使体验更平滑
+        const elapsedTime = Date.now() - startTime;
+        const minLoadTime = 200; // 最小加载时间（毫秒）
+        
+        if (elapsedTime < minLoadTime) {
+            await new Promise(resolve => setTimeout(resolve, minLoadTime - elapsedTime));
+        }
+    } catch (error) {
+        console.error('加载API密钥失败:', error);
+        Swal.fire({
+            icon: 'error',
+            title: '加载失败',
+            text: '无法加载API密钥，请刷新页面重试',
+            confirmButtonColor: '#0284c7'
+        });
+    } finally {
+        this.isLoading = false;
+    }
+}

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

@@ -82,15 +82,21 @@ function getAllVisibleKeyIds() {
 function toggleSelectAll() {
     const allIds = this.getAllVisibleKeyIds();
     
+    // 过滤出只属于选中平台的密钥ID
+    const filteredIds = allIds.filter(id => {
+        const key = this.apiKeys.find(k => k.id === id);
+        return key && this.platformFilters[key.platform] === true;
+    });
+    
     if (this.isAllSelected) {
         // 如果当前是全选状态，则取消全选
-        this.selectedKeys = this.selectedKeys.filter(id => !allIds.includes(id));
+        this.selectedKeys = this.selectedKeys.filter(id => !filteredIds.includes(id));
     } else {
-        // 否则选中所有可见密钥
+        // 否则选中所有可见且属于选中平台的密钥
         // 先合并当前已选中的ID
         const newSelection = [...this.selectedKeys];
         // 添加所有未选中的可见ID
-        allIds.forEach(id => {
+        filteredIds.forEach(id => {
             if (!newSelection.includes(id)) {
                 newSelection.push(id);
             }

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

@@ -7,6 +7,9 @@ function initApiKeyManager() {
     // 初始化各平台的折叠状态和筛选状态
     const platforms = JSON.parse(platformsData);
     
+    // 初始化平台ID列表
+    this.platformIds = platforms.map(platform => platform.id);
+    
     // 从localStorage读取平台展开状态，如果有的话
     const savedPlatformStates = localStorage.getItem('platformStates');
     const parsedPlatformStates = savedPlatformStates ? JSON.parse(savedPlatformStates) : {};

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

@@ -1,501 +1,21 @@
 /**
- * API密钥管理器 - 密钥操作模块
- * 包含API密钥的加载、添加、删除、编辑等基本操作
+ * API密钥管理器 - 密钥操作模块（入口文件）
+ * 整合所有API密钥操作模块的功能
  */
 
-// 加载API密钥
-async function loadApiKeys() {
-    this.isLoading = true;
-    const startTime = Date.now();
-    try {
-        // 通过AJAX获取完整的HTML部分而不仅仅是JSON数据
-        const response = await fetch('/?ajax=1');
-        const html = await response.text();
-        
-        // 创建一个临时容器来解析HTML
-        const tempContainer = document.createElement('div');
-        tempContainer.innerHTML = html;
-        
-        // 提取新的API密钥列表HTML
-        const newKeyListHtml = tempContainer.querySelector('.space-y-6').outerHTML;
-        
-        // 替换当前页面上的API密钥列表
-        document.querySelector('.space-y-6').outerHTML = newKeyListHtml;
-        
-        // 重新初始化必要的事件监听器和组件
-        initScrollContainers();
-        
-        // 同时更新本地数据
-        const jsonResponse = await fetch('/api/keys');
-        const data = await jsonResponse.json();
-        this.apiKeys = [...(data.api_keys || [])];
-        
-        // 显式重置 selectedKeys 和 selectedPlatforms
-        this.selectedKeys = [];
-        this.selectedPlatforms = [];
-        
-        // 确保加载动画至少显示200毫秒，使体验更平滑
-        const elapsedTime = Date.now() - startTime;
-        const minLoadTime = 200; // 最小加载时间（毫秒）
-        
-        if (elapsedTime < minLoadTime) {
-            await new Promise(resolve => setTimeout(resolve, minLoadTime - elapsedTime));
-        }
-    } catch (error) {
-        console.error('加载API密钥失败:', error);
-        Swal.fire({
-            icon: 'error',
-            title: '加载失败',
-            text: '无法加载API密钥，请刷新页面重试',
-            confirmButtonColor: '#0284c7'
-        });
-    } finally {
-        this.isLoading = false;
-    }
-}
+// 从各个模块导入功能
 
-// 添加API密钥
-async function addApiKey() {
-    if (!this.newKey.platform || !this.newKey.key) {
-        this.errorMessage = '请填写所有必填字段。';
-        return;
-    }
-    
-    // 如果名称为空，生成自动名称
-    if (!this.newKey.name.trim()) {
-        const date = new Date();
-        const dateStr = date.toLocaleDateString('zh-CN', {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit'
-        }).replace(/\//g, '-');
-        const timeStr = date.toLocaleTimeString('zh-CN', {
-            hour: '2-digit',
-            minute: '2-digit'
-        });
-        this.newKey.name = `${dateStr} ${timeStr}`;
-    }
-    
-    // 保存当前选择的平台类型
-    localStorage.setItem('lastSelectedPlatform', this.newKey.platform);
-    
-    this.isSubmitting = true;
-    this.errorMessage = '';
-    
-    try {
-        // 处理输入文本：去除单引号、双引号、小括号、方括号、空格，然后分行
-        const lines = this.newKey.key
-            .split('\n')
-            .map(line => line.replace(/['"\(\)\[\]\s]/g, '')) // 去除单引号、双引号、小括号、方括号和空格
-            .filter(line => line.length > 0); // 过滤掉空行
-        
-        // 从每一行中提取逗号分隔的非空元素，作为单独的key
-        let keysWithDuplicates = [];
-        for (const line of lines) {
-            const lineKeys = line.split(',')
-                .filter(item => item.length > 0); // 过滤掉空元素
-            
-            // 将每个非空元素添加到数组
-            keysWithDuplicates.push(...lineKeys);
-        }
-        
-        if (keysWithDuplicates.length === 0) {
-            this.errorMessage = '请输入至少一个有效的API密钥。';
-            this.isSubmitting = false;
-            return;
-        }
-        
-        // 去除输入中重复的key（同一次提交中的重复）
-        const inputDuplicatesCount = keysWithDuplicates.length - new Set(keysWithDuplicates).size;
-        const keys = [...new Set(keysWithDuplicates)]; // 使用Set去重，得到唯一的keys数组
-        
-        // 过滤掉已存在于同一平台的重复key
-        const currentPlatform = this.newKey.platform;
-        const existingKeys = this.apiKeys
-            .filter(apiKey => apiKey.platform === currentPlatform)
-            .map(apiKey => apiKey.key);
-        
-        const uniqueKeys = keys.filter(key => !existingKeys.includes(key));
-        const duplicateCount = keys.length - uniqueKeys.length;
-        
-        // 如果所有key都重复，显示错误消息并退出
-        if (uniqueKeys.length === 0) {
-            this.errorMessage = '所有输入的API密钥在当前平台中已存在。';
-            this.isSubmitting = false;
-            return;
-        }
-        
-        // 批量添加API密钥（只添加不重复的key）
-        const results = [];
-        let allSuccess = true;
-        
-        // 记录重复和唯一的key数量，用于显示通知
-        const skippedCount = duplicateCount;
-        const addedCount = uniqueKeys.length;
-        
-        for (const keyText of uniqueKeys) {
-            const keyData = {
-                platform: this.newKey.platform,
-                name: this.newKey.name,
-                key: keyText
-            };
-            
-            const response = await fetch('/api/keys', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(keyData),
-            });
-            
-            const data = await response.json();
-            results.push(data);
-            
-            if (!data.success) {
-                allSuccess = false;
-            }
-        }
-        
-        if (allSuccess) {
-            // 关闭模态框并重置表单
-            this.showAddModal = false;
-            this.newKey = {
-                platform: this.newKey.platform, // 保留平台选择
-                name: '',
-                key: ''
-            };
-            
-            // 使用Toast风格的通知提示
-            const Toast = Swal.mixin({
-                toast: true,
-                position: 'top-end',
-                showConfirmButton: false,
-                timer: 2500,
-                timerProgressBar: true,
-                didOpen: (toast) => {
-                    toast.onmouseenter = Swal.stopTimer;
-                    toast.onmouseleave = Swal.resumeTimer;
-                }
-            });
-            
-            // 重新加载API密钥数据而不刷新页面
-            this.loadApiKeys();
+// 从加载模块导入
+document.write('<script src="/static/js/api-key-manager/api-key-loader.js"></script>');
 
-            // 构建通知消息
-            let title = `已添加 ${addedCount} 个API密钥`;
-            
-            // 根据不同情况显示通知
-            if (inputDuplicatesCount > 0 && skippedCount > 0) {
-                // 既有输入中的重复，也有数据库中的重复
-                title += `，跳过 ${inputDuplicatesCount} 个输入重复和 ${skippedCount} 个已存在密钥`;
-            } else if (inputDuplicatesCount > 0) {
-                // 只有输入中的重复
-                title += `，跳过 ${inputDuplicatesCount} 个输入重复密钥`;
-            } else if (skippedCount > 0) {
-                // 只有数据库中的重复
-                title += `，跳过 ${skippedCount} 个已存在密钥`;
-            }
-            
-            Toast.fire({
-                icon: 'success',
-                title: title,
-                background: '#f0fdf4',
-                iconColor: '#16a34a'
-            });
-        } else {
-            // 部分失败或全部失败
-            const successCount = results.filter(r => r.success).length;
-            const failCount = results.length - successCount;
-            
-            this.errorMessage = `添加操作部分失败: 成功 ${successCount} 个, 失败 ${failCount} 个`;
-        }
-    } catch (error) {
-        console.error('添加API密钥失败:', error);
-        this.errorMessage = '服务器错误，请重试。';
-    } finally {
-        this.isSubmitting = false;
-    }
-}
+// 从创建模块导入
+document.write('<script src="/static/js/api-key-manager/api-key-creator.js"></script>');
 
-// 删除API密钥
-function deleteApiKey(id, name) {
-    this.deleteKeyId = id;
-    this.deleteKeyName = name;
-    this.showDeleteConfirm = true;
-}
+// 从编辑模块导入
+document.write('<script src="/static/js/api-key-manager/api-key-editor.js"></script>');
 
-// 确认删除（单个或批量）
-async function confirmDelete() {
-    if (this.isBulkDelete) {
-        if (this.selectedKeys.length === 0) return;
-        
-        this.isDeleting = true;
-        
-        try {
-            const response = await fetch('/api/keys/bulk-delete', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ ids: this.selectedKeys }),
-            });
-            
-            const data = await response.json();
-            
-            if (data.success) {
-                // 关闭模态框，清空选中数组
-                this.showDeleteConfirm = false;
-                this.isBulkDelete = false;
-                const deletedCount = data.deleted_count || this.selectedKeys.length;
-                
-                // 清空选中数组
-                this.selectedKeys = [];
-                this.selectedPlatforms = [];
-                
-                // 使用Toast风格的通知提示
-                const Toast = Swal.mixin({
-                    toast: true,
-                    position: 'top-end',
-                    showConfirmButton: false,
-                    timer: 1500,
-                    timerProgressBar: true,
-                    didOpen: (toast) => {
-                        toast.onmouseenter = Swal.stopTimer;
-                        toast.onmouseleave = Swal.resumeTimer;
-                    }
-                });
-                
-                // 重新加载API密钥数据而不刷新页面
-                this.loadApiKeys();
+// 从删除模块导入
+document.write('<script src="/static/js/api-key-manager/api-key-deleter.js"></script>');
 
-                Toast.fire({
-                    icon: 'success',
-                    title: `成功删除 ${deletedCount} 个API密钥`,
-                    background: '#fee2e2',
-                    iconColor: '#ef4444'
-                });
-            } else {
-                Swal.fire({
-                    icon: 'error',
-                    title: '批量删除失败',
-                    text: data.error || '删除操作未能完成，请重试',
-                    confirmButtonColor: '#0284c7'
-                });
-            }
-        } catch (error) {
-            console.error('批量删除API密钥失败:', error);
-            Swal.fire({
-                icon: 'error',
-                title: '服务器错误',
-                text: '无法完成删除操作，请稍后重试',
-                confirmButtonColor: '#0284c7'
-            });
-        } finally {
-            this.isDeleting = false;
-        }
-    } else {
-        // 单个删除逻辑
-        if (!this.deleteKeyId) return;
-        
-        this.isDeleting = true;
-        
-        try {
-            const response = await fetch(`/api/keys/${this.deleteKeyId}`, {
-                method: 'DELETE',
-            });
-            
-            const data = await response.json();
-            
-            if (data.success) {
-                // 从本地数组中移除 (创建新数组)
-                this.apiKeys = [...this.apiKeys.filter(key => key.id !== this.deleteKeyId)];
-
-                // 关闭模态框
-                this.showDeleteConfirm = false;
-                
-                // 使用Toast风格的通知提示
-                const Toast = Swal.mixin({
-                    toast: true,
-                    position: 'top-end',
-                    showConfirmButton: false,
-                    timer: 1500,
-                    timerProgressBar: true,
-                    didOpen: (toast) => {
-                        toast.onmouseenter = Swal.stopTimer;
-                        toast.onmouseleave = Swal.resumeTimer;
-                    }
-                });
-                
-                // 重新加载API密钥数据而不刷新页面
-                this.loadApiKeys();
-
-                Toast.fire({
-                    icon: 'success',
-                    title: 'API密钥已删除',
-                    background: '#fee2e2',
-                    iconColor: '#ef4444'
-                });
-            } else {
-                Swal.fire({
-                    icon: 'error',
-                    title: '删除失败',
-                    text: data.message || '删除操作未能完成，请重试',
-                    confirmButtonColor: '#0284c7'
-                });
-            }
-        } catch (error) {
-            console.error('删除API密钥失败:', error);
-            Swal.fire({
-                icon: 'error',
-                title: '服务器错误',
-                text: '无法完成删除操作，请稍后重试',
-                confirmButtonColor: '#0284c7'
-            });
-        } finally {
-            this.isDeleting = false;
-        }
-    }
-}
-
-// 打开编辑API密钥模态框
-function editApiKey(id, name, key, platform) {
-    // 如果platform参数不存在，尝试从apiKeys中查找
-    if (!platform) {
-        const apiKey = this.apiKeys.find(key => key.id === id);
-        if (apiKey) {
-            platform = apiKey.platform;
-        }
-    }
-    
-    this.editKey = {
-        id: id,
-        name: name,
-        key: key,
-        platform: platform
-    };
-    this.showEditModal = true;
-    this.errorMessage = '';
-    
-    // 聚焦到名称输入框
-    setTimeout(() => {
-        document.getElementById('edit-name').focus();
-    }, 100);
-}
-
-// 更新API密钥
-async function updateApiKey() {
-    if (!this.editKey.key) {
-        this.errorMessage = '请填写API密钥值。';
-        return;
-    }
-    
-    this.isSubmitting = true;
-    this.errorMessage = '';
-    
-    try {
-        // 检查修改后的key是否与同一平台下的其他key重复
-        const currentPlatform = this.editKey.platform;
-        const currentId = this.editKey.id;
-        const editedKey = this.editKey.key.trim();
-        
-        // 获取同平台下除当前key外的所有key
-        const duplicateKey = this.apiKeys.find(apiKey => 
-            apiKey.platform === currentPlatform && 
-            apiKey.id !== currentId && 
-            apiKey.key === editedKey
-        );
-        
-        // 如果发现重复key，则自动删除当前key
-        if (duplicateKey) {
-            // 删除当前key
-            const deleteResponse = await fetch(`/api/keys/${currentId}`, {
-                method: 'DELETE',
-            });
-            
-            const deleteData = await deleteResponse.json();
-            
-            if (deleteData.success) {
-                // 关闭模态框
-                this.showEditModal = false;
-                
-                // 使用Toast风格的通知提示
-                const Toast = Swal.mixin({
-                    toast: true,
-                    position: 'top-end',
-                    showConfirmButton: false,
-                    timer: 2500,
-                    timerProgressBar: true,
-                    didOpen: (toast) => {
-                        toast.onmouseenter = Swal.stopTimer;
-                        toast.onmouseleave = Swal.resumeTimer;
-                    }
-                });
-                
-                // 重新加载API密钥数据而不刷新页面
-                this.loadApiKeys();
-
-                Toast.fire({
-                    icon: 'info',
-                    title: '发现重复密钥，已自动删除',
-                    background: '#e0f2fe',
-                    iconColor: '#0284c7'
-                });
-                
-                return;
-            } else {
-                this.errorMessage = '发现重复密钥，但自动删除失败，请手动处理。';
-                this.isSubmitting = false;
-                return;
-            }
-        }
-        
-        // 如果没有重复，正常更新
-        const response = await fetch(`/api/keys/${this.editKey.id}`, {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                name: this.editKey.name,
-                key: editedKey
-            }),
-        });
-        
-        const data = await response.json();
-        
-        if (data.success) {
-            // 关闭模态框
-            this.showEditModal = false;
-            
-            // 使用Toast风格的通知提示
-            const Toast = Swal.mixin({
-                toast: true,
-                position: 'top-end',
-                showConfirmButton: false,
-                timer: 1500,
-                timerProgressBar: true,
-                didOpen: (toast) => {
-                    toast.onmouseenter = Swal.stopTimer;
-                    toast.onmouseleave = Swal.resumeTimer;
-                }
-            });
-            
-            // 重新加载API密钥数据而不刷新页面
-            this.loadApiKeys();
-
-            Toast.fire({
-                icon: 'success',
-                title: 'API密钥已更新',
-                background: '#f0fdf4',
-                iconColor: '#16a34a'
-            });
-        } else {
-            this.errorMessage = data.error || '更新失败，请重试。';
-        }
-    } catch (error) {
-        console.error('更新API密钥失败:', error);
-        this.errorMessage = '服务器错误，请重试。';
-    } finally {
-        this.isSubmitting = false;
-    }
-}
+// 注意：上述导入方式让各个模块中的函数直接在全局范围可用
+// 这样保持了与原始文件相同的使用方式，确保兼容性

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

@@ -6,6 +6,7 @@ function apiKeyManager() {
         apiKeys: [],
         platformStates: {},
         platformFilters: {}, // 平台筛选状态
+        platformIds: [], // 所有平台ID列表
         allPlatformsSelected: true, // 是否选择所有平台
         searchTerm: '',
         showAddModal: false,
@@ -78,9 +79,16 @@ function apiKeyManager() {
         get isAllSelected() {
             // 获取所有可见密钥的ID
             const allVisibleKeyIds = this.getAllVisibleKeyIds();
-            // 全选需要满足：有可见密钥，且所有可见密钥都被选中
-            return allVisibleKeyIds.length > 0 && 
-                   allVisibleKeyIds.every(id => this.selectedKeys.includes(id));
+            
+            // 过滤出只属于选中平台的密钥ID
+            const filteredIds = allVisibleKeyIds.filter(id => {
+                const key = this.apiKeys.find(k => k.id === id);
+                return key && this.platformFilters[key.platform] === true;
+            });
+            
+            // 全选需要满足：有属于选中平台的可见密钥，且这些密钥都被选中
+            return filteredIds.length > 0 && 
+                   filteredIds.every(id => this.selectedKeys.includes(id));
         },
         
         // 切换全选/取消全选

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

@@ -42,6 +42,11 @@ function getPlatformStyles() {
     return JSON.parse(platformStylesData);
 }
 
+// 获取所有平台的ID
+function getPlatformIds() {
+    return this.getPlatforms().map(platform => platform.id);
+}
+
 // 获取特定平台的样式
 function getPlatformStyle(platformId) {
     const styles = getPlatformStyles();
@@ -52,6 +57,21 @@ function getPlatformStyle(platformId) {
 function togglePlatformFilter(platformId) {
     this.platformFilters[platformId] = !this.platformFilters[platformId];
     
+    // 如果取消平台筛选，同时取消该平台及其下所有密钥的选择
+    if (this.platformFilters[platformId] === false) {
+        // 如果平台在选中列表中，移除它
+        const platformIndex = this.selectedPlatforms.indexOf(platformId);
+        if (platformIndex !== -1) {
+            this.selectedPlatforms.splice(platformIndex, 1);
+        }
+        
+        // 取消选中该平台下的所有密钥
+        this.selectedKeys = this.selectedKeys.filter(keyId => {
+            const key = this.apiKeys.find(k => k.id === keyId);
+            return key && key.platform !== platformId;
+        });
+    }
+    
     // 检查是否所有平台都被选中
     const platforms = this.getPlatforms();
     this.allPlatformsSelected = platforms.every(platform => 
@@ -73,6 +93,15 @@ function toggleAllPlatformFilters() {
         this.platformFilters[platform.id] = newState;
     });
     
+    // 如果取消全部平台筛选，同时取消所有平台和密钥的选择
+    if (newState === false) {
+        // 清空选中的平台
+        this.selectedPlatforms = [];
+        
+        // 清空选中的密钥
+        this.selectedKeys = [];
+    }
+    
     // 保存筛选状态到localStorage
     localStorage.setItem('platformFilters', JSON.stringify(this.platformFilters));
 }

templates/base.html

@@ -65,7 +65,7 @@
         }
     </script>
     <!-- Alpine.js -->
-    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script defer src="https://unpkg.com/alpinejs@3.14.8/dist/cdn.min.js"></script>
     <!-- Clipboard.js -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
     <!-- SweetAlert2 -->

templates/components/api_key_list.html

@@ -1,3 +1,68 @@
+<!-- 美化的批量操作悬浮工具栏 - 独立于平台循环外部 -->
+<div 
+    x-cloak
+    x-show="selectedKeys.length > 0"
+    class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg shadow-xl px-4 py-3 flex items-center space-x-4 z-30 bulk-toolbar"
+    style="backdrop-filter: blur(8px); border: 1px solid rgba(99, 102, 241, 0.2);"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="opacity-0 transform translate-y-4"
+    x-transition:enter-end="opacity-100 transform translate-y-0"
+    x-transition:leave="transition ease-in duration-200"
+    x-transition:leave-start="opacity-100 transform translate-y-0"
+    x-transition:leave-end="opacity-0 transform translate-y-4"
+>
+    <!-- 精美的选中数量显示 -->
+    <div class="flex items-center space-x-3">
+        <div class="flex items-center justify-center h-8 w-8 rounded-full bg-gradient-to-r from-blue-400 to-indigo-500 text-white font-semibold text-sm shadow-sm">
+            <span x-text="selectedKeys.length"></span>
+        </div>
+        
+        <div class="flex flex-col">
+            <span class="text-xs text-gray-500 uppercase tracking-wide">已选项目</span>
+            <!-- 全选/取消全选 -->
+            <button 
+                @click="toggleSelectAll"
+                class="text-xs text-indigo-600 hover:text-indigo-800 transition-colors font-medium"
+                x-text="isAllSelected ? '取消全选' : '全选'"
+            ></button>
+        </div>
+    </div>
+    
+    <!-- 精美分隔线 -->
+    <div class="h-10 w-px bg-gradient-to-b from-transparent via-indigo-200 to-transparent"></div>
+    
+    <!-- 批量操作按钮 -->
+    <div class="flex space-x-2 justify-end">
+        <!-- 美化的批量复制按钮 -->
+        <button 
+            @click="bulkCopyApiKeys()"
+            class="group relative inline-flex items-center px-4 py-2 overflow-hidden border border-transparent rounded-lg shadow-md text-sm font-medium text-white bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 focus:outline-none transition-all duration-300 transform hover:scale-105"
+        >
+            <!-- 背景动画效果 -->
+            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-600 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+            
+            <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 h-4 w-4 mr-2 group-hover:animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+            </svg>
+            <span class="relative z-10">批量复制</span>
+        </button>
+        
+        <!-- 美化的批量删除按钮 -->
+        <button 
+            @click="bulkDeleteApiKeys()"
+            class="group relative inline-flex items-center px-4 py-2 overflow-hidden border border-transparent rounded-lg shadow-md text-sm font-medium text-white bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 focus:outline-none transition-all duration-300 transform hover:scale-105"
+        >
+            <!-- 背景动画效果 -->
+            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-pink-600 to-red-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+            
+            <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 h-4 w-4 mr-2 group-hover:animate-pulse" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
+            <span class="relative z-10">批量删除</span>
+        </button>
+    </div>
+</div>
+
 <!-- 分组的API密钥列表 -->
 <div class="space-y-6">
     <!-- 遍历每个平台 -->
@@ -17,7 +82,7 @@
                 @click="togglePlatform('{{ platform.id }}')"
                 class="px-6 py-4 cursor-pointer flex justify-between items-center border-b border-gray-200 transition-all duration-300"
                 :class="{
-                    'bg-gray-50 border-gray-200': !['anthropic', 'openai', 'google'].includes('{{ platform.id }}')
+                    'bg-gray-50 border-gray-200': !platformIds.includes('{{ platform.id }}')
                 }"
                 :style="{
                     backgroundColor: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}')['background-color'] : 'rgba(243, 244, 246, 0.5)',
@@ -84,71 +149,6 @@
                     <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                 </svg>
 </div>
-
-<!-- 美化的批量操作悬浮工具栏 -->
-<div 
-    x-cloak
-    x-show="selectedKeys.length > 0"
-    class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg shadow-xl px-4 py-3 flex items-center space-x-4 z-30 bulk-toolbar"
-    style="backdrop-filter: blur(8px); border: 1px solid rgba(99, 102, 241, 0.2);"
-    x-transition:enter="transition ease-out duration-300"
-    x-transition:enter-start="opacity-0 transform translate-y-4"
-    x-transition:enter-end="opacity-100 transform translate-y-0"
-    x-transition:leave="transition ease-in duration-200"
-    x-transition:leave-start="opacity-100 transform translate-y-0"
-    x-transition:leave-end="opacity-0 transform translate-y-4"
->
-    <!-- 精美的选中数量显示 -->
-    <div class="flex items-center space-x-3">
-        <div class="flex items-center justify-center h-8 w-8 rounded-full bg-gradient-to-r from-blue-400 to-indigo-500 text-white font-semibold text-sm shadow-sm">
-            <span x-text="selectedKeys.length"></span>
-        </div>
-        
-        <div class="flex flex-col">
-            <span class="text-xs text-gray-500 uppercase tracking-wide">已选项目</span>
-            <!-- 全选/取消全选 -->
-            <button 
-                @click="toggleSelectAll"
-                class="text-xs text-indigo-600 hover:text-indigo-800 transition-colors font-medium"
-                x-text="isAllSelected ? '取消全选' : '全选'"
-            ></button>
-        </div>
-    </div>
-    
-    <!-- 精美分隔线 -->
-    <div class="h-10 w-px bg-gradient-to-b from-transparent via-indigo-200 to-transparent"></div>
-    
-                    <!-- 批量操作按钮 -->
-                    <div class="flex space-x-2 justify-end">
-                        <!-- 美化的批量复制按钮 -->
-                        <button 
-                            @click="bulkCopyApiKeys()"
-                            class="group relative inline-flex items-center px-4 py-2 overflow-hidden border border-transparent rounded-lg shadow-md text-sm font-medium text-white bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 focus:outline-none transition-all duration-300 transform hover:scale-105"
-                        >
-                            <!-- 背景动画效果 -->
-                            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-600 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
-                            
-                            <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 h-4 w-4 mr-2 group-hover:animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
-                            </svg>
-                            <span class="relative z-10">批量复制</span>
-                        </button>
-                        
-                        <!-- 美化的批量删除按钮 -->
-                        <button 
-                            @click="bulkDeleteApiKeys()"
-                            class="group relative inline-flex items-center px-4 py-2 overflow-hidden border border-transparent rounded-lg shadow-md text-sm font-medium text-white bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 focus:outline-none transition-all duration-300 transform hover:scale-105"
-                        >
-                            <!-- 背景动画效果 -->
-                            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-pink-600 to-red-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
-                            
-                            <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 h-4 w-4 mr-2 group-hover:animate-pulse" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
-                            </svg>
-                            <span class="relative z-10">批量删除</span>
-                        </button>
-                    </div>
-</div>
             
             <!-- 平台内容 - 可折叠 -->
             <div 

templates/login.html

@@ -42,7 +42,7 @@
             },
         }
     </script>
-    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script defer src="https://unpkg.com/alpinejs@3.14.8/dist/cdn.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}">