Upload 37 files

app.py

@@ -0,0 +1,46 @@
+"""
+API密钥管理系统 - 主应用文件
+提供API密钥的添加、编辑、删除和管理功能
+"""
+from flask import Flask, redirect, url_for, request, jsonify
+
+# 导入配置
+from config import SECRET_KEY
+
+# 导入路由蓝图
+from routes.web import web_bp
+from routes.api import api_bp
+
+# 导入认证模块
+from utils.auth import AuthManager
+
+# 创建Flask应用
+app = Flask(__name__)
+app.secret_key = SECRET_KEY
+
+# 认证中间件 - 验证所有请求
+@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)

config.py

@@ -0,0 +1,47 @@
+"""
+配置文件 - 存储应用的所有配置参数
+"""
+import os
+import secrets
+
+# 基本目录配置
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+DATA_DIR = os.path.join(BASE_DIR, 'data')
+os.makedirs(DATA_DIR, exist_ok=True)
+
+# 数据文件路径
+API_KEYS_FILE = os.path.join(DATA_DIR, 'api_keys.json')
+AUTH_FILE = os.path.join(DATA_DIR, 'auth_tokens.json')
+
+# 应用密钥配置
+SECRET_KEY = os.environ.get('SECRET_KEY', secrets.token_hex(16))
+ADMIN_PASSWORD = os.environ.get('PASSWORD', '123456')
+
+# 认证配置
+TOKEN_EXPIRY_DAYS = 30
+
+# 支持的平台
+PLATFORMS = [
+    {"id": "anthropic", "name": "Anthropic"},
+    {"id": "openai", "name": "OpenAI"},
+    {"id": "google", "name": "Google"}
+]
+
+# 平台标签样式
+PLATFORM_STYLES = {
+    "anthropic": {
+        "background-color": "rgba(236, 72, 153, 0.1)",
+        "border-color": "rgba(236, 72, 153, 0.3)",
+        "color": "#be185d"
+    },
+    "openai": {
+        "background-color": "rgba(16, 185, 129, 0.1)",
+        "border-color": "rgba(16, 185, 129, 0.3)",
+        "color": "#047857"
+    },
+    "google": {
+        "background-color": "rgba(59, 130, 246, 0.1)",
+        "border-color": "rgba(59, 130, 246, 0.3)",
+        "color": "#1d4ed8"
+    }
+}

models/api_key.py

@@ -0,0 +1,110 @@
+"""
+API密钥模型 - 处理API密钥的CRUD操作
+"""
+import json
+import uuid
+from datetime import datetime
+import os
+from config import API_KEYS_FILE
+
+class ApiKeyManager:
+    """管理API密钥的类"""
+    
+    @staticmethod
+    def load_keys():
+        """加载所有API密钥"""
+        if not os.path.exists(API_KEYS_FILE):
+            with open(API_KEYS_FILE, 'w', encoding='utf-8') as f:
+                json.dump({"api_keys": []}, f, ensure_ascii=False, indent=2)
+            return {"api_keys": []}
+        
+        try:
+            with open(API_KEYS_FILE, 'r', encoding='utf-8') as f:
+                return json.load(f)
+        except json.JSONDecodeError:
+            return {"api_keys": []}
+    
+    @staticmethod
+    def save_keys(data):
+        """保存API密钥数据"""
+        with open(API_KEYS_FILE, 'w', encoding='utf-8') as f:
+            json.dump(data, f, ensure_ascii=False, indent=2)
+    
+    @staticmethod
+    def get_all_keys():
+        """获取所有密钥"""
+        return ApiKeyManager.load_keys()
+    
+    @staticmethod
+    def add_key(platform, name, key):
+        """添加新的API密钥"""
+        api_keys_data = ApiKeyManager.load_keys()
+        
+        # 过滤掉key中的单引号，防止存储时出错
+        if key and "'" in key:
+            key = key.replace("'", "")
+        
+        new_key = {
+            "id": str(uuid.uuid4()),
+            "platform": platform,
+            "name": name,
+            "key": key,
+            "created_at": datetime.now().isoformat()
+        }
+        
+        api_keys_data["api_keys"].append(new_key)
+        ApiKeyManager.save_keys(api_keys_data)
+        
+        return new_key
+    
+    @staticmethod
+    def delete_key(key_id):
+        """删除指定的API密钥"""
+        api_keys_data = ApiKeyManager.load_keys()
+        
+        original_count = len(api_keys_data["api_keys"])
+        api_keys_data["api_keys"] = [k for k in api_keys_data["api_keys"] if k.get("id") != key_id]
+        
+        if len(api_keys_data["api_keys"]) < original_count:
+            ApiKeyManager.save_keys(api_keys_data)
+            return True
+        return False
+    
+    @staticmethod
+    def bulk_delete(key_ids):
+        """批量删除多个API密钥"""
+        if not key_ids:
+            return 0
+        
+        api_keys_data = ApiKeyManager.load_keys()
+        
+        original_count = len(api_keys_data["api_keys"])
+        api_keys_data["api_keys"] = [k for k in api_keys_data["api_keys"] if k.get("id") not in key_ids]
+        
+        deleted_count = original_count - len(api_keys_data["api_keys"])
+        if deleted_count > 0:
+            ApiKeyManager.save_keys(api_keys_data)
+        
+        return deleted_count
+    
+    @staticmethod
+    def update_key(key_id, name, key):
+        """更新API密钥信息"""
+        api_keys_data = ApiKeyManager.load_keys()
+        
+        # 过滤掉key中的单引号，防止存储时出错
+        if key and "'" in key:
+            key = key.replace("'", "")
+            
+        updated_key = None
+        for k in api_keys_data["api_keys"]:
+            if k.get("id") == key_id:
+                k["name"] = name
+                k["key"] = key
+                updated_key = k
+                break
+        
+        if updated_key:
+            ApiKeyManager.save_keys(api_keys_data)
+            
+        return updated_key

routes/api.py

@@ -0,0 +1,66 @@
+"""
+API路由模块 - 处理所有API端点请求
+"""
+from flask import Blueprint, request, jsonify
+from models.api_key import ApiKeyManager
+
+# 创建API蓝图
+api_bp = Blueprint('api', __name__, url_prefix='/api')
+
+@api_bp.route('/keys', methods=['GET'])
+def get_api_keys():
+    """获取所有API密钥"""
+    return jsonify(ApiKeyManager.get_all_keys())
+
+@api_bp.route('/keys', methods=['POST'])
+def add_api_key():
+    """添加新的API密钥"""
+    data = request.json
+    
+    new_key = ApiKeyManager.add_key(
+        platform=data.get("platform"),
+        name=data.get("name"),
+        key=data.get("key")
+    )
+    
+    return jsonify({"success": True, "key": new_key})
+
+@api_bp.route('/keys/<key_id>', methods=['DELETE'])
+def delete_api_key(key_id):
+    """删除指定的API密钥"""
+    success = ApiKeyManager.delete_key(key_id)
+    
+    return jsonify({"success": success})
+
+@api_bp.route('/keys/bulk-delete', methods=['POST'])
+def bulk_delete_api_keys():
+    """批量删除多个API密钥"""
+    data = request.json
+    key_ids = data.get("ids", [])
+    
+    if not key_ids:
+        return jsonify({"success": False, "error": "没有提供要删除的密钥ID"}), 400
+    
+    deleted_count = ApiKeyManager.bulk_delete(key_ids)
+    
+    return jsonify({
+        "success": True, 
+        "deleted_count": deleted_count,
+        "message": f"成功删除 {deleted_count} 个API密钥"
+    })
+
+@api_bp.route('/keys/<key_id>', methods=['PUT'])
+def edit_api_key(key_id):
+    """更新API密钥信息"""
+    data = request.json
+    
+    updated_key = ApiKeyManager.update_key(
+        key_id=key_id,
+        name=data.get("name"),
+        key=data.get("key")
+    )
+    
+    if not updated_key:
+        return jsonify({"success": False, "error": "未找到指定的密钥"}), 404
+    
+    return jsonify({"success": True, "key": updated_key})

routes/web.py

@@ -0,0 +1,77 @@
+"""
+Web路由模块 - 处理所有页面请求和身份验证
+"""
+from flask import Blueprint, render_template, request, redirect, url_for, make_response, session
+from datetime import datetime
+from config import ADMIN_PASSWORD, PLATFORMS, PLATFORM_STYLES, TOKEN_EXPIRY_DAYS
+from utils.auth import AuthManager
+from models.api_key import ApiKeyManager
+
+# 创建Web蓝图
+web_bp = Blueprint('web', __name__)
+
+@web_bp.route('/')
+def index():
+    """首页 - 显示API密钥管理界面"""
+    api_keys_data = ApiKeyManager.get_all_keys()
+
+    # 按平台分组密钥
+    grouped_keys = {}
+    for platform in PLATFORMS:
+        grouped_keys[platform["id"]] = {
+            "name": platform["name"],
+            "keys": []
+        }
+    
+    # 将密钥加入对应的平台组
+    for key in api_keys_data.get("api_keys", []):
+        platform_id = key.get("platform", "other").lower()
+        if platform_id not in grouped_keys:
+            platform_id = "other"
+        grouped_keys[platform_id]["keys"].append(key)
+    
+    is_ajax = request.args.get('ajax', '0') == '1'
+    return render_template('index.html', platforms=PLATFORMS, grouped_keys=grouped_keys, platform_styles=PLATFORM_STYLES)
+
+@web_bp.route('/login', methods=['GET', 'POST'])
+def login():
+    """用户登录"""
+    error = None
+    if request.method == 'POST':
+        password = request.form.get('password')
+        if password == ADMIN_PASSWORD:
+            # 密码正确，生成令牌
+            token = AuthManager.generate_token()
+            AuthManager.store_token(token)
+            
+            # 创建响应并设置Cookie
+            response = make_response(redirect(url_for('web.index')))
+            response.set_cookie(
+                'auth_token', 
+                token, 
+                max_age=TOKEN_EXPIRY_DAYS * 24 * 60 * 60, 
+                httponly=True, 
+                secure=request.is_secure
+            )
+            return response
+        else:
+            error = "密码错误，请重试"
+    
+    # 传递当前年份以供页脚使用
+    current_year = datetime.now().year
+    return render_template('login.html', error=error, now={'year': current_year})
+
+@web_bp.route('/logout')
+def logout():
+    """用户登出"""
+    # 从Cookie中获取令牌
+    token = request.cookies.get('auth_token')
+    
+    # 删除令牌
+    if token:
+        AuthManager.remove_token(token)
+    
+    # 返回响应并清除Cookie
+    response = make_response(redirect(url_for('web.login')))
+    response.delete_cookie('auth_token')
+    return response

static/css/animations.css

@@ -0,0 +1,92 @@
+/* 动画与过渡效果 
+ * 包含网站中所有动画相关样式，如展开/收起、淡入等效果
+ */
+
+/* 折叠面板动画 - 使用will-change提高性能 */
+.accordion-content {
+    will-change: transform, opacity, max-height;
+    transform-origin: top;
+    backface-visibility: hidden;
+}
+
+.accordion-icon {
+    will-change: transform;
+    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性过渡 */
+}
+
+/* 平滑展开/收起的时间函数 */
+.accordion-expand {
+    animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
+}
+
+.accordion-collapse {
+    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+
+/* 展开动画：从0高度逐渐展开到全高 */
+@keyframes smoothExpand {
+    0% { 
+        max-height: 0;
+        opacity: 0;
+        transform: scaleY(0.95); 
+    }
+    50% { 
+        opacity: 0.5;
+    }
+    100% { 
+        max-height: 2000px;
+        opacity: 1;
+        transform: scaleY(1); 
+    }
+}
+
+/* 收起动画：从全高逐渐收起到0高度 */
+@keyframes smoothCollapse {
+    0% { 
+        max-height: 2000px;
+        opacity: 1;
+        transform: scaleY(1); 
+    }
+    30% { 
+        opacity: 0.7;
+    }
+    100% { 
+        max-height: 0;
+        opacity: 0;
+        transform: scaleY(0.95); 
+    }
+}
+
+/* 淡入动画 - 用于元素出现时的平滑过渡 */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.fade-in {
+    animation: fadeIn 0.15s ease-in-out;
+}
+
+/* 单次弹跳动画 - 用于吸引注意力 */
+@keyframes ping-once {
+    0% {
+        transform: scale(0.95);
+        opacity: 0.8;
+    }
+    30% {
+        transform: scale(1.2);
+        opacity: 0.5;
+    }
+    70% {
+        transform: scale(0.95);
+        opacity: 0.3;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 0;
+    }
+}
+
+.animate-ping-once {
+    animation: ping-once 0.8s cubic-bezier(0, 0, 0.2, 1) forwards;
+}

static/css/base.css

@@ -0,0 +1,19 @@
+/* 基础样式 */
+html {
+    overflow-y: scroll;
+}
+
+/* 防止Alpine.js组件在初始化前闪现 */
+[x-cloak] { 
+    display: none !important; 
+}
+
+/* 移除所有元素聚焦时的边框 */
+button:focus, 
+input:focus, 
+select:focus, 
+textarea:focus {
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: inherit !important;
+}

static/css/components.css

@@ -0,0 +1,143 @@
+/* 组件样式
+ * 包含各种UI组件的样式定义，如按钮、模态框、标签等
+ */
+
+/* 浮动添加按钮 - 固定在右下角的主操作按钮 */
+.floating-add-btn {
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+    transition: all 0.2s ease-in-out;
+}
+
+.floating-add-btn:hover {
+    transform: scale(1.05);
+    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.15));
+}
+
+.floating-add-btn:active {
+    transform: scale(0.98);
+}
+
+/* 回到顶部按钮 - 滚动时显示的返回顶部快捷按钮 */
+.back-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: #0284c7; /* primary-600 */
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    z-index: 999;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.back-to-top.visible {
+    opacity: 0.9;
+    visibility: visible;
+}
+
+.back-to-top:hover {
+    background-color: #0369a1; /* primary-700 */
+    transform: translateY(-3px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    opacity: 1;
+}
+
+/* 模态框样式 - 简化的弹窗设计 */
+.simplified-modal {
+    max-width: 400px;
+    border-radius: 12px;
+}
+
+.modal-field-hint {
+    font-size: 11px;
+    color: #6b7280;
+    margin-left: 4px;
+}
+
+/* 背景模糊效果 - 增强模态框层次感 */
+.backdrop-blur-md {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+/* 卡片式输入组 - 表单元素容器 */
+.input-card {
+    transition: all 0.3s ease;
+}
+
+.input-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    transform: translateY(-1px);
+}
+
+/* 复制按钮 - 用于复制API密钥 */
+.clipboard-btn {
+    background: transparent;
+    transition: all 0.2s ease;
+    border-radius: 50%;
+    padding: 4px;
+}
+
+.clipboard-btn:hover {
+    background: rgba(2, 132, 199, 0.1);
+    transform: scale(1.1);
+}
+
+/* 快捷键提示 - 显示键盘快捷键 */
+.shortcut-hint {
+    position: absolute;
+    bottom: -18px;
+    right: 4px;
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.8);
+    background: rgba(0, 0, 0, 0.5);
+    padding: 1px 4px;
+    border-radius: 3px;
+    pointer-events: none;
+}
+
+.shortcut-hint-box {
+    font-size: 10px;
+    color: #9ca3af;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    bottom: 3px;
+    left: 6px;
+}
+
+.shortcut-hint-box svg {
+    margin-right: 4px;
+    width: 14px;
+    height: 14px;
+}
+
+/* 批量操作工具栏 - 多选时出现的操作栏 */
+.bulk-toolbar {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(99, 102, 241, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+/* 选中行样式增强 - 给选中的行添加渐变背景 */
+.bg-blue-50 {
+    position: relative;
+    overflow: hidden;
+}
+
+.bg-blue-50::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.1) 50%, rgba(59, 130, 246, 0.05) 100%);
+    z-index: -1;
+    opacity: 0.7;
+}

static/css/responsive.css

@@ -0,0 +1,21 @@
+/* 响应式布局
+ * 定义网站在不同屏幕尺寸下的显示规则
+ */
+
+/* 移动设备布局调整 */
+@media (max-width: 640px) {
+    /* 水平滚动容器宽度限制 */
+    .key-scroll-container {
+        max-width: calc(100vw - 3rem);
+    }
+    
+    /* 可以在这里添加其他移动端特定的样式调整 */
+}
+
+/* 平板设备布局调整可以在此添加 */
+/* @media (min-width: 641px) and (max-width: 1024px) {
+} */
+
+/* 大屏幕设备布局调整可以在此添加 */
+/* @media (min-width: 1025px) {
+} */

static/css/scrollbars.css

@@ -0,0 +1,55 @@
+/* 滚动条样式
+ * 定制网站所有滚动条外观，提升用户界面一致性
+ */
+
+/* 主滚动条 - 适配Tailwind主题色 */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f8fafc; /* gray-50 背景色 */
+  border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #0284c7; /* primary-600 主题色 */
+  border-radius: 8px;
+  border: 3px solid #f8fafc;
+  background-clip: padding-box; /* 确保边框透明 */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #0369a1; /* primary-700 悬停加深 */
+  border: 3px solid #f8fafc;
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+/* 自定义区域滚动条 - 更小更精致 */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+}
+
+/* 水平滚动容器 - 用于API密钥列表展示 */
+.key-scroll-container {
+    max-width: 100%;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: thin; /* Firefox支持 */
+}

static/css/style.css

@@ -0,0 +1,25 @@
+/* API密钥管理系统样式索引
+ * 这个文件作为主入口点，导入所有其他CSS模块
+ * 方便统一维护和管理样式
+ */
+
+/* 基础样式 - 包含通用设置和重置 */
+@import 'base.css';
+
+/* 动画效果 - 包含所有动画和过渡效果 */
+@import 'animations.css';
+
+/* 滚动条样式 - 定制各种滚动条外观 */
+@import 'scrollbars.css';
+
+/* 组件样式 - 包含按钮、模态框等UI元素 */
+@import 'components.css';
+
+/* 标签样式 - 包含标签、过滤器等分类元素 */
+@import 'tags.css';
+
+/* 响应式布局 - 定义不同屏幕尺寸下的显示规则 */
+@import 'responsive.css';
+
+/* 主题样式 - 定义暗色模式等主题变化 */
+@import 'themes.css';

static/css/tags.css

@@ -0,0 +1,95 @@
+/* 标签样式
+ * 定义各种标签、过滤器和分类元素的外观
+ */
+
+/* 平台筛选标签 - 用于筛选不同平台的API密钥 */
+.platform-filter-tag {
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+/* 标签悬停效果 - 渐变背景显示 */
+.platform-filter-tag::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, rgba(2, 132, 199, 0.1), rgba(6, 182, 212, 0.1));
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: -1;
+    border-radius: inherit;
+}
+
+.platform-filter-tag:hover::before {
+    opacity: 1;
+}
+
+/* 标签按下效果 */
+.platform-filter-tag:active {
+    transform: scale(0.97);
+}
+
+/* 标签选中状态 */
+.platform-filter-tag.selected {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* 标签计数器 - 显示每个平台的API密钥数量 */
+.tag-counter {
+    font-weight: 500;
+    font-size: 0.75rem;
+    font-family: 'Arial', 'Helvetica', sans-serif;
+    border-radius: 50%;
+    width: 1.6rem;
+    height: 1.6rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 0.4rem;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    letter-spacing: 0.02em;
+}
+
+/* 全部标签样式 - 显示所有API密钥的标签 */
+.all-tag {
+    font-weight: 600;
+}
+
+.all-tag.selected {
+    border-color: #0284c7;
+    box-shadow: 0 2px 5px rgba(2, 132, 199, 0.15);
+}
+
+/* 平台样式现在由config.py中的PLATFORM_STYLES动态配置 */
+
+/* 平台标题数字计数器 - 美化平台标题旁边的数字显示 */
+.platform-title-counter {
+    font-family: 'Arial', 'Helvetica', sans-serif;
+    font-weight: 500;
+    font-size: 0.75rem;
+    letter-spacing: 0.02em;
+    width: 1.6rem;
+    height: 1.6rem;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    transform: translateY(-1px);
+}
+
+/* API密钥显示容器样式 - 防止滚动条出现，改用省略号截断 */
+.key-scroll-container {
+    overflow: hidden !important; /* 覆盖overflow-x-auto */
+}
+
+.key-scroll-container > div:first-of-type {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

static/css/themes.css

@@ -0,0 +1,33 @@
+/* 主题模式样式
+ * 定义暗色模式和其他可能的主题变化
+ */
+
+/* 暗色模式调整 */
+@media (prefers-color-scheme: dark) {
+    /* 背景色调整 */
+    .dark\:bg-gray-800 {
+        background-color: #1f2937;
+    }
+    
+    /* 文本颜色调整 */
+    .dark\:text-white {
+        color: #ffffff;
+    }
+    
+    /* 边框颜色调整 */
+    .dark\:border-gray-700 {
+        border-color: #374151;
+    }
+    
+    /* 半透明背景 */
+    .dark\:bg-gray-700\/30 {
+        background-color: rgba(55, 65, 81, 0.3);
+    }
+    
+    /* 卡片悬停效果增强 */
+    .input-card:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+    
+    /* 可以在这里添加更多暗色模式特定样式 */
+}

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

@@ -0,0 +1,188 @@
+/**
+ * API密钥管理器 - 批量操作模块
+ * 包含批量选择、删除和复制等功能
+ */
+
+// 切换单个密钥的选择状态
+function toggleKeySelection(keyId) {
+    const index = this.selectedKeys.indexOf(keyId);
+    if (index === -1) {
+        // 添加到选中数组
+        this.selectedKeys.push(keyId);
+    } else {
+        // 从选中数组中移除
+        this.selectedKeys.splice(index, 1);
+    }
+    
+    // 检查是否需要更新平台选择状态
+    this.updatePlatformSelectionStates();
+}
+
+// 切换平台的选择状态
+function togglePlatformSelection(platformId) {
+    const index = this.selectedPlatforms.indexOf(platformId);
+    
+    if (index === -1) {
+        // 添加到选中平台数组
+        this.selectedPlatforms.push(platformId);
+        
+        // 选中该平台下的所有密钥
+        this.apiKeys.forEach(key => {
+            if (key.platform === platformId && !this.selectedKeys.includes(key.id)) {
+                this.selectedKeys.push(key.id);
+            }
+        });
+    } else {
+        // 从选中平台数组中移除
+        this.selectedPlatforms.splice(index, 1);
+        
+        // 取消选中该平台下的所有密钥
+        this.selectedKeys = this.selectedKeys.filter(keyId => {
+            const key = this.apiKeys.find(k => k.id === keyId);
+            return key && key.platform !== platformId;
+        });
+    }
+}
+
+// 更新平台选择状态（基于已选择的密钥）
+function updatePlatformSelectionStates() {
+    const platforms = this.getPlatforms();
+    
+    // 清空当前选中的平台
+    this.selectedPlatforms = [];
+    
+    // 对于每个平台，检查该平台下的所有密钥是否都被选中
+    platforms.forEach(platform => {
+        const platformKeys = this.apiKeys.filter(key => key.platform === platform.id);
+        const allSelected = platformKeys.length > 0 && 
+                            platformKeys.every(key => this.selectedKeys.includes(key.id));
+        
+        if (allSelected) {
+            this.selectedPlatforms.push(platform.id);
+        }
+    });
+}
+
+// 获取所有可见密钥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;
+}
+
+// 切换全选/取消全选
+function toggleSelectAll() {
+    const allIds = this.getAllVisibleKeyIds();
+    
+    if (this.isAllSelected) {
+        // 如果当前是全选状态，则取消全选
+        this.selectedKeys = this.selectedKeys.filter(id => !allIds.includes(id));
+    } else {
+        // 否则选中所有可见密钥
+        // 先合并当前已选中的ID
+        const newSelection = [...this.selectedKeys];
+        // 添加所有未选中的可见ID
+        allIds.forEach(id => {
+            if (!newSelection.includes(id)) {
+                newSelection.push(id);
+            }
+        });
+        this.selectedKeys = newSelection;
+    }
+    
+    // 更新平台选择状态
+    this.updatePlatformSelectionStates();
+}
+
+// 批量删除API密钥
+function bulkDeleteApiKeys() {
+    if (this.selectedKeys.length === 0) return;
+    
+    // 设置批量删除标志
+    this.isBulkDelete = true;
+    
+    // 显示确认对话框
+    this.showDeleteConfirm = true;
+}
+
+// 批量复制API密钥
+function bulkCopyApiKeys() {
+    if (this.selectedKeys.length === 0) return;
+    
+    // 获取所有选中密钥的值
+    const selectedKeyValues = [];
+    this.selectedKeys.forEach(keyId => {
+        // 查找对应的DOM元素
+        const keyElement = document.querySelector(`[data-key-id="${keyId}"]`);
+        if (keyElement) {
+            // 获取密钥值 - 从DOM中提取
+            const keyValueElement = keyElement.querySelector('.text-gray-500.font-mono');
+            if (keyValueElement) {
+                const keyValue = keyValueElement.textContent.trim();
+                selectedKeyValues.push(keyValue);
+            }
+        }
+    });
+    
+    // 如果成功提取了密钥值
+    if (selectedKeyValues.length > 0) {
+        // 将密钥值格式化为一行一个
+        const formattedKeys = selectedKeyValues.join('\n');
+        
+        // 使用临时textarea元素复制文本
+        const textarea = document.createElement('textarea');
+        textarea.value = formattedKeys;
+        textarea.style.position = 'fixed';
+        document.body.appendChild(textarea);
+        textarea.select();
+        
+        try {
+            document.execCommand('copy');
+            
+            // 使用SweetAlert2显示复制成功动画
+            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;
+                }
+            });
+            
+            Toast.fire({
+                icon: 'success',
+                title: `已成功复制 ${selectedKeyValues.length} 个密钥到剪贴板`,
+                background: '#f0fdf4',
+                iconColor: '#16a34a'
+            });
+        } catch (err) {
+            console.error('复制失败:', err);
+            Swal.fire({
+                icon: 'error',
+                title: '复制失败',
+                text: '请手动复制内容',
+                confirmButtonColor: '#0284c7'
+            });
+        } finally {
+            document.body.removeChild(textarea);
+        }
+    } else {
+        Swal.fire({
+            icon: 'error',
+            title: '复制失败',
+            text: '无法获取所选密钥的值',
+            confirmButtonColor: '#0284c7'
+        });
+    }
+}

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

@@ -0,0 +1,79 @@
+/**
+ * API密钥管理器 - 核心模块
+ * 包含数据状态定义和初始化功能
+ */
+
+function initApiKeyManager() {
+    // 初始化各平台的折叠状态和筛选状态
+    const platforms = JSON.parse(platformsData);
+    
+    // 从localStorage读取平台展开状态，如果有的话
+    const savedPlatformStates = localStorage.getItem('platformStates');
+    const parsedPlatformStates = savedPlatformStates ? JSON.parse(savedPlatformStates) : {};
+    
+    // 从localStorage读取平台筛选状态，如果有的话
+    const savedPlatformFilters = localStorage.getItem('platformFilters');
+    const parsedPlatformFilters = savedPlatformFilters ? JSON.parse(savedPlatformFilters) : {};
+    
+    // 初始化平台状态，优先使用保存的状态
+    platforms.forEach(platform => {
+        this.platformStates[platform.id] = parsedPlatformStates[platform.id] !== undefined 
+            ? parsedPlatformStates[platform.id] 
+            : true;
+        
+        this.platformFilters[platform.id] = parsedPlatformFilters[platform.id] !== undefined 
+            ? parsedPlatformFilters[platform.id] 
+            : true;
+    });
+    
+    // 检查是否所有平台都被选中
+    this.allPlatformsSelected = platforms.every(platform => 
+        this.platformFilters[platform.id] === true
+    );
+    
+    // 加载API密钥
+    this.loadApiKeys();
+    
+    // 初始化剪贴板JS
+    new ClipboardJS('[data-clipboard-text]');
+    
+    // 设置平台类型为上次选择的值（如果有）
+    const lastPlatform = localStorage.getItem('lastSelectedPlatform');
+    if (lastPlatform) {
+        this.newKey.platform = lastPlatform;
+    }
+    
+    // 这里不再恢复搜索词状态，只保留平台状态和页面位置
+    
+    // 监听来自快捷键的打开模态框事件
+    window.addEventListener('open-add-modal', () => {
+        this.showAddModal = true;
+        // 聚焦到平台选择框，方便用户立即操作
+        setTimeout(() => {
+            document.getElementById('platform').focus();
+        }, 100);
+    });
+    
+    // 监听模态框内的键盘事件
+    document.addEventListener('keydown', (e) => {
+        // Alt+Enter 提交表单
+        if (e.altKey && e.key === 'Enter') {
+            if (this.showAddModal) {
+                e.preventDefault();
+                this.addApiKey();
+            } else if (this.showEditModal) {
+                e.preventDefault();
+                this.updateApiKey();
+            }
+        }
+        
+        // Esc 关闭模态框
+        if (e.key === 'Escape') {
+            if (this.showAddModal) {
+                this.showAddModal = false;
+            } else if (this.showEditModal) {
+                this.showEditModal = false;
+            }
+        }
+    });
+}

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

@@ -0,0 +1,501 @@
+/**
+ * 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();
+
+            // 构建通知消息
+            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;
+    }
+}
+
+// 删除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;
+        }
+    }
+}
+
+// 打开编辑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

@@ -0,0 +1,171 @@
+// API密钥管理器主模块
+// 定义API密钥管理器的主函数
+function apiKeyManager() {
+    return {
+        // 数据状态
+        apiKeys: [],
+        platformStates: {},
+        platformFilters: {}, // 平台筛选状态
+        allPlatformsSelected: true, // 是否选择所有平台
+        searchTerm: '',
+        showAddModal: false,
+        showDeleteConfirm: false,
+        isSubmitting: false,
+        isDeleting: false,
+        isLoading: true, // 添加加载状态
+        errorMessage: '',
+        copiedId: null,
+        deleteKeyId: null,
+        deleteKeyName: '',
+        selectedKeys: [], // 批量选择的密钥ID数组
+        selectedPlatforms: [], // 批量选择的平台ID数组
+        isBulkDelete: false, // 是否为批量删除操作
+        newKey: {
+            platform: '',
+            name: '',
+            key: ''
+        },
+        showEditModal: false,
+        editKey: {
+            id: '',
+            name: '',
+            key: '',
+            platform: ''
+        },
+        
+        // 生命周期钩子
+        init() {
+            // 调用核心模块的初始化函数
+            initApiKeyManager.call(this);
+        },
+        
+        // 加载API密钥
+        loadApiKeys() {
+            return loadApiKeys.apply(this, arguments);
+        },
+        
+        // 添加API密钥
+        addApiKey() {
+            return addApiKey.apply(this, arguments);
+        },
+        
+        // 删除API密钥
+        deleteApiKey(id, name) {
+            return deleteApiKey.apply(this, arguments);
+        },
+        
+        // 切换单个密钥的选择状态
+        toggleKeySelection(keyId) {
+            return toggleKeySelection.apply(this, arguments);
+        },
+        
+        // 切换平台的选择状态
+        togglePlatformSelection(platformId) {
+            return togglePlatformSelection.apply(this, arguments);
+        },
+        
+        // 更新平台选择状态（基于已选择的密钥）
+        updatePlatformSelectionStates() {
+            return updatePlatformSelectionStates.apply(this, arguments);
+        },
+        
+        // 获取所有可见密钥ID
+        getAllVisibleKeyIds() {
+            return getAllVisibleKeyIds.apply(this, arguments);
+        },
+        
+        // 判断是否全部选中的计算属性
+        get isAllSelected() {
+            // 获取所有可见密钥的ID
+            const allVisibleKeyIds = this.getAllVisibleKeyIds();
+            // 全选需要满足：有可见密钥，且所有可见密钥都被选中
+            return allVisibleKeyIds.length > 0 && 
+                   allVisibleKeyIds.every(id => this.selectedKeys.includes(id));
+        },
+        
+        // 切换全选/取消全选
+        toggleSelectAll() {
+            return toggleSelectAll.apply(this, arguments);
+        },
+        
+        // 批量删除API密钥
+        bulkDeleteApiKeys() {
+            return bulkDeleteApiKeys.apply(this, arguments);
+        },
+        
+        // 批量复制API密钥
+        bulkCopyApiKeys() {
+            return bulkCopyApiKeys.apply(this, arguments);
+        },
+        
+        // 确认删除（单个或批量）
+        confirmDelete() {
+            return confirmDelete.apply(this, arguments);
+        },
+        
+        // 复制到剪贴板
+        copyToClipboard(text, id) {
+            return copyToClipboard.apply(this, arguments);
+        },
+        
+        // 切换平台折叠状态
+        togglePlatform(platformId) {
+            return togglePlatform.apply(this, arguments);
+        },
+        
+        // 获取平台API密钥数量
+        getPlatformKeyCount(platformId, filtered = false) {
+            return getPlatformKeyCount.apply(this, arguments);
+        },
+        
+        // 平台是否有API密钥
+        hasPlatformKeys(platformId) {
+            return hasPlatformKeys.apply(this, arguments);
+        },
+        
+        // 平台是否应该显示（基于筛选条件）
+        isPlatformVisible(platformId) {
+            return isPlatformVisible.apply(this, arguments);
+        },
+        
+        // 获取所有平台
+        getPlatforms() {
+            return getPlatforms.apply(this, arguments);
+        },
+        
+        // 切换平台筛选状态
+        togglePlatformFilter(platformId) {
+            return togglePlatformFilter.apply(this, arguments);
+        },
+        
+        // 切换所有平台筛选状态
+        toggleAllPlatformFilters() {
+            return toggleAllPlatformFilters.apply(this, arguments);
+        },
+        
+        // 搜索匹配
+        matchesSearch(name, key, notes) {
+            return matchesSearch.apply(this, arguments);
+        },
+        
+        // 获取总API密钥数量
+        totalKeyCount() {
+            return totalKeyCount.apply(this, arguments);
+        },
+        
+        // 打开编辑API密钥模态框
+        editApiKey(id, name, key) {
+            return editApiKey.apply(this, arguments);
+        },
+        
+        // 更新API密钥
+        updateApiKey() {
+            return updateApiKey.apply(this, arguments);
+        },
+        
+        // 显示通知
+        showNotification(message, type = 'info') {
+            return showNotification.apply(this, arguments);
+        }
+    };
+}

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

@@ -0,0 +1,82 @@
+/**
+ * API密钥管理器 - 模态框控制模块
+ * 负责统一管理模态框的显示和交互
+ */
+
+// 打开添加密钥模态框
+function openAddKeyModal() {
+    if (!window.apiKeyManagerInstance) return;
+    window.apiKeyManagerInstance.showAddModal = true;
+    
+    // 聚焦到平台选择下拉框
+    setTimeout(() => {
+        document.getElementById('platform')?.focus();
+    }, 100);
+}
+
+// 打开编辑密钥模态框
+function openEditKeyModal(id, name, key, platform) {
+    if (!window.apiKeyManagerInstance) return;
+    window.apiKeyManagerInstance.editApiKey(id, name, key, platform);
+}
+
+// 打开删除确认模态框
+function openDeleteConfirmModal(id, name) {
+    if (!window.apiKeyManagerInstance) return;
+    window.apiKeyManagerInstance.deleteApiKey(id, name);
+}
+
+// 关闭所有模态框
+function closeAllModals() {
+    if (!window.apiKeyManagerInstance) return;
+    
+    window.apiKeyManagerInstance.showAddModal = false;
+    window.apiKeyManagerInstance.showEditModal = false;
+    window.apiKeyManagerInstance.showDeleteConfirm = false;
+}
+
+// 处理键盘快捷键
+function setupModalKeyboardShortcuts() {
+    document.addEventListener('keydown', (e) => {
+        // ESC键关闭所有模态框
+        if (e.key === 'Escape') {
+            closeAllModals();
+        }
+        
+        // Alt+N 打开添加模态框
+        if (e.altKey && e.key === 'n') {
+            openAddKeyModal();
+        }
+    });
+}
+
+// 初始化模态框设置
+function initModals() {
+    // 存储对API密钥管理器实例的引用，方便全局访问
+    window.addEventListener('alpine:initialized', () => {
+        const apiKeyManagerEl = document.querySelector('[x-data="apiKeyManager()"]');
+        if (apiKeyManagerEl) {
+            window.apiKeyManagerInstance = apiKeyManagerEl.__x.getUnobservedData();
+        }
+    });
+    
+    // 设置键盘快捷键
+    setupModalKeyboardShortcuts();
+    
+    // 监听打开添加模态框事件
+    window.addEventListener('open-add-modal', openAddKeyModal);
+}
+
+// 暴露给外部使用的方法
+window.apiKeyModals = {
+    openAddKeyModal,
+    openEditKeyModal,
+    openDeleteConfirmModal,
+    closeAllModals,
+    initModals
+};
+
+// 注册初始化函数
+document.addEventListener('DOMContentLoaded', () => {
+    initModals();
+});

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

@@ -0,0 +1,78 @@
+/**
+ * API密钥管理器 - 平台工具模块
+ * 包含与平台相关的功能函数
+ */
+
+// 切换平台折叠状态
+function togglePlatform(platformId) {
+    this.platformStates[platformId] = !this.platformStates[platformId];
+    
+    // 保存展开状态到localStorage
+    localStorage.setItem('platformStates', JSON.stringify(this.platformStates));
+}
+
+// 获取平台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;
+}
+
+// 平台是否有API密钥
+function hasPlatformKeys(platformId) {
+    return this.getPlatformKeyCount(platformId) > 0;
+}
+
+// 平台是否应该显示（基于筛选条件）
+function isPlatformVisible(platformId) {
+    return this.platformFilters[platformId] === true;
+}
+
+// 获取所有平台
+function getPlatforms() {
+    return JSON.parse(platformsData);
+}
+
+// 获取所有平台样式配置
+function getPlatformStyles() {
+    return JSON.parse(platformStylesData);
+}
+
+// 获取特定平台的样式
+function getPlatformStyle(platformId) {
+    const styles = getPlatformStyles();
+    return styles[platformId] || {};
+}
+
+// 切换平台筛选状态
+function togglePlatformFilter(platformId) {
+    this.platformFilters[platformId] = !this.platformFilters[platformId];
+    
+    // 检查是否所有平台都被选中
+    const platforms = this.getPlatforms();
+    this.allPlatformsSelected = platforms.every(platform => 
+        this.platformFilters[platform.id] === true
+    );
+    
+    // 保存筛选状态到localStorage
+    localStorage.setItem('platformFilters', JSON.stringify(this.platformFilters));
+}
+
+// 切换所有平台筛选状态
+function toggleAllPlatformFilters() {
+    const newState = !this.allPlatformsSelected;
+    this.allPlatformsSelected = newState;
+    
+    // 将所有平台设置为相同的状态
+    const platforms = this.getPlatforms();
+    platforms.forEach(platform => {
+        this.platformFilters[platform.id] = newState;
+    });
+    
+    // 保存筛选状态到localStorage
+    localStorage.setItem('platformFilters', JSON.stringify(this.platformFilters));
+}

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

@@ -0,0 +1,78 @@
+/**
+ * API密钥管理器 - UI工具模块
+ * 包含各种UI交互辅助功能
+ */
+
+// 复制到剪贴板
+function copyToClipboard(text, id) {
+    // 使用临时textarea元素复制文本
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.style.position = 'fixed';
+    document.body.appendChild(textarea);
+    textarea.select();
+    
+    try {
+        document.execCommand('copy');
+        this.copiedId = id;
+        
+        // 使用SweetAlert2显示复制成功动画
+        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;
+            }
+        });
+        
+        Toast.fire({
+            icon: 'success',
+            title: '已复制到剪贴板',
+            background: '#f0fdf4',
+            iconColor: '#16a34a'
+        });
+        
+        // 2秒后重置复制状态
+        setTimeout(() => {
+            this.copiedId = null;
+        }, 2000);
+    } catch (err) {
+        console.error('复制失败:', err);
+        Swal.fire({
+            icon: 'error',
+            title: '复制失败',
+            text: '请手动复制内容',
+            confirmButtonColor: '#0284c7'
+        });
+    } finally {
+        document.body.removeChild(textarea);
+    }
+}
+
+// 显示通知
+function showNotification(message, type = 'info') {
+    const event = new CustomEvent('show-notification', {
+        detail: { message, type }
+    });
+    window.dispatchEvent(event);
+}
+
+// 获取总API密钥数量
+function totalKeyCount() {
+    return this.apiKeys.length;
+}
+
+// 搜索匹配
+function matchesSearch(name, key, notes) {
+    if (!this.searchTerm) return true;
+    
+    const searchLower = this.searchTerm.toLowerCase();
+    return (
+        (name && name.toLowerCase().includes(searchLower)) ||
+        (key && key.toLowerCase().includes(searchLower))
+    );
+}

static/js/main.js

@@ -0,0 +1,253 @@
+// API密钥管理系统 - 主JavaScript文件
+// ==============================
+
+// 批量操作模块 - Alpine.js集成
+window.bulkOperations = {
+    selectedKeys: [], // 存储选中的密钥ID
+    isBulkDelete: false, // 标记是否进行批量删除操作
+    
+    // 计算是否所有可见密钥都被选中
+    get isAllSelected() {
+        const allVisibleKeyIds = this.getAllVisibleKeyIds();
+        return allVisibleKeyIds.length > 0 && 
+               allVisibleKeyIds.every(id => this.selectedKeys.includes(id));
+    },
+    
+    // 获取当前页面中所有可见密钥的ID
+    getAllVisibleKeyIds() {
+        const keyElements = document.querySelectorAll('[data-key-id]');
+        const keyIds = [];
+        keyElements.forEach(el => {
+            // 只收集DOM中可见的元素ID
+            if (el.offsetParent !== null) {
+                const keyId = el.getAttribute('data-key-id');
+                if (keyId) keyIds.push(keyId);
+            }
+        });
+        return keyIds;
+    },
+    
+    // 切换单个密钥的选中状态
+    toggleKeySelection(keyId) {
+        const index = this.selectedKeys.indexOf(keyId);
+        if (index === -1) {
+            this.selectedKeys.push(keyId);
+        } else {
+            this.selectedKeys.splice(index, 1);
+        }
+    },
+    
+    // 切换全选/取消全选状态
+    toggleSelectAll() {
+        const allIds = this.getAllVisibleKeyIds();
+        
+        if (this.isAllSelected) {
+            // 取消全选 - 从选中列表中移除所有可见ID
+            this.selectedKeys = this.selectedKeys.filter(id => !allIds.includes(id));
+        } else {
+            // 全选 - 将所有可见ID添加到选中列表
+            const newSelection = [...this.selectedKeys];
+            allIds.forEach(id => {
+                if (!newSelection.includes(id)) {
+                    newSelection.push(id);
+                }
+            });
+            this.selectedKeys = newSelection;
+        }
+    },
+    
+    // 执行批量删除操作
+    bulkDeleteApiKeys() {
+        if (this.selectedKeys.length === 0) return;
+        
+        this.isBulkDelete = true;
+        this.$store.apiKeys.showDeleteConfirm = true;
+    },
+    
+    // 触发批量复制功能 - 调用Alpine.js实例中的方法
+    bulkCopyApiKeys() {
+        const apiKeyManager = document.querySelector('[x-data]').__x.$data;
+        
+        if (apiKeyManager && typeof apiKeyManager.bulkCopyApiKeys === 'function') {
+            apiKeyManager.bulkCopyApiKeys();
+        } else {
+            console.error('无法找到Alpine.js实例或批量复制方法');
+            showNotification('复制功能初始化失败，请刷新页面重试', 'error');
+        }
+    }
+};
+
+// 认证处理模块
+// ==============================
+
+// 检测并处理认证失效情况
+function handleAuthenticationError(response) {
+    if (response.status === 401) {
+        showNotification('会话已过期，正在重定向到登录页面...', 'error');
+        
+        setTimeout(() => {
+            window.location.href = '/login';
+        }, 2000);
+        
+        return true; // 已处理认证错误
+    }
+    return false; // 非认证错误
+}
+
+// 扩展fetch API，添加认证错误处理
+const originalFetch = window.fetch;
+window.fetch = async function(url, options = {}) {
+    try {
+        const response = await originalFetch(url, options);
+        
+        if (handleAuthenticationError(response)) {
+            return response; // 认证错误已处理，返回原始响应
+        }
+        
+        return response;
+    } catch (error) {
+        console.error('Fetch error:', error);
+        throw error;
+    }
+};
+
+// 初始化XMLHttpRequest拦截器处理认证问题
+function initXHRInterceptor() {
+    const originalXHROpen = XMLHttpRequest.prototype.open;
+    const originalXHRSend = XMLHttpRequest.prototype.send;
+    
+    // 拦截open方法以保存URL
+    XMLHttpRequest.prototype.open = function() {
+        this._url = arguments[1];
+        originalXHROpen.apply(this, arguments);
+    };
+    
+    // 拦截send方法以添加认证检查
+    XMLHttpRequest.prototype.send = function() {
+        const xhr = this;
+        const originalOnReadyStateChange = xhr.onreadystatechange;
+        
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState === 4 && xhr.status === 401) {
+                showNotification('会话已过期，正在重定向到登录页面...', 'error');
+                setTimeout(() => {
+                    window.location.href = '/login';
+                }, 2000);
+            }
+            
+            if (originalOnReadyStateChange) {
+                originalOnReadyStateChange.apply(this, arguments);
+            }
+        };
+        
+        originalXHRSend.apply(this, arguments);
+    };
+}
+
+// 初��化模块
+// ==============================
+document.addEventListener('DOMContentLoaded', () => {
+    initScrollContainers();    // 初始化滚动容器
+    initKeyboardShortcuts();   // 设置键盘快捷键
+    initBackToTop();           // 设置回到顶部按钮
+    initXHRInterceptor();      // 启用XHR拦截器处理认证
+});
+
+// 设置键盘快捷键
+function initKeyboardShortcuts() {
+    // Alt+N: 打开添加密钥模态框
+    document.addEventListener('keydown', (e) => {
+        if (e.altKey && e.key === 'n') {
+            window.dispatchEvent(new CustomEvent('open-add-modal'));
+        }
+    });
+}
+
+// 初始化滚动容器，处理长密钥的滚动显示
+function initScrollContainers() {
+    const scrollContainers = document.querySelectorAll('.key-scroll-container');
+    scrollContainers.forEach(container => {
+        // 鼠标悬停时显示滚动条
+        container.addEventListener('mouseenter', () => {
+            if (container.scrollWidth > container.clientWidth) {
+                container.style.overflowX = 'auto';
+            }
+        });
+        
+        // 鼠标离开时隐藏滚动条
+        container.addEventListener('mouseleave', () => {
+            container.style.overflowX = 'hidden';
+        });
+    });
+}
+
+// 工具函数
+// ==============================
+
+// 显示通知消息
+// message: 通知内容
+// type: 通知类型 (success, error, info)
+function showNotification(message, type = 'info') {
+    const event = new CustomEvent('show-notification', {
+        detail: { message, type }
+    });
+    window.dispatchEvent(event);
+}
+
+// UI控件
+// ==============================
+
+// 初始化回到顶部按钮功能
+function initBackToTop() {
+    const backToTopBtn = document.getElementById('backToTop');
+    if (!backToTopBtn) return;
+    
+    const scrollThreshold = 50; // 显示按钮的滚动阈值
+    
+    // 更新按钮可见性
+    const updateButtonVisibility = () => {
+        if (window.scrollY > scrollThreshold) {
+            backToTopBtn.classList.add('visible');
+        } else {
+            backToTopBtn.classList.remove('visible');
+        }
+    };
+    
+    // 监听滚动事件
+    window.addEventListener('scroll', updateButtonVisibility);
+    
+    // 设置按钮点击行为
+    backToTopBtn.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+    
+    // 初始状态检查
+    updateButtonVisibility();
+}
+
+// 应用状态管理
+// ==============================
+
+// 重置所有本地存储的应用状态
+function resetAppState() {
+    // 需要清除的本地存储键
+    const stateKeys = [
+        'platformStates', 
+        'platformFilters', 
+        'lastSelectedPlatform'
+    ];
+    
+    // 清除所有状态
+    stateKeys.forEach(key => localStorage.removeItem(key));
+    
+    showNotification('已重置所有浏览状态，刷新页面以应用变更。', 'info');
+    
+    // 自动刷新页面应用更改
+    setTimeout(() => window.location.reload(), 1000);
+}
+
+// 导出全局函数
+window.resetAppState = resetAppState;

templates/base.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API密钥管理系统</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- 自定义Tailwind配置 -->
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                            950: '#082f49',
+                        },
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.3s ease-in-out',
+                        'fade-out': 'fadeOut 0.3s ease-in-out',
+                        'slide-down': 'slideDown 0.3s ease-in-out',
+                        'slide-up': 'slideUp 0.3s ease-in-out',
+                        'expand': 'expand 0.3s ease-in-out',
+                        'collapse': 'collapse 0.3s ease-in-out',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        },
+                        fadeOut: {
+                            '0%': { opacity: '1' },
+                            '100%': { opacity: '0' },
+                        },
+                        slideDown: {
+                            '0%': { maxHeight: '0', opacity: '0', transform: 'translateY(-10px)' },
+                            '100%': { maxHeight: '1000px', opacity: '1', transform: 'translateY(0)' }
+                        },
+                        slideUp: {
+                            '0%': { maxHeight: '1000px', opacity: '1', transform: 'translateY(0)' },
+                            '100%': { maxHeight: '0', opacity: '0', transform: 'translateY(-10px)' }
+                        },
+                        expand: {
+                            '0%': { transform: 'scaleY(0)', transformOrigin: 'top', opacity: '0' },
+                            '100%': { transform: 'scaleY(1)', transformOrigin: 'top', opacity: '1' }
+                        },
+                        collapse: {
+                            '0%': { transform: 'scaleY(1)', transformOrigin: 'top', opacity: '1' },
+                            '100%': { transform: 'scaleY(0)', transformOrigin: 'top', opacity: '0' }
+                        },
+                    },
+                },
+            },
+        }
+    </script>
+    <!-- Alpine.js -->
+    <script defer src="https://unpkg.com/[email protected]/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 -->
+    <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') }}">
+    {% block head %}{% endblock %}
+</head>
+<body class="bg-gray-50 text-gray-900 min-h-screen">
+    
+    <!-- 顶部导航 -->
+    <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>
+        </div>
+    </header>
+
+    <!-- 主内容区 -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- 回到顶部按钮 -->
+    <div id="backToTop" class="back-to-top" title="回到顶部">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+        </svg>
+    </div>
+
+    <!-- 通知弹出组件 -->
+    <div x-data="notificationSystem()"
+         x-init="init()"
+         @show-notification.window="add($event.detail.message, $event.detail.type)"
+         class="fixed bottom-4 right-4 z-50 space-y-4"
+         x-cloak>
+        <template x-for="notification in notifications" :key="notification.id">
+            <div x-show="notification.visible" 
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="transform translate-y-2 opacity-0"
+                 x-transition:enter-end="transform translate-y-0 opacity-100"
+                 x-transition:leave="transition ease-in duration-200"
+                 x-transition:leave-start="transform translate-y-0 opacity-100"
+                 x-transition:leave-end="transform translate-y-2 opacity-0"
+                 :class="{
+                    'bg-green-50 text-green-800 border-green-400': notification.type === 'success',
+                    'bg-red-50 text-red-800 border-red-400': notification.type === 'error',
+                    'bg-blue-50 text-blue-800 border-blue-400': notification.type === 'info'
+                 }"
+                 class="p-4 border-l-4 shadow-md rounded-r-lg flex justify-between items-center min-w-[300px]">
+                <div x-text="notification.message"></div>
+                <button @click="remove(notification.id)" class="ml-4 text-gray-500 hover:text-gray-700">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                </button>
+            </div>
+        </template>
+    </div>
+
+    <!-- 自定义脚本 -->
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    {% block scripts %}{% endblock %}
+    
+    <script>
+        // 通知系统
+        function notificationSystem() {
+            return {
+                notifications: [],
+                nextId: 1,
+                init() {
+                    // 初始化通知系统
+                },
+                add(message, type = 'info') {
+                    const id = this.nextId++;
+                    const notification = {
+                        id,
+                        message,
+                        type,
+                        visible: true
+                    };
+                    this.notifications.push(notification);
+                    
+                    // 3秒后自动移除
+                    setTimeout(() => {
+                        this.remove(id);
+                    }, 3000);
+                },
+                remove(id) {
+                    const index = this.notifications.findIndex(n => n.id === id);
+                    if (index !== -1) {
+                        // 隐藏通知
+                        this.notifications[index].visible = false;
+                        
+                        // 300毫秒后从数组中移除（与过渡动画时间一致）
+                        setTimeout(() => {
+                            this.notifications = this.notifications.filter(n => n.id !== id);
+                        }, 300);
+                    }
+                }
+            };
+        }
+    </script>
+</body>
+</html>

templates/components/api_key_list.html

@@ -0,0 +1,310 @@
+<!-- 分组的API密钥列表 -->
+<div class="space-y-6">
+    <!-- 遍历每个平台 -->
+    {% for platform in platforms %}
+        {% set platform_keys = grouped_keys.get(platform.id, {}).get('keys', []) %}
+        <!-- 如果平台有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-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"
+            class="bg-white rounded-lg shadow overflow-hidden"
+        >
+            <!-- 平台标题 - 可折叠 -->
+                <div 
+                @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 }}')
+                }"
+                :style="{
+                    backgroundColor: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}')['background-color'] : 'rgba(243, 244, 246, 0.5)',
+                    borderColor: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}')['border-color'] : 'rgba(229, 231, 235, 1)'
+                }"
+            >
+            <!-- 平台批量选择复选框 -->
+            <div class="mr-3 flex items-center" @click.stop>
+                <div class="relative h-5 w-5">
+                    <!-- 圆形边框 -->
+                    <div 
+                        class="absolute inset-0 rounded-full border-2 transition-colors duration-200"
+                        :class="selectedPlatforms.includes('{{ platform.id }}') ? 'border-blue-500' : 'border-gray-300'"
+                    ></div>
+                    
+                    <!-- 未选中时的白色背景 -->
+                    <div 
+                        class="absolute inset-0.5 rounded-full bg-white"
+                        x-show="!selectedPlatforms.includes('{{ platform.id }}')"
+                    ></div>
+                    
+                    <!-- 选中时的蓝色填充 -->
+                    <div 
+                        x-show="selectedPlatforms.includes('{{ platform.id }}')"
+                        class="absolute inset-0.5 rounded-full bg-blue-200"
+                    ></div>
+                    
+                    <!-- 透明的复选框，用于捕获点击事件 -->
+                    <input 
+                        type="checkbox"
+                        :checked="selectedPlatforms.includes('{{ platform.id }}')"
+                        @click="togglePlatformSelection('{{ platform.id }}')"
+                        class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                    />
+                </div>
+            </div>
+            
+            <h2 class="text-lg font-medium flex items-center"
+                    :style="{
+                        color: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}').color : '#111827'
+                    }"
+                >
+                    <span>{{ platform.name }}</span>
+                        <span 
+                        x-show="getPlatformKeyCount('{{ platform.id }}') > 0"
+                        x-text="getPlatformKeyCount('{{ platform.id }}')"
+                        class="ml-2 platform-title-counter rounded-full"
+                        :style="{
+                            backgroundColor: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}')['background-color'] : 'rgba(224, 242, 254, 1)',
+                            color: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}').color : '#0369a1'
+                        }"
+                    ></span>
+                </h2>
+                <svg 
+                    xmlns="http://www.w3.org/2000/svg" 
+                    :class="{'transform rotate-180': platformStates['{{ platform.id }}']}"
+                    class="h-5 w-5 accordion-icon"
+                    :style="{
+                        color: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}').color : '#6b7280'
+                    }"
+                    viewBox="0 0 20 20" 
+                    fill="currentColor"
+                >
+                    <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 
+                x-show="platformStates['{{ platform.id }}']"
+                x-transition:enter="transition-all ease-out duration-400 accordion-expand"
+                x-transition:enter-start="opacity-0 max-h-0 overflow-hidden transform scale-y-95 origin-top"
+                x-transition:enter-end="opacity-100 max-h-[2000px] transform scale-y-100 origin-top"
+                x-transition:leave="transition-all ease-in-out duration-300 accordion-collapse"
+                x-transition:leave-start="opacity-100 max-h-[2000px] transform scale-y-100 origin-top"
+                x-transition:leave-end="opacity-0 max-h-0 overflow-hidden transform scale-y-95 origin-top"
+                class="divide-y divide-gray-200 accordion-content"
+            >
+                <!-- 平台内的API密钥 -->
+                {% for key in platform_keys %}
+                    <div 
+                        x-show="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"
+                        x-transition:enter-end="opacity-100"
+                        :class="{'bg-blue-50': selectedKeys.includes('{{ key.id }}')}"
+                        data-key-id="{{ key.id }}"
+                    >
+                        <!-- 简洁的蓝点复选框 -->
+                        <div class="mr-3 flex items-center">
+                            <div class="relative h-5 w-5">
+                                <!-- 圆形边框 -->
+                                <div 
+                                    class="absolute inset-0 rounded-full border-2 transition-colors duration-200"
+                                    :class="selectedKeys.includes('{{ key.id }}') ? 'border-blue-500' : 'border-gray-300'"
+                                ></div>
+                                
+                                <!-- 未选中时的白色背景 -->
+                                <div 
+                                    class="absolute inset-0.5 rounded-full bg-white"
+                                    x-show="!selectedKeys.includes('{{ key.id }}')"
+                                ></div>
+                                
+                                <!-- 选中时的蓝色填充 -->
+                                <div 
+            x-show="selectedKeys.includes('{{ key.id }}')"
+            class="absolute inset-0.5 rounded-full bg-blue-200"
+        ></div>
+        
+        <!-- 透明的复选框，用于捕获点击事件 -->
+                                <input 
+                                    type="checkbox"
+                                    :checked="selectedKeys.includes('{{ key.id }}')"
+                                    @click.stop="toggleKeySelection('{{ key.id }}')"
+                                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                                />
+                            </div>
+                        </div>
+                        
+                        <div class="flex-grow min-w-0 mb-3 md:mb-0 md:mr-4">
+                            <!-- 密钥名称 -->
+                            <h3 class="text-sm font-medium text-gray-900 truncate">{{ key.name }}</h3>
+                            
+                            <!-- 创建时间 - 重构版 -->
+                            <div class="mt-1.5 flex items-center">
+                                <!-- 日期部分 -->
+                                <div class="flex items-center mr-2">
+                                    <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                    </svg>
+                                    <span class="text-xs text-gray-600">{{ key.created_at.split('T')[0] }}</span>
+                                </div>
+                                
+                                <!-- 时间部分 -->
+                                <div class="flex items-center">
+                                    <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    </svg>
+                                    <span class="text-xs text-gray-600">{{ key.created_at.split('T')[1].split('.')[0] }}</span>
+                                </div>
+                            </div>
+                            
+                            <!-- 密钥值 -->
+                            <div class="mt-1 relative group key-scroll-container custom-scrollbar overflow-x-auto">
+                                <div class="text-sm text-gray-500 font-mono py-1 pr-10">
+                                    {{ key.key }}
+                                </div>
+                                
+                                <!-- 悬浮时的高亮背景 -->
+                                <div class="absolute inset-0 bg-primary-50 opacity-0 group-hover:opacity-100 transition-opacity duration-150 -z-10 rounded"></div>
+                            </div>
+                            
+                        </div>
+                        
+                        <!-- 操作按钮 -->
+                        <div class="flex space-x-2 justify-end">
+                            <!-- 复制按钮 -->
+                            <button 
+                                @click="copyToClipboard('{{ key.key }}', '{{ key.id }}')"
+                                class="p-2 text-gray-500 hover:text-primary-600 rounded-md hover:bg-gray-100 transition-colors duration-150 focus:outline-none"
+                                :class="{'text-green-600': copiedId === '{{ key.id }}'}"
+                                data-clipboard-text="{{ key.key }}"
+                            >
+                                <span x-show="copiedId !== '{{ key.id }}'">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
+                                <span x-show="copiedId === '{{ key.id }}'">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                    </svg>
+                                </span>
+                            </button>
+                            
+                            <!-- 编辑按钮 -->
+                            <button 
+                                @click="editApiKey('{{ key.id }}', '{{ key.name }}', '{{ key.key }}')"
+                                class="p-2 text-gray-500 hover:text-blue-600 rounded-md hover:bg-gray-100 transition-colors duration-150 focus:outline-none"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                </svg>
+                            </button>
+                            
+                            <!-- 删除按钮 -->
+                            <button 
+                                @click="deleteApiKey('{{ key.id }}', '{{ key.name }}')"
+                                class="p-2 text-gray-500 hover:text-red-600 rounded-md hover:bg-gray-100 transition-colors duration-150 focus:outline-none"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                {% endfor %}
+                
+                <!-- 如果此平台没有密钥或者搜索无结果时显示 -->
+                <div 
+                    x-show="getPlatformKeyCount('{{ platform.id }}') === 0 || (searchTerm !== '' && getPlatformKeyCount('{{ platform.id }}', true) === 0)"
+                    class="px-6 py-8 text-center text-gray-500"
+                >
+                    <div class="flex flex-col items-center">
+                        <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 !== ''">没有找到匹配的API密钥</p>
+                        <button 
+                            @click="showAddModal = true; newKey.platform = '{{ platform.id }}'"
+                            class="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none transition-colors duration-200 space-x-2"
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
+                            </svg>
+                            <span>添加 {{ platform.name }} 密钥</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+</div>

templates/components/modals/add_key_modal.html

@@ -0,0 +1,194 @@
+<!-- 现代化API密钥添加模态框 -->
+<div 
+    x-cloak
+    x-show="showAddModal" 
+    class="fixed inset-0 overflow-y-auto z-50"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave="transition ease-in duration-200"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+>
+    <div class="flex items-center justify-center min-h-screen p-4">
+        <!-- 高斯模糊背景 -->
+        <div 
+            x-cloak
+            @click="showAddModal = false"
+            x-show="showAddModal" 
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0 backdrop-blur-none"
+            x-transition:enter-end="opacity-80 backdrop-blur-md"
+            x-transition:leave="transition ease-in duration-200"
+            x-transition:leave-start="opacity-80 backdrop-blur-md"
+            x-transition:leave-end="opacity-0 backdrop-blur-none"
+            class="fixed inset-0 bg-gray-900/60 backdrop-blur-md"
+        ></div>
+        
+        <!-- 模态框卡片 -->
+        <div 
+            x-cloak
+            x-show="showAddModal" 
+            @click.away="showAddModal = false" 
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0 transform scale-95 translate-y-4"
+            x-transition:enter-end="opacity-100 transform scale-100 translate-y-0"
+            x-transition:leave="transition ease-in duration-200"
+            x-transition:leave-start="opacity-100 transform scale-100 translate-y-0"
+            x-transition:leave-end="opacity-0 transform scale-95 translate-y-4"
+            class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden w-4/5 max-w-3xl max-h-[80vh] z-50 relative border border-gray-200 dark:border-gray-700 flex flex-col"
+        >
+            <!-- 顶部图案装饰 -->
+            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600"></div>
+            
+            <!-- 模态框标题栏 -->
+            <div class="px-6 py-4 flex justify-between items-center">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-primary-500" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v-1l1-1 1-1-.257-.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" />
+                    </svg>
+                    添加新API密钥
+                </h3>
+                <button 
+                    @click="showAddModal = false" 
+                    class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 transition-colors focus:outline-none rounded-full p-1"
+                    aria-label="关闭"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                </button>
+            </div>
+            
+            <!-- 模态框内容 -->
+            <div class="px-6 pb-6 flex-grow overflow-y-auto">
+                <form @submit.prevent="addApiKey()" class="space-y-5">
+                    <!-- 平台选择卡片 -->
+                    <div class="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-4 transition-all duration-300 hover:shadow-md border border-gray-100 dark:border-gray-700">
+                        <label for="platform" class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-primary-500" viewBox="0 0 20 20" fill="currentColor">
+                                <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
+                            </svg>
+                            选择平台 <span class="text-red-500 ml-1">*</span>
+                        </label>
+                        <div class="relative">
+                            <select 
+                                id="platform" 
+                                x-model="newKey.platform"
+                                class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm pl-3 pr-10 py-2.5 text-sm transition-colors duration-200 bg-white dark:bg-gray-700 appearance-none focus:outline-none"
+                                required
+                            >
+                                <option value="" disabled>-- 选择平台 --</option>
+                                {% for platform in platforms %}
+                                <option value="{{ platform.id }}">{{ platform.name }}</option>
+                                {% endfor %}
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500 dark:text-gray-400">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                                    <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>
+                    </div>
+                    
+                    <!-- 名称输入卡片 -->
+                    <div class="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-4 transition-all duration-300 hover:shadow-md border border-gray-100 dark:border-gray-700">
+                        <label for="name" class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-primary-500" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 2a1 1 0 00-1 1v1a1 1 0 002 0V3a1 1 0 00-1-1zM4 4h3a3 3 0 006 0h3a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm2.5 7a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm2.45 4a2.5 2.5 0 10-4.9 0h4.9zM12 9a1 1 0 100 2h3a1 1 0 100-2h-3zm-1 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1z" clip-rule="evenodd" />
+                            </svg>
+                            密钥标识名称 <span class="text-gray-400 text-xs ml-1">(可选)</span>
+                        </label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <input 
+                                type="text" 
+                                id="name" 
+                                x-model="newKey.name"
+                                placeholder="为密钥添加易于识别的名称，留空将自动生成"
+                                class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm pl-3 pr-10 py-2.5 text-sm transition-colors duration-200 focus:outline-none"
+                                autocomplete="off"
+                            >
+                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                                </svg>
+                            </div>
+                        </div>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">好的命名有助于快速找到特定密钥</p>
+                    </div>
+                    
+                    <!-- API密钥输入卡片 -->
+                    <div class="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-4 transition-all duration-300 hover:shadow-md border border-gray-100 dark:border-gray-700">
+                        <label for="key" class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-primary-500" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v-1l1-1 1-1-.257-.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" />
+                            </svg>
+                            API密钥 <span class="text-red-500 ml-1">*</span>
+                        </label>
+                        <div class="mt-1">
+                            <textarea 
+                                id="key" 
+                                x-model="newKey.key"
+                                placeholder="在此输入您的API密钥，每行一个密钥将被视为单独添加"
+                                rows="10"
+                                class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm pl-3 pr-3 py-2.5 text-sm font-mono transition-colors duration-200 resize-none focus:outline-none"
+                                required
+                                spellcheck="false"
+                                autocomplete="off"
+                                autocorrect="off"
+                                autocapitalize="off"
+                                style="min-height: 200px;"
+                            ></textarea>
+                        </div>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">多行输入将作为多个密钥添加</p>
+                    </div>
+                    
+                    <!-- 错误消息 -->
+                    <div 
+                        x-show="errorMessage" 
+                        x-text="errorMessage"
+                        class="p-3 text-sm text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 rounded-lg"
+                    ></div>
+                    
+                    <!-- 按钮组 -->
+                    <div class="flex justify-end space-x-3 mt-6">
+                        <button 
+                            type="button" 
+                            @click="showAddModal = false"
+                            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none transition-colors duration-200"
+                        >
+                            取消
+                        </button>
+                        <button 
+                            type="submit"
+                            :disabled="isSubmitting"
+                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none transition-colors duration-200 space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            <span x-show="!isSubmitting" class="flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                                </svg>
+                                添加密钥
+                            </span>
+                            <span x-show="isSubmitting" class="flex items-center">
+                                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                </svg>
+                                处理中...
+                            </span>
+                        </button>
+                    </div>
+                </form>
+            </div>
+            
+            <!-- 键盘快捷键提示 -->
+            <div class="absolute bottom-3 left-6 text-xs text-gray-400 dark:text-gray-500 flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9a1 1 0 00-1-1z" clip-rule="evenodd" />
+                </svg>
+                Esc 关闭 | Alt+Enter 提交
+            </div>
+        </div>
+    </div>
+</div>

templates/components/modals/delete_confirm_modal.html

@@ -0,0 +1,229 @@
+<!-- 删除确认模态框 -->
+<div 
+    x-cloak
+    x-show="showDeleteConfirm" 
+    class="fixed inset-0 overflow-y-auto z-50"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave="transition ease-in duration-200"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+    @keydown.escape.window="showDeleteConfirm = false"
+    @keydown.enter.window="if(showDeleteConfirm && !isDeleting) confirmDelete()"
+>
+    <div class="flex items-center justify-center min-h-screen p-4">
+        <!-- 高斯模糊背景 -->
+        <div 
+            x-cloak
+            @click="showDeleteConfirm = false"
+            x-show="showDeleteConfirm" 
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0 backdrop-blur-none"
+            x-transition:enter-end="opacity-80 backdrop-blur-md"
+            x-transition:leave="transition ease-in duration-200"
+            x-transition:leave-start="opacity-80 backdrop-blur-md"
+            x-transition:leave-end="opacity-0 backdrop-blur-none"
+            class="fixed inset-0 bg-gray-900/60 backdrop-blur-md"
+        ></div>
+        
+        <!-- 模态框内容 -->
+        <div 
+            x-cloak
+            x-show="showDeleteConfirm" 
+            @click.away="showDeleteConfirm = false" 
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0 transform scale-95 translate-y-4"
+            x-transition:enter-end="opacity-100 transform scale-100 translate-y-0"
+            x-transition:leave="transition ease-in duration-200"
+            x-transition:leave-start="opacity-100 transform scale-100 translate-y-0"
+            x-transition:leave-end="opacity-0 transform scale-95 translate-y-4"
+            class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden max-w-3xl z-50 relative border border-gray-200 dark:border-gray-700 flex flex-col w-full"
+        >
+            <!-- 顶部装饰条 -->
+            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-red-400 via-red-500 to-red-600"></div>
+            
+            <!-- 模态框标题 -->
+            <div class="px-6 py-4 flex justify-between items-center">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                    </svg>
+                    确认删除
+                </h3>
+                <button 
+                    @click="showDeleteConfirm = false" 
+                    class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 transition-colors focus:outline-none rounded-full p-1"
+                    aria-label="关闭"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                </button>
+            </div>
+            
+            <!-- 模态框内容 -->
+            <div class="px-6 pb-6">
+                <div class="bg-red-50 dark:bg-red-900/10 rounded-lg p-4 border border-red-100 dark:border-red-800/30 mb-4 shadow-sm">
+                    <!-- 单个删除提示 -->
+                    <template x-if="!isBulkDelete">
+                        <div>
+                            <p class="text-gray-700 dark:text-gray-300 mb-1 flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-red-500 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                                </svg>
+                                您确定要删除以下API密钥吗？
+                            </p>
+                            <p class="text-red-600 dark:text-red-400 text-sm font-medium ml-5.5">此操作无法撤销，删除后数据将无法恢复。</p>
+                        </div>
+                    </template>
+                    
+                    <!-- 批量删除提示 -->
+                    <template x-if="isBulkDelete">
+                        <div>
+                            <p class="text-gray-700 dark:text-gray-300 mb-1 flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-red-500 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                                </svg>
+                                您确定要删除 <span class="font-semibold text-red-600 dark:text-red-400" x-text="selectedKeys.length"></span> 个选中的API密钥吗？
+                            </p>
+                            <p class="text-red-600 dark:text-red-400 text-sm font-medium ml-5.5">此操作无法撤销，删除后数据将无法恢复。</p>
+                        </div>
+                    </template>
+                </div>
+                
+                <!-- 单个删除时显示详情 -->
+                <div 
+                    x-show="!isBulkDelete"
+                    class="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-4 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-md relative overflow-hidden group"
+                >
+                    <!-- 装饰性背景元素 -->
+                    <div class="absolute inset-0 opacity-5 pointer-events-none">
+                        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+                            <defs>
+                                <pattern id="key-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+                                    <path d="M10,0 L10,20 M0,10 L20,10" stroke="currentColor" stroke-width="0.5" stroke-dasharray="2,2"/>
+                                </pattern>
+                            </defs>
+                            <rect x="0" y="0" width="100%" height="100%" fill="url(#key-pattern)" />
+                        </svg>
+                    </div>
+                    
+                    <div class="flex items-start relative">
+                        <div class="flex-shrink-0 mr-4">
+                            <div class="bg-red-100 dark:bg-red-800/20 w-10 h-10 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 dark:text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v-1l1-1 1-1-.257-.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                        </div>
+                        <div class="flex-grow">
+                            <div class="flex flex-col">
+                                <span class="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">将要删除的密钥:</span>
+                                <div class="bg-white dark:bg-gray-800 px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 shadow-sm">
+                                    <span 
+                                        x-text="deleteKeyName && deleteKeyName.length > 60 ? deleteKeyName.substring(0, 60) + '...' : deleteKeyName" 
+                                        class="font-medium text-gray-900 dark:text-white"
+                                        :title="deleteKeyName"
+                                    ></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 美化的批量删除时显示数量汇总 -->
+                <div 
+                    x-show="isBulkDelete"
+                    class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-red-900/10 dark:to-pink-900/10 rounded-lg p-4 border border-red-100/50 dark:border-red-800/30 transition-all duration-300 hover:shadow-lg relative overflow-hidden group"
+                >
+                    <!-- 装饰元素 - 微妙的图案背景 -->
+                    <div class="absolute inset-0 opacity-5 pointer-events-none">
+                        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+                            <defs>
+                                <pattern id="deletion-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+                                    <path d="M0,10 L20,10 M10,0 L10,20" stroke="currentColor" stroke-width="0.5"/>
+                                </pattern>
+                            </defs>
+                            <rect x="0" y="0" width="100%" height="100%" fill="url(#deletion-pattern)" />
+                        </svg>
+                    </div>
+                    
+                    <div class="flex items-start relative">
+                        <!-- 装饰图标 -->
+                        <div class="flex-shrink-0 mr-4">
+                            <div class="bg-red-100 dark:bg-red-800/20 w-10 h-10 rounded-full flex items-center justify-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 dark:text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                        </div>
+                        
+                        <div class="flex-grow">
+                            <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-1">批量删除操作</h4>
+                            <div class="text-xs text-gray-600 dark:text-gray-300 mb-3">以下项目将被永久删除：</div>
+                            
+                            <!-- 数量显示 -->
+                            <div class="flex items-center">
+                                <div class="inline-flex items-center justify-center bg-red-100 text-red-800 dark:bg-red-800/30 dark:text-red-300 px-3 py-1 rounded-full text-sm font-medium shadow-sm">
+                                    <span x-text="selectedKeys.length" class="text-lg font-bold mr-1"></span>
+                                    <span>个API密钥</span>
+                                </div>
+                                
+                                <!-- 动态提示 -->
+                                <div class="ml-3 text-xs text-gray-500 dark:text-gray-400 italic">
+                                    <template x-if="selectedKeys.length > 10">
+                                        <span>（大批量删除，请谨慎操作）</span>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 按钮组 -->
+                <div class="flex justify-end space-x-3 mt-6">
+                    <button 
+                        type="button" 
+                        @click="showDeleteConfirm = false"
+                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none transition-colors duration-200"
+                    >
+                        取消
+                    </button>
+                    <button 
+                        type="button"
+                        @click="confirmDelete()"
+                        :disabled="isDeleting"
+                        class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none transition-colors duration-200 space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        <template x-if="!isDeleting">
+                            <span class="flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" 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>
+                        </template>
+                        <template x-if="isDeleting">
+                            <span class="flex items-center">
+                                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                </svg>
+                                处理中...
+                            </span>
+                        </template>
+                    </button>
+                </div>
+            </div>
+            
+            <!-- 键盘快捷键提示 -->
+            <div class="absolute bottom-3 left-6 text-xs text-gray-400 dark:text-gray-500 flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9a1 1 0 00-1-1z" clip-rule="evenodd" />
+                </svg>
+                Esc 取消 | Enter 确认
+            </div>
+        </div>
+    </div>
+</div>

templates/components/modals/edit_key_modal.html

@@ -0,0 +1,164 @@
+<!-- 现代化API密钥编辑模态框 -->
+<div 
+    x-cloak
+    x-show="showEditModal" 
+    class="fixed inset-0 overflow-y-auto z-50"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave="transition ease-in duration-200"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+>
+    <div class="flex items-center justify-center min-h-screen p-4">
+        <!-- 高斯模糊背景 -->
+        <div 
+            x-cloak
+            @click="showEditModal = false"
+            x-show="showEditModal" 
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0 backdrop-blur-none"
+            x-transition:enter-end="opacity-80 backdrop-blur-md"
+            x-transition:leave="transition ease-in duration-200"
+            x-transition:leave-start="opacity-80 backdrop-blur-md"
+            x-transition:leave-end="opacity-0 backdrop-blur-none"
+            class="fixed inset-0 bg-gray-900/60 backdrop-blur-md"
+        ></div>
+        
+        <!-- 模态框卡片 -->
+        <div 
+            x-cloak
+            x-show="showEditModal" 
+            @click.away="showEditModal = false" 
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0 transform scale-95 translate-y-4"
+            x-transition:enter-end="opacity-100 transform scale-100 translate-y-0"
+            x-transition:leave="transition ease-in duration-200"
+            x-transition:leave-start="opacity-100 transform scale-100 translate-y-0"
+            x-transition:leave-end="opacity-0 transform scale-95 translate-y-4"
+            class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden w-4/5 max-w-3xl max-h-[80vh] z-50 relative border border-gray-200 dark:border-gray-700 flex flex-col"
+        >
+            <!-- 顶部图案装饰 -->
+            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600"></div>
+            
+            <!-- 模态框标题栏 -->
+            <div class="px-6 py-4 flex justify-between items-center">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                    </svg>
+                    编辑API密钥
+                </h3>
+                <button 
+                    @click="showEditModal = false" 
+                    class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 transition-colors focus:outline-none rounded-full p-1"
+                    aria-label="关闭"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                </button>
+            </div>
+            
+            <!-- 模态框内容 -->
+            <div class="px-6 pb-6 flex-grow overflow-y-auto">
+                <form @submit.prevent="updateApiKey()" class="space-y-5">
+                    <!-- 名称输入卡片 -->
+                    <div class="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-4 transition-all duration-300 hover:shadow-md border border-gray-100 dark:border-gray-700">
+                        <label for="edit-name" class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-primary-500" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 2a1 1 0 00-1 1v1a1 1 0 002 0V3a1 1 0 00-1-1zM4 4h3a3 3 0 006 0h3a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm2.5 7a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm2.45 4a2.5 2.5 0 10-4.9 0h4.9zM12 9a1 1 0 100 2h3a1 1 0 100-2h-3zm-1 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1z" clip-rule="evenodd" />
+                            </svg>
+                            密钥标识名称 <span class="text-gray-400 text-xs ml-1">(可选)</span>
+                        </label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <input 
+                                type="text" 
+                                id="edit-name" 
+                                x-model="editKey.name"
+                                placeholder="为密钥添加易于识别的名称"
+                                class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm pl-3 pr-10 py-2.5 text-sm transition-colors duration-200 focus:outline-none"
+                                autocomplete="off"
+                            >
+                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                                </svg>
+                            </div>
+                        </div>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">好的命名有助于快速找到特定密钥</p>
+                    </div>
+                    
+                    <!-- API密钥输入卡片 -->
+                    <div class="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-4 transition-all duration-300 hover:shadow-md border border-gray-100 dark:border-gray-700">
+                        <label for="edit-key" class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-primary-500" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v-1l1-1 1-1-.257-.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" />
+                            </svg>
+                            API密钥 <span class="text-red-500 ml-1">*</span>
+                        </label>
+                        <div class="mt-1">
+                            <input 
+                                type="text" 
+                                id="edit-key" 
+                                x-model="editKey.key"
+                                placeholder="在此输入您的API密钥"
+                                class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm pl-3 pr-3 py-2.5 text-sm font-mono transition-colors duration-200 focus:outline-none"
+                                required
+                                spellcheck="false"
+                                autocomplete="off"
+                                autocorrect="off"
+                                autocapitalize="off"
+                            >
+                        </div>
+                    </div>
+                    
+                    <!-- 错误消息 -->
+                    <div 
+                        x-show="errorMessage" 
+                        x-text="errorMessage"
+                        class="p-3 text-sm text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 rounded-lg"
+                    ></div>
+                    
+                    <!-- 按钮组 -->
+                    <div class="flex justify-end space-x-3 mt-6">
+                        <button 
+                            type="button" 
+                            @click="showEditModal = false"
+                            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none transition-colors duration-200"
+                        >
+                            取消
+                        </button>
+                        <button 
+                            type="submit"
+                            :disabled="isSubmitting"
+                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none transition-colors duration-200 space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            <span x-show="!isSubmitting" class="flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                                </svg>
+                                保存修改
+                            </span>
+                            <span x-show="isSubmitting" class="flex items-center">
+                                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                </svg>
+                                处理中...
+                            </span>
+                        </button>
+                    </div>
+                </form>
+            </div>
+            
+            <!-- 键盘快捷键提示 -->
+            <div class="absolute bottom-3 left-6 text-xs text-gray-400 dark:text-gray-500 flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9a1 1 0 00-1-1z" clip-rule="evenodd" />
+                </svg>
+                Esc 关闭 | Alt+Enter 提交
+            </div>
+        </div>
+    </div>
+</div>

templates/components/scripts-bridge.html

@@ -0,0 +1,15 @@
+<!-- API密钥管理器脚本 -->
+<!-- 加载API密钥管理器模块 -->
+<script>
+    // 定义平台数据全局变量，供模块使用
+    var platformsData = '{{ platforms|tojson }}';
+    // 定义平台样式数据全局变量，供模块使用
+    var platformStylesData = '{{ platform_styles|tojson }}';
+</script>
+<script src="/static/js/api-key-manager/core.js"></script>
+<script src="/static/js/api-key-manager/key-operations.js"></script>
+<script src="/static/js/api-key-manager/bulk-actions.js"></script>
+<script src="/static/js/api-key-manager/platform-utils.js"></script>
+<script src="/static/js/api-key-manager/ui-utils.js"></script>
+<script src="/static/js/api-key-manager/modals.js"></script>
+<script src="/static/js/api-key-manager/main-manager.js"></script>

templates/components/states.html

@@ -0,0 +1,70 @@
+<!-- 加载中状态显示 -->
+<div 
+    x-cloak
+    x-show="isLoading" 
+    class="bg-white rounded-lg shadow-md p-8 text-center"
+>
+    <div class="flex flex-col items-center">
+        <svg class="animate-spin h-12 w-12 mb-4 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <h3 class="text-lg font-semibold text-gray-900 mb-2">数据加载中</h3>
+        <p class="text-gray-500 max-w-md mx-auto">
+            请稍候，正在加载您的API密钥数据...
+        </p>
+    </div>
+</div>
+
+<!-- 全局搜索无结果时显示 -->
+<div 
+    x-cloak
+    x-show="!isLoading && searchTerm !== '' && apiKeys.filter(key => platformFilters[key.platform] && 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">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+        <h3 class="text-lg font-semibold text-gray-900 mb-2">无搜索结果</h3>
+        <p class="text-gray-500 mb-6 max-w-md mx-auto">
+            没有找到与 "<span x-text="searchTerm" class="font-medium"></span>" 匹配的API密钥
+        </p>
+        <button 
+            @click="searchTerm = ''" 
+            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200 space-x-2"
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+            </svg>
+            <span>清除搜索</span>
+        </button>
+    </div>
+</div>
+
+
+<!-- 没有任何API密钥时显示（非搜索状态） -->
+<div 
+    x-cloak
+    x-show="!isLoading && totalKeyCount() === 0 && searchTerm === ''"
+    class="bg-white rounded-lg shadow-md p-8 text-center"
+>
+    <div class="flex flex-col items-center">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 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>
+        <h3 class="text-lg font-semibold text-gray-900 mb-2">暂无API密钥</h3>
+        <p class="text-gray-500 mb-6 max-w-md mx-auto">
+            添加您的第一个API密钥以开始管理。您可以添加来自不同平台的多个密钥，方便快捷地使用。
+        </p>
+        <button 
+            @click="showAddModal = true" 
+            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200 space-x-2"
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
+            </svg>
+            <span>添加第一个API密钥</span>
+        </button>
+    </div>
+</div>

templates/components/toolbar.html

@@ -0,0 +1,70 @@
+<!-- 顶部工具栏 -->
+<div class="mb-6 flex flex-col gap-4">
+    <!-- 搜索和添加按钮 -->
+    <div class="flex justify-between items-center flex-wrap gap-4">
+        <div class="relative w-full md:w-auto flex-grow max-w-md">
+            <input 
+                type="text" 
+                placeholder="搜索API密钥..." 
+                x-model="searchTerm"
+                class="pl-10 pr-4 py-2 w-full rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+            >
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+            </div>
+        </div>
+        <button 
+            @click="showAddModal = true" 
+            @keydown.alt.n.stop="showAddModal = true"
+            class="inline-flex items-center px-3 py-1.5 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200"
+            title="添加API密钥 (Alt+N)"
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
+            </svg>
+            <span>添加</span>
+        </button>
+    </div>
+    
+    <!-- 服务商筛选标签 -->
+    <div class="flex flex-wrap gap-2 mt-2" x-cloak>
+        <!-- 全部标签 -->
+        <button 
+            @click="toggleAllPlatformFilters()"
+            class="platform-filter-tag all-tag inline-flex items-center px-3.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-200 border"
+            :class="allPlatformsSelected ? 'selected bg-primary-600 text-white border-primary-600' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-100'"
+        >
+            <span>全部</span>
+            <span 
+                class="tag-counter" 
+                :class="allPlatformsSelected ? 'bg-primary-700 text-white' : 'bg-gray-200 text-gray-700'"
+                x-text="totalKeyCount()"
+            ></span>
+        </button>
+        
+        <!-- 动态生成平台标签 -->
+        <template x-for="platform in getPlatforms()" :key="platform.id">
+            <button 
+                @click="togglePlatformFilter(platform.id)"
+                class="platform-filter-tag inline-flex items-center px-3.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-200 border shadow-sm"
+                :class="{
+                    'bg-white text-gray-700 border-gray-300 hover:bg-gray-100': !platformFilters[platform.id],
+                    'selected': platformFilters[platform.id]
+                }"
+                :style="platformFilters[platform.id] ? getPlatformStyle(platform.id) : {}"
+            >
+                <span x-text="platform.name"></span>
+                <span 
+                    class="tag-counter" 
+                    :class="{
+                        'bg-gray-200 text-gray-700': !platformFilters[platform.id]
+                    }"
+                    :style="platformFilters[platform.id] ? {background: 'rgba(' + getPlatformStyle(platform.id).color.replace('#', '').match(/.{2}/g).map(hex => parseInt(hex, 16)).join(',') + ',0.1)'} : {}"
+                    x-text="getPlatformKeyCount(platform.id)"
+                ></span>
+            </button>
+        </template>
+    </div>
+</div>

templates/index.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+
+{% block head %}
+{# 样式已移动到static/css/style.css #}
+{% endblock %}
+
+{% block content %}
+<div x-data="apiKeyManager()" x-cloak>
+    {% include "components/toolbar.html" %}
+    
+    <!-- 分组的API密钥列表 -->
+    {% include "components/api_key_list.html" %}
+    
+    <!-- 加载状态与空状态 -->
+    {% include "components/states.html" %}
+    
+    <!-- 模态框 -->
+    {% include "components/modals/add_key_modal.html" %}
+    {% include "components/modals/delete_confirm_modal.html" %}
+    {% include "components/modals/edit_key_modal.html" %}
+</div>
+{% endblock %}
+
+{% block scripts %}
+{% include "components/scripts-bridge.html" %}
+{% endblock %}

templates/login.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API密钥管理系统 - 登录</title>
+    <!-- 引入框架和库 -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        /* Tailwind配置 - 自定义颜色和动画 */
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd',
+                            300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9',
+                            600: '#0284c7', 700: '#0369a1', 800: '#075985',
+                            900: '#0c4a6e', 950: '#082f49',
+                        },
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.3s ease-in-out',
+                        'slide-down': 'slideDown 0.3s ease-in-out',
+                        'slide-up': 'slideUp 0.3s ease-in-out',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        },
+                        slideDown: {
+                            '0%': { maxHeight: '0', opacity: '0', transform: 'translateY(-10px)' },
+                            '100%': { maxHeight: '1000px', opacity: '1', transform: 'translateY(0)' }
+                        },
+                        slideUp: {
+                            '0%': { maxHeight: '1000px', opacity: '1', transform: 'translateY(0)' },
+                            '100%': { maxHeight: '0', opacity: '0', transform: 'translateY(-10px)' }
+                        },
+                    },
+                },
+            },
+        }
+    </script>
+    <script defer src="https://unpkg.com/[email protected]/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') }}">
+</head>
+<body class="bg-gray-50 text-gray-900 min-h-screen">
+    <!-- 页面顶部导航栏 -->
+    <header class="bg-white shadow animate-fade-in">
+        <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>
+    </header>
+
+    <!-- 主内容区域 - 登录卡片 -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 mt-4">
+        <div class="flex justify-center items-center min-h-[70vh]">
+            <div class="max-w-md w-full animate-fade-in">
+                <div class="bg-white rounded-lg shadow-lg overflow-hidden border border-gray-100">
+                    <!-- 卡片顶部彩色装饰条 -->
+                    <div class="h-1.5 bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600"></div>
+                    
+                    <div class="px-8 py-8">
+                        <!-- 卡片头部 - 图标和欢迎信息 -->
+                        <div class="text-center mb-8">
+                            <div class="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary-100 mb-4">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                                </svg>
+                            </div>
+                            <h2 class="text-xl font-semibold text-gray-900 mb-2">欢迎使用</h2>
+                            <p class="text-gray-600 text-sm">请输入密码继续访问系统</p>
+                        </div>
+                        
+                        <!-- 登录表单 -->
+                        <form method="POST" action="{{ url_for('web.login') }}" class="space-y-6">
+                            <div>
+                                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
+                                <div class="relative">
+                                    <!-- 密码输入框前的锁图标 -->
+                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+                                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
+                                        </svg>
+                                    </div>
+                                    <input 
+                                        type="password" 
+                                        id="password" 
+                                        name="password" 
+                                        required 
+                                        class="block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
+                                        placeholder="请输入访问密码"
+                                        autofocus
+                                    >
+                                </div>
+                            </div>
+
+                            <!-- 错误信息显示区域 -->
+                            {% if error %}
+                            <div class="bg-red-50 border-l-4 border-red-400 p-4 rounded animate-fade-in">
+                                <div class="flex">
+                                    <div class="flex-shrink-0">
+                                        <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+                                        </svg>
+                                    </div>
+                                    <div class="ml-3">
+                                        <p class="text-sm text-red-700">{{ error }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+
+                            <!-- 登录按钮 -->
+                            <button 
+                                type="submit" 
+                                class="w-full flex justify-center items-center py-2.5 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+                                </svg>
+                                登录
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        /* 页面加载完成后自动聚焦到密码输入框 */
+        document.addEventListener('DOMContentLoaded', () => {
+            document.getElementById('password').focus();
+        });
+    </script>
+</body>
+</html>

utils/auth.py

@@ -0,0 +1,80 @@
+"""
+身份验证模块 - 处理用户认证、令牌管理等功能
+"""
+import json
+import os
+import secrets
+from datetime import datetime, timedelta
+from config import AUTH_FILE, TOKEN_EXPIRY_DAYS
+
+class AuthManager:
+    """认证管理器 - 负责处理认证令牌的生成、存储和验证"""
+    
+    @staticmethod
+    def load_tokens():
+        """加载认证令牌数据"""
+        if not os.path.exists(AUTH_FILE):
+            with open(AUTH_FILE, 'w', encoding='utf-8') as f:
+                json.dump({"tokens": {}}, f, ensure_ascii=False, indent=2)
+            return {"tokens": {}}
+        
+        try:
+            with open(AUTH_FILE, 'r', encoding='utf-8') as f:
+                return json.load(f)
+        except json.JSONDecodeError:
+            return {"tokens": {}}
+
+    @staticmethod
+    def save_tokens(data):
+        """保存认证令牌数据"""
+        with open(AUTH_FILE, 'w', encoding='utf-8') as f:
+            json.dump(data, f, ensure_ascii=False, indent=2)
+
+    @staticmethod
+    def generate_token():
+        """生成安全随机令牌"""
+        return secrets.token_hex(32)
+
+    @staticmethod
+    def store_token(token):
+        """存储令牌并设置过期时间"""
+        auth_data = AuthManager.load_tokens()
+        expiry = (datetime.now() + timedelta(days=TOKEN_EXPIRY_DAYS)).isoformat()
+        auth_data["tokens"][token] = {"expiry": expiry}
+        AuthManager.save_tokens(auth_data)
+        return token
+
+    @staticmethod
+    def verify_token(token):
+        """验证令牌是否有效"""
+        if not token:
+            return False
+        
+        auth_data = AuthManager.load_tokens()
+        token_data = auth_data["tokens"].get(token)
+        
+        if not token_data:
+            return False
+        
+        # 检查令牌是否过期
+        expiry = datetime.fromisoformat(token_data["expiry"])
+        if datetime.now() > expiry:
+            # 删除过期令牌
+            del auth_data["tokens"][token]
+            AuthManager.save_tokens(auth_data)
+            return False
+        
+        return True
+
+    @staticmethod
+    def remove_token(token):
+        """从存储中删除令牌"""
+        if not token:
+            return False
+            
+        auth_data = AuthManager.load_tokens()
+        if token in auth_data["tokens"]:
+            del auth_data["tokens"][token]
+            AuthManager.save_tokens(auth_data)
+            return True
+        return False