diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..ce9b4a6
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+  },
+};
diff --git a/.gitignore b/.gitignore
index 00f5013..a547bf3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,28 +1,24 @@
-# Node modules
-node_modules/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# Build output
-dist/
+node_modules
+dist
+dist-ssr
+*.local
 
-# Temporary build files
-index.build.html
-
-# npm lock files
-package-lock.json
-
-# IDE and editor files
-.vscode/
-.idea/
-*.swp
-*.swo
-*~
-
-# OS files
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
-Thumbs.db
-
-CLAUDE.md
-.claude
-AGENTS.md
-.codex
-.serena
\ No newline at end of file
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..59eb508
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "always"
+}
diff --git a/BUILD_RELEASE.md b/BUILD_RELEASE.md
deleted file mode 100644
index 6250e05..0000000
--- a/BUILD_RELEASE.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# Build and Release Instructions
-
-## Overview
-
-This project uses webpack to bundle all HTML, CSS, JavaScript, and images into a single all-in-one HTML file. The GitHub workflow automatically builds and releases this file when you create a new tag.
-
-## How to Create a Release
-
-1. Make sure all your changes are committed
-2. Create and push a new tag:
-   ```bash
-   git tag v1.0.0
-   git push origin v1.0.0
-   ```
-3. The GitHub workflow will automatically:
-   - Install dependencies
-   - Build the all-in-one HTML file using webpack
-   - Create a new release with the tag
-   - Upload the bundled HTML file to the release
-
-## Manual Build
-
-To build locally:
-
-```bash
-# Install dependencies
-npm install
-
-# Build the all-in-one HTML file
-npm run build
-```
-
-The output will be in the `dist/` directory as `index.html`.
-
-## How It Works
-
-1. **build-scripts/prepare-html.js**: Pre-build script
-   - Reads the original `index.html`
-   - Removes local CSS and JavaScript references
-   - Generates temporary `index.build.html` for webpack
-
-2. **webpack.config.js**: Configures webpack to bundle all assets
-   - Uses `style-loader` to inline CSS
-   - Uses `asset/inline` to embed images as base64
-   - Uses `html-inline-script-webpack-plugin` to inline JavaScript
-   - Uses `index.build.html` as template (generated dynamically)
-
-3. **bundle-entry.js**: Entry point that imports all resources
-   - Imports CSS files
-   - Imports JavaScript modules
-   - Imports and sets logo image
-
-4. **package.json scripts**:
-   - `prebuild`: Automatically runs before build to generate `index.build.html`
-   - `build`: Runs webpack to bundle everything
-   - `postbuild`: Cleans up temporary `index.build.html` file
-
-5. **.github/workflows/release.yml**: GitHub workflow
-   - Triggers on tag push
-   - Builds the project (prebuild → build → postbuild)
-   - Creates a release with the bundled HTML file
-
-## External Dependencies
-
-The bundled HTML file still relies on these CDN resources:
-- Font Awesome (icons)
-- Chart.js (charts and graphs)
-
-These are loaded from CDN to keep the file size reasonable and leverage browser caching.
diff --git a/CLEAR_STORAGE.html b/CLEAR_STORAGE.html
new file mode 100644
index 0000000..1c0a9b8
--- /dev/null
+++ b/CLEAR_STORAGE.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Clear LocalStorage</title>
+    <meta charset="UTF-8">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 600px;
+            margin: 50px auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            margin-top: 0;
+        }
+        button {
+            background: #dc2626;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            margin: 10px 10px 10px 0;
+        }
+        button:hover {
+            background: #b91c1c;
+        }
+        button.info {
+            background: #3b82f6;
+        }
+        button.info:hover {
+            background: #2563eb;
+        }
+        .message {
+            margin-top: 20px;
+            padding: 15px;
+            border-radius: 6px;
+            display: none;
+        }
+        .message.success {
+            background: #d1fae5;
+            color: #065f46;
+            display: block;
+        }
+        .message.info {
+            background: #dbeafe;
+            color: #1e40af;
+            display: block;
+        }
+        pre {
+            background: #f3f4f6;
+            padding: 15px;
+            border-radius: 6px;
+            overflow-x: auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🧹 LocalStorage 清理工具</h1>
+        <p>用于清理旧版本的 CLI Proxy Web UI 遗留的 localStorage 数据</p>
+
+        <button onclick="showStorage()">📋 查看当前存储</button>
+        <button onclick="clearStorage()">🗑️ 清空 LocalStorage</button>
+
+        <div id="message" class="message"></div>
+
+        <div id="storageInfo" style="margin-top: 20px;"></div>
+    </div>
+
+    <script>
+        function showStorage() {
+            const info = document.getElementById('storageInfo');
+            const message = document.getElementById('message');
+
+            const items = {};
+            for (let i = 0; i < localStorage.length; i++) {
+                const key = localStorage.key(i);
+                const value = localStorage.getItem(key);
+                items[key] = value.length > 100 ? value.substring(0, 100) + '...' : value;
+            }
+
+            if (Object.keys(items).length === 0) {
+                info.innerHTML = '<p style="color: #666;">LocalStorage 为空</p>';
+            } else {
+                info.innerHTML = '<h3>当前存储项:</h3><pre>' + JSON.stringify(items, null, 2) + '</pre>';
+            }
+
+            message.className = 'message info';
+            message.textContent = `共有 ${localStorage.length} 个存储项`;
+        }
+
+        function clearStorage() {
+            if (confirm('确定要清空所有 LocalStorage 数据吗?这将删除所有保存的登录信息。')) {
+                const count = localStorage.length;
+                localStorage.clear();
+
+                const message = document.getElementById('message');
+                message.className = 'message success';
+                message.textContent = `✅ 已成功清空 ${count} 个存储项`;
+
+                document.getElementById('storageInfo').innerHTML = '';
+
+                setTimeout(() => {
+                    message.style.display = 'none';
+                }, 3000);
+            }
+        }
+
+        // 页面加载时自动显示
+        window.onload = showStorage;
+    </script>
+</body>
+</html>
diff --git a/LICENSE b/LICENSE
deleted file mode 100644
index 0f988e2..0000000
--- a/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Supra4E8C
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/README.md b/README.md
index eef4a61..8ef8e6f 100644
--- a/README.md
+++ b/README.md
@@ -1,107 +1,180 @@
-# Cli-Proxy-API-Management-Center
-This is the modern WebUI for managing the CLI Proxy API.
+# CLI Proxy Web UI - React Version
 
-[中文文档](README_CN.md)
+CLI Proxy API Management Center 的 React + TypeScript 重构版本。
 
-Main Project: https://github.com/router-for-me/CLIProxyAPI  
-Example URL: https://remote.router-for.me/  
-Minimum required version: ≥ 6.3.0 (recommended ≥ 6.5.0)
+## ✨ 特性
 
-Since 6.0.19 the WebUI ships with the main program; access it via `/management.html` on the API port once the service is running.
+- 🎯 完全使用 TypeScript 编写,类型安全
+- ⚛️ 基于 React 18 + Vite 构建,开发体验极佳
+- 🎨 SCSS 模块化样式,支持亮色/暗色主题
+- 🌍 完整的国际化支持 (中文/英文)
+- 📦 单文件部署,无需构建服务器
+- 🔒 安全的本地存储,支持数据加密
+- 📱 响应式设计,支持移动端
 
-## Features
+## 🚀 快速开始
 
-### Capabilities
-- **Login & UX**: Auto-detects the current address (manual override/reset supported), encrypted auto-login, language/theme toggles, responsive layout with mobile sidebar.
-- **Basic Settings**: Debug, proxy URL, request retries, quota fallback (auto-switch project/preview models), usage-statistics toggle, request logging & logging-to-file switches, WebSocket `/ws/*` auth switch.
-- **Keys & Providers**: Manage proxy auth keys, Gemini/Codex/Claude configs, OpenAI-compatible providers (custom base URLs/headers/proxy/model aliases), Vertex AI credential import from service-account JSON with optional location.
-- **Auth Files & OAuth**: Upload/download/search/paginate JSON credentials; type filters (Qwen/Gemini/GeminiCLI/AIStudio/Claude/Codex/Antigravity/iFlow/Vertex/Empty); delete-all; OAuth/Device flows for Codex, Anthropic (Claude), Antigravity (Google), Gemini CLI (optional project), Qwen; iFlow OAuth and cookie login.
-- **Logs**: Live viewer with auto-refresh/incremental updates, download and clear; section appears when logging-to-file is enabled.
-- **Usage Analytics**: Overview cards, hourly/daily toggles, up to three model lines per chart, per-API stats table (Chart.js).
-- **Config Management**: In-browser CodeMirror YAML editor for `/config.yaml` with reload/save, syntax highlighting, and status feedback.
-- **System Info & Versioning**: Connection/config cache status, last refresh time, server version/build date, and UI version in the footer.
-- **Security & Preferences**: Masked secrets, secure local storage, persistent theme/language/sidebar state, real-time status feedback.
+### 开发模式
 
-## How to Use
-
-1) **After CLI Proxy API is running (recommended)**  
-   Visit `http://your-server:8317/management.html`.
-
-2) **Direct static use after build**  
-   The single file `dist/index.html` generated by `npm run build`
-
-3) **Local server**
 ```bash
+# 安装依赖
 npm install
-npm start        # http://localhost:3000
-npm run dev      # optional dev port: 3090
-# or
-python -m http.server 8000
-```
-   Then open the corresponding localhost URL.
 
-4) **Configure connection**  
-   The login page shows the detected address; you can override it, enter the management key, and click Connect. Saved credentials use encrypted local storage for auto-login.
+# 启动开发服务器
+npm run dev
 
-Tip: The Logs navigation item appears after enabling "Logging to file" in Basic Settings.
-
-## Tech Stack
-
-- **Frontend**: Plain HTML, CSS, JavaScript (ES6+)
-- **Styling**: CSS3 + Flexbox/Grid with CSS Variables
-- **Icons**: Font Awesome 6.4.0
-- **Charts**: Chart.js for interactive data visualization
-- **Editor/Parsing**: CodeMirror + js-yaml
-- **Fonts**: Segoe UI system font
-- **Internationalization**: Custom i18n (EN/CN) and theme system (light/dark)
-- **API**: RESTful management endpoints with automatic authentication
-- **Storage**: LocalStorage with lightweight encryption for preferences/credentials
-
-## Build & Development
-
-- `npm run build` bundles everything into `dist/index.html` via webpack (`build.cjs`, `bundle-entry.js`, `build-scripts/prepare-html.js`).
-- External CDNs remain for Font Awesome, Chart.js, and CodeMirror to keep the bundle lean.
-- Development servers: `npm start` (3000) or `npm run dev` (3090); Python `http.server` also works for static hosting.
-
-## Troubleshooting
-
-### Connection Issues
-1. Confirm that the CLI Proxy API service is running.
-2. Check if the API address is correct.
-3. Verify that the management key is valid.
-4. Ensure your firewall settings allow the connection.
-
-### Data Not Updating
-1. Click the "Refresh All" button.
-2. Check your network connection.
-3. Check the browser's console for any error messages.
-
-### Logs & Config Editor
-- Logs: Requires server-side logging-to-file; 404 indicates the server build is too old or logging is disabled.
-- Config editor: Requires `/config.yaml` endpoint; keep YAML valid before saving.
-
-### Usage Stats
-- Enable "Usage statistics" if charts stay empty; data resets on server restart.
-
-## Project Structure
-```
-├── index.html
-├── styles.css
-├── app.js
-├── i18n.js
-├── src/                # Core/modules/utils source code
-├── build.cjs           # Webpack build script
-├── bundle-entry.js     # Bundling entry
-├── build-scripts/      # Build utilities
-│   └── prepare-html.js
-├── dist/               # Bundled single-file output
-├── BUILD_RELEASE.md
-├── LICENSE
-├── README.md
-└── README_CN.md
+# 访问 http://localhost:5173
 ```
 
-## Contributing
-We welcome Issues and Pull Requests to improve this project! We encourage more developers to contribute to the enhancement of this WebUI!
+### 生产构建
 
-This project is licensed under the MIT License.
+```bash
+# 构建生产版本
+npm run build
+
+# 产物在 dist/index.html
+# 直接双击打开或部署到服务器
+```
+
+### 代码检查
+
+```bash
+# TypeScript 类型检查
+npm run type-check
+
+# ESLint 代码检查
+npm run lint
+```
+
+## 📁 项目结构
+
+```
+src/
+├── components/        # 公共组件
+│   ├── common/       # 基础组件 (Button, Input, Card, Modal...)
+│   └── layout/       # 布局组件 (MainLayout, Sidebar, Header...)
+├── pages/            # 页面组件
+│   ├── LoginPage.tsx
+│   ├── SettingsPage.tsx
+│   ├── ApiKeysPage.tsx
+│   ├── AiProvidersPage.tsx
+│   ├── AuthFilesPage.tsx
+│   ├── OAuthPage.tsx
+│   ├── UsagePage.tsx
+│   ├── ConfigPage.tsx
+│   ├── LogsPage.tsx
+│   └── SystemPage.tsx
+├── services/         # API 服务
+│   ├── api/         # API 客户端
+│   └── storage/     # 本地存储服务
+├── stores/          # Zustand 状态管理
+│   ├── useAuthStore.ts
+│   ├── useConfigStore.ts
+│   ├── useThemeStore.ts
+│   └── useLanguageStore.ts
+├── hooks/           # 自定义 Hooks
+├── types/           # TypeScript 类型定义
+├── utils/           # 工具函数
+├── i18n/            # 国际化配置
+├── styles/          # 全局样式
+└── router/          # 路由配置
+```
+
+## 🔧 技术栈
+
+- **框架**: React 18
+- **语言**: TypeScript 5
+- **构建工具**: Vite 7
+- **路由**: React Router 7 (Hash 模式)
+- **状态管理**: Zustand 5
+- **样式**: SCSS Modules
+- **国际化**: i18next
+- **HTTP 客户端**: Axios
+- **代码检查**: ESLint + TypeScript ESLint
+
+## 📝 使用说明
+
+### 首次使用
+
+1. **清理旧数据** (如果从旧版本升级)
+   - 打开 `CLEAR_STORAGE.html` 文件
+   - 点击"清空 LocalStorage"按钮
+   - 这将清理旧版本的存储数据
+
+2. **打开应用**
+   - 双击 `dist/index.html` 文件
+   - 或使用 HTTP 服务器访问 (推荐)
+
+3. **配置连接**
+   - 输入 CLI Proxy API 服务器地址
+   - 输入管理密钥
+   - 点击"连接"按钮
+
+### 部署方式
+
+#### 方式 1: 本地文件 (file:// 协议)
+直接双击 `dist/index.html` 即可使用。应用已配置为使用 Hash 路由,支持 file:// 协议。
+
+#### 方式 2: HTTP 服务器 (推荐)
+```bash
+# 使用 Python
+cd dist
+python -m http.server 8080
+
+# 使用 Node.js (需要安装 serve)
+npx serve dist
+
+# 访问 http://localhost:8080
+```
+
+#### 方式 3: Nginx/Apache
+将 `dist/index.html` 部署到 Web 服务器即可。
+
+## 🐛 故障排除
+
+### 白屏问题
+
+如果打开后显示白屏:
+
+1. 检查浏览器控制台是否有错误
+2. 确认是否清理了旧版本的 localStorage 数据
+3. 尝试使用 HTTP 服务器访问而不是 file:// 协议
+
+### LocalStorage 错误
+
+如果看到 "Failed to parse stored data" 错误:
+
+1. 打开 `CLEAR_STORAGE.html`
+2. 清空所有存储数据
+3. 刷新页面重新登录
+
+### 路由问题
+
+应用使用 Hash 路由 (#/login, #/settings),确保 URL 中包含 `#` 符号。
+
+## 📊 构建信息
+
+- **TypeScript**: 0 errors ✅
+- **ESLint**: 0 errors, 137 warnings ⚠️
+- **Bundle Size**: 473 KB (144 KB gzipped)
+- **Build Time**: ~5 seconds
+
+## 🔄 从旧版本迁移
+
+旧版本 (原生 JS) 的数据存储格式已变更。首次使用新版本时:
+
+1. 旧的 localStorage 数据会自动迁移
+2. 如果迁移失败,请手动清理 localStorage
+3. 重新输入连接信息即可
+
+## 📄 License
+
+Same as CLI Proxy API
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request!
+
+---
+
+**注意**: 此版本是原 CLI Proxy Web UI 的 React 重构版本,与原版功能保持一致。
diff --git a/README_CN.md b/README_CN.md
deleted file mode 100644
index 3b56bfd..0000000
--- a/README_CN.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# Cli-Proxy-API-Management-Center
-这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
-
-[English](README.md)
-
-主项目: https://github.com/router-for-me/CLIProxyAPI  
-示例网站: https://remote.router-for.me/  
-最低版本 ≥ 6.3.0（推荐 ≥ 6.5.0）
-
-自 6.0.19 起 WebUI 已集成到主程序中，启动后可通过 `/management.html` 访问。
-
-## 功能特点
-
-### 主要能力
-- **登录与体验**: 自动检测当前地址（可自定义/重置），加密自动登录，语言/主题切换，响应式布局与移动端侧边栏。
-- **基础设置**: 调试、代理 URL、请求重试，配额溢出自动切换项目/预览模型，使用统计开关，请求日志与文件日志开关，WebSocket `/ws/*` 鉴权开关。
-- **密钥与提供商**: 管理代理服务密钥，Gemini/Codex/Claude 配置，OpenAI 兼容提供商（自定义 Base URL/Headers/Proxy/模型别名），Vertex AI 服务账号导入（可选区域）。
-- **认证文件与 OAuth**: 上传/下载/搜索/分页 JSON 凭据，类型筛选（Qwen/Gemini/GeminiCLI/AIStudio/Claude/Codex/Antigravity/iFlow/Vertex/Empty），一键删除全部；Codex、Anthropic(Claude)、Antigravity(Google)、Gemini CLI（可选项目）、Qwen 设备码、iFlow OAuth 与 Cookie 登录。
-- **日志**: 实时查看并增量刷新，支持下载和清空；启用“写入日志文件”后出现日志栏目。
-- **使用统计**: 概览卡片、小时/天切换、最多三条模型曲线、按 API 统计表（Chart.js）。
-- **配置管理**: 内置 CodeMirror YAML 编辑器，在线读取/保存 `/config.yaml`，语法高亮与状态提示。
-- **系统与版本**: 连接/配置缓存状态、最后刷新时间，底栏显示服务版本、构建时间与 UI 版本。
-- **安全与偏好**: 密钥遮蔽、加密本地存储，主题/语言/侧边栏状态持久化，实时状态反馈。
-
-## 使用方法
-
-1) **主程序启动后使用（推荐）**  
-   访问 `http://您的服务器:8317/management.html`。
-
-2) **构建后直接静态打开**  
-   `npm run build` 生成的 `dist/index.html` 单文件
-
-3) **本地服务器**
-```bash
-npm install
-npm start        # 默认 http://localhost:3000
-npm run dev      # 可选开发端口 3090
-# 或
-python -m http.server 8000
-```
-   然后在浏览器打开对应的 localhost 地址。
-
-4) **配置连接**  
-   登录页会显示自动检测的地址，可自行修改，填入管理密钥后点击连接。凭据将加密保存以便下次自动登录。
-
-提示: 开启“写入日志文件”后才会显示“日志查看”导航。
-
-## 技术栈
-
-- **前端**: 纯 HTML、CSS、JavaScript (ES6+)
-- **样式**: CSS3 + Flexbox/Grid，支持 CSS 变量
-- **图标**: Font Awesome 6.4.0
-- **图表**: Chart.js 交互式数据可视化
-- **编辑/解析**: CodeMirror + js-yaml
-- **国际化**: 自定义 i18n（中/英）与主题系统（明/暗）
-- **API**: RESTful 管理接口，自动附加认证
-- **存储**: LocalStorage 轻量加密存储偏好与凭据
-
-## 构建与开发
-
-- `npm run build` 通过 webpack（`build.cjs`、`bundle-entry.js`、`build-scripts/prepare-html.js`）打包为 `dist/index.html`。
-- Font Awesome、Chart.js、CodeMirror 仍走 CDN，减小打包体积。
-- 开发可用 `npm start` (3000) / `npm run dev` (3090) 或 `python -m http.server` 静态托管。
-
-## 故障排除
-
-### 连接问题
-1. 确认 CLI Proxy API 服务正在运行
-2. 检查 API 地址是否正确
-3. 验证管理密钥是否有效
-4. 确认防火墙设置允许连接
-
-### 数据不更新
-1. 点击"刷新全部"按钮
-2. 检查网络连接
-3. 查看浏览器控制台错误信息
-
-### 日志与配置编辑
-- 日志: 需要服务端开启写文件日志；返回 404 说明版本过旧或未启用。
-- 配置编辑: 依赖 `/config.yaml` 接口，保存前请确保 YAML 语法正确。
-
-### 使用统计
-- 若图表为空，请开启“使用统计”；数据在服务重启后会清空。
-
-## 项目结构
-```
-├── index.html
-├── styles.css
-├── app.js
-├── i18n.js
-├── src/                # 核心/模块/工具源码
-├── build.cjs           # Webpack 构建脚本
-├── bundle-entry.js     # 打包入口
-├── build-scripts/      # 构建工具
-│   └── prepare-html.js
-├── dist/               # 打包输出单文件
-├── BUILD_RELEASE.md
-├── LICENSE
-├── README.md
-└── README_CN.md
-```
-
-## 贡献
-欢迎提交 Issue 和 Pull Request 来改进这个项目！我们欢迎更多的大佬来对这个 WebUI 进行更新！
-
-本项目采用 MIT 许可。
diff --git a/REFACTOR_PROGRESS.md b/REFACTOR_PROGRESS.md
new file mode 100644
index 0000000..f5cbd2e
--- /dev/null
+++ b/REFACTOR_PROGRESS.md
@@ -0,0 +1,21 @@
+# 重构进度追踪
+
+## 阶段完成状态
+- [x] 阶段 0: 准备工作
+- [x] 阶段 1: 项目初始化
+- [x] 阶段 2: 类型定义
+- [x] 阶段 3: 工具与服务
+- [x] 阶段 4: 状态管理
+- [x] 阶段 5: 自定义 Hooks
+- [x] 阶段 6: 国际化配置
+- [x] 阶段 7: 样式系统
+- [x] 阶段 8: 通用组件
+- [x] 阶段 9: 页面组件（API Keys / Providers / Auth Files / OAuth / Usage / Config / Logs / System）
+- [x] 阶段 10: 路由布局与构建验证
+
+## 错误记录
+<!-- 遇到任何错误都记录在这里 -->
+
+## 待办事项
+- [ ] 深入回归交互细节（模型价格、图表、日志增量等）与基线对齐
+- [ ] 优化 Sass 导入与 darken 用法以消除警告
diff --git a/app.js b/app.js
deleted file mode 100644
index 06e7e13..0000000
--- a/app.js
+++ /dev/null
@@ -1,1065 +0,0 @@
-// 模块导入
-import { themeModule } from './src/modules/theme.js';
-import { navigationModule } from './src/modules/navigation.js';
-import { languageModule } from './src/modules/language.js';
-import { loginModule } from './src/modules/login.js';
-import { configEditorModule } from './src/modules/config-editor.js';
-import { logsModule } from './src/modules/logs.js';
-import { apiKeysModule } from './src/modules/api-keys.js';
-import { authFilesModule } from './src/modules/auth-files.js';
-import { oauthModule } from './src/modules/oauth.js';
-import { usageModule } from './src/modules/usage.js';
-import { settingsModule } from './src/modules/settings.js';
-import { aiProvidersModule } from './src/modules/ai-providers.js';
-
-// 工具函数导入
-import { escapeHtml } from './src/utils/html.js';
-import { maskApiKey, formatFileSize } from './src/utils/string.js';
-import { normalizeArrayResponse } from './src/utils/array.js';
-import { debounce } from './src/utils/dom.js';
-import {
-    CACHE_EXPIRY_MS,
-    MAX_LOG_LINES,
-    LOG_FETCH_LIMIT,
-    DEFAULT_AUTH_FILES_PAGE_SIZE,
-    MIN_AUTH_FILES_PAGE_SIZE,
-    MAX_AUTH_FILES_PAGE_SIZE,
-    OAUTH_CARD_IDS,
-    STORAGE_KEY_AUTH_FILES_PAGE_SIZE,
-    NOTIFICATION_DURATION_MS
-} from './src/utils/constants.js';
-
-// 核心服务导入
-import { createErrorHandler } from './src/core/error-handler.js';
-import { connectionModule } from './src/core/connection.js';
-import { ApiClient } from './src/core/api-client.js';
-import { ConfigService } from './src/core/config-service.js';
-import { createEventBus } from './src/core/event-bus.js';
-
-// CLI Proxy API 管理界面 JavaScript
-class CLIProxyManager {
-    constructor() {
-        // 事件总线
-        this.events = createEventBus();
-
-        // API 客户端（规范化基础地址、封装请求）
-        this.apiClient = new ApiClient({
-            onVersionUpdate: (headers) => this.updateVersionFromHeaders(headers)
-        });
-        const detectedBase = this.detectApiBaseFromLocation();
-        this.apiClient.setApiBase(detectedBase);
-        this.apiBase = this.apiClient.apiBase;
-        this.apiUrl = this.apiClient.apiUrl;
-        this.managementKey = '';
-        this.isConnected = false;
-        this.isLoggedIn = false;
-        this.uiVersion = null;
-        this.serverVersion = null;
-        this.serverBuildDate = null;
-        this.latestVersion = null;
-        this.versionCheckStatus = 'muted';
-        this.versionCheckMessage = i18n.t('system_info.version_check_idle');
-
-        // 配置缓存 - 改为分段缓存（交由 ConfigService 管理）
-        this.cacheExpiry = CACHE_EXPIRY_MS;
-        this.configService = new ConfigService({
-            apiClient: this.apiClient,
-            cacheExpiry: this.cacheExpiry
-        });
-        this.configCache = this.configService.cache;
-        this.cacheTimestamps = this.configService.cacheTimestamps;
-        this.availableModels = [];
-        this.availableModelApiKeysCache = null;
-        this.availableModelsLoading = false;
-
-        // 状态更新定时器
-        this.statusUpdateTimer = null;
-        this.lastConnectionStatusEmitted = null;
-        this.isGlobalRefreshInProgress = false;
-
-        this.registerCoreEventHandlers();
-
-        // 日志自动刷新定时器
-        this.logsRefreshTimer = null;
-
-        // 当前展示的日志行
-        this.allLogLines = [];
-        this.displayedLogLines = [];
-        this.logSearchQuery = '';
-        this.maxDisplayLogLines = MAX_LOG_LINES;
-        this.logFetchLimit = LOG_FETCH_LIMIT;
-
-        // 日志时间戳（用于增量加载）
-        this.latestLogTimestamp = null;
-
-        // Auth file filter state cache
-        this.currentAuthFileFilter = 'all';
-        this.cachedAuthFiles = [];
-        this.authFilesPagination = {
-            pageSize: DEFAULT_AUTH_FILES_PAGE_SIZE,
-            currentPage: 1,
-            totalPages: 1
-        };
-        this.authFileStatsCache = {};
-        this.authFileSearchQuery = '';
-        this.authFilesPageSizeKey = STORAGE_KEY_AUTH_FILES_PAGE_SIZE;
-        this.loadAuthFilePreferences();
-
-        // OAuth 模型排除列表状态
-        this.oauthExcludedModels = {};
-        this._oauthExcludedLoading = false;
-
-        // Vertex AI credential import state
-        this.vertexImportState = {
-            file: null,
-            loading: false,
-            result: null
-        };
-
-        // 顶栏标题动画状态
-        this.brandCollapseTimer = null;
-        this.brandCollapseDelayMs = 5000;
-        this.brandIsCollapsed = false;
-        this.brandAnimationReady = false;
-        this.brandElements = {
-            toggle: null,
-            wrapper: null,
-            fullText: null,
-            shortText: null
-        };
-        this.brandResizeHandler = null;
-        this.brandToggleHandler = null;
-
-        // 主题管理
-        this.currentTheme = 'light';
-
-        // 配置文件编辑器状态
-        this.configYamlCache = '';
-        this.isConfigEditorDirty = false;
-        this.configEditorElements = {
-            textarea: null,
-            editorInstance: null,
-            saveBtn: null,
-            reloadBtn: null,
-            statusEl: null
-        };
-        this.lastConfigFetchUrl = null;
-        this.lastEditorConnectionState = null;
-
-        // 初始化错误处理器
-        this.errorHandler = createErrorHandler((message, type) => this.showNotification(message, type));
-
-        this.init();
-    }
-
-    loadAuthFilePreferences() {
-        try {
-            if (typeof localStorage === 'undefined') {
-                return;
-            }
-            const savedPageSize = parseInt(localStorage.getItem(this.authFilesPageSizeKey), 10);
-            if (Number.isFinite(savedPageSize)) {
-                this.authFilesPagination.pageSize = this.normalizeAuthFilesPageSize(savedPageSize);
-            }
-        } catch (error) {
-            console.warn('Failed to restore auth file preferences:', error);
-        }
-    }
-
-    normalizeAuthFilesPageSize(value) {
-        const defaultSize = DEFAULT_AUTH_FILES_PAGE_SIZE;
-        const minSize = MIN_AUTH_FILES_PAGE_SIZE;
-        const maxSize = MAX_AUTH_FILES_PAGE_SIZE;
-        const parsed = parseInt(value, 10);
-        if (!Number.isFinite(parsed) || parsed <= 0) {
-            return defaultSize;
-        }
-        return Math.min(maxSize, Math.max(minSize, parsed));
-    }
-
-    init() {
-        this.initUiVersion();
-        this.initializeTheme();
-        this.registerCoreEventHandlers();
-        this.registerSettingsListeners();
-        this.registerUsageListeners();
-        if (typeof this.registerLogsListeners === 'function') {
-            this.registerLogsListeners();
-        }
-        if (typeof this.registerConfigEditorListeners === 'function') {
-            this.registerConfigEditorListeners();
-        }
-        this.checkLoginStatus();
-        this.bindEvents();
-        this.setupNavigation();
-        this.setupLanguageSwitcher();
-        this.setupThemeSwitcher();
-        this.setupConfigEditor();
-        this.updateConfigEditorAvailability();
-        // loadSettings 将在登录成功后调用
-        this.updateLoginConnectionInfo();
-        // 检查主机名，如果不是 localhost 或 127.0.0.1，则隐藏 OAuth 登录框
-        this.checkHostAndHideOAuth();
-        if (typeof this.registerAuthFilesListeners === 'function') {
-            this.registerAuthFilesListeners();
-        }
-    }
-
-    registerCoreEventHandlers() {
-        if (!this.events || typeof this.events.on !== 'function') {
-            return;
-        }
-        this.events.on('config:refresh-requested', async (event) => {
-            const detail = event?.detail || {};
-            const forceRefresh = detail.forceRefresh !== false;
-            // 避免并发触发导致重复请求
-            if (this.isGlobalRefreshInProgress) {
-                return;
-            }
-            await this.runGlobalRefresh(forceRefresh);
-        });
-    }
-
-    async runGlobalRefresh(forceRefresh = false) {
-        this.isGlobalRefreshInProgress = true;
-        try {
-            await this.loadAllData(forceRefresh);
-        } finally {
-            this.isGlobalRefreshInProgress = false;
-        }
-    }
-
-    // 检查主机名并隐藏 OAuth 登录框
-    checkHostAndHideOAuth() {
-        const hostname = window.location.hostname;
-        const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1';
-
-        if (!isLocalhost) {
-            // 隐藏所有 OAuth 登录卡片
-            OAUTH_CARD_IDS.forEach(cardId => {
-                const card = document.getElementById(cardId);
-                if (card) {
-                    card.style.display = 'none';
-                }
-            });
-
-            // 如果找不到具体的卡片 ID，尝试通过类名查找
-            const oauthCardElements = document.querySelectorAll('.card');
-            oauthCardElements.forEach(card => {
-                const cardText = card.textContent || '';
-                if (cardText.includes('Codex OAuth') ||
-                    cardText.includes('Anthropic OAuth') ||
-                    cardText.includes('Antigravity OAuth') ||
-                    cardText.includes('Gemini CLI OAuth') ||
-                    cardText.includes('Qwen OAuth') ||
-                    cardText.includes('iFlow OAuth')) {
-                    card.style.display = 'none';
-                }
-            });
-
-            console.log(`当前主机名: ${hostname}，已隐藏 OAuth 登录框`);
-        }
-    }
-
-    // 检查登录状态
-    // 处理登录表单提交
-    // 事件绑定
-    bindEvents() {
-        // 登录相关（安全绑定）
-        const loginSubmit = document.getElementById('login-submit');
-        const logoutBtn = document.getElementById('logout-btn');
-
-        if (loginSubmit) {
-            loginSubmit.addEventListener('click', () => this.handleLogin());
-        }
-        if (logoutBtn) {
-            logoutBtn.addEventListener('click', () => this.logout());
-        }
-
-        // 密钥可见性切换事件
-        this.setupKeyVisibilityToggle();
-
-        // 主页面元素（延迟绑定，在显示主页面时绑定）
-        this.bindMainPageEvents();
-    }
-
-    // 设置密钥可见性切换
-    setupKeyVisibilityToggle() {
-        const toggleButtons = document.querySelectorAll('.toggle-key-visibility');
-        toggleButtons.forEach(button => {
-            button.addEventListener('click', () => this.toggleLoginKeyVisibility(button));
-        });
-    }
-
-    // 绑定主页面事件
-    bindMainPageEvents() {
-        // 连接状态检查
-        const connectionStatus = document.getElementById('connection-status');
-        const refreshAll = document.getElementById('refresh-all');
-        const availableModelsRefresh = document.getElementById('available-models-refresh');
-        const versionCheckBtn = document.getElementById('version-check-btn');
-
-        if (connectionStatus) {
-            connectionStatus.addEventListener('click', () => this.checkConnectionStatus());
-        }
-        if (refreshAll) {
-            refreshAll.addEventListener('click', () => this.refreshAllData());
-        }
-        if (availableModelsRefresh) {
-            availableModelsRefresh.addEventListener('click', () => this.loadAvailableModels({ forceRefresh: true }));
-        }
-        if (versionCheckBtn) {
-            versionCheckBtn.addEventListener('click', () => this.checkLatestVersion());
-        }
-
-        // 基础设置
-        const debugToggle = document.getElementById('debug-toggle');
-        const updateProxy = document.getElementById('update-proxy');
-        const clearProxy = document.getElementById('clear-proxy');
-        const updateRetry = document.getElementById('update-retry');
-        const switchProjectToggle = document.getElementById('switch-project-toggle');
-        const switchPreviewToggle = document.getElementById('switch-preview-model-toggle');
-        const usageStatisticsToggle = document.getElementById('usage-statistics-enabled-toggle');
-        const requestLogToggle = document.getElementById('request-log-toggle');
-        const wsAuthToggle = document.getElementById('ws-auth-toggle');
-
-        if (debugToggle) {
-            debugToggle.addEventListener('change', (e) => this.updateDebug(e.target.checked));
-        }
-        if (updateProxy) {
-            updateProxy.addEventListener('click', () => this.updateProxyUrl());
-        }
-        if (clearProxy) {
-            clearProxy.addEventListener('click', () => this.clearProxyUrl());
-        }
-        if (updateRetry) {
-            updateRetry.addEventListener('click', () => this.updateRequestRetry());
-        }
-        if (switchProjectToggle) {
-            switchProjectToggle.addEventListener('change', (e) => this.updateSwitchProject(e.target.checked));
-        }
-        if (switchPreviewToggle) {
-            switchPreviewToggle.addEventListener('change', (e) => this.updateSwitchPreviewModel(e.target.checked));
-        }
-        if (usageStatisticsToggle) {
-            usageStatisticsToggle.addEventListener('change', (e) => this.updateUsageStatisticsEnabled(e.target.checked));
-        }
-        if (requestLogToggle) {
-            requestLogToggle.addEventListener('change', (e) => this.updateRequestLog(e.target.checked));
-        }
-        if (wsAuthToggle) {
-            wsAuthToggle.addEventListener('change', (e) => this.updateWsAuth(e.target.checked));
-        }
-
-        // 日志记录设置
-        const loggingToFileToggle = document.getElementById('logging-to-file-toggle');
-        if (loggingToFileToggle) {
-            loggingToFileToggle.addEventListener('change', (e) => this.updateLoggingToFile(e.target.checked));
-        }
-
-        // 日志查看
-        const refreshLogs = document.getElementById('refresh-logs');
-        const selectErrorLog = document.getElementById('select-error-log');
-        const downloadLogs = document.getElementById('download-logs');
-        const clearLogs = document.getElementById('clear-logs');
-        const logsAutoRefreshToggle = document.getElementById('logs-auto-refresh-toggle');
-        const logsSearchInput = document.getElementById('logs-search-input');
-
-        if (refreshLogs) {
-            refreshLogs.addEventListener('click', () => this.refreshLogs());
-        }
-        if (selectErrorLog) {
-            selectErrorLog.addEventListener('click', () => this.openErrorLogsModal());
-        }
-        if (downloadLogs) {
-            downloadLogs.addEventListener('click', () => this.downloadLogs());
-        }
-        if (clearLogs) {
-            clearLogs.addEventListener('click', () => this.clearLogs());
-        }
-        if (logsAutoRefreshToggle) {
-            logsAutoRefreshToggle.addEventListener('change', (e) => this.toggleLogsAutoRefresh(e.target.checked));
-        }
-        if (logsSearchInput) {
-            const debouncedLogSearch = this.debounce((value) => {
-                this.updateLogSearchQuery(value);
-            }, 200);
-            logsSearchInput.addEventListener('input', (e) => {
-                debouncedLogSearch(e?.target?.value ?? '');
-            });
-        }
-
-        // API 密钥管理
-        const addApiKey = document.getElementById('add-api-key');
-        const addGeminiKey = document.getElementById('add-gemini-key');
-        const addCodexKey = document.getElementById('add-codex-key');
-        const addClaudeKey = document.getElementById('add-claude-key');
-        const addOpenaiProvider = document.getElementById('add-openai-provider');
-
-        if (addApiKey) {
-            addApiKey.addEventListener('click', () => this.showAddApiKeyModal());
-        }
-        if (addGeminiKey) {
-            addGeminiKey.addEventListener('click', () => this.showAddGeminiKeyModal());
-        }
-        if (addCodexKey) {
-            addCodexKey.addEventListener('click', () => this.showAddCodexKeyModal());
-        }
-        if (addClaudeKey) {
-            addClaudeKey.addEventListener('click', () => this.showAddClaudeKeyModal());
-        }
-        if (addOpenaiProvider) {
-            addOpenaiProvider.addEventListener('click', () => this.showAddOpenAIProviderModal());
-        }
-
-
-        // 认证文件管理
-        const uploadAuthFile = document.getElementById('upload-auth-file');
-        const deleteAllAuthFiles = document.getElementById('delete-all-auth-files');
-        const authFileInput = document.getElementById('auth-file-input');
-
-        if (uploadAuthFile) {
-            uploadAuthFile.addEventListener('click', () => this.uploadAuthFile());
-        }
-        if (deleteAllAuthFiles) {
-            deleteAllAuthFiles.addEventListener('click', () => this.deleteAllAuthFiles());
-        }
-        if (authFileInput) {
-            authFileInput.addEventListener('change', (e) => this.handleFileUpload(e));
-        }
-        this.bindAuthFilesPaginationEvents();
-        this.bindAuthFilesSearchControl();
-        this.bindAuthFilesPageSizeControl();
-        this.syncAuthFileControls();
-
-        // OAuth 排除列表
-        const oauthExcludedAdd = document.getElementById('oauth-excluded-add');
-        const oauthExcludedRefresh = document.getElementById('oauth-excluded-refresh');
-
-        if (oauthExcludedAdd) {
-            oauthExcludedAdd.addEventListener('click', () => this.openOauthExcludedEditor());
-        }
-        if (oauthExcludedRefresh) {
-            oauthExcludedRefresh.addEventListener('click', () => this.loadOauthExcludedModels(true));
-        }
-
-        // Vertex AI credential import
-        const vertexSelectFile = document.getElementById('vertex-select-file');
-        const vertexFileInput = document.getElementById('vertex-file-input');
-        const vertexImportBtn = document.getElementById('vertex-import-btn');
-
-        if (vertexSelectFile) {
-            vertexSelectFile.addEventListener('click', () => this.openVertexFilePicker());
-        }
-        if (vertexFileInput) {
-            vertexFileInput.addEventListener('change', (e) => this.handleVertexFileSelection(e));
-        }
-        if (vertexImportBtn) {
-            vertexImportBtn.addEventListener('click', () => this.importVertexCredential());
-        }
-        this.updateVertexFileDisplay();
-        this.updateVertexImportButtonState();
-        this.renderVertexImportResult(this.vertexImportState.result);
-
-        // Codex OAuth
-        const codexOauthBtn = document.getElementById('codex-oauth-btn');
-        const codexOpenLink = document.getElementById('codex-open-link');
-        const codexCopyLink = document.getElementById('codex-copy-link');
-
-        if (codexOauthBtn) {
-            codexOauthBtn.addEventListener('click', () => this.startCodexOAuth());
-        }
-        if (codexOpenLink) {
-            codexOpenLink.addEventListener('click', () => this.openCodexLink());
-        }
-        if (codexCopyLink) {
-            codexCopyLink.addEventListener('click', () => this.copyCodexLink());
-        }
-
-        // Anthropic OAuth
-        const anthropicOauthBtn = document.getElementById('anthropic-oauth-btn');
-        const anthropicOpenLink = document.getElementById('anthropic-open-link');
-        const anthropicCopyLink = document.getElementById('anthropic-copy-link');
-
-        if (anthropicOauthBtn) {
-            anthropicOauthBtn.addEventListener('click', () => this.startAnthropicOAuth());
-        }
-        if (anthropicOpenLink) {
-            anthropicOpenLink.addEventListener('click', () => this.openAnthropicLink());
-        }
-        if (anthropicCopyLink) {
-            anthropicCopyLink.addEventListener('click', () => this.copyAnthropicLink());
-        }
-
-        // Antigravity OAuth
-        const antigravityOauthBtn = document.getElementById('antigravity-oauth-btn');
-        const antigravityOpenLink = document.getElementById('antigravity-open-link');
-        const antigravityCopyLink = document.getElementById('antigravity-copy-link');
-
-        if (antigravityOauthBtn) {
-            antigravityOauthBtn.addEventListener('click', () => this.startAntigravityOAuth());
-        }
-        if (antigravityOpenLink) {
-            antigravityOpenLink.addEventListener('click', () => this.openAntigravityLink());
-        }
-        if (antigravityCopyLink) {
-            antigravityCopyLink.addEventListener('click', () => this.copyAntigravityLink());
-        }
-
-        // Gemini CLI OAuth
-        const geminiCliOauthBtn = document.getElementById('gemini-cli-oauth-btn');
-        const geminiCliOpenLink = document.getElementById('gemini-cli-open-link');
-        const geminiCliCopyLink = document.getElementById('gemini-cli-copy-link');
-
-        if (geminiCliOauthBtn) {
-            geminiCliOauthBtn.addEventListener('click', () => this.startGeminiCliOAuth());
-        }
-        if (geminiCliOpenLink) {
-            geminiCliOpenLink.addEventListener('click', () => this.openGeminiCliLink());
-        }
-        if (geminiCliCopyLink) {
-            geminiCliCopyLink.addEventListener('click', () => this.copyGeminiCliLink());
-        }
-
-        // Qwen OAuth
-        const qwenOauthBtn = document.getElementById('qwen-oauth-btn');
-        const qwenOpenLink = document.getElementById('qwen-open-link');
-        const qwenCopyLink = document.getElementById('qwen-copy-link');
-
-        if (qwenOauthBtn) {
-            qwenOauthBtn.addEventListener('click', () => this.startQwenOAuth());
-        }
-        if (qwenOpenLink) {
-            qwenOpenLink.addEventListener('click', () => this.openQwenLink());
-        }
-        if (qwenCopyLink) {
-            qwenCopyLink.addEventListener('click', () => this.copyQwenLink());
-        }
-
-        // iFlow OAuth
-        const iflowOauthBtn = document.getElementById('iflow-oauth-btn');
-        const iflowOpenLink = document.getElementById('iflow-open-link');
-        const iflowCopyLink = document.getElementById('iflow-copy-link');
-        const iflowCookieSubmit = document.getElementById('iflow-cookie-submit');
-
-        if (iflowOauthBtn) {
-            iflowOauthBtn.addEventListener('click', () => this.startIflowOAuth());
-        }
-        if (iflowOpenLink) {
-            iflowOpenLink.addEventListener('click', () => this.openIflowLink());
-        }
-        if (iflowCopyLink) {
-            iflowCopyLink.addEventListener('click', () => this.copyIflowLink());
-        }
-        if (iflowCookieSubmit) {
-            iflowCookieSubmit.addEventListener('click', () => this.submitIflowCookieLogin());
-        }
-
-        // 使用统计
-        const refreshUsageStats = document.getElementById('refresh-usage-stats');
-        const requestsHourBtn = document.getElementById('requests-hour-btn');
-        const requestsDayBtn = document.getElementById('requests-day-btn');
-        const tokensHourBtn = document.getElementById('tokens-hour-btn');
-        const tokensDayBtn = document.getElementById('tokens-day-btn');
-        const costHourBtn = document.getElementById('cost-hour-btn');
-        const costDayBtn = document.getElementById('cost-day-btn');
-        const addChartLineBtn = document.getElementById('add-chart-line');
-        const chartLineSelects = document.querySelectorAll('.chart-line-select');
-        const chartLineDeleteButtons = document.querySelectorAll('.chart-line-delete');
-        const modelPriceForm = document.getElementById('model-price-form');
-        const resetModelPricesBtn = document.getElementById('reset-model-prices');
-        const modelPriceSelect = document.getElementById('model-price-model-select');
-
-        if (refreshUsageStats) {
-            refreshUsageStats.addEventListener('click', () => this.loadUsageStats());
-        }
-        if (requestsHourBtn) {
-            requestsHourBtn.addEventListener('click', () => this.switchRequestsPeriod('hour'));
-        }
-        if (requestsDayBtn) {
-            requestsDayBtn.addEventListener('click', () => this.switchRequestsPeriod('day'));
-        }
-        if (tokensHourBtn) {
-            tokensHourBtn.addEventListener('click', () => this.switchTokensPeriod('hour'));
-        }
-        if (tokensDayBtn) {
-            tokensDayBtn.addEventListener('click', () => this.switchTokensPeriod('day'));
-        }
-        if (costHourBtn) {
-            costHourBtn.addEventListener('click', () => this.switchCostPeriod('hour'));
-        }
-        if (costDayBtn) {
-            costDayBtn.addEventListener('click', () => this.switchCostPeriod('day'));
-        }
-        if (addChartLineBtn) {
-            addChartLineBtn.addEventListener('click', () => this.changeChartLineCount(1));
-        }
-        if (chartLineSelects.length) {
-            chartLineSelects.forEach(select => {
-                select.addEventListener('change', (event) => {
-                    const index = Number.parseInt(select.getAttribute('data-line-index'), 10);
-                    this.handleChartLineSelectionChange(Number.isNaN(index) ? -1 : index, event.target.value);
-                });
-            });
-        }
-        if (chartLineDeleteButtons.length) {
-            chartLineDeleteButtons.forEach(button => {
-                button.addEventListener('click', () => {
-                    const index = Number.parseInt(button.getAttribute('data-line-index'), 10);
-                    this.removeChartLine(Number.isNaN(index) ? -1 : index);
-                });
-            });
-        }
-        this.updateChartLineControlsUI();
-        if (modelPriceForm) {
-            modelPriceForm.addEventListener('submit', (event) => {
-                event.preventDefault();
-                this.handleModelPriceSubmit();
-            });
-        }
-        if (resetModelPricesBtn) {
-            resetModelPricesBtn.addEventListener('click', () => this.handleModelPriceReset());
-        }
-        if (modelPriceSelect) {
-            modelPriceSelect.addEventListener('change', () => this.prefillModelPriceInputs());
-        }
-
-        // 模态框
-        const closeBtn = document.querySelector('.close');
-        if (closeBtn) {
-            closeBtn.addEventListener('click', () => this.closeModal());
-        }
-
-        // 移动端菜单按钮
-        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
-        const sidebarOverlay = document.getElementById('sidebar-overlay');
-        const sidebar = document.getElementById('sidebar');
-
-        if (mobileMenuBtn) {
-            mobileMenuBtn.addEventListener('click', () => this.toggleMobileSidebar());
-        }
-
-        if (sidebarOverlay) {
-            sidebarOverlay.addEventListener('click', () => this.closeMobileSidebar());
-        }
-
-        // 侧边栏收起/展开按钮（桌面端）
-        const sidebarToggleBtnDesktop = document.getElementById('sidebar-toggle-btn-desktop');
-        if (sidebarToggleBtnDesktop) {
-            sidebarToggleBtnDesktop.addEventListener('click', () => this.toggleSidebar());
-        }
-
-        // 从本地存储恢复侧边栏状态
-        this.restoreSidebarState();
-
-        // 监听窗口大小变化
-        window.addEventListener('resize', () => {
-            const sidebar = document.getElementById('sidebar');
-            const layout = document.getElementById('layout-container');
-
-            if (window.innerWidth <= 1024) {
-                // 移动端：移除收起状态
-                if (sidebar && layout) {
-                    sidebar.classList.remove('collapsed');
-                    layout.classList.remove('sidebar-collapsed');
-                }
-            } else {
-                // 桌面端：恢复保存的状态
-                this.restoreSidebarState();
-            }
-        });
-
-        // 点击侧边栏导航项时在移动端关闭侧边栏
-        const navItems = document.querySelectorAll('.nav-item');
-        navItems.forEach(item => {
-            item.addEventListener('click', () => {
-                if (window.innerWidth <= 1024) {
-                    this.closeMobileSidebar();
-                }
-            });
-        });
-    }
-
-    // 顶栏标题动画与状态
-    isMobileViewport() {
-        return typeof window !== 'undefined' ? window.innerWidth <= 768 : false;
-    }
-
-    setupBrandTitleAnimation() {
-        const mainPage = document.getElementById('main-page');
-        if (mainPage && mainPage.style.display === 'none') {
-            return;
-        }
-
-        const toggle = document.getElementById('brand-name-toggle');
-        const wrapper = document.getElementById('brand-texts');
-        const fullText = document.querySelector('.brand-text-full');
-        const shortText = document.querySelector('.brand-text-short');
-
-        if (!toggle || !wrapper || !fullText || !shortText) {
-            return;
-        }
-
-        this.brandElements = { toggle, wrapper, fullText, shortText };
-
-        if (!this.brandToggleHandler) {
-            this.brandToggleHandler = () => this.handleBrandToggle();
-            toggle.addEventListener('click', this.brandToggleHandler);
-        }
-        if (!this.brandResizeHandler) {
-            this.brandResizeHandler = () => this.handleBrandResize();
-            window.addEventListener('resize', this.brandResizeHandler);
-        }
-
-        if (this.isMobileViewport()) {
-            this.applyMobileBrandState();
-        } else {
-            this.enableBrandAnimation();
-        }
-    }
-
-    enableBrandAnimation() {
-        const { toggle } = this.brandElements || {};
-        if (toggle) {
-            toggle.removeAttribute('aria-disabled');
-            toggle.style.pointerEvents = '';
-        }
-        this.brandAnimationReady = true;
-    }
-
-    applyMobileBrandState() {
-        const { toggle, wrapper, shortText } = this.brandElements || {};
-        if (!toggle || !wrapper || !shortText) {
-            return;
-        }
-
-        this.clearBrandCollapseTimer();
-        this.brandIsCollapsed = true;
-        this.brandAnimationReady = false;
-
-        toggle.classList.add('collapsed');
-        toggle.classList.remove('expanded');
-        toggle.setAttribute('aria-disabled', 'true');
-        toggle.style.pointerEvents = 'none';
-
-        const targetWidth = this.getBrandTextWidth(shortText);
-        this.applyBrandWidth(targetWidth, { animate: false });
-    }
-
-    getBrandTextWidth(element) {
-        if (!element) {
-            return 0;
-        }
-        const width = element.scrollWidth || element.getBoundingClientRect().width || 0;
-        return Number.isFinite(width) ? Math.ceil(width) : 0;
-    }
-
-    applyBrandWidth(targetWidth, { animate = true } = {}) {
-        const wrapper = this.brandElements?.wrapper;
-        if (!wrapper || !Number.isFinite(targetWidth)) {
-            return;
-        }
-
-        if (!animate) {
-            const previousTransition = wrapper.style.transition;
-            wrapper.style.transition = 'none';
-            wrapper.style.width = `${targetWidth}px`;
-            wrapper.getBoundingClientRect(); // 强制重绘以应用无动画的宽度
-            wrapper.style.transition = previousTransition;
-            return;
-        }
-
-        wrapper.style.width = `${targetWidth}px`;
-    }
-
-    updateBrandTextWidths(options = {}) {
-        const { wrapper, fullText, shortText } = this.brandElements || {};
-        if (!wrapper || !fullText || !shortText) {
-            return;
-        }
-
-        const targetSpan = this.brandIsCollapsed ? shortText : fullText;
-        const targetWidth = this.getBrandTextWidth(targetSpan);
-        this.applyBrandWidth(targetWidth, { animate: !options.immediate });
-    }
-
-    setBrandCollapsed(collapsed, options = {}) {
-        const { toggle, fullText, shortText } = this.brandElements || {};
-        if (!toggle || !fullText || !shortText) {
-            return;
-        }
-
-        this.brandIsCollapsed = collapsed;
-        const targetSpan = collapsed ? shortText : fullText;
-        const targetWidth = this.getBrandTextWidth(targetSpan);
-
-        this.applyBrandWidth(targetWidth, { animate: options.animate !== false });
-        toggle.classList.toggle('collapsed', collapsed);
-        toggle.classList.toggle('expanded', !collapsed);
-    }
-
-    handleBrandResize() {
-        if (!this.brandElements?.wrapper) {
-            return;
-        }
-
-        if (this.isMobileViewport()) {
-            this.applyMobileBrandState();
-            return;
-        }
-
-        if (!this.brandAnimationReady) {
-            this.enableBrandAnimation();
-            this.brandIsCollapsed = false;
-            this.setBrandCollapsed(false, { animate: false });
-            this.scheduleBrandCollapse(this.brandCollapseDelayMs);
-            return;
-        }
-
-        this.updateBrandTextWidths({ immediate: true });
-    }
-
-    scheduleBrandCollapse(delayMs = this.brandCollapseDelayMs) {
-        this.clearBrandCollapseTimer();
-        this.brandCollapseTimer = window.setTimeout(() => {
-            this.setBrandCollapsed(true);
-            this.brandCollapseTimer = null;
-        }, delayMs);
-    }
-
-    clearBrandCollapseTimer() {
-        if (this.brandCollapseTimer) {
-            clearTimeout(this.brandCollapseTimer);
-            this.brandCollapseTimer = null;
-        }
-    }
-
-    startBrandCollapseCycle() {
-        this.setupBrandTitleAnimation();
-
-        if (this.isMobileViewport()) {
-            this.applyMobileBrandState();
-            return;
-        }
-
-        if (!this.brandAnimationReady) {
-            return;
-        }
-
-        this.clearBrandCollapseTimer();
-        this.brandIsCollapsed = false;
-        this.setBrandCollapsed(false, { animate: false });
-        this.scheduleBrandCollapse(this.brandCollapseDelayMs);
-    }
-
-    resetBrandTitleState() {
-        this.clearBrandCollapseTimer();
-        const mainPage = document.getElementById('main-page');
-
-        if (this.isMobileViewport()) {
-            this.applyMobileBrandState();
-            return;
-        }
-
-        if (!this.brandAnimationReady || (mainPage && mainPage.style.display === 'none')) {
-            this.brandIsCollapsed = false;
-            return;
-        }
-
-        this.brandIsCollapsed = false;
-        this.setBrandCollapsed(false, { animate: false });
-    }
-
-    refreshBrandTitleAfterTextChange() {
-        if (this.isMobileViewport()) {
-            this.applyMobileBrandState();
-            return;
-        }
-
-        if (!this.brandAnimationReady) {
-            return;
-        }
-        this.updateBrandTextWidths({ immediate: true });
-        if (!this.brandIsCollapsed) {
-            this.scheduleBrandCollapse(this.brandCollapseDelayMs);
-        }
-    }
-
-    handleBrandToggle() {
-        if (!this.brandAnimationReady) {
-            return;
-        }
-
-        const nextCollapsed = !this.brandIsCollapsed;
-        this.setBrandCollapsed(nextCollapsed);
-        this.clearBrandCollapseTimer();
-
-        if (!nextCollapsed) {
-            // 展开后给用户留出一点时间阅读再收起
-            this.scheduleBrandCollapse(this.brandCollapseDelayMs + 1500);
-        }
-    }
-
-
-    // 显示通知
-    showNotification(message, type = 'info') {
-        const notification = document.getElementById('notification');
-        notification.textContent = message;
-        notification.className = `notification ${type}`;
-        notification.classList.add('show');
-
-        setTimeout(() => {
-            notification.classList.remove('show');
-        }, NOTIFICATION_DURATION_MS);
-    }
-
-    // 密钥可见性切换
-    toggleKeyVisibility() {
-        const keyInput = document.getElementById('management-key');
-        const toggleButton = document.getElementById('toggle-key-visibility');
-
-        if (keyInput.type === 'password') {
-            keyInput.type = 'text';
-            toggleButton.innerHTML = '<i class="fas fa-eye-slash"></i>';
-        } else {
-            keyInput.type = 'password';
-            toggleButton.innerHTML = '<i class="fas fa-eye"></i>';
-        }
-    }
-
-    // ===== 使用统计相关方法 =====
-
-    // 使用统计状态
-    requestsChart = null;
-    tokensChart = null;
-    costChart = null;
-    currentUsageData = null;
-    chartLineMaxCount = 9;
-    chartLineVisibleCount = 3;
-    chartLineSelections = Array(3).fill('none');
-    chartLineSelectionsInitialized = false;
-    chartLineSelectIds = Array.from({ length: 9 }, (_, idx) => `chart-line-select-${idx}`);
-    chartLineStyles = [
-        { borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' },
-        { borderColor: '#a855f7', backgroundColor: 'rgba(168, 85, 247, 0.15)' },
-        { borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.15)' },
-        { borderColor: '#f97316', backgroundColor: 'rgba(249, 115, 22, 0.15)' },
-        { borderColor: '#ec4899', backgroundColor: 'rgba(236, 72, 153, 0.15)' },
-        { borderColor: '#14b8a6', backgroundColor: 'rgba(20, 184, 166, 0.15)' },
-        { borderColor: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.15)' },
-        { borderColor: '#f59e0b', backgroundColor: 'rgba(245, 158, 11, 0.15)' },
-        { borderColor: '#22c55e', backgroundColor: 'rgba(34, 197, 94, 0.15)' }
-    ];
-    modelPriceStorageKey = 'cli-proxy-model-prices-v2';
-    modelPrices = {};
-    modelPriceInitialized = false;
-
-    showModal() {
-        const modal = document.getElementById('modal');
-        if (modal) {
-            modal.style.display = 'block';
-        }
-    }
-
-    // 关闭模态框
-    closeModal() {
-        document.getElementById('modal').style.display = 'none';
-        if (typeof this.closeOpenAIModelDiscovery === 'function') {
-            this.closeOpenAIModelDiscovery();
-        }
-    }
-
-}
-
-Object.assign(
-    CLIProxyManager.prototype,
-    themeModule,
-    navigationModule,
-    languageModule,
-    loginModule,
-    configEditorModule,
-    logsModule,
-    apiKeysModule,
-    authFilesModule,
-    oauthModule,
-    usageModule,
-    settingsModule,
-    aiProvidersModule,
-    connectionModule
-);
-
-// 将工具函数绑定到原型上，供模块使用
-CLIProxyManager.prototype.escapeHtml = escapeHtml;
-CLIProxyManager.prototype.maskApiKey = maskApiKey;
-CLIProxyManager.prototype.formatFileSize = formatFileSize;
-CLIProxyManager.prototype.normalizeArrayResponse = normalizeArrayResponse;
-CLIProxyManager.prototype.debounce = debounce;
-
-// 全局管理器实例
-let manager;
-
-// 让内联事件处理器可以访问到 manager 实例
-function exposeManagerInstance(instance) {
-    if (typeof window !== 'undefined') {
-        window.manager = instance;
-    } else if (typeof globalThis !== 'undefined') {
-        globalThis.manager = instance;
-    }
-}
-
-// 尝试自动加载根目录 Logo（支持多种常见文件名/扩展名）
-function setupSiteLogo() {
-    const img = document.getElementById('site-logo');
-    const loginImg = document.getElementById('login-logo');
-    if (!img && !loginImg) return;
-
-    const inlineLogo = typeof window !== 'undefined' ? window.__INLINE_LOGO__ : null;
-    if (inlineLogo) {
-        if (img) {
-            img.src = inlineLogo;
-            img.style.display = 'inline-block';
-        }
-        if (loginImg) {
-            loginImg.src = inlineLogo;
-            loginImg.style.display = 'inline-block';
-        }
-        return;
-    }
-
-    const candidates = [
-        '../logo.svg', '../logo.png', '../logo.jpg', '../logo.jpeg', '../logo.webp', '../logo.gif',
-        'logo.svg', 'logo.png', 'logo.jpg', 'logo.jpeg', 'logo.webp', 'logo.gif',
-        '/logo.svg', '/logo.png', '/logo.jpg', '/logo.jpeg', '/logo.webp', '/logo.gif'
-    ];
-    let idx = 0;
-    const tryNext = () => {
-        if (idx >= candidates.length) return;
-        const test = new Image();
-        test.onload = () => {
-            if (img) {
-                img.src = test.src;
-                img.style.display = 'inline-block';
-            }
-            if (loginImg) {
-                loginImg.src = test.src;
-                loginImg.style.display = 'inline-block';
-            }
-        };
-        test.onerror = () => {
-            idx++;
-            tryNext();
-        };
-        test.src = candidates[idx];
-    };
-    tryNext();
-}
-
-// 页面加载完成后初始化
-document.addEventListener('DOMContentLoaded', () => {
-    // 初始化国际化
-    i18n.init();
-
-    setupSiteLogo();
-    manager = new CLIProxyManager();
-    exposeManagerInstance(manager);
-});
diff --git a/build-scripts/prepare-html.js b/build-scripts/prepare-html.js
deleted file mode 100644
index e3f92d8..0000000
--- a/build-scripts/prepare-html.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-// Read the original index.html
-const indexPath = path.resolve(__dirname, '../index.html');
-const outputPath = path.resolve(__dirname, '../index.build.html');
-
-let htmlContent = fs.readFileSync(indexPath, 'utf8');
-
-// Remove local CSS reference
-htmlContent = htmlContent.replace(
-    /<link rel="stylesheet" href="styles\.css">\n?/g,
-    ''
-);
-
-// Remove local JavaScript references
-htmlContent = htmlContent.replace(
-    /<script src="i18n\.js"><\/script>\n?/g,
-    ''
-);
-
-htmlContent = htmlContent.replace(
-    /<script src="app\.js"><\/script>\n?/g,
-    ''
-);
-
-// Write the modified HTML to a temporary build file
-fs.writeFileSync(outputPath, htmlContent, 'utf8');
-
-console.log('✓ Generated index.build.html for webpack processing');
diff --git a/build.cjs b/build.cjs
deleted file mode 100644
index f70f68b..0000000
--- a/build.cjs
+++ /dev/null
@@ -1,225 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-
-const projectRoot = __dirname;
-const distDir = path.join(projectRoot, 'dist');
-
-const sourceFiles = {
-    html: path.join(projectRoot, 'index.html'),
-    css: path.join(projectRoot, 'styles.css'),
-    i18n: path.join(projectRoot, 'i18n.js'),
-    app: path.join(projectRoot, 'app.js')
-};
-
-const logoCandidates = ['logo.png', 'logo.jpg', 'logo.jpeg', 'logo.svg', 'logo.webp', 'logo.gif'];
-const logoMimeMap = {
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.svg': 'image/svg+xml',
-    '.webp': 'image/webp',
-    '.gif': 'image/gif'
-};
-
-function readFile(filePath) {
-    try {
-        return fs.readFileSync(filePath, 'utf8');
-    } catch (err) {
-        console.error(`读取文件失败: ${filePath}`);
-        throw err;
-    }
-}
-
-function readBinary(filePath) {
-    try {
-        return fs.readFileSync(filePath);
-    } catch (err) {
-        console.error(`读取文件失败: ${filePath}`);
-        throw err;
-    }
-}
-
-function escapeForScript(content) {
-    return content.replace(/<\/(script)/gi, '<\\/$1');
-}
-
-function escapeForStyle(content) {
-    return content.replace(/<\/(style)/gi, '<\\/$1');
-}
-
-function getVersion() {
-    // 1. 优先从环境变量获取（GitHub Actions 会设置）
-    if (process.env.VERSION) {
-        return process.env.VERSION;
-    }
-    
-    // 2. 尝试从 git tag 获取
-    try {
-        const { execSync } = require('child_process');
-        const gitTag = execSync('git describe --tags --exact-match 2>/dev/null || git describe --tags 2>/dev/null || echo ""', { encoding: 'utf8' }).trim();
-        if (gitTag) {
-            return gitTag;
-        }
-    } catch (err) {
-        console.warn('无法从 git 获取版本号');
-    }
-    
-    // 3. 回退到 package.json
-    try {
-        const packageJson = JSON.parse(fs.readFileSync(path.join(projectRoot, 'package.json'), 'utf8'));
-        return 'v' + packageJson.version;
-    } catch (err) {
-        console.warn('无法从 package.json 读取版本号');
-    }
-    
-    // 4. 最后使用默认值
-    return 'v0.0.0-dev';
-}
-
-function ensureDistDir() {
-    if (fs.existsSync(distDir)) {
-        fs.rmSync(distDir, { recursive: true, force: true });
-    }
-    fs.mkdirSync(distDir);
-}
-
-// 匹配各种 import 语句
-const importRegex = /import\s+(?:{[^}]*}|[\w*\s,{}]+)\s+from\s+['"]([^'"]+)['"];?/gm;
-// 匹配 export 关键字（包括 export const, export function, export class, export async function 等）
-const exportRegex = /^export\s+(?=const|let|var|function|class|default|async)/gm;
-// 匹配单独的 export {} 或 export { ... } from '...'
-const exportBraceRegex = /^export\s*{[^}]*}\s*(?:from\s+['"][^'"]+['"];?)?$/gm;
-
-function bundleApp(entryPath) {
-    const visited = new Set();
-    const modules = [];
-
-    function inlineFile(filePath) {
-        let content = readFile(filePath);
-        const dir = path.dirname(filePath);
-
-        // 收集所有 import 语句
-        const imports = [];
-        content = content.replace(importRegex, (match, specifier) => {
-            const targetPath = path.resolve(dir, specifier);
-            const normalized = path.normalize(targetPath);
-            if (!fs.existsSync(normalized)) {
-                throw new Error(`无法解析模块: ${specifier} (from ${filePath})`);
-            }
-            if (!visited.has(normalized)) {
-                visited.add(normalized);
-                imports.push(normalized);
-            }
-            return ''; // 移除 import 语句
-        });
-
-        // 移除 export 关键字
-        content = content.replace(exportRegex, '');
-        content = content.replace(exportBraceRegex, '');
-
-        // 处理依赖的模块
-        for (const importPath of imports) {
-            const moduleContent = inlineFile(importPath);
-            const relativePath = path.relative(projectRoot, importPath);
-            modules.push(`\n// ============ ${relativePath} ============\n${moduleContent}\n`);
-        }
-
-        return content;
-    }
-
-    const mainContent = inlineFile(entryPath);
-
-    // 将所有模块内容组合在一起，模块在前，主文件在后
-    return modules.join('\n') + '\n// ============ Main ============\n' + mainContent;
-}
-
-
-function loadLogoDataUrl() {
-    for (const candidate of logoCandidates) {
-        const filePath = path.join(projectRoot, candidate);
-        if (!fs.existsSync(filePath)) continue;
-
-        const ext = path.extname(candidate).toLowerCase();
-        const mime = logoMimeMap[ext];
-        if (!mime) {
-            console.warn(`未知 Logo 文件类型，跳过内联: ${candidate}`);
-            continue;
-        }
-
-        const buffer = readBinary(filePath);
-        const base64 = buffer.toString('base64');
-        return `data:${mime};base64,${base64}`;
-    }
-    return null;
-}
-
-function build() {
-    ensureDistDir();
-
-    let html = readFile(sourceFiles.html);
-    const css = escapeForStyle(readFile(sourceFiles.css));
-    const i18n = escapeForScript(readFile(sourceFiles.i18n));
-    const bundledApp = bundleApp(sourceFiles.app);
-    const app = escapeForScript(bundledApp);
-    
-    // 获取版本号并替换
-    const version = getVersion();
-    console.log(`使用版本号: ${version}`);
-    html = html.replace(/__VERSION__/g, version);
-
-    html = html.replace(
-        '<link rel="stylesheet" href="styles.css">',
-        () => `<style>
-${css}
-</style>`
-    );
-
-    html = html.replace(
-        '<script src="i18n.js"></script>',
-        () => `<script>
-${i18n}
-</script>`
-    );
-
-    const scriptTagRegex = /<script[^>]*src="app\.js"[^>]*><\/script>/i;
-    if (scriptTagRegex.test(html)) {
-        html = html.replace(
-            scriptTagRegex,
-            () => `<script>
-${app}
-</script>`
-        );
-    } else {
-        console.warn('未找到 app.js 脚本标签，未内联应用代码。');
-    }
-
-    const logoDataUrl = loadLogoDataUrl();
-    if (logoDataUrl) {
-        const logoScript = `<script>window.__INLINE_LOGO__ = "${logoDataUrl}";</script>`;
-        const closingBodyTag = '</body>';
-        const closingBodyIndex = html.lastIndexOf(closingBodyTag);
-        if (closingBodyIndex !== -1) {
-            html = `${html.slice(0, closingBodyIndex)}${logoScript}\n${closingBodyTag}${html.slice(closingBodyIndex + closingBodyTag.length)}`;
-        } else {
-            html += `\n${logoScript}`;
-        }
-    } else {
-        console.warn('未找到可内联的 Logo 文件，将保持运行时加载。');
-    }
-
-    const outputPath = path.join(distDir, 'index.html');
-    fs.writeFileSync(outputPath, html, 'utf8');
-
-    console.log('构建完成: dist/index.html');
-}
-
-try {
-    build();
-} catch (error) {
-    console.error('构建失败:', error);
-    process.exit(1);
-}
-
-
diff --git a/bundle-entry.js b/bundle-entry.js
deleted file mode 100644
index 229f271..0000000
--- a/bundle-entry.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// Import CSS
-import './styles.css';
-
-// Import JavaScript modules
-import './i18n.js';
-import './app.js';
-
-// Import logo image
-import logoImg from './logo.jpg';
-
-// Set logo after DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-    const loginLogo = document.getElementById('login-logo');
-    const siteLogo = document.getElementById('site-logo');
-
-    if (loginLogo) {
-        loginLogo.src = logoImg;
-        loginLogo.style.display = 'block';
-    }
-
-    if (siteLogo) {
-        siteLogo.src = logoImg;
-        siteLogo.style.display = 'block';
-    }
-});
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..9c6771c
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,30 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    },
+  },
+);
diff --git a/i18n.js b/i18n.js
deleted file mode 100644
index bfef89e..0000000
--- a/i18n.js
+++ /dev/null
@@ -1,1441 +0,0 @@
-// 国际化语言包
-const i18n = {
-    // 语言配置
-    currentLanguage: 'zh-CN',
-    fallbackLanguage: 'zh-CN',
-
-    // 语言包
-    translations: {
-        'zh-CN': {
-            // 通用
-            'common.login': '登录',
-            'common.logout': '登出',
-            'common.cancel': '取消',
-            'common.confirm': '确认',
-            'common.save': '保存',
-            'common.delete': '删除',
-            'common.edit': '编辑',
-            'common.add': '添加',
-            'common.update': '更新',
-            'common.refresh': '刷新',
-            'common.close': '关闭',
-            'common.success': '成功',
-            'common.error': '错误',
-            'common.info': '信息',
-            'common.warning': '警告',
-            'common.loading': '加载中...',
-            'common.connecting': '连接中...',
-            'common.connected': '已连接',
-            'common.disconnected': '未连接',
-            'common.connecting_status': '连接中',
-            'common.connected_status': '已连接',
-            'common.disconnected_status': '未连接',
-            'common.yes': '是',
-            'common.no': '否',
-            'common.optional': '可选',
-            'common.required': '必填',
-            'common.api_key': '密钥',
-            'common.base_url': '地址',
-            'common.proxy_url': '代理',
-            'common.alias': '别名',
-            'common.failure': '失败',
-            'common.unknown_error': '未知错误',
-            'common.copy': '复制',
-            'common.custom_headers_label': '自定义请求头',
-            'common.custom_headers_hint': '可选，设置需要附带到请求中的 HTTP 头，名称和值均不能为空。',
-            'common.custom_headers_add': '添加请求头',
-            'common.custom_headers_key_placeholder': 'Header 名称，例如 X-Custom-Header',
-            'common.custom_headers_value_placeholder': 'Header 值',
-            'common.model_name_placeholder': '模型名称，例如 claude-3-5-sonnet-20241022',
-            'common.model_alias_placeholder': '模型别名 (可选)',
-
-            // 页面标题
-            'title.main': 'CLI Proxy API Management Center',
-            'title.login': 'CLI Proxy API Management Center',
-            'title.abbr': 'CPAMC',
-
-            // 自动登录
-            'auto_login.title': '正在自动登录...',
-            'auto_login.message': '正在使用本地保存的连接信息尝试连接服务器',
-
-            // 登录页面
-            'login.subtitle': '请输入连接信息以访问管理界面',
-            'login.connection_title': '连接地址',
-            'login.connection_current': '当前地址',
-            'login.connection_auto_hint': '系统将自动使用当前访问地址进行连接',
-            'login.custom_connection_label': '自定义连接地址:',
-            'login.custom_connection_placeholder': '例如: https://example.com:8317',
-            'login.custom_connection_hint': '默认使用当前访问地址，若需要可手动输入其他地址。',
-            'login.use_current_address': '使用当前地址',
-            'login.management_key_label': '管理密钥:',
-            'login.management_key_placeholder': '请输入管理密钥',
-            'login.connect_button': '连接',
-            'login.submit_button': '登录',
-            'login.submitting': '连接中...',
-            'login.error_title': '登录失败',
-            'login.error_required': '请填写完整的连接信息',
-            'login.error_invalid': '连接失败，请检查地址和密钥',
-
-            // 头部导航
-            'header.check_connection': '检查连接',
-            'header.refresh_all': '刷新全部',
-            'header.logout': '登出',
-
-            // 连接信息
-            'connection.title': '连接信息',
-            'connection.server_address': '服务器地址:',
-            'connection.management_key': '管理密钥:',
-            'connection.status': '连接状态:',
-
-            // 侧边栏导航
-            'nav.basic_settings': '基础设置',
-            'nav.api_keys': 'API 密钥',
-            'nav.ai_providers': 'AI 提供商',
-            'nav.auth_files': '认证文件',
-            'nav.usage_stats': '使用统计',
-            'nav.config_management': '配置管理',
-            'nav.logs': '日志查看',
-            'nav.system_info': '中心信息',
-
-            // 基础设置
-            'basic_settings.title': '基础设置',
-            'basic_settings.debug_title': '调试模式',
-            'basic_settings.debug_enable': '启用调试模式',
-            'basic_settings.proxy_title': '代理设置',
-            'basic_settings.proxy_url_label': '代理 URL:',
-            'basic_settings.proxy_url_placeholder': '例如: socks5://user:pass@127.0.0.1:1080/',
-            'basic_settings.proxy_update': '更新',
-            'basic_settings.proxy_clear': '清空',
-            'basic_settings.retry_title': '请求重试',
-            'basic_settings.retry_count_label': '重试次数:',
-            'basic_settings.retry_update': '更新',
-            'basic_settings.quota_title': '配额超出行为',
-            'basic_settings.quota_switch_project': '自动切换项目',
-            'basic_settings.quota_switch_preview': '切换到预览模型',
-            'basic_settings.usage_statistics_title': '使用统计',
-            'basic_settings.usage_statistics_enable': '启用使用统计',
-            'basic_settings.logging_title': '日志记录',
-            'basic_settings.logging_to_file_enable': '启用日志记录到文件',
-            'basic_settings.request_log_enable': '启用请求日志',
-            'basic_settings.ws_auth_title': 'WebSocket 鉴权',
-            'basic_settings.ws_auth_enable': '启用 /ws/* 鉴权',
-
-            // API 密钥管理
-            'api_keys.title': 'API 密钥管理',
-            'api_keys.proxy_auth_title': '代理服务认证密钥',
-            'api_keys.add_button': '添加密钥',
-            'api_keys.empty_title': '暂无API密钥',
-            'api_keys.empty_desc': '点击上方按钮添加第一个密钥',
-            'api_keys.item_title': 'API密钥',
-            'api_keys.add_modal_title': '添加API密钥',
-            'api_keys.add_modal_key_label': 'API密钥:',
-            'api_keys.add_modal_key_placeholder': '请输入API密钥',
-            'api_keys.edit_modal_title': '编辑API密钥',
-            'api_keys.edit_modal_key_label': 'API密钥:',
-            'api_keys.delete_confirm': '确定要删除这个API密钥吗？',
-
-            // AI 提供商
-            'ai_providers.title': 'AI 提供商配置',
-            'ai_providers.gemini_title': 'Gemini API 密钥',
-            'ai_providers.gemini_add_button': '添加密钥',
-            'ai_providers.gemini_empty_title': '暂无Gemini密钥',
-            'ai_providers.gemini_empty_desc': '点击上方按钮添加第一个密钥',
-            'ai_providers.gemini_item_title': 'Gemini密钥',
-            'ai_providers.gemini_add_modal_title': '添加Gemini API密钥',
-            'ai_providers.gemini_add_modal_key_label': 'API密钥',
-            'ai_providers.gemini_add_modal_key_placeholder': '输入 Gemini API 密钥',
-            'ai_providers.gemini_add_modal_key_hint': '逐条输入密钥，可同时指定可选 Base URL。',
-            'ai_providers.gemini_keys_add_btn': '添加密钥',
-            'ai_providers.gemini_base_url_placeholder': '可选 Base URL，如 https://generativelanguage.googleapis.com',
-            'ai_providers.gemini_edit_modal_title': '编辑Gemini API密钥',
-            'ai_providers.gemini_edit_modal_key_label': 'API密钥:',
-            'ai_providers.gemini_delete_confirm': '确定要删除这个Gemini密钥吗？',
-            'ai_providers.excluded_models_label': '排除的模型 (可选):',
-            'ai_providers.excluded_models_placeholder': '用逗号或换行分隔，例如: gemini-1.5-pro, gemini-1.5-flash',
-            'ai_providers.excluded_models_hint': '留空表示不过滤；保存时会自动去重并忽略空白。',
-            'ai_providers.excluded_models_count': '排除 {count} 个模型',
-
-            'ai_providers.codex_title': 'Codex API 配置',
-            'ai_providers.codex_add_button': '添加配置',
-            'ai_providers.codex_empty_title': '暂无Codex配置',
-            'ai_providers.codex_empty_desc': '点击上方按钮添加第一个配置',
-            'ai_providers.codex_item_title': 'Codex配置',
-            'ai_providers.codex_add_modal_title': '添加Codex API配置',
-            'ai_providers.codex_add_modal_key_label': 'API密钥:',
-            'ai_providers.codex_add_modal_key_placeholder': '请输入Codex API密钥',
-            'ai_providers.codex_add_modal_url_label': 'Base URL (必填):',
-            'ai_providers.codex_add_modal_url_placeholder': '例如: https://api.example.com',
-            'ai_providers.codex_add_modal_proxy_label': '代理 URL (可选):',
-            'ai_providers.codex_add_modal_proxy_placeholder': '例如: socks5://proxy.example.com:1080',
-            'ai_providers.codex_edit_modal_title': '编辑Codex API配置',
-            'ai_providers.codex_edit_modal_key_label': 'API密钥:',
-            'ai_providers.codex_edit_modal_url_label': 'Base URL (必填):',
-            'ai_providers.codex_edit_modal_proxy_label': '代理 URL (可选):',
-            'ai_providers.codex_delete_confirm': '确定要删除这个Codex配置吗？',
-
-            'ai_providers.claude_title': 'Claude API 配置',
-            'ai_providers.claude_add_button': '添加配置',
-            'ai_providers.claude_empty_title': '暂无Claude配置',
-            'ai_providers.claude_empty_desc': '点击上方按钮添加第一个配置',
-            'ai_providers.claude_item_title': 'Claude配置',
-            'ai_providers.claude_add_modal_title': '添加Claude API配置',
-            'ai_providers.claude_add_modal_key_label': 'API密钥:',
-            'ai_providers.claude_add_modal_key_placeholder': '请输入Claude API密钥',
-            'ai_providers.claude_add_modal_url_label': 'Base URL (可选):',
-            'ai_providers.claude_add_modal_url_placeholder': '例如: https://api.anthropic.com',
-            'ai_providers.claude_add_modal_proxy_label': '代理 URL (可选):',
-            'ai_providers.claude_add_modal_proxy_placeholder': '例如: socks5://proxy.example.com:1080',
-            'ai_providers.claude_edit_modal_title': '编辑Claude API配置',
-            'ai_providers.claude_edit_modal_key_label': 'API密钥:',
-            'ai_providers.claude_edit_modal_url_label': 'Base URL (可选):',
-            'ai_providers.claude_edit_modal_proxy_label': '代理 URL (可选):',
-            'ai_providers.claude_delete_confirm': '确定要删除这个Claude配置吗？',
-            'ai_providers.claude_models_label': '自定义模型 (可选):',
-            'ai_providers.claude_models_hint': '为空表示使用全部模型；可填写 name[, alias] 以限制或重命名模型。',
-            'ai_providers.claude_models_add_btn': '添加模型',
-            'ai_providers.claude_models_count': '模型数量',
-
-            'ai_providers.openai_title': 'OpenAI 兼容提供商',
-            'ai_providers.openai_add_button': '添加提供商',
-            'ai_providers.openai_empty_title': '暂无OpenAI兼容提供商',
-            'ai_providers.openai_empty_desc': '点击上方按钮添加第一个提供商',
-            'ai_providers.openai_add_modal_title': '添加OpenAI兼容提供商',
-            'ai_providers.openai_add_modal_name_label': '提供商名称:',
-            'ai_providers.openai_add_modal_name_placeholder': '例如: openrouter',
-            'ai_providers.openai_add_modal_url_label': 'Base URL:',
-            'ai_providers.openai_add_modal_url_placeholder': '例如: https://openrouter.ai/api/v1',
-            'ai_providers.openai_add_modal_keys_label': 'API密钥',
-            'ai_providers.openai_edit_modal_keys_label': 'API密钥',
-            'ai_providers.openai_keys_hint': '每个密钥可搭配一个可选代理地址，更便于管理。',
-            'ai_providers.openai_keys_add_btn': '添加密钥',
-            'ai_providers.openai_key_placeholder': '输入 sk- 开头的密钥',
-            'ai_providers.openai_proxy_placeholder': '可选代理 URL (如 socks5://...)',
-            'ai_providers.openai_add_modal_models_label': '模型列表 (name[, alias] 每行一个):',
-            'ai_providers.openai_models_hint': '示例：gpt-4o-mini 或 moonshotai/kimi-k2:free, kimi-k2',
-            'ai_providers.openai_model_name_placeholder': '模型名称，如 moonshotai/kimi-k2:free',
-            'ai_providers.openai_model_alias_placeholder': '模型别名 (可选)',
-            'ai_providers.openai_models_add_btn': '添加模型',
-            'ai_providers.openai_models_fetch_button': '从 /v1/models 获取',
-            'ai_providers.openai_models_fetch_title': '从 /v1/models 选择模型',
-            'ai_providers.openai_models_fetch_hint': '使用上方 Base URL 调用 /v1/models 端点，附带首个 API Key（Bearer）与自定义请求头。',
-            'ai_providers.openai_models_fetch_url_label': '请求地址',
-            'ai_providers.openai_models_fetch_refresh': '重新获取',
-            'ai_providers.openai_models_fetch_loading': '正在从 /v1/models 获取模型列表...',
-            'ai_providers.openai_models_fetch_empty': '未获取到模型，请检查端点或鉴权信息。',
-            'ai_providers.openai_models_fetch_error': '获取模型失败',
-            'ai_providers.openai_models_fetch_back': '返回编辑',
-            'ai_providers.openai_models_fetch_apply': '添加所选模型',
-            'ai_providers.openai_models_search_label': '搜索模型',
-            'ai_providers.openai_models_search_placeholder': '按名称、别名或描述筛选',
-            'ai_providers.openai_models_search_empty': '没有匹配的模型，请更换关键字试试。',
-            'ai_providers.openai_models_fetch_invalid_url': '请先填写有效的 Base URL',
-            'ai_providers.openai_models_fetch_added': '已添加 {count} 个新模型',
-            'ai_providers.openai_edit_modal_title': '编辑OpenAI兼容提供商',
-            'ai_providers.openai_edit_modal_name_label': '提供商名称:',
-            'ai_providers.openai_edit_modal_url_label': 'Base URL:',
-            'ai_providers.openai_edit_modal_keys_label': 'API密钥',
-            'ai_providers.openai_edit_modal_models_label': '模型列表 (name[, alias] 每行一个):',
-            'ai_providers.openai_delete_confirm': '确定要删除这个OpenAI提供商吗？',
-            'ai_providers.openai_keys_count': '密钥数量',
-            'ai_providers.openai_models_count': '模型数量',
-            'ai_providers.openai_test_title': '连通性测试',
-            'ai_providers.openai_test_hint': '使用当前配置向 /v1/chat/completions 请求，验证是否可用。',
-            'ai_providers.openai_test_model_placeholder': '选择或输入要测试的模型',
-            'ai_providers.openai_test_action': '发送测试',
-            'ai_providers.openai_test_running': '正在发送测试请求...',
-            'ai_providers.openai_test_success': '测试成功，模型可用。',
-            'ai_providers.openai_test_failed': '测试失败',
-            'ai_providers.openai_test_select_placeholder': '从当前模型列表选择',
-            'ai_providers.openai_test_select_empty': '当前未配置模型，可直接输入',
-
-
-            // 认证文件管理
-            'auth_files.title': '认证文件管理',
-            'auth_files.title_section': '认证文件',
-            'auth_files.description': '这里集中管理 CLI Proxy 支持的所有 JSON 认证文件（如 Qwen、Gemini、Vertex 等），上传后即可在运行时启用相应的 AI 服务。',
-            'auth_files.upload_button': '上传文件',
-            'auth_files.delete_all_button': '删除全部',
-            'auth_files.empty_title': '暂无认证文件',
-            'auth_files.empty_desc': '点击上方按钮上传第一个文件',
-            'auth_files.search_empty_title': '没有匹配的配置文件',
-            'auth_files.search_empty_desc': '请调整筛选条件或清空搜索关键字再试一次。',
-            'auth_files.file_size': '大小',
-            'auth_files.file_modified': '修改时间',
-            'auth_files.download_button': '下载',
-            'auth_files.delete_button': '删除',
-            'auth_files.delete_confirm': '确定要删除文件',
-            'auth_files.delete_all_confirm': '确定要删除所有认证文件吗？此操作不可恢复！',
-            'auth_files.delete_filtered_confirm': '确定要删除筛选出的 {type} 认证文件吗？此操作不可恢复！',
-            'auth_files.upload_error_json': '只能上传JSON文件',
-            'auth_files.upload_success': '文件上传成功',
-            'auth_files.download_success': '文件下载成功',
-            'auth_files.delete_success': '文件删除成功',
-            'auth_files.delete_all_success': '成功删除',
-            'auth_files.delete_filtered_success': '成功删除 {count} 个 {type} 认证文件',
-            'auth_files.delete_filtered_partial': '{type} 认证文件删除完成，成功 {success} 个，失败 {failed} 个',
-            'auth_files.delete_filtered_none': '当前筛选类型 ({type}) 下没有可删除的认证文件',
-            'auth_files.files_count': '个文件',
-            'auth_files.pagination_prev': '上一页',
-            'auth_files.pagination_next': '下一页',
-            'auth_files.pagination_info': '第 {current} / {total} 页 · 共 {count} 个文件',
-            'auth_files.search_label': '搜索配置文件',
-            'auth_files.search_placeholder': '输入名称、类型或提供方关键字',
-            'auth_files.page_size_label': '单页数量',
-            'auth_files.page_size_unit': '个/页',
-            'auth_files.filter_all': '全部',
-            'auth_files.filter_qwen': 'Qwen',
-            'auth_files.filter_gemini': 'Gemini',
-            'auth_files.filter_gemini-cli': 'GeminiCLI',
-            'auth_files.filter_aistudio': 'AIStudio',
-            'auth_files.filter_claude': 'Claude',
-            'auth_files.filter_codex': 'Codex',
-            'auth_files.filter_antigravity': 'Antigravity',
-            'auth_files.filter_iflow': 'iFlow',
-            'auth_files.filter_vertex': 'Vertex',
-            'auth_files.filter_empty': '空文件',
-            'auth_files.filter_unknown': '其他',
-            'auth_files.type_qwen': 'Qwen',
-            'auth_files.type_gemini': 'Gemini',
-            'auth_files.type_gemini-cli': 'GeminiCLI',
-            'auth_files.type_aistudio': 'AIStudio',
-            'auth_files.type_claude': 'Claude',
-            'auth_files.type_codex': 'Codex',
-            'auth_files.type_antigravity': 'Antigravity',
-            'auth_files.type_iflow': 'iFlow',
-            'auth_files.type_vertex': 'Vertex',
-            'auth_files.type_empty': '空文件',
-            'auth_files.type_unknown': '其他',
-            'vertex_import.title': 'Vertex AI 凭证导入',
-            'vertex_import.description': '上传 Google 服务账号 JSON，使用 CLI vertex-import 同步规则写入 auth-dir/vertex-<project>.json。',
-            'vertex_import.location_label': '目标区域 (可选)',
-            'vertex_import.location_placeholder': 'us-central1',
-            'vertex_import.location_hint': '留空表示使用默认区域 us-central1。',
-            'vertex_import.file_label': '服务账号密钥 JSON',
-            'vertex_import.file_hint': '仅支持 Google Cloud service account key JSON 文件，私钥会自动规范化。',
-            'vertex_import.file_placeholder': '尚未选择文件',
-            'vertex_import.choose_file': '选择文件',
-            'vertex_import.import_button': '导入 Vertex 凭证',
-            'vertex_import.file_required': '请先选择 .json 凭证文件',
-            'vertex_import.success': 'Vertex 凭证导入成功',
-            'vertex_import.result_title': '凭证已保存',
-            'vertex_import.result_project': '项目 ID',
-            'vertex_import.result_email': '服务账号',
-            'vertex_import.result_location': '区域',
-            'vertex_import.result_file': '存储文件',
-
-            // OAuth 排除模型
-            'oauth_excluded.title': 'OAuth 排除列表',
-            'oauth_excluded.description': '按提供商分列展示，点击卡片编辑或删除；支持 * 通配符，范围跟随上方的配置文件过滤标签。',
-            'oauth_excluded.add': '新增排除',
-            'oauth_excluded.add_title': '新增提供商排除列表',
-            'oauth_excluded.edit_title': '编辑 {provider} 的排除列表',
-            'oauth_excluded.refresh': '刷新',
-            'oauth_excluded.refreshing': '刷新中...',
-            'oauth_excluded.provider_label': '提供商',
-            'oauth_excluded.provider_auto': '跟随当前过滤',
-            'oauth_excluded.provider_placeholder': '例如 gemini-cli / openai',
-            'oauth_excluded.provider_hint': '默认选中当前筛选的提供商，也可直接输入或选择其他名称。',
-            'oauth_excluded.models_label': '排除的模型',
-            'oauth_excluded.models_placeholder': 'gpt-4.1-mini\n*-preview',
-            'oauth_excluded.models_hint': '逗号或换行分隔；留空保存将删除该提供商记录；支持 * 通配符。',
-            'oauth_excluded.save': '保存/更新',
-            'oauth_excluded.saving': '正在保存...',
-            'oauth_excluded.save_success': '排除列表已更新',
-            'oauth_excluded.save_failed': '更新排除列表失败',
-            'oauth_excluded.delete': '删除提供商',
-            'oauth_excluded.delete_confirm': '确定要删除 {provider} 的排除列表吗？',
-            'oauth_excluded.delete_success': '已删除该提供商的排除列表',
-            'oauth_excluded.delete_failed': '删除排除列表失败',
-            'oauth_excluded.deleting': '正在删除...',
-            'oauth_excluded.no_models': '未配置排除模型',
-            'oauth_excluded.model_count': '排除 {count} 个模型',
-            'oauth_excluded.list_empty_all': '暂无任何提供商的排除列表，点击“新增排除”创建。',
-            'oauth_excluded.list_empty_filtered': '当前筛选下没有排除项，点击“新增排除”添加。',
-            'oauth_excluded.disconnected': '请先连接服务器以查看排除列表',
-            'oauth_excluded.load_failed': '加载排除列表失败',
-            'oauth_excluded.provider_required': '请先填写提供商名称',
-            'oauth_excluded.scope_all': '当前范围：全局（显示所有提供商）',
-            'oauth_excluded.scope_provider': '当前范围：{provider}',
-
-
-            // Codex OAuth
-            'auth_login.codex_oauth_title': 'Codex OAuth',
-            'auth_login.codex_oauth_button': '开始 Codex 登录',
-            'auth_login.codex_oauth_hint': '通过 OAuth 流程登录 Codex 服务，自动获取并保存认证文件。',
-            'auth_login.codex_oauth_url_label': '授权链接:',
-            'auth_login.codex_open_link': '打开链接',
-            'auth_login.codex_copy_link': '复制链接',
-            'auth_login.codex_oauth_status_waiting': '等待认证中...',
-            'auth_login.codex_oauth_status_success': '认证成功！',
-            'auth_login.codex_oauth_status_error': '认证失败:',
-            'auth_login.codex_oauth_start_error': '启动 Codex OAuth 失败:',
-            'auth_login.codex_oauth_polling_error': '检查认证状态失败:',
-
-            // Anthropic OAuth
-            'auth_login.anthropic_oauth_title': 'Anthropic OAuth',
-            'auth_login.anthropic_oauth_button': '开始 Anthropic 登录',
-            'auth_login.anthropic_oauth_hint': '通过 OAuth 流程登录 Anthropic (Claude) 服务，自动获取并保存认证文件。',
-            'auth_login.anthropic_oauth_url_label': '授权链接:',
-            'auth_login.anthropic_open_link': '打开链接',
-            'auth_login.anthropic_copy_link': '复制链接',
-            'auth_login.anthropic_oauth_status_waiting': '等待认证中...',
-            'auth_login.anthropic_oauth_status_success': '认证成功！',
-            'auth_login.anthropic_oauth_status_error': '认证失败:',
-            'auth_login.anthropic_oauth_start_error': '启动 Anthropic OAuth 失败:',
-            'auth_login.anthropic_oauth_polling_error': '检查认证状态失败:',
-
-            // Antigravity OAuth
-            'auth_login.antigravity_oauth_title': 'Antigravity OAuth',
-            'auth_login.antigravity_oauth_button': '开始 Antigravity 登录',
-            'auth_login.antigravity_oauth_hint': '通过 OAuth 流程登录 Antigravity（Google 账号）服务，自动获取并保存认证文件。',
-            'auth_login.antigravity_oauth_url_label': '授权链接:',
-            'auth_login.antigravity_open_link': '打开链接',
-            'auth_login.antigravity_copy_link': '复制链接',
-            'auth_login.antigravity_oauth_status_waiting': '等待认证中...',
-            'auth_login.antigravity_oauth_status_success': '认证成功！',
-            'auth_login.antigravity_oauth_status_error': '认证失败:',
-            'auth_login.antigravity_oauth_start_error': '启动 Antigravity OAuth 失败:',
-            'auth_login.antigravity_oauth_polling_error': '检查认证状态失败:',
-
-            // Gemini CLI OAuth
-            'auth_login.gemini_cli_oauth_title': 'Gemini CLI OAuth',
-            'auth_login.gemini_cli_oauth_button': '开始 Gemini CLI 登录',
-            'auth_login.gemini_cli_oauth_hint': '通过 OAuth 流程登录 Google Gemini CLI 服务，自动获取并保存认证文件。',
-            'auth_login.gemini_cli_project_id_label': 'Google Cloud 项目 ID (可选):',
-            'auth_login.gemini_cli_project_id_placeholder': '输入 Google Cloud 项目 ID (可选)',
-            'auth_login.gemini_cli_project_id_hint': '如果指定了项目 ID，将使用该项目的认证信息。',
-            'auth_login.gemini_cli_oauth_url_label': '授权链接:',
-            'auth_login.gemini_cli_open_link': '打开链接',
-            'auth_login.gemini_cli_copy_link': '复制链接',
-            'auth_login.gemini_cli_oauth_status_waiting': '等待认证中...',
-            'auth_login.gemini_cli_oauth_status_success': '认证成功！',
-            'auth_login.gemini_cli_oauth_status_error': '认证失败:',
-            'auth_login.gemini_cli_oauth_start_error': '启动 Gemini CLI OAuth 失败:',
-            'auth_login.gemini_cli_oauth_polling_error': '检查认证状态失败:',
-
-            // Qwen OAuth
-            'auth_login.qwen_oauth_title': 'Qwen OAuth',
-            'auth_login.qwen_oauth_button': '开始 Qwen 登录',
-            'auth_login.qwen_oauth_hint': '通过设备授权流程登录 Qwen 服务，自动获取并保存认证文件。',
-            'auth_login.qwen_oauth_url_label': '授权链接:',
-            'auth_login.qwen_open_link': '打开链接',
-            'auth_login.qwen_copy_link': '复制链接',
-            'auth_login.qwen_oauth_status_waiting': '等待认证中...',
-            'auth_login.qwen_oauth_status_success': '认证成功！',
-            'auth_login.qwen_oauth_status_error': '认证失败:',
-            'auth_login.qwen_oauth_start_error': '启动 Qwen OAuth 失败:',
-            'auth_login.qwen_oauth_polling_error': '检查认证状态失败:',
-            'auth_login.missing_state': '无法获取认证状态参数',
-
-            // iFlow OAuth
-            'auth_login.iflow_oauth_title': 'iFlow OAuth',
-            'auth_login.iflow_oauth_button': '开始 iFlow 登录',
-            'auth_login.iflow_oauth_hint': '通过 OAuth 流程登录 iFlow 服务，自动获取并保存认证文件。',
-            'auth_login.iflow_oauth_url_label': '授权链接:',
-            'auth_login.iflow_open_link': '打开链接',
-            'auth_login.iflow_copy_link': '复制链接',
-            'auth_login.iflow_oauth_status_waiting': '等待认证中...',
-            'auth_login.iflow_oauth_status_success': '认证成功！',
-            'auth_login.iflow_oauth_status_error': '认证失败:',
-            'auth_login.iflow_oauth_start_error': '启动 iFlow OAuth 失败:',
-            'auth_login.iflow_oauth_polling_error': '检查认证状态失败:',
-            'auth_login.iflow_cookie_title': 'iFlow Cookie 登录',
-            'auth_login.iflow_cookie_label': 'Cookie 内容:',
-            'auth_login.iflow_cookie_placeholder': '粘贴浏览器中的 Cookie，例如 sessionid=...;',
-            'auth_login.iflow_cookie_hint': '直接提交 Cookie 以完成登录（无需打开授权链接），服务端将自动保存凭据。',
-            'auth_login.iflow_cookie_button': '提交 Cookie 登录',
-            'auth_login.iflow_cookie_status_success': 'Cookie 登录成功，凭据已保存。',
-            'auth_login.iflow_cookie_status_error': 'Cookie 登录失败:',
-            'auth_login.iflow_cookie_start_error': '提交 Cookie 登录失败:',
-            'auth_login.iflow_cookie_required': '请先填写 Cookie 内容',
-            'auth_login.iflow_cookie_result_title': 'Cookie 登录结果',
-            'auth_login.iflow_cookie_result_email': '账号',
-            'auth_login.iflow_cookie_result_expired': '过期时间',
-            'auth_login.iflow_cookie_result_path': '保存路径',
-            'auth_login.iflow_cookie_result_type': '类型',
-
-            // 使用统计
-            'usage_stats.title': '使用统计',
-            'usage_stats.total_requests': '总请求数',
-            'usage_stats.success_requests': '成功请求',
-            'usage_stats.failed_requests': '失败请求',
-            'usage_stats.total_tokens': '总Token数',
-            'usage_stats.cached_tokens': '缓存 Token 数',
-            'usage_stats.reasoning_tokens': '思考 Token 数',
-            'usage_stats.rpm_30m': 'RPM（近30分钟）',
-            'usage_stats.tpm_30m': 'TPM（近30分钟）',
-            'usage_stats.requests_trend': '请求趋势',
-            'usage_stats.tokens_trend': 'Token 使用趋势',
-            'usage_stats.api_details': 'API 详细统计',
-            'usage_stats.by_hour': '按小时',
-            'usage_stats.by_day': '按天',
-            'usage_stats.refresh': '刷新',
-            'usage_stats.chart_line_label_1': '曲线 1',
-            'usage_stats.chart_line_label_2': '曲线 2',
-            'usage_stats.chart_line_label_3': '曲线 3',
-            'usage_stats.chart_line_label_4': '曲线 4',
-            'usage_stats.chart_line_label_5': '曲线 5',
-            'usage_stats.chart_line_label_6': '曲线 6',
-            'usage_stats.chart_line_label_7': '曲线 7',
-            'usage_stats.chart_line_label_8': '曲线 8',
-            'usage_stats.chart_line_label_9': '曲线 9',
-            'usage_stats.chart_line_hidden': '不显示',
-            'usage_stats.chart_line_actions_label': '曲线数量',
-            'usage_stats.chart_line_add': '增加曲线',
-            'usage_stats.chart_line_all': '全部',
-            'usage_stats.chart_line_delete': '删除曲线',
-            'usage_stats.chart_line_hint': '最多同时显示 9 条模型曲线',
-            'usage_stats.no_data': '暂无数据',
-            'usage_stats.loading_error': '加载失败',
-            'usage_stats.api_endpoint': 'API端点',
-            'usage_stats.requests_count': '请求次数',
-            'usage_stats.tokens_count': 'Token数量',
-            'usage_stats.models': '模型统计',
-            'usage_stats.success_rate': '成功率',
-            'usage_stats.total_cost': '总花费',
-            'usage_stats.total_cost_hint': '基于已设置的模型单价',
-            'usage_stats.model_price_title': '模型价格',
-            'usage_stats.model_price_reset': '清除价格',
-            'usage_stats.model_price_model_label': '选择模型',
-            'usage_stats.model_price_select_placeholder': '选择模型',
-            'usage_stats.model_price_select_hint': '模型列表来自使用统计明细',
-            'usage_stats.model_price_prompt': '提示价格 ($/1M tokens)',
-            'usage_stats.model_price_completion': '补全价格 ($/1M tokens)',
-            'usage_stats.model_price_save': '保存价格',
-            'usage_stats.model_price_empty': '暂未设置任何模型价格',
-            'usage_stats.model_price_model': '模型',
-            'usage_stats.model_price_saved': '模型价格已保存',
-            'usage_stats.model_price_model_required': '请选择要设置价格的模型',
-            'usage_stats.cost_trend': '花费统计',
-            'usage_stats.cost_axis_label': '花费 ($)',
-            'usage_stats.cost_need_price': '请先设置模型价格',
-            'usage_stats.cost_need_usage': '暂无使用数据，无法计算花费',
-            'usage_stats.cost_no_data': '没有可计算的花费数据',
-            'stats.success': '成功',
-            'stats.failure': '失败',
-
-            // 日志查看
-            'logs.title': '日志查看',
-            'logs.refresh_button': '刷新日志',
-            'logs.clear_button': '清空日志',
-            'logs.download_button': '下载日志',
-            'logs.error_log_button': '选择错误日志',
-            'logs.error_logs_modal_title': '错误请求日志',
-            'logs.error_logs_description': '请选择要下载的错误请求日志文件（仅在关闭请求日志时生成）。',
-            'logs.error_logs_empty': '暂无错误请求日志文件',
-            'logs.error_logs_load_error': '加载错误日志列表失败',
-            'logs.error_logs_size': '大小',
-            'logs.error_logs_modified': '最后修改',
-            'logs.error_logs_download': '下载',
-            'logs.error_log_download_success': '错误日志下载成功',
-            'logs.empty_title': '暂无日志记录',
-            'logs.empty_desc': '当启用"日志记录到文件"功能后，日志将显示在这里',
-            'logs.log_content': '日志内容',
-            'logs.loading': '正在加载日志...',
-            'logs.load_error': '加载日志失败',
-            'logs.clear_confirm': '确定要清空所有日志吗？此操作不可恢复！',
-            'logs.clear_success': '日志已清空',
-            'logs.download_success': '日志下载成功',
-            'logs.auto_refresh': '自动刷新',
-            'logs.auto_refresh_enabled': '自动刷新已开启',
-            'logs.auto_refresh_disabled': '自动刷新已关闭',
-            'logs.search_placeholder': '搜索日志内容或关键字',
-            'logs.search_empty_title': '未找到匹配的日志',
-            'logs.search_empty_desc': '尝试更换关键字或清空搜索条件。',
-            'logs.lines': '行',
-            'logs.removed': '已删除',
-            'logs.upgrade_required_title': '需要升级 CLI Proxy API',
-            'logs.upgrade_required_desc': '当前服务器版本不支持日志查看功能，请升级到最新版本的 CLI Proxy API 以使用此功能。',
-
-            // 配置管理
-            'config_management.title': '配置管理',
-            'config_management.editor_title': '配置文件',
-            'config_management.reload': '重新加载',
-            'config_management.save': '保存',
-            'config_management.description': '查看并编辑服务器上的 config.yaml 配置文件。保存前请确认语法正确。',
-            'config_management.status_idle': '等待操作',
-            'config_management.status_loading': '加载配置中...',
-            'config_management.status_loaded': '配置已加载',
-            'config_management.status_dirty': '有未保存的更改',
-            'config_management.status_disconnected': '请先连接服务器以加载配置',
-            'config_management.status_load_failed': '加载失败',
-            'config_management.status_saving': '正在保存配置...',
-            'config_management.status_saved': '配置保存完成',
-            'config_management.status_save_failed': '保存失败',
-            'config_management.save_success': '配置已保存',
-            'config_management.error_yaml_not_supported': '服务器未返回 YAML 格式，请确认 /config.yaml 接口可用',
-            'config_management.editor_placeholder': 'key: value',
-
-            // 系统信息
-            'system_info.title': '管理中心信息',
-            'system_info.connection_status_title': '连接状态',
-            'system_info.api_status_label': 'API 状态:',
-            'system_info.config_status_label': '配置状态:',
-            'system_info.last_update_label': '最后更新:',
-            'system_info.cache_data': '缓存数据',
-            'system_info.real_time_data': '实时数据',
-            'system_info.not_loaded': '未加载',
-            'system_info.seconds_ago': '秒前',
-            'system_info.models_title': '可用模型列表',
-            'system_info.models_desc': '展示 /v1/models 返回的模型，并自动使用服务器保存的 API Key 进行鉴权。',
-            'system_info.models_loading': '正在加载可用模型...',
-            'system_info.models_empty': '未从 /v1/models 获取到模型数据',
-            'system_info.models_error': '获取模型列表失败',
-            'system_info.models_count': '可用模型 {count} 个',
-            'system_info.version_check_title': '版本检查',
-            'system_info.version_check_desc': '调用 /latest-version 接口比对服务器版本，提示是否有可用更新。',
-            'system_info.version_current_label': '当前版本',
-            'system_info.version_latest_label': '最新版本',
-            'system_info.version_check_button': '检查更新',
-            'system_info.version_check_idle': '点击检查更新',
-            'system_info.version_checking': '正在检查最新版本...',
-            'system_info.version_update_available': '有新版本可用：{version}',
-            'system_info.version_is_latest': '当前已是最新版本',
-            'system_info.version_check_error': '检查更新失败',
-            'system_info.version_current_missing': '未获取到服务器版本号，暂无法比对',
-            'system_info.version_unknown': '未知',
-
-            // 通知消息
-            'notification.debug_updated': '调试设置已更新',
-            'notification.proxy_updated': '代理设置已更新',
-            'notification.proxy_cleared': '代理设置已清空',
-            'notification.retry_updated': '重试设置已更新',
-            'notification.quota_switch_project_updated': '项目切换设置已更新',
-            'notification.quota_switch_preview_updated': '预览模型切换设置已更新',
-            'notification.usage_statistics_updated': '使用统计设置已更新',
-            'notification.logging_to_file_updated': '日志记录设置已更新',
-            'notification.request_log_updated': '请求日志设置已更新',
-            'notification.ws_auth_updated': 'WebSocket 鉴权设置已更新',
-            'notification.api_key_added': 'API密钥添加成功',
-            'notification.api_key_updated': 'API密钥更新成功',
-            'notification.api_key_deleted': 'API密钥删除成功',
-            'notification.gemini_key_added': 'Gemini密钥添加成功',
-            'notification.gemini_key_updated': 'Gemini密钥更新成功',
-            'notification.gemini_key_deleted': 'Gemini密钥删除成功',
-            'notification.gemini_multi_input_required': '请先输入至少一个Gemini密钥',
-            'notification.gemini_multi_failed': 'Gemini密钥批量添加失败',
-            'notification.gemini_multi_summary': 'Gemini批量添加完成：成功 {success}，跳过 {skipped}，失败 {failed}',
-            'notification.codex_config_added': 'Codex配置添加成功',
-            'notification.codex_config_updated': 'Codex配置更新成功',
-            'notification.codex_config_deleted': 'Codex配置删除成功',
-            'notification.codex_base_url_required': '请填写Codex Base URL',
-            'notification.claude_config_added': 'Claude配置添加成功',
-            'notification.claude_config_updated': 'Claude配置更新成功',
-            'notification.claude_config_deleted': 'Claude配置删除成功',
-            'notification.field_required': '必填字段不能为空',
-            'notification.openai_provider_required': '请填写提供商名称和Base URL',
-            'notification.openai_provider_added': 'OpenAI提供商添加成功',
-            'notification.openai_provider_updated': 'OpenAI提供商更新成功',
-            'notification.openai_provider_deleted': 'OpenAI提供商删除成功',
-            'notification.openai_model_name_required': '请填写模型名称',
-            'notification.openai_test_url_required': '请先填写有效的 Base URL 以进行测试',
-            'notification.openai_test_key_required': '请至少填写一个 API 密钥以进行测试',
-            'notification.openai_test_model_required': '请选择或输入要测试的模型',
-            'notification.data_refreshed': '数据刷新成功',
-            'notification.connection_required': '请先建立连接',
-            'notification.refresh_failed': '刷新失败',
-            'notification.update_failed': '更新失败',
-            'notification.add_failed': '添加失败',
-            'notification.delete_failed': '删除失败',
-            'notification.upload_failed': '上传失败',
-            'notification.download_failed': '下载失败',
-            'notification.login_failed': '登录失败',
-            'notification.please_enter': '请输入',
-            'notification.please_fill': '请填写',
-            'notification.provider_name_url': '提供商名称和Base URL',
-            'notification.api_key': 'API密钥',
-            'notification.gemini_api_key': 'Gemini API密钥',
-            'notification.codex_api_key': 'Codex API密钥',
-            'notification.claude_api_key': 'Claude API密钥',
-            'notification.link_copied': '链接已复制到剪贴板',
-
-            // 语言切换
-            'language.switch': '语言',
-            'language.chinese': '中文',
-            'language.english': 'English',
-
-            // 主题切换
-            'theme.switch': '主题',
-            'theme.light': '亮色',
-            'theme.dark': '暗色',
-            'theme.switch_to_light': '切换到亮色模式',
-            'theme.switch_to_dark': '切换到暗色模式',
-            'theme.auto': '跟随系统',
-
-            // 侧边栏
-            'sidebar.toggle_expand': '展开侧边栏',
-            'sidebar.toggle_collapse': '收起侧边栏',
-
-            // 页脚
-            'footer.api_version': 'CLI Proxy API 版本',
-            'footer.build_date': '构建时间',
-            'footer.version': '管理中心版本',
-            'footer.author': '作者'
-        },
-
-        'en-US': {
-            // Common
-            'common.login': 'Login',
-            'common.logout': 'Logout',
-            'common.cancel': 'Cancel',
-            'common.confirm': 'Confirm',
-            'common.save': 'Save',
-            'common.delete': 'Delete',
-            'common.edit': 'Edit',
-            'common.add': 'Add',
-            'common.update': 'Update',
-            'common.refresh': 'Refresh',
-            'common.close': 'Close',
-            'common.success': 'Success',
-            'common.error': 'Error',
-            'common.info': 'Info',
-            'common.warning': 'Warning',
-            'common.loading': 'Loading...',
-            'common.connecting': 'Connecting...',
-            'common.connected': 'Connected',
-            'common.disconnected': 'Disconnected',
-            'common.connecting_status': 'Connecting',
-            'common.connected_status': 'Connected',
-            'common.disconnected_status': 'Disconnected',
-            'common.yes': 'Yes',
-            'common.no': 'No',
-            'common.optional': 'Optional',
-            'common.required': 'Required',
-            'common.api_key': 'Key',
-            'common.base_url': 'Address',
-            'common.proxy_url': 'Proxy',
-            'common.alias': 'Alias',
-            'common.failure': 'Failure',
-            'common.unknown_error': 'Unknown error',
-            'common.copy': 'Copy',
-            'common.custom_headers_label': 'Custom Headers',
-            'common.custom_headers_hint': 'Optional HTTP headers to send with the request. Leave blank to remove.',
-            'common.custom_headers_add': 'Add Header',
-            'common.custom_headers_key_placeholder': 'Header name, e.g. X-Custom-Header',
-            'common.custom_headers_value_placeholder': 'Header value',
-            'common.model_name_placeholder': 'Model name, e.g. claude-3-5-sonnet-20241022',
-            'common.model_alias_placeholder': 'Model alias (optional)',
-
-            // Page titles
-            'title.main': 'CLI Proxy API Management Center',
-            'title.login': 'CLI Proxy API Management Center',
-            'title.abbr': 'CPAMC',
-
-            // Auto login
-            'auto_login.title': 'Auto Login in Progress...',
-            'auto_login.message': 'Attempting to connect to server using locally saved connection information',
-
-            // Login page
-            'login.subtitle': 'Please enter connection information to access the management interface',
-            'login.connection_title': 'Connection Address',
-            'login.connection_current': 'Current URL',
-            'login.connection_auto_hint': 'The system will automatically use the current URL for connection',
-            'login.custom_connection_label': 'Custom Connection URL:',
-            'login.custom_connection_placeholder': 'Eg: https://example.com:8317',
-            'login.custom_connection_hint': 'By default the current URL is used. Override it here if needed.',
-            'login.use_current_address': 'Use Current URL',
-            'login.management_key_label': 'Management Key:',
-            'login.management_key_placeholder': 'Enter the management key',
-            'login.connect_button': 'Connect',
-            'login.submit_button': 'Login',
-            'login.submitting': 'Connecting...',
-            'login.error_title': 'Login Failed',
-            'login.error_required': 'Please fill in complete connection information',
-            'login.error_invalid': 'Connection failed, please check address and key',
-
-            // Header navigation
-            'header.check_connection': 'Check Connection',
-            'header.refresh_all': 'Refresh All',
-            'header.logout': 'Logout',
-
-            // Connection info
-            'connection.title': 'Connection Information',
-            'connection.server_address': 'Server Address:',
-            'connection.management_key': 'Management Key:',
-            'connection.status': 'Connection Status:',
-
-            // Sidebar navigation
-            'nav.basic_settings': 'Basic Settings',
-            'nav.api_keys': 'API Keys',
-            'nav.ai_providers': 'AI Providers',
-            'nav.auth_files': 'Auth Files',
-            'nav.usage_stats': 'Usage Statistics',
-            'nav.config_management': 'Config Management',
-            'nav.logs': 'Logs Viewer',
-            'nav.system_info': 'Management Center Info',
-
-            // Basic settings
-            'basic_settings.title': 'Basic Settings',
-            'basic_settings.debug_title': 'Debug Mode',
-            'basic_settings.debug_enable': 'Enable Debug Mode',
-            'basic_settings.proxy_title': 'Proxy Settings',
-            'basic_settings.proxy_url_label': 'Proxy URL:',
-            'basic_settings.proxy_url_placeholder': 'e.g.: socks5://user:pass@127.0.0.1:1080/',
-            'basic_settings.proxy_update': 'Update',
-            'basic_settings.proxy_clear': 'Clear',
-            'basic_settings.retry_title': 'Request Retry',
-            'basic_settings.retry_count_label': 'Retry Count:',
-            'basic_settings.retry_update': 'Update',
-            'basic_settings.quota_title': 'Quota Exceeded Behavior',
-            'basic_settings.quota_switch_project': 'Auto Switch Project',
-            'basic_settings.quota_switch_preview': 'Switch to Preview Model',
-            'basic_settings.usage_statistics_title': 'Usage Statistics',
-            'basic_settings.usage_statistics_enable': 'Enable usage statistics',
-            'basic_settings.logging_title': 'Logging',
-            'basic_settings.logging_to_file_enable': 'Enable logging to file',
-            'basic_settings.request_log_enable': 'Enable request logging',
-            'basic_settings.ws_auth_title': 'WebSocket Authentication',
-            'basic_settings.ws_auth_enable': 'Require auth for /ws/*',
-
-            // API Keys management
-            'api_keys.title': 'API Keys Management',
-            'api_keys.proxy_auth_title': 'Proxy Service Authentication Keys',
-            'api_keys.add_button': 'Add Key',
-            'api_keys.empty_title': 'No API Keys',
-            'api_keys.empty_desc': 'Click the button above to add the first key',
-            'api_keys.item_title': 'API Key',
-            'api_keys.add_modal_title': 'Add API Key',
-            'api_keys.add_modal_key_label': 'API Key:',
-            'api_keys.add_modal_key_placeholder': 'Please enter API key',
-            'api_keys.edit_modal_title': 'Edit API Key',
-            'api_keys.edit_modal_key_label': 'API Key:',
-            'api_keys.delete_confirm': 'Are you sure you want to delete this API key?',
-
-            // AI Providers
-            'ai_providers.title': 'AI Providers Configuration',
-            'ai_providers.gemini_title': 'Gemini API Keys',
-            'ai_providers.gemini_add_button': 'Add Key',
-            'ai_providers.gemini_empty_title': 'No Gemini Keys',
-            'ai_providers.gemini_empty_desc': 'Click the button above to add the first key',
-            'ai_providers.gemini_item_title': 'Gemini Key',
-            'ai_providers.gemini_add_modal_title': 'Add Gemini API Key',
-            'ai_providers.gemini_add_modal_key_label': 'API Keys:',
-            'ai_providers.gemini_add_modal_key_placeholder': 'Enter Gemini API key',
-            'ai_providers.gemini_add_modal_key_hint': 'Add keys one by one and optionally specify a Base URL.',
-            'ai_providers.gemini_keys_add_btn': 'Add Key',
-            'ai_providers.gemini_base_url_placeholder': 'Optional Base URL, e.g. https://generativelanguage.googleapis.com',
-            'ai_providers.gemini_edit_modal_title': 'Edit Gemini API Key',
-            'ai_providers.gemini_edit_modal_key_label': 'API Key:',
-            'ai_providers.gemini_delete_confirm': 'Are you sure you want to delete this Gemini key?',
-            'ai_providers.excluded_models_label': 'Excluded models (optional):',
-            'ai_providers.excluded_models_placeholder': 'Comma or newline separated, e.g. gemini-1.5-pro, gemini-1.5-flash',
-            'ai_providers.excluded_models_hint': 'Leave empty to allow all models; values are trimmed and deduplicated automatically.',
-            'ai_providers.excluded_models_count': 'Excluding {count} models',
-
-            'ai_providers.codex_title': 'Codex API Configuration',
-            'ai_providers.codex_add_button': 'Add Configuration',
-            'ai_providers.codex_empty_title': 'No Codex Configuration',
-            'ai_providers.codex_empty_desc': 'Click the button above to add the first configuration',
-            'ai_providers.codex_item_title': 'Codex Configuration',
-            'ai_providers.codex_add_modal_title': 'Add Codex API Configuration',
-            'ai_providers.codex_add_modal_key_label': 'API Key:',
-            'ai_providers.codex_add_modal_key_placeholder': 'Please enter Codex API key',
-            'ai_providers.codex_add_modal_url_label': 'Base URL (Required):',
-            'ai_providers.codex_add_modal_url_placeholder': 'e.g.: https://api.example.com',
-            'ai_providers.codex_add_modal_proxy_label': 'Proxy URL (Optional):',
-            'ai_providers.codex_add_modal_proxy_placeholder': 'e.g.: socks5://proxy.example.com:1080',
-            'ai_providers.codex_edit_modal_title': 'Edit Codex API Configuration',
-            'ai_providers.codex_edit_modal_key_label': 'API Key:',
-            'ai_providers.codex_edit_modal_url_label': 'Base URL (Required):',
-            'ai_providers.codex_edit_modal_proxy_label': 'Proxy URL (Optional):',
-            'ai_providers.codex_delete_confirm': 'Are you sure you want to delete this Codex configuration?',
-
-            'ai_providers.claude_title': 'Claude API Configuration',
-            'ai_providers.claude_add_button': 'Add Configuration',
-            'ai_providers.claude_empty_title': 'No Claude Configuration',
-            'ai_providers.claude_empty_desc': 'Click the button above to add the first configuration',
-            'ai_providers.claude_item_title': 'Claude Configuration',
-            'ai_providers.claude_add_modal_title': 'Add Claude API Configuration',
-            'ai_providers.claude_add_modal_key_label': 'API Key:',
-            'ai_providers.claude_add_modal_key_placeholder': 'Please enter Claude API key',
-            'ai_providers.claude_add_modal_url_label': 'Base URL (Optional):',
-            'ai_providers.claude_add_modal_url_placeholder': 'e.g.: https://api.anthropic.com',
-            'ai_providers.claude_add_modal_proxy_label': 'Proxy URL (Optional):',
-            'ai_providers.claude_add_modal_proxy_placeholder': 'e.g.: socks5://proxy.example.com:1080',
-            'ai_providers.claude_edit_modal_title': 'Edit Claude API Configuration',
-            'ai_providers.claude_edit_modal_key_label': 'API Key:',
-            'ai_providers.claude_edit_modal_url_label': 'Base URL (Optional):',
-            'ai_providers.claude_edit_modal_proxy_label': 'Proxy URL (Optional):',
-            'ai_providers.claude_delete_confirm': 'Are you sure you want to delete this Claude configuration?',
-            'ai_providers.claude_models_label': 'Custom Models (Optional):',
-            'ai_providers.claude_models_hint': 'Leave empty to allow all models, or add name[, alias] entries to limit/alias them.',
-            'ai_providers.claude_models_add_btn': 'Add Model',
-            'ai_providers.claude_models_count': 'Models Count',
-
-            'ai_providers.openai_title': 'OpenAI Compatible Providers',
-            'ai_providers.openai_add_button': 'Add Provider',
-            'ai_providers.openai_empty_title': 'No OpenAI Compatible Providers',
-            'ai_providers.openai_empty_desc': 'Click the button above to add the first provider',
-            'ai_providers.openai_add_modal_title': 'Add OpenAI Compatible Provider',
-            'ai_providers.openai_add_modal_name_label': 'Provider Name:',
-            'ai_providers.openai_add_modal_name_placeholder': 'e.g.: openrouter',
-            'ai_providers.openai_add_modal_url_label': 'Base URL:',
-            'ai_providers.openai_add_modal_url_placeholder': 'e.g.: https://openrouter.ai/api/v1',
-            'ai_providers.openai_add_modal_keys_label': 'API Keys',
-            'ai_providers.openai_edit_modal_keys_label': 'API Keys',
-            'ai_providers.openai_keys_hint': 'Add each key separately with an optional proxy URL to keep things organized.',
-            'ai_providers.openai_keys_add_btn': 'Add Key',
-            'ai_providers.openai_key_placeholder': 'sk-... key',
-            'ai_providers.openai_proxy_placeholder': 'Optional proxy URL (e.g. socks5://...)',
-            'ai_providers.openai_add_modal_models_label': 'Model List (name[, alias] one per line):',
-            'ai_providers.openai_models_hint': 'Example: gpt-4o-mini or moonshotai/kimi-k2:free, kimi-k2',
-            'ai_providers.openai_model_name_placeholder': 'Model name, e.g. moonshotai/kimi-k2:free',
-            'ai_providers.openai_model_alias_placeholder': 'Model alias (optional)',
-            'ai_providers.openai_models_add_btn': 'Add Model',
-            'ai_providers.openai_models_fetch_button': 'Fetch via /v1/models',
-            'ai_providers.openai_models_fetch_title': 'Pick Models from /v1/models',
-            'ai_providers.openai_models_fetch_hint': 'Call the /v1/models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.',
-            'ai_providers.openai_models_fetch_url_label': 'Request URL',
-            'ai_providers.openai_models_fetch_refresh': 'Refresh',
-            'ai_providers.openai_models_fetch_loading': 'Fetching models from /v1/models...',
-            'ai_providers.openai_models_fetch_empty': 'No models returned. Please check the endpoint or auth.',
-            'ai_providers.openai_models_fetch_error': 'Failed to fetch models',
-            'ai_providers.openai_models_fetch_back': 'Back to edit',
-            'ai_providers.openai_models_fetch_apply': 'Add selected models',
-            'ai_providers.openai_models_search_label': 'Search models',
-            'ai_providers.openai_models_search_placeholder': 'Filter by name, alias, or description',
-            'ai_providers.openai_models_search_empty': 'No models match your search. Try a different keyword.',
-            'ai_providers.openai_models_fetch_invalid_url': 'Please enter a valid Base URL first',
-            'ai_providers.openai_models_fetch_added': '{count} new models added',
-            'ai_providers.openai_edit_modal_title': 'Edit OpenAI Compatible Provider',
-            'ai_providers.openai_edit_modal_name_label': 'Provider Name:',
-            'ai_providers.openai_edit_modal_url_label': 'Base URL:',
-            'ai_providers.openai_edit_modal_keys_label': 'API Keys',
-            'ai_providers.openai_edit_modal_models_label': 'Model List (name[, alias] one per line):',
-            'ai_providers.openai_delete_confirm': 'Are you sure you want to delete this OpenAI provider?',
-            'ai_providers.openai_keys_count': 'Keys Count',
-            'ai_providers.openai_models_count': 'Models Count',
-            'ai_providers.openai_test_title': 'Connection Test',
-            'ai_providers.openai_test_hint': 'Send a /v1/chat/completions request with the current settings to verify availability.',
-            'ai_providers.openai_test_model_placeholder': 'Model to test',
-            'ai_providers.openai_test_action': 'Run Test',
-            'ai_providers.openai_test_running': 'Sending test request...',
-            'ai_providers.openai_test_success': 'Test succeeded. The model responded.',
-            'ai_providers.openai_test_failed': 'Test failed',
-            'ai_providers.openai_test_select_placeholder': 'Choose from current models',
-            'ai_providers.openai_test_select_empty': 'No models configured, enter manually',
-
-
-            // Auth files management
-            'auth_files.title': 'Auth Files Management',
-            'auth_files.title_section': 'Auth Files',
-            'auth_files.description': 'Manage all CLI Proxy JSON auth files here (e.g. Qwen, Gemini, Vertex). Uploading a credential immediately enables the corresponding AI integration.',
-            'auth_files.upload_button': 'Upload File',
-            'auth_files.delete_all_button': 'Delete All',
-            'auth_files.empty_title': 'No Auth Files',
-            'auth_files.empty_desc': 'Click the button above to upload the first file',
-            'auth_files.search_empty_title': 'No matching files',
-            'auth_files.search_empty_desc': 'Try changing the filters or clearing the search box.',
-            'auth_files.file_size': 'Size',
-            'auth_files.file_modified': 'Modified',
-            'auth_files.download_button': 'Download',
-            'auth_files.delete_button': 'Delete',
-            'auth_files.delete_confirm': 'Are you sure you want to delete file',
-            'auth_files.delete_all_confirm': 'Are you sure you want to delete all auth files? This operation cannot be undone!',
-            'auth_files.delete_filtered_confirm': 'Are you sure you want to delete all {type} auth files? This operation cannot be undone!',
-            'auth_files.upload_error_json': 'Only JSON files are allowed',
-            'auth_files.upload_success': 'File uploaded successfully',
-            'auth_files.download_success': 'File downloaded successfully',
-            'auth_files.delete_success': 'File deleted successfully',
-            'auth_files.delete_all_success': 'Successfully deleted',
-            'auth_files.delete_filtered_success': 'Deleted {count} {type} auth files successfully',
-            'auth_files.delete_filtered_partial': '{type} auth files deletion finished: {success} succeeded, {failed} failed',
-            'auth_files.delete_filtered_none': 'No deletable auth files under the current filter ({type})',
-            'auth_files.files_count': 'files',
-            'auth_files.pagination_prev': 'Previous',
-            'auth_files.pagination_next': 'Next',
-            'auth_files.pagination_info': 'Page {current} / {total} · {count} files',
-            'auth_files.search_label': 'Search configs',
-            'auth_files.search_placeholder': 'Filter by name, type, or provider',
-            'auth_files.page_size_label': 'Per page',
-            'auth_files.page_size_unit': 'items',
-            'auth_files.filter_all': 'All',
-            'auth_files.filter_qwen': 'Qwen',
-            'auth_files.filter_gemini': 'Gemini',
-            'auth_files.filter_gemini-cli': 'GeminiCLI',
-            'auth_files.filter_aistudio': 'AIStudio',
-            'auth_files.filter_claude': 'Claude',
-            'auth_files.filter_codex': 'Codex',
-            'auth_files.filter_antigravity': 'Antigravity',
-            'auth_files.filter_iflow': 'iFlow',
-            'auth_files.filter_vertex': 'Vertex',
-            'auth_files.filter_empty': 'Empty',
-            'auth_files.filter_unknown': 'Other',
-            'auth_files.type_qwen': 'Qwen',
-            'auth_files.type_gemini': 'Gemini',
-            'auth_files.type_gemini-cli': 'GeminiCLI',
-            'auth_files.type_aistudio': 'AIStudio',
-            'auth_files.type_claude': 'Claude',
-            'auth_files.type_codex': 'Codex',
-            'auth_files.type_antigravity': 'Antigravity',
-            'auth_files.type_iflow': 'iFlow',
-            'auth_files.type_vertex': 'Vertex',
-            'auth_files.type_empty': 'Empty',
-            'auth_files.type_unknown': 'Other',
-            'vertex_import.title': 'Vertex AI Credential Import',
-            'vertex_import.description': 'Upload a Google service account JSON to store it as auth-dir/vertex-<project>.json using the same rules as the CLI vertex-import helper.',
-            'vertex_import.location_label': 'Region (optional)',
-            'vertex_import.location_placeholder': 'us-central1',
-            'vertex_import.location_hint': 'Leave empty to use the default region us-central1.',
-            'vertex_import.file_label': 'Service account key JSON',
-            'vertex_import.file_hint': 'Only Google Cloud service account key JSON files are accepted.',
-            'vertex_import.file_placeholder': 'No file selected',
-            'vertex_import.choose_file': 'Choose File',
-            'vertex_import.import_button': 'Import Vertex Credential',
-            'vertex_import.file_required': 'Select a .json credential file first',
-            'vertex_import.success': 'Vertex credential imported successfully',
-            'vertex_import.result_title': 'Credential saved',
-            'vertex_import.result_project': 'Project ID',
-            'vertex_import.result_email': 'Service account',
-            'vertex_import.result_location': 'Region',
-            'vertex_import.result_file': 'Persisted file',
-
-            // OAuth excluded models
-            'oauth_excluded.title': 'OAuth Excluded Models',
-            'oauth_excluded.description': 'Per-provider exclusions are shown as cards; click edit to adjust. Wildcards * are supported and the scope follows the auth file filter.',
-            'oauth_excluded.add': 'Add Exclusion',
-            'oauth_excluded.add_title': 'Add provider exclusion',
-            'oauth_excluded.edit_title': 'Edit exclusions for {provider}',
-            'oauth_excluded.refresh': 'Refresh',
-            'oauth_excluded.refreshing': 'Refreshing...',
-            'oauth_excluded.provider_label': 'Provider',
-            'oauth_excluded.provider_auto': 'Follow current filter',
-            'oauth_excluded.provider_placeholder': 'e.g. gemini-cli',
-            'oauth_excluded.provider_hint': 'Defaults to the current filter; pick an existing provider or type a new name.',
-            'oauth_excluded.models_label': 'Models to exclude',
-            'oauth_excluded.models_placeholder': 'gpt-4.1-mini\n*-preview',
-            'oauth_excluded.models_hint': 'Separate by commas or new lines; saving an empty list removes that provider. * wildcards are supported.',
-            'oauth_excluded.save': 'Save/Update',
-            'oauth_excluded.saving': 'Saving...',
-            'oauth_excluded.save_success': 'Excluded models updated',
-            'oauth_excluded.save_failed': 'Failed to update excluded models',
-            'oauth_excluded.delete': 'Delete Provider',
-            'oauth_excluded.delete_confirm': 'Delete the exclusion list for {provider}?',
-            'oauth_excluded.delete_success': 'Exclusion list removed',
-            'oauth_excluded.delete_failed': 'Failed to delete exclusion list',
-            'oauth_excluded.deleting': 'Deleting...',
-            'oauth_excluded.no_models': 'No excluded models',
-            'oauth_excluded.model_count': '{count} models excluded',
-            'oauth_excluded.list_empty_all': 'No exclusions yet—use “Add Exclusion” to create one.',
-            'oauth_excluded.list_empty_filtered': 'No exclusions in this scope; click “Add Exclusion” to add.',
-            'oauth_excluded.disconnected': 'Connect to the server to view exclusions',
-            'oauth_excluded.load_failed': 'Failed to load exclusion list',
-            'oauth_excluded.provider_required': 'Please enter a provider first',
-            'oauth_excluded.scope_all': 'Scope: All providers',
-            'oauth_excluded.scope_provider': 'Scope: {provider}',
-
-            // Codex OAuth
-            'auth_login.codex_oauth_title': 'Codex OAuth',
-            'auth_login.codex_oauth_button': 'Start Codex Login',
-            'auth_login.codex_oauth_hint': 'Login to Codex service through OAuth flow, automatically obtain and save authentication files.',
-            'auth_login.codex_oauth_url_label': 'Authorization URL:',
-            'auth_login.codex_open_link': 'Open Link',
-            'auth_login.codex_copy_link': 'Copy Link',
-            'auth_login.codex_oauth_status_waiting': 'Waiting for authentication...',
-            'auth_login.codex_oauth_status_success': 'Authentication successful!',
-            'auth_login.codex_oauth_status_error': 'Authentication failed:',
-            'auth_login.codex_oauth_start_error': 'Failed to start Codex OAuth:',
-            'auth_login.codex_oauth_polling_error': 'Failed to check authentication status:',
-
-            // Anthropic OAuth
-            'auth_login.anthropic_oauth_title': 'Anthropic OAuth',
-            'auth_login.anthropic_oauth_button': 'Start Anthropic Login',
-            'auth_login.anthropic_oauth_hint': 'Login to Anthropic (Claude) service through OAuth flow, automatically obtain and save authentication files.',
-            'auth_login.anthropic_oauth_url_label': 'Authorization URL:',
-            'auth_login.anthropic_open_link': 'Open Link',
-            'auth_login.anthropic_copy_link': 'Copy Link',
-            'auth_login.anthropic_oauth_status_waiting': 'Waiting for authentication...',
-            'auth_login.anthropic_oauth_status_success': 'Authentication successful!',
-            'auth_login.anthropic_oauth_status_error': 'Authentication failed:',
-            'auth_login.anthropic_oauth_start_error': 'Failed to start Anthropic OAuth:',
-            'auth_login.anthropic_oauth_polling_error': 'Failed to check authentication status:',
-
-            // Antigravity OAuth
-            'auth_login.antigravity_oauth_title': 'Antigravity OAuth',
-            'auth_login.antigravity_oauth_button': 'Start Antigravity Login',
-            'auth_login.antigravity_oauth_hint': 'Login to Antigravity service (Google account) through OAuth flow, automatically obtain and save authentication files.',
-            'auth_login.antigravity_oauth_url_label': 'Authorization URL:',
-            'auth_login.antigravity_open_link': 'Open Link',
-            'auth_login.antigravity_copy_link': 'Copy Link',
-            'auth_login.antigravity_oauth_status_waiting': 'Waiting for authentication...',
-            'auth_login.antigravity_oauth_status_success': 'Authentication successful!',
-            'auth_login.antigravity_oauth_status_error': 'Authentication failed:',
-            'auth_login.antigravity_oauth_start_error': 'Failed to start Antigravity OAuth:',
-            'auth_login.antigravity_oauth_polling_error': 'Failed to check authentication status:',
-
-            // Gemini CLI OAuth
-            'auth_login.gemini_cli_oauth_title': 'Gemini CLI OAuth',
-            'auth_login.gemini_cli_oauth_button': 'Start Gemini CLI Login',
-            'auth_login.gemini_cli_oauth_hint': 'Login to Google Gemini CLI service through OAuth flow, automatically obtain and save authentication files.',
-            'auth_login.gemini_cli_project_id_label': 'Google Cloud Project ID (Optional):',
-            'auth_login.gemini_cli_project_id_placeholder': 'Enter Google Cloud Project ID (optional)',
-            'auth_login.gemini_cli_project_id_hint': 'If a project ID is specified, authentication information for that project will be used.',
-            'auth_login.gemini_cli_oauth_url_label': 'Authorization URL:',
-            'auth_login.gemini_cli_open_link': 'Open Link',
-            'auth_login.gemini_cli_copy_link': 'Copy Link',
-            'auth_login.gemini_cli_oauth_status_waiting': 'Waiting for authentication...',
-            'auth_login.gemini_cli_oauth_status_success': 'Authentication successful!',
-            'auth_login.gemini_cli_oauth_status_error': 'Authentication failed:',
-            'auth_login.gemini_cli_oauth_start_error': 'Failed to start Gemini CLI OAuth:',
-            'auth_login.gemini_cli_oauth_polling_error': 'Failed to check authentication status:',
-
-            // Qwen OAuth
-            'auth_login.qwen_oauth_title': 'Qwen OAuth',
-            'auth_login.qwen_oauth_button': 'Start Qwen Login',
-            'auth_login.qwen_oauth_hint': 'Login to Qwen service through device authorization flow, automatically obtain and save authentication files.',
-            'auth_login.qwen_oauth_url_label': 'Authorization URL:',
-            'auth_login.qwen_open_link': 'Open Link',
-            'auth_login.qwen_copy_link': 'Copy Link',
-            'auth_login.qwen_oauth_status_waiting': 'Waiting for authentication...',
-            'auth_login.qwen_oauth_status_success': 'Authentication successful!',
-            'auth_login.qwen_oauth_status_error': 'Authentication failed:',
-            'auth_login.qwen_oauth_start_error': 'Failed to start Qwen OAuth:',
-            'auth_login.qwen_oauth_polling_error': 'Failed to check authentication status:',
-            'auth_login.missing_state': 'Unable to retrieve authentication state parameter',
-
-            // iFlow OAuth
-            'auth_login.iflow_oauth_title': 'iFlow OAuth',
-            'auth_login.iflow_oauth_button': 'Start iFlow Login',
-            'auth_login.iflow_oauth_hint': 'Login to iFlow service through OAuth flow, automatically obtain and save authentication files.',
-            'auth_login.iflow_oauth_url_label': 'Authorization URL:',
-            'auth_login.iflow_open_link': 'Open Link',
-            'auth_login.iflow_copy_link': 'Copy Link',
-            'auth_login.iflow_oauth_status_waiting': 'Waiting for authentication...',
-            'auth_login.iflow_oauth_status_success': 'Authentication successful!',
-            'auth_login.iflow_oauth_status_error': 'Authentication failed:',
-            'auth_login.iflow_oauth_start_error': 'Failed to start iFlow OAuth:',
-            'auth_login.iflow_oauth_polling_error': 'Failed to check authentication status:',
-            'auth_login.iflow_cookie_title': 'iFlow Cookie Login',
-            'auth_login.iflow_cookie_label': 'Cookie Value:',
-            'auth_login.iflow_cookie_placeholder': 'Paste browser cookie, e.g. sessionid=...;',
-            'auth_login.iflow_cookie_hint': 'Submit an existing cookie to finish login without opening the authorization link; the credential file will be saved automatically.',
-            'auth_login.iflow_cookie_button': 'Submit Cookie Login',
-            'auth_login.iflow_cookie_status_success': 'Cookie login succeeded and credentials are saved.',
-            'auth_login.iflow_cookie_status_error': 'Cookie login failed:',
-            'auth_login.iflow_cookie_start_error': 'Failed to submit cookie login:',
-            'auth_login.iflow_cookie_required': 'Please provide the Cookie value first.',
-            'auth_login.iflow_cookie_result_title': 'Cookie Login Result',
-            'auth_login.iflow_cookie_result_email': 'Account',
-            'auth_login.iflow_cookie_result_expired': 'Expires At',
-            'auth_login.iflow_cookie_result_path': 'Saved Path',
-            'auth_login.iflow_cookie_result_type': 'Type',
-
-            // Usage Statistics
-            'usage_stats.title': 'Usage Statistics',
-            'usage_stats.total_requests': 'Total Requests',
-            'usage_stats.success_requests': 'Success Requests',
-            'usage_stats.failed_requests': 'Failed Requests',
-            'usage_stats.total_tokens': 'Total Tokens',
-            'usage_stats.cached_tokens': 'Cached Tokens',
-            'usage_stats.reasoning_tokens': 'Reasoning Tokens',
-            'usage_stats.rpm_30m': 'RPM (last 30 min)',
-            'usage_stats.tpm_30m': 'TPM (last 30 min)',
-            'usage_stats.requests_trend': 'Request Trends',
-            'usage_stats.tokens_trend': 'Token Usage Trends',
-            'usage_stats.api_details': 'API Details',
-            'usage_stats.by_hour': 'By Hour',
-            'usage_stats.by_day': 'By Day',
-            'usage_stats.refresh': 'Refresh',
-            'usage_stats.chart_line_label_1': 'Line 1',
-            'usage_stats.chart_line_label_2': 'Line 2',
-            'usage_stats.chart_line_label_3': 'Line 3',
-            'usage_stats.chart_line_label_4': 'Line 4',
-            'usage_stats.chart_line_label_5': 'Line 5',
-            'usage_stats.chart_line_label_6': 'Line 6',
-            'usage_stats.chart_line_label_7': 'Line 7',
-            'usage_stats.chart_line_label_8': 'Line 8',
-            'usage_stats.chart_line_label_9': 'Line 9',
-            'usage_stats.chart_line_hidden': 'Hide',
-            'usage_stats.chart_line_actions_label': 'Lines to display',
-            'usage_stats.chart_line_add': 'Add line',
-            'usage_stats.chart_line_all': 'All',
-            'usage_stats.chart_line_delete': 'Delete line',
-            'usage_stats.chart_line_hint': 'Show up to 9 model lines at once',
-            'usage_stats.no_data': 'No Data Available',
-            'usage_stats.loading_error': 'Loading Failed',
-            'usage_stats.api_endpoint': 'API Endpoint',
-            'usage_stats.requests_count': 'Request Count',
-            'usage_stats.tokens_count': 'Token Count',
-            'usage_stats.models': 'Model Statistics',
-            'usage_stats.success_rate': 'Success Rate',
-            'usage_stats.total_cost': 'Total Cost',
-            'usage_stats.total_cost_hint': 'Based on configured model pricing',
-            'usage_stats.model_price_title': 'Model Pricing',
-            'usage_stats.model_price_reset': 'Clear Prices',
-            'usage_stats.model_price_model_label': 'Model',
-            'usage_stats.model_price_select_placeholder': 'Choose a model',
-            'usage_stats.model_price_select_hint': 'Models come from usage details',
-            'usage_stats.model_price_prompt': 'Prompt price ($/1M tokens)',
-            'usage_stats.model_price_completion': 'Completion price ($/1M tokens)',
-            'usage_stats.model_price_save': 'Save Price',
-            'usage_stats.model_price_empty': 'No model prices set',
-            'usage_stats.model_price_model': 'Model',
-            'usage_stats.model_price_saved': 'Model price saved',
-            'usage_stats.model_price_model_required': 'Please choose a model to set pricing',
-            'usage_stats.cost_trend': 'Cost Overview',
-            'usage_stats.cost_axis_label': 'Cost ($)',
-            'usage_stats.cost_need_price': 'Set a model price to view cost stats',
-            'usage_stats.cost_need_usage': 'No usage data available to calculate cost',
-            'usage_stats.cost_no_data': 'No cost data yet',
-            'stats.success': 'Success',
-            'stats.failure': 'Failure',
-
-            // Logs viewer
-            'logs.title': 'Logs Viewer',
-            'logs.refresh_button': 'Refresh Logs',
-            'logs.clear_button': 'Clear Logs',
-            'logs.download_button': 'Download Logs',
-            'logs.error_log_button': 'Select Error Log',
-            'logs.error_logs_modal_title': 'Error Request Logs',
-            'logs.error_logs_description': 'Pick an error request log file to download (only generated when request logging is off).',
-            'logs.error_logs_empty': 'No error request log files found',
-            'logs.error_logs_load_error': 'Failed to load error log list',
-            'logs.error_logs_size': 'Size',
-            'logs.error_logs_modified': 'Last modified',
-            'logs.error_logs_download': 'Download',
-            'logs.error_log_download_success': 'Error log downloaded successfully',
-            'logs.empty_title': 'No Logs Available',
-            'logs.empty_desc': 'When "Enable logging to file" is enabled, logs will be displayed here',
-            'logs.log_content': 'Log Content',
-            'logs.loading': 'Loading logs...',
-            'logs.load_error': 'Failed to load logs',
-            'logs.clear_confirm': 'Are you sure you want to clear all logs? This action cannot be undone!',
-            'logs.clear_success': 'Logs cleared successfully',
-            'logs.download_success': 'Logs downloaded successfully',
-            'logs.auto_refresh': 'Auto Refresh',
-            'logs.auto_refresh_enabled': 'Auto refresh enabled',
-            'logs.auto_refresh_disabled': 'Auto refresh disabled',
-            'logs.search_placeholder': 'Search logs by content or keyword',
-            'logs.search_empty_title': 'No matching logs found',
-            'logs.search_empty_desc': 'Try a different keyword or clear the search filter.',
-            'logs.lines': 'lines',
-            'logs.removed': 'Removed',
-            'logs.upgrade_required_title': 'Please Upgrade CLI Proxy API',
-            'logs.upgrade_required_desc': 'The current server version does not support the logs viewing feature. Please upgrade to the latest version of CLI Proxy API to use this feature.',
-
-            // Config management
-            'config_management.title': 'Config Management',
-            'config_management.editor_title': 'Configuration File',
-            'config_management.reload': 'Reload',
-            'config_management.save': 'Save',
-            'config_management.description': 'View and edit the server-side config.yaml file. Validate the syntax before saving.',
-            'config_management.status_idle': 'Waiting for action',
-            'config_management.status_loading': 'Loading configuration...',
-            'config_management.status_loaded': 'Configuration loaded',
-            'config_management.status_dirty': 'Unsaved changes',
-            'config_management.status_disconnected': 'Connect to the server to load the configuration',
-            'config_management.status_load_failed': 'Load failed',
-            'config_management.status_saving': 'Saving configuration...',
-            'config_management.status_saved': 'Configuration saved',
-            'config_management.status_save_failed': 'Save failed',
-            'config_management.save_success': 'Configuration saved successfully',
-            'config_management.error_yaml_not_supported': 'Server did not return YAML. Verify the /config.yaml endpoint is available.',
-            'config_management.editor_placeholder': 'key: value',
-
-            // System info
-            'system_info.title': 'Management Center Info',
-            'system_info.connection_status_title': 'Connection Status',
-            'system_info.api_status_label': 'API Status:',
-            'system_info.config_status_label': 'Config Status:',
-            'system_info.last_update_label': 'Last Update:',
-            'system_info.cache_data': 'Cache Data',
-            'system_info.real_time_data': 'Real-time Data',
-            'system_info.not_loaded': 'Not Loaded',
-            'system_info.seconds_ago': 'seconds ago',
-            'system_info.models_title': 'Available Models',
-            'system_info.models_desc': 'Shows the /v1/models response and uses saved API keys for auth automatically.',
-            'system_info.models_loading': 'Loading available models...',
-            'system_info.models_empty': 'No models returned by /v1/models',
-            'system_info.models_error': 'Failed to load model list',
-            'system_info.models_count': '{count} available models',
-            'system_info.version_check_title': 'Update Check',
-            'system_info.version_check_desc': 'Call the /latest-version endpoint to compare with the server version and see if an update is available.',
-            'system_info.version_current_label': 'Current version',
-            'system_info.version_latest_label': 'Latest version',
-            'system_info.version_check_button': 'Check for updates',
-            'system_info.version_check_idle': 'Click to check for updates',
-            'system_info.version_checking': 'Checking for the latest version...',
-            'system_info.version_update_available': 'An update is available: {version}',
-            'system_info.version_is_latest': 'You are on the latest version',
-            'system_info.version_check_error': 'Update check failed',
-            'system_info.version_current_missing': 'Server version is unavailable; cannot compare',
-            'system_info.version_unknown': 'Unknown',
-
-            // Notification messages
-            'notification.debug_updated': 'Debug settings updated',
-            'notification.proxy_updated': 'Proxy settings updated',
-            'notification.proxy_cleared': 'Proxy settings cleared',
-            'notification.retry_updated': 'Retry settings updated',
-            'notification.quota_switch_project_updated': 'Project switch settings updated',
-            'notification.quota_switch_preview_updated': 'Preview model switch settings updated',
-            'notification.usage_statistics_updated': 'Usage statistics settings updated',
-            'notification.logging_to_file_updated': 'Logging settings updated',
-            'notification.request_log_updated': 'Request logging setting updated',
-            'notification.ws_auth_updated': 'WebSocket authentication setting updated',
-            'notification.api_key_added': 'API key added successfully',
-            'notification.api_key_updated': 'API key updated successfully',
-            'notification.api_key_deleted': 'API key deleted successfully',
-            'notification.gemini_key_added': 'Gemini key added successfully',
-            'notification.gemini_key_updated': 'Gemini key updated successfully',
-            'notification.gemini_key_deleted': 'Gemini key deleted successfully',
-            'notification.gemini_multi_input_required': 'Please enter at least one Gemini key',
-            'notification.gemini_multi_failed': 'Gemini bulk add failed',
-            'notification.gemini_multi_summary': 'Gemini bulk add finished: {success} added, {skipped} skipped, {failed} failed',
-            'notification.codex_config_added': 'Codex configuration added successfully',
-            'notification.codex_config_updated': 'Codex configuration updated successfully',
-            'notification.codex_config_deleted': 'Codex configuration deleted successfully',
-            'notification.codex_base_url_required': 'Please enter the Codex Base URL',
-            'notification.claude_config_added': 'Claude configuration added successfully',
-            'notification.claude_config_updated': 'Claude configuration updated successfully',
-            'notification.claude_config_deleted': 'Claude configuration deleted successfully',
-            'notification.field_required': 'Required fields cannot be empty',
-            'notification.openai_provider_required': 'Please fill in provider name and Base URL',
-            'notification.openai_provider_added': 'OpenAI provider added successfully',
-            'notification.openai_provider_updated': 'OpenAI provider updated successfully',
-            'notification.openai_provider_deleted': 'OpenAI provider deleted successfully',
-            'notification.openai_model_name_required': 'Model name is required',
-            'notification.openai_test_url_required': 'Please provide a valid Base URL before testing',
-            'notification.openai_test_key_required': 'Please add at least one API key before testing',
-            'notification.openai_test_model_required': 'Please select or enter a model to test',
-            'notification.data_refreshed': 'Data refreshed successfully',
-            'notification.connection_required': 'Please establish connection first',
-            'notification.refresh_failed': 'Refresh failed',
-            'notification.update_failed': 'Update failed',
-            'notification.add_failed': 'Add failed',
-            'notification.delete_failed': 'Delete failed',
-            'notification.upload_failed': 'Upload failed',
-            'notification.download_failed': 'Download failed',
-            'notification.login_failed': 'Login failed',
-            'notification.please_enter': 'Please enter',
-            'notification.please_fill': 'Please fill',
-            'notification.provider_name_url': 'provider name and Base URL',
-            'notification.api_key': 'API key',
-            'notification.gemini_api_key': 'Gemini API key',
-            'notification.codex_api_key': 'Codex API key',
-            'notification.claude_api_key': 'Claude API key',
-            'notification.link_copied': 'Link copied to clipboard',
-
-            // Language switch
-            'language.switch': 'Language',
-            'language.chinese': '中文',
-            'language.english': 'English',
-
-            // Theme switch
-            'theme.switch': 'Theme',
-            'theme.light': 'Light',
-            'theme.dark': 'Dark',
-            'theme.switch_to_light': 'Switch to light mode',
-            'theme.switch_to_dark': 'Switch to dark mode',
-            'theme.auto': 'Follow system',
-
-            // Sidebar
-            'sidebar.toggle_expand': 'Expand sidebar',
-            'sidebar.toggle_collapse': 'Collapse sidebar',
-
-            // Footer
-            'footer.api_version': 'CLI Proxy API Version',
-            'footer.build_date': 'Build Time',
-            'footer.version': 'Management UI Version',
-            'footer.author': 'Author'
-        }
-    },
-
-    // 获取翻译文本
-    t(key, params = {}) {
-        const translation = this.translations[this.currentLanguage]?.[key] ||
-            this.translations[this.fallbackLanguage]?.[key] ||
-            key;
-
-        // 简单的参数替换
-        return translation.replace(/\{(\w+)\}/g, (match, param) => {
-            return params[param] || match;
-        });
-    },
-
-    // 设置语言
-    setLanguage(lang) {
-        if (this.translations[lang]) {
-            this.currentLanguage = lang;
-            localStorage.setItem('preferredLanguage', lang);
-            this.updatePageLanguage();
-            this.updateAllTexts();
-        }
-    },
-
-    // 更新页面语言属性
-    updatePageLanguage() {
-        document.documentElement.lang = this.currentLanguage;
-    },
-
-    // 更新所有文本
-    updateAllTexts() {
-        // 更新所有带有 data-i18n 属性的元素
-        document.querySelectorAll('[data-i18n]').forEach(element => {
-            const key = element.getAttribute('data-i18n');
-            const text = this.t(key);
-
-            if (element.tagName === 'INPUT' && (element.type === 'text' || element.type === 'password')) {
-                element.placeholder = text;
-            } else if (element.tagName === 'TITLE') {
-                element.textContent = text;
-            } else {
-                element.textContent = text;
-            }
-        });
-
-        // 更新所有包含 data-i18n-placeholder 的输入框占位符
-        document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
-            const key = element.getAttribute('data-i18n-placeholder');
-            element.placeholder = this.t(key);
-        });
-
-        // 更新 data-i18n-title
-        document.querySelectorAll('[data-i18n-title]').forEach(element => {
-            const key = element.getAttribute('data-i18n-title');
-            element.title = this.t(key);
-        });
-
-        // 更新 data-i18n-tooltip
-        document.querySelectorAll('[data-i18n-tooltip]').forEach(element => {
-            const key = element.getAttribute('data-i18n-tooltip');
-            element.setAttribute('data-tooltip', this.t(key));
-        });
-
-        // 更新 data-i18n-text（常用于按钮或标签）
-        document.querySelectorAll('[data-i18n-text]').forEach(element => {
-            const key = element.getAttribute('data-i18n-text');
-            element.textContent = this.t(key);
-        });
-
-        // 更新所有带有 data-i18n-html 属性的元素（支持HTML）
-        document.querySelectorAll('[data-i18n-html]').forEach(element => {
-            const key = element.getAttribute('data-i18n-html');
-            const html = this.t(key);
-            element.innerHTML = html;
-        });
-    },
-
-    // 初始化
-    init() {
-        // 从本地存储获取用户偏好语言
-        const savedLanguage = localStorage.getItem('preferredLanguage');
-        if (savedLanguage && this.translations[savedLanguage]) {
-            this.currentLanguage = savedLanguage;
-        } else {
-            // 根据浏览器语言自动选择
-            const browserLang = navigator.language || navigator.userLanguage;
-            if (browserLang.startsWith('zh')) {
-                this.currentLanguage = 'zh-CN';
-            } else {
-                this.currentLanguage = 'en-US';
-            }
-        }
-
-        this.updatePageLanguage();
-        this.updateAllTexts();
-    }
-};
-
-// 全局函数，供HTML调用
-window.t = (key, params) => i18n.t(key, params);
-window.setLanguage = (lang) => i18n.setLanguage(lang);
diff --git a/index.html b/index.html
index 14f2013..1bc9508 100644
--- a/index.html
+++ b/index.html
@@ -1,1395 +1,13 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title data-i18n="title.login">CLI Proxy API Management Center</title>
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/yaml/yaml.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/closebrackets.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/comment/comment.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
-    <script src="i18n.js"></script>
-</head>
-
-<body>
-    <!-- 自动登录加载页面 -->
-    <div id="auto-login-loading" class="login-container" style="display: none;">
-        <div class="login-card">
-            <div class="auto-login-content">
-                <div class="loading-spinner">
-                    <div class="spinner"></div>
-                </div>
-                <h2 data-i18n="auto_login.title">正在自动登录...</h2>
-                <p data-i18n="auto_login.message">正在使用本地保存的连接信息尝试连接服务器</p>
-            </div>
-        </div>
-    </div>
-
-    <!-- 登录页面 -->
-    <div id="login-page" class="login-container">
-        <div class="login-card">
-            <div class="login-header">
-                <div class="login-header-top">
-                    <h1 class="login-title">
-                        <img id="login-logo" alt="Logo" style="display:none" />
-                        <span data-i18n="title.login">CLI Proxy API Management Center</span>
-                    </h1>
-                    <div class="header-controls">
-                        <div class="language-switcher">
-                            <button id="language-toggle" class="btn btn-secondary language-btn">
-                                <i class="fas fa-globe"></i>
-                                <span data-i18n="language.switch">语言</span>
-                            </button>
-                        </div>
-                        <div class="theme-switcher">
-                            <button id="theme-toggle" class="btn btn-secondary theme-btn">
-                                <i class="fas fa-moon"></i>
-                                <span data-i18n="theme.switch">主题</span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="login-body">
-                <div class="login-connection-info">
-                    <div class="connection-summary">
-                        <i class="fas fa-link"></i>
-                        <div>
-                            <h3 data-i18n="login.connection_title">连接地址</h3>
-                            <p class="connection-url">
-                                <span data-i18n="login.connection_current">当前地址</span>
-                                <span class="connection-url-separator">:</span>
-                                <span id="login-connection-url">-</span>
-                            </p>
-                        </div>
-                    </div>
-                    <p class="form-hint" data-i18n="login.connection_auto_hint">系统将自动使用当前访问地址进行连接</p>
-                </div>
-
-                <form class="login-form">
-                    <div class="form-group">
-                        <label for="login-api-base" data-i18n="login.custom_connection_label">自定义连接地址:</label>
-                        <div class="input-group">
-                            <input type="text" id="login-api-base" data-i18n-placeholder="login.custom_connection_placeholder">
-                            <button type="button" id="login-reset-api-base"
-                                class="btn btn-secondary connection-reset-btn">
-                                <i class="fas fa-location-arrow"></i>
-                                <span data-i18n="login.use_current_address">使用当前地址</span>
-                            </button>
-                        </div>
-                        <p class="form-hint" data-i18n="login.custom_connection_hint">默认使用当前访问地址，若需要可手动输入其他地址。</p>
-                    </div>
-
-                    <div class="form-group">
-                        <label for="login-management-key" data-i18n="login.management_key_label">管理密钥:</label>
-                        <div class="input-group">
-                            <input type="password" id="login-management-key" data-i18n-placeholder="login.management_key_placeholder" required>
-                            <button type="button" class="btn btn-secondary toggle-key-visibility">
-                                <i class="fas fa-eye"></i>
-                            </button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-
-            <!-- 连接按钮 -->
-            <div class="form-actions">
-                <button type="button" id="login-submit" class="btn btn-primary login-btn">
-                    <i class="fas fa-plug"></i> <span data-i18n="login.connect_button">Connect</span>
-                </button>
-            </div>
-
-            <div id="login-error" class="login-error" style="display: none;">
-                <i class="fas fa-exclamation-triangle"></i>
-                <span id="login-error-message"></span>
-            </div>
-        </div>
-    </div>
-
-    <!-- 主页面 -->
-    <div id="main-page" style="display: none;">
-        <!-- 顶部导航栏 -->
-        <div class="top-navbar">
-            <div class="top-navbar-left">
-                <button class="mobile-menu-btn" id="mobile-menu-btn">
-                    <i class="fas fa-bars"></i>
-                </button>
-                <button class="sidebar-toggle-btn-desktop" id="sidebar-toggle-btn-desktop" data-i18n-title="sidebar.toggle_collapse">
-                    <i class="fas fa-bars"></i>
-                </button>
-                <div class="top-navbar-brand">
-                    <img id="site-logo" class="top-navbar-brand-logo" alt="Logo" style="display:none" />
-                    <button class="top-navbar-brand-toggle expanded" id="brand-name-toggle" type="button" aria-label="展开标题">
-                        <span class="brand-texts" id="brand-texts">
-                            <span class="top-navbar-brand-text brand-text brand-text-full" data-i18n="title.main">CLI Proxy API Management Center</span>
-                            <span class="top-navbar-brand-text brand-text brand-text-short" data-i18n="title.abbr">CPAMC</span>
-                        </span>
-                    </button>
-                </div>
-            </div>
-            <div class="top-navbar-actions">
-                <div class="header-controls">
-                    <div class="language-switcher">
-                        <button id="language-toggle-main" class="btn btn-secondary language-btn">
-                            <i class="fas fa-globe"></i>
-                        </button>
-                    </div>
-                    <div class="theme-switcher">
-                        <button id="theme-toggle-main" class="btn btn-secondary theme-btn">
-                            <i class="fas fa-moon"></i>
-                        </button>
-                    </div>
-                </div>
-                <button id="connection-status" class="btn btn-secondary">
-                    <i class="fas fa-circle"></i> <span data-i18n="header.check_connection">检查连接</span>
-                </button>
-                <button id="refresh-all" class="btn btn-primary">
-                    <i class="fas fa-sync-alt"></i>
-                </button>
-                <button id="logout-btn" class="btn btn-danger">
-                    <i class="fas fa-sign-out-alt"></i>
-                </button>
-            </div>
-        </div>
-
-        <div class="layout" id="layout-container">
-            <!-- 侧边栏 -->
-            <nav class="sidebar" id="sidebar">
-                <!-- 导航菜单 -->
-                <ul class="nav-menu">
-                    <li data-i18n-tooltip="nav.basic_settings"><a href="#basic-settings" class="nav-item active"
-                            data-section="basic-settings">
-                            <i class="fas fa-sliders-h"></i> <span data-i18n="nav.basic_settings">基础设置</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.api_keys"><a href="#api-keys" class="nav-item" data-section="api-keys">
-                            <i class="fas fa-key"></i> <span data-i18n="nav.api_keys">API 密钥</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.ai_providers"><a href="#ai-providers" class="nav-item" data-section="ai-providers">
-                            <i class="fas fa-robot"></i> <span data-i18n="nav.ai_providers">AI 提供商</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.auth_files"><a href="#auth-files" class="nav-item" data-section="auth-files">
-                            <i class="fas fa-file-alt"></i> <span data-i18n="nav.auth_files">认证文件</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.usage_stats"><a href="#usage-stats" class="nav-item" data-section="usage-stats">
-                            <i class="fas fa-chart-line"></i> <span data-i18n="nav.usage_stats">使用统计</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.config_management"><a href="#config-management" class="nav-item" data-section="config-management">
-                            <i class="fas fa-cog"></i> <span data-i18n="nav.config_management">配置管理</span>
-                        </a></li>
-                    <li id="logs-nav-item" data-i18n-tooltip="nav.logs" style="display: none;"><a href="#logs" class="nav-item" data-section="logs">
-                            <i class="fas fa-scroll"></i> <span data-i18n="nav.logs">日志查看</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.system_info"><a href="#system-info" class="nav-item" data-section="system-info">
-                            <i class="fas fa-info-circle"></i> <span data-i18n="nav.system_info">中心信息</span>
-                        </a></li>
-                </ul>
-            </nav>
-
-            <!-- 侧边栏遮罩（移动端） -->
-            <div class="sidebar-overlay" id="sidebar-overlay"></div>
-
-            <!-- 主内容包装器 -->
-            <div class="main-wrapper" id="main-wrapper">
-                <!-- 主内容区域 -->
-                <div class="main-content">
-                    <!-- 内容区域 -->
-                    <div class="content-area">
-                        <!-- 基础设置 -->
-                        <section id="basic-settings" class="content-section active">
-                            <h2 data-i18n="basic_settings.title">基础设置</h2>
-
-                            <!-- Debug 设置 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-bug"></i> <span
-                                            data-i18n="basic_settings.debug_title">调试模式</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="debug-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label" data-i18n="basic_settings.debug_enable">启用调试模式</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 代理设置 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-network-wired"></i> <span
-                                            data-i18n="basic_settings.proxy_title">代理设置</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="form-group">
-                                        <label for="proxy-url" data-i18n="basic_settings.proxy_url_label">代理
-                                            URL:</label>
-                                        <div class="input-group">
-                                            <input type="text" id="proxy-url" data-i18n-placeholder="basic_settings.proxy_url_placeholder">
-                                            <button id="update-proxy" class="btn btn-primary"
-                                                data-i18n="basic_settings.proxy_update">更新</button>
-                                            <button id="clear-proxy" class="btn btn-danger"
-                                                data-i18n="basic_settings.proxy_clear">清空</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 请求重试设置 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-redo"></i> <span
-                                            data-i18n="basic_settings.retry_title">请求重试</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="form-group">
-                                        <label for="request-retry"
-                                            data-i18n="basic_settings.retry_count_label">重试次数:</label>
-                                        <div class="input-group">
-                                            <input type="number" id="request-retry" min="0" max="10" value="3">
-                                            <button id="update-retry" class="btn btn-primary"
-                                                data-i18n="basic_settings.retry_update">更新</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 配额超出行为 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-exclamation-triangle"></i> <span
-                                            data-i18n="basic_settings.quota_title">配额超出行为</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="switch-project-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.quota_switch_project">自动切换项目</span>
-                                    </div>
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="switch-preview-model-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.quota_switch_preview">切换到预览模型</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 使用统计设置 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-chart-bar"></i> <span
-                                            data-i18n="basic_settings.usage_statistics_title">使用统计</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="usage-statistics-enabled-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.usage_statistics_enable">启用使用统计</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 日志记录设置 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-file-alt"></i> <span
-                                            data-i18n="basic_settings.logging_title">日志记录</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="logging-to-file-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.logging_to_file_enable">启用日志记录到文件</span>
-                                    </div>
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="request-log-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.request_log_enable">启用请求日志</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- WebSocket 鉴权 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-shield-alt"></i> <span
-                                            data-i18n="basic_settings.ws_auth_title">WebSocket 鉴权</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="ws-auth-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.ws_auth_enable">启用 /ws/* 鉴权</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                        </section>
-
-                        <!-- API 密钥管理 -->
-                        <section id="api-keys" class="content-section">
-                            <h2 data-i18n="api_keys.title">API 密钥管理</h2>
-
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-key"></i> <span
-                                            data-i18n="api_keys.proxy_auth_title">代理服务认证密钥</span></h3>
-                                    <button id="add-api-key" class="btn btn-primary">
-                                        <i class="fas fa-plus"></i> <span data-i18n="api_keys.add_button">添加密钥</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="api-keys-list" class="key-list"></div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- AI 提供商 -->
-                        <section id="ai-providers" class="content-section">
-                            <h2 data-i18n="ai_providers.title">AI 提供商配置</h2>
-
-                            <!-- Gemini API Keys -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fab fa-google"></i> <span data-i18n="ai_providers.gemini_title">Gemini
-                                            API 密钥</span></h3>
-                                    <button id="add-gemini-key" class="btn btn-primary">
-                                        <i class="fas fa-plus"></i> <span
-                                            data-i18n="ai_providers.gemini_add_button">添加密钥</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="gemini-keys-list" class="key-list"></div>
-                                </div>
-                            </div>
-
-                            <!-- Codex API Keys -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-code"></i> <span data-i18n="ai_providers.codex_title">Codex API
-                                            配置</span></h3>
-                                    <button id="add-codex-key" class="btn btn-primary">
-                                        <i class="fas fa-plus"></i> <span
-                                            data-i18n="ai_providers.codex_add_button">添加配置</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="codex-keys-list" class="provider-list"></div>
-                                </div>
-                            </div>
-
-                            <!-- Claude API Keys -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-brain"></i> <span data-i18n="ai_providers.claude_title">Claude
-                                            API 配置</span></h3>
-                                    <button id="add-claude-key" class="btn btn-primary">
-                                        <i class="fas fa-plus"></i> <span
-                                            data-i18n="ai_providers.claude_add_button">添加配置</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="claude-keys-list" class="provider-list"></div>
-                                </div>
-                            </div>
-
-                            <!-- OpenAI 兼容提供商 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-plug"></i> <span data-i18n="ai_providers.openai_title">OpenAI
-                                            兼容提供商</span></h3>
-                                    <button id="add-openai-provider" class="btn btn-primary">
-                                        <i class="fas fa-plus"></i> <span
-                                            data-i18n="ai_providers.openai_add_button">添加提供商</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="openai-providers-list" class="provider-list"></div>
-                                </div>
-                            </div>
-
-                            <!-- Vertex AI Credential Import -->
-                            <div class="card" id="vertex-import-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-cloud-upload-alt"></i> <span data-i18n="vertex_import.title">Vertex AI 凭证导入</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" data-i18n="vertex_import.description">
-                                        上传 Google 服务账号 JSON 并保存为 vertex-<project>.json。
-                                    </p>
-                                    <div class="form-group">
-                                        <label for="vertex-location" data-i18n="vertex_import.location_label">区域 (可选)</label>
-                                        <input type="text" id="vertex-location" data-i18n-placeholder="vertex_import.location_placeholder" value="us-central1">
-                                        <p class="form-hint" data-i18n="vertex_import.location_hint">留空则使用默认 us-central1。</p>
-                                    </div>
-                                    <div class="form-group">
-                                        <label data-i18n="vertex_import.file_label">服务账号密钥 JSON</label>
-                                        <div class="input-group">
-                                            <input type="text" id="vertex-file-display" readonly data-i18n-placeholder="vertex_import.file_placeholder" placeholder="尚未选择文件">
-                                            <input type="file" id="vertex-file-input" accept=".json" style="display: none;">
-                                            <button type="button" id="vertex-select-file" class="btn btn-secondary">
-                                                <i class="fas fa-file-upload"></i> <span data-i18n="vertex_import.choose_file">选择文件</span>
-                                            </button>
-                                        </div>
-                                        <p class="form-hint" data-i18n="vertex_import.file_hint">仅支持 Google Cloud service account JSON。</p>
-                                    </div>
-                                    <div class="form-actions vertex-import-actions">
-                                        <button type="button" id="vertex-import-btn" class="btn btn-primary" disabled>
-                                            <i class="fas fa-cloud-upload-alt"></i> <span data-i18n="vertex_import.import_button">导入 Vertex 凭证</span>
-                                        </button>
-                                    </div>
-                                    <div id="vertex-import-result" class="vertex-import-result" style="display: none;">
-                                        <div class="vertex-import-result-header">
-                                            <i class="fas fa-check-circle"></i>
-                                            <span data-i18n="vertex_import.result_title">凭证已保存</span>
-                                        </div>
-                                        <ul>
-                                            <li><span data-i18n="vertex_import.result_project">项目 ID</span>: <code id="vertex-result-project">-</code></li>
-                                            <li><span data-i18n="vertex_import.result_email">服务账号</span>: <code id="vertex-result-email">-</code></li>
-                                            <li><span data-i18n="vertex_import.result_location">区域</span>: <code id="vertex-result-location">-</code></li>
-                                            <li><span data-i18n="vertex_import.result_file">存储文件</span>: <code id="vertex-result-file">-</code></li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- 认证文件管理 -->
-                        <section id="auth-files" class="content-section">
-                            <h2 data-i18n="auth_files.title">认证文件管理</h2>
-
-                            <div class="card" style="margin-bottom: 20px;">
-                                <div class="card-content">
-                                    <p class="form-hint" data-i18n="auth_files.description">
-                                        这里管理 Qwen 和 Gemini 的认证配置文件。上传 JSON 格式的认证文件以启用相应的 AI 服务。
-                                    </p>
-                                </div>
-                            </div>
-
-                            <!-- 认证文件 -->
-                            <div class="card">
-                                <div class="card-header card-header-with-filter">
-                                    <div class="header-left">
-                                        <h3><i class="fas fa-file-alt"></i> <span
-                                                data-i18n="auth_files.title_section">认证文件</span></h3>
-                                        <!-- 类型筛选 -->
-                                        <div class="auth-file-filter">
-                                            <button class="filter-btn active" data-type="all" data-i18n-text="auth_files.filter_all">All</button>
-                                            <button class="filter-btn" data-type="qwen" data-i18n-text="auth_files.filter_qwen">Qwen</button>
-                                            <button class="filter-btn" data-type="gemini" data-i18n-text="auth_files.filter_gemini">Gemini</button>
-                                            <button class="filter-btn" data-type="gemini-cli" data-i18n-text="auth_files.filter_gemini-cli">GeminiCLI</button>
-                                            <button class="filter-btn" data-type="aistudio" data-i18n-text="auth_files.filter_aistudio">AIStudio</button>
-                                            <button class="filter-btn" data-type="claude" data-i18n-text="auth_files.filter_claude">Claude</button>
-                                            <button class="filter-btn" data-type="codex" data-i18n-text="auth_files.filter_codex">Codex</button>
-                                            <button class="filter-btn" data-type="antigravity" data-i18n-text="auth_files.filter_antigravity">Antigravity</button>
-                                            <button class="filter-btn" data-type="iflow" data-i18n-text="auth_files.filter_iflow">iFlow</button>
-                                            <button class="filter-btn" data-type="vertex" data-i18n-text="auth_files.filter_vertex">Vertex</button>
-                                            <button class="filter-btn" data-type="empty" data-i18n-text="auth_files.filter_empty">Empty</button>
-                                        </div>
-                                    </div>
-                                    <div class="header-actions">
-                                        <button id="upload-auth-file" class="btn btn-primary">
-                                            <i class="fas fa-upload"></i> <span
-                                                data-i18n="auth_files.upload_button">上传文件</span>
-                                        </button>
-                                        <button id="delete-all-auth-files" class="btn btn-danger">
-                                            <i class="fas fa-trash"></i> <span
-                                                data-i18n="auth_files.delete_all_button">删除全部</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="card-content">
-                                    <div class="auth-file-toolbar">
-                                        <div class="auth-file-search-group">
-                                            <label for="auth-files-search-input"
-                                                data-i18n="auth_files.search_label">搜索配置文件</label>
-                                            <div class="auth-file-search">
-                                                <i class="fas fa-search"></i>
-                                                <input type="text" id="auth-files-search-input"
-                                                    data-i18n-placeholder="auth_files.search_placeholder"
-                                                    placeholder="搜索文件名或类型">
-                                            </div>
-                                        </div>
-                                        <div class="auth-file-page-size">
-                                            <label for="auth-files-page-size-input"
-                                                data-i18n="auth_files.page_size_label">单页数量</label>
-                                            <div class="page-size-input">
-                                                <input type="number" id="auth-files-page-size-input" min="3" max="60"
-                                                    step="1">
-                                                <span data-i18n="auth_files.page_size_unit">个/页</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div id="auth-files-list" class="file-list file-grid"></div>
-                                    <div id="auth-files-pagination" class="pagination-controls" style="display: none;">
-                                        <button class="btn btn-secondary pagination-btn" data-action="prev">
-                                            <i class="fas fa-chevron-left"></i>
-                                            <span data-i18n="auth_files.pagination_prev">上一页</span>
-                                        </button>
-                                        <div id="auth-files-pagination-info" class="pagination-info">-</div>
-                                        <button class="btn btn-secondary pagination-btn" data-action="next">
-                                            <span data-i18n="auth_files.pagination_next">下一页</span>
-                                            <i class="fas fa-chevron-right"></i>
-                                        </button>
-                                    </div>
-                                    <input type="file" id="auth-file-input" accept=".json" multiple style="display: none;">
-                                </div>
-                            </div>
-
-                            <!-- OAuth 排除列表 -->
-                            <div class="card" id="oauth-excluded-card">
-                                <div class="card-header card-header-with-filter">
-                                    <div class="header-left">
-                                        <h3><i class="fas fa-ban"></i> <span data-i18n="oauth_excluded.title">OAuth 排除列表</span></h3>
-                                        <div class="oauth-excluded-scope" id="oauth-excluded-scope"></div>
-                                    </div>
-                                    <div class="card-actions">
-                                        <button id="oauth-excluded-refresh" class="btn btn-secondary">
-                                            <i class="fas fa-sync-alt"></i> <span data-i18n="oauth_excluded.refresh">刷新</span>
-                                        </button>
-                                        <button id="oauth-excluded-add" class="btn btn-primary">
-                                            <i class="fas fa-plus"></i> <span data-i18n="oauth_excluded.add">新增排除</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" data-i18n="oauth_excluded.description">为 OAuth/文件凭据配置模型黑名单，支持通配符。</p>
-                                    <div id="oauth-excluded-status" class="form-hint subtle"></div>
-                                    <div id="oauth-excluded-list" class="oauth-excluded-list oauth-excluded-grid provider-list">
-                                        <div class="loading-placeholder" data-i18n="common.loading">正在加载...</div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Codex OAuth -->
-                            <div class="card" id="codex-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-code"></i> <span data-i18n="auth_login.codex_oauth_title">Codex
-                                            OAuth</span></h3>
-                                    <button id="codex-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.codex_oauth_button">开始 Codex 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.codex_oauth_hint">
-                                        通过 OAuth 流程登录 Codex 服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div id="codex-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.codex_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                        <input type="text" id="codex-oauth-url" readonly>
-                                                <button id="codex-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.codex_open_link">打开链接</span>
-                                                </button>
-                                                <button id="codex-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.codex_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="codex-oauth-status" class="form-hint" style="margin-top: 10px;"></div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Anthropic OAuth -->
-                            <div class="card" id="anthropic-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-brain"></i> <span
-                                            data-i18n="auth_login.anthropic_oauth_title">Anthropic OAuth</span></h3>
-                                    <button id="anthropic-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.anthropic_oauth_button">开始 Anthropic 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.anthropic_oauth_hint">
-                                        通过 OAuth 流程登录 Anthropic (Claude) 服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div id="anthropic-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.anthropic_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                                <input type="text" id="anthropic-oauth-url" readonly>
-                                                <button id="anthropic-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.anthropic_open_link">打开链接</span>
-                                                </button>
-                                                <button id="anthropic-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.anthropic_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="anthropic-oauth-status" class="form-hint" style="margin-top: 10px;">
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Antigravity OAuth -->
-                            <div class="card" id="antigravity-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-rocket"></i> <span
-                                            data-i18n="auth_login.antigravity_oauth_title">Antigravity OAuth</span></h3>
-                                    <button id="antigravity-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.antigravity_oauth_button">开始 Antigravity 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.antigravity_oauth_hint">
-                                        通过 OAuth 流程登录 Antigravity（Google 账号）服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div id="antigravity-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.antigravity_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                                <input type="text" id="antigravity-oauth-url" readonly>
-                                                <button id="antigravity-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.antigravity_open_link">打开链接</span>
-                                                </button>
-                                                <button id="antigravity-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.antigravity_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="antigravity-oauth-status" class="form-hint" style="margin-top: 10px;">
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Gemini CLI OAuth -->
-                            <div class="card" id="gemini-cli-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fab fa-google"></i> <span
-                                            data-i18n="auth_login.gemini_cli_oauth_title">Gemini CLI OAuth</span></h3>
-                                    <button id="gemini-cli-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.gemini_cli_oauth_button">开始 Gemini CLI 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.gemini_cli_oauth_hint">
-                                        通过 OAuth 流程登录 Google Gemini CLI 服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div class="form-group" style="margin-bottom: 20px;">
-                                        <label for="gemini-cli-project-id"
-                                            data-i18n="auth_login.gemini_cli_project_id_label">Google Cloud 项目 ID
-                                            (可选):</label>
-                                        <input type="text" id="gemini-cli-project-id"
-                                            data-i18n-placeholder="auth_login.gemini_cli_project_id_placeholder">
-                            <div class="form-hint" data-i18n="auth_login.gemini_cli_project_id_hint">
-                                如果指定了项目 ID，将使用该项目的认证信息。
-                            </div>
-                                    </div>
-                                    <div id="gemini-cli-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.gemini_cli_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                                <input type="text" id="gemini-cli-oauth-url" readonly>
-                                                <button id="gemini-cli-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.gemini_cli_open_link">打开链接</span>
-                                                </button>
-                                                <button id="gemini-cli-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.gemini_cli_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="gemini-cli-oauth-status" class="form-hint" style="margin-top: 10px;">
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Qwen OAuth -->
-                            <div class="card" id="qwen-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-robot"></i> <span data-i18n="auth_login.qwen_oauth_title">Qwen
-                                            OAuth</span></h3>
-                                    <button id="qwen-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.qwen_oauth_button">开始 Qwen 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.qwen_oauth_hint">
-                                        通过设备授权流程登录 Qwen 服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div id="qwen-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.qwen_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                                <input type="text" id="qwen-oauth-url" readonly>
-                                                <button id="qwen-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.qwen_open_link">打开链接</span>
-                                                </button>
-                                                <button id="qwen-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.qwen_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="qwen-oauth-status" class="form-hint" style="margin-top: 10px;"></div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- iFlow OAuth -->
-                            <div class="card" id="iflow-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-stream"></i> <span
-                                            data-i18n="auth_login.iflow_oauth_title">iFlow OAuth</span></h3>
-                                    <button id="iflow-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.iflow_oauth_button">开始 iFlow 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.iflow_oauth_hint">
-                                        通过 OAuth 流程登录 iFlow 服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div id="iflow-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.iflow_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                                <input type="text" id="iflow-oauth-url" readonly>
-                                                <button id="iflow-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.iflow_open_link">打开链接</span>
-                                                </button>
-                                                <button id="iflow-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.iflow_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="iflow-oauth-status" class="form-hint" style="margin-top: 10px;"></div>
-                                    </div>
-                                </div>
-                                <div class="card-content" style="border-top: 1px solid var(--border-color); margin-top: 16px; padding-top: 16px;">
-                                    <h4 style="margin-bottom: 10px;" data-i18n="auth_login.iflow_cookie_title">iFlow Cookie 登录</h4>
-                                    <p class="form-hint" data-i18n="auth_login.iflow_cookie_hint">
-                                        直接提交 Cookie 完成登录并保存凭据，无需打开授权链接。
-                                    </p>
-                                    <div class="form-group">
-                                        <label for="iflow-cookie-input" data-i18n="auth_login.iflow_cookie_label">Cookie 内容:</label>
-                                        <textarea id="iflow-cookie-input" rows="3" data-i18n-placeholder="auth_login.iflow_cookie_placeholder" placeholder="粘贴浏览器中的 Cookie"></textarea>
-                                    </div>
-                                    <div class="form-actions">
-                                        <button id="iflow-cookie-submit" class="btn btn-primary">
-                                            <i class="fas fa-cookie-bite"></i> <span data-i18n="auth_login.iflow_cookie_button">提交 Cookie 登录</span>
-                                        </button>
-                                    </div>
-                                    <div id="iflow-cookie-status" class="form-hint" style="margin-top: 10px;"></div>
-                                    <div id="iflow-cookie-result" class="vertex-import-result" style="display: none;">
-                                        <div class="vertex-import-result-header">
-                                            <i class="fas fa-check-circle"></i>
-                                            <span data-i18n="auth_login.iflow_cookie_result_title">Cookie 登录结果</span>
-                                        </div>
-                                        <ul>
-                                            <li><span data-i18n="auth_login.iflow_cookie_result_email">账号</span>: <code id="iflow-cookie-result-email">-</code></li>
-                                            <li><span data-i18n="auth_login.iflow_cookie_result_expired">过期时间</span>: <code id="iflow-cookie-result-expired">-</code></li>
-                                            <li><span data-i18n="auth_login.iflow_cookie_result_path">保存路径</span>: <code id="iflow-cookie-result-path">-</code></li>
-                                            <li><span data-i18n="auth_login.iflow_cookie_result_type">类型</span>: <code id="iflow-cookie-result-type">-</code></li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- 日志查看 -->
-                        <section id="logs" class="content-section">
-                            <h2 data-i18n="logs.title">日志查看</h2>
-
-                            <div class="card">
-                                <div class="card-header logs-header">
-                                    <div class="logs-header-main">
-                                        <h3><i class="fas fa-scroll"></i> <span data-i18n="logs.log_content">日志内容</span></h3>
-                                        <div class="logs-search">
-                                            <i class="fas fa-search"></i>
-                                            <input type="text" id="logs-search-input" aria-label="搜索日志" data-i18n-placeholder="logs.search_placeholder" placeholder="搜索日志...">
-                                        </div>
-                                    </div>
-                                    <div class="header-actions">
-                                        <div class="toggle-group" style="margin-right: 15px;">
-                                            <label class="toggle-switch" style="margin-right: 5px;">
-                                                <input type="checkbox" id="logs-auto-refresh-toggle">
-                                                <span class="slider"></span>
-                                            </label>
-                                            <span class="toggle-label" data-i18n="logs.auto_refresh" style="font-size: 0.9em;">自动刷新</span>
-                                        </div>
-                                        <button id="refresh-logs" class="btn btn-primary">
-                                            <i class="fas fa-sync-alt"></i> <span data-i18n="logs.refresh_button">刷新日志</span>
-                                        </button>
-                                        <button id="select-error-log" class="btn btn-secondary">
-                                            <i class="fas fa-file-circle-exclamation"></i> <span data-i18n="logs.error_log_button">选择错误日志</span>
-                                        </button>
-                                        <button id="download-logs" class="btn btn-secondary">
-                                            <i class="fas fa-download"></i> <span data-i18n="logs.download_button">下载日志</span>
-                                        </button>
-                                        <button id="clear-logs" class="btn btn-danger">
-                                            <i class="fas fa-trash"></i> <span data-i18n="logs.clear_button">清空日志</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="card-content">
-                                    <div id="logs-content" class="logs-container">
-                                        <div class="loading-placeholder" data-i18n="logs.loading">正在加载日志...</div>
-                                    </div>
-                                </div>
-                            </div>
-
-                        </section>
-
-                        <!-- 使用统计 -->
-                        <section id="usage-stats" class="content-section">
-                            <h2 data-i18n="usage_stats.title">使用统计</h2>
-
-                            <!-- 概览统计卡片 -->
-                            <div class="stats-overview">
-                                <div class="stat-card">
-                                    <div class="stat-card-header">
-                                        <div class="stat-meta">
-                                            <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
-                                            <div class="stat-number" id="total-requests">0</div>
-                                            <div class="stat-subtext stat-subtext-inline">
-                                                <span><span data-i18n="usage_stats.success_requests">成功请求</span> <span id="success-requests">0</span></span>
-                                                <span class="dot-divider">•</span>
-                                                <span><span data-i18n="usage_stats.failed_requests">失败请求</span> <span id="failed-requests">0</span></span>
-                                            </div>
-                                        </div>
-                                        <div class="stat-icon">
-                                            <i class="fas fa-paper-plane"></i>
-                                        </div>
-                                    </div>
-                                    <div class="stat-sparkline" aria-label="30分钟请求趋势">
-                                        <canvas id="requests-sparkline"></canvas>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-card-header">
-                                        <div class="stat-meta">
-                                            <div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
-                                            <div class="stat-number" id="total-tokens">0</div>
-                                            <div class="stat-subtext">
-                                                <span data-i18n="usage_stats.cached_tokens">缓存 Token 数</span>:
-                                                <span id="cached-tokens">0</span>
-                                            </div>
-                                            <div class="stat-subtext">
-                                                <span data-i18n="usage_stats.reasoning_tokens">思考 Token 数</span>:
-                                                <span id="reasoning-tokens">0</span>
-                                            </div>
-                                        </div>
-                                        <div class="stat-icon">
-                                            <i class="fas fa-coins"></i>
-                                        </div>
-                                    </div>
-                                    <div class="stat-sparkline" aria-label="30分钟Token趋势">
-                                        <canvas id="tokens-sparkline"></canvas>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-card-header">
-                                        <div class="stat-meta">
-                                            <div class="stat-label" data-i18n="usage_stats.rpm_30m">RPM（近30分钟）</div>
-                                            <div class="stat-number" id="rpm-30m">0</div>
-                                        </div>
-                                        <div class="stat-icon">
-                                            <i class="fas fa-gauge-high"></i>
-                                        </div>
-                                    </div>
-                                    <div class="stat-sparkline" aria-label="30分钟RPM趋势">
-                                        <canvas id="rpm-sparkline"></canvas>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-card-header">
-                                        <div class="stat-meta">
-                                            <div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
-                                            <div class="stat-number" id="tpm-30m">0</div>
-                                        </div>
-                                        <div class="stat-icon">
-                                            <i class="fas fa-stopwatch"></i>
-                                        </div>
-                                    </div>
-                                    <div class="stat-sparkline" aria-label="30分钟TPM趋势">
-                                        <canvas id="tpm-sparkline"></canvas>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card cost-summary-card">
-                                    <div class="stat-card-header">
-                                        <div class="stat-meta">
-                                            <div class="stat-label" data-i18n="usage_stats.total_cost">总花费</div>
-                                            <div class="stat-number" id="total-cost">--</div>
-                                            <div class="stat-subtext" id="total-cost-hint" data-i18n="usage_stats.total_cost_hint">基于已设置的模型单价</div>
-                                        </div>
-                                        <div class="stat-icon">
-                                            <i class="fas fa-dollar-sign"></i>
-                                        </div>
-                                    </div>
-                                    <div class="stat-sparkline" aria-label="30分钟花费趋势">
-                                        <canvas id="cost-sparkline"></canvas>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 图表曲线选择 -->
-                            <div class="usage-filter-bar" id="chart-line-bar">
-                                <div class="usage-filter-group usage-filter-actions">
-                                    <label data-i18n="usage_stats.chart_line_actions_label">曲线数量</label>
-                                    <div class="chart-line-actions">
-                                        <button type="button" class="btn btn-small" id="add-chart-line">
-                                            <i class="fas fa-plus"></i>
-                                            <span data-i18n="usage_stats.chart_line_add">增加曲线</span>
-                                        </button>
-                                        <span class="chart-line-count" id="chart-line-count">3/9</span>
-                                    </div>
-                                    <div class="chart-line-hint" data-i18n="usage_stats.chart_line_hint">最多显示 9 条模型曲线</div>
-                                </div>
-                                <div class="usage-filter-group chart-line-group" data-line-index="0">
-                                    <label for="chart-line-select-0" data-i18n="usage_stats.chart_line_label_1">曲线 1</label>
-                                    <div class="chart-line-control">
-                                        <select id="chart-line-select-0" class="model-filter-select chart-line-select" data-line-index="0" disabled>
-                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
-                                        </select>
-                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="0">
-                                            <i class="fas fa-trash"></i>
-                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="usage-filter-group chart-line-group" data-line-index="1">
-                                    <label for="chart-line-select-1" data-i18n="usage_stats.chart_line_label_2">曲线 2</label>
-                                    <div class="chart-line-control">
-                                        <select id="chart-line-select-1" class="model-filter-select chart-line-select" data-line-index="1" disabled>
-                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
-                                        </select>
-                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="1">
-                                            <i class="fas fa-trash"></i>
-                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="usage-filter-group chart-line-group" data-line-index="2">
-                                    <label for="chart-line-select-2" data-i18n="usage_stats.chart_line_label_3">曲线 3</label>
-                                    <div class="chart-line-control">
-                                        <select id="chart-line-select-2" class="model-filter-select chart-line-select" data-line-index="2" disabled>
-                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
-                                        </select>
-                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="2">
-                                            <i class="fas fa-trash"></i>
-                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="3">
-                                    <label for="chart-line-select-3" data-i18n="usage_stats.chart_line_label_4">曲线 4</label>
-                                    <div class="chart-line-control">
-                                        <select id="chart-line-select-3" class="model-filter-select chart-line-select" data-line-index="3" disabled>
-                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
-                                        </select>
-                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="3">
-                                            <i class="fas fa-trash"></i>
-                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="4">
-                                    <label for="chart-line-select-4" data-i18n="usage_stats.chart_line_label_5">曲线 5</label>
-                                    <div class="chart-line-control">
-                                        <select id="chart-line-select-4" class="model-filter-select chart-line-select" data-line-index="4" disabled>
-                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
-                                        </select>
-                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="4">
-                                            <i class="fas fa-trash"></i>
-                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="5">
-                                    <label for="chart-line-select-5" data-i18n="usage_stats.chart_line_label_6">曲线 6</label>
-                                    <div class="chart-line-control">
-                                        <select id="chart-line-select-5" class="model-filter-select chart-line-select" data-line-index="5" disabled>
-                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
-                                        </select>
-                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="5">
-                                            <i class="fas fa-trash"></i>
-                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="6">
-                                    <label for="chart-line-select-6" data-i18n="usage_stats.chart_line_label_7">曲线 7</label>
-                                    <div class="chart-line-control">
-                                        <select id="chart-line-select-6" class="model-filter-select chart-line-select" data-line-index="6" disabled>
-                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
-                                        </select>
-                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="6">
-                                            <i class="fas fa-trash"></i>
-                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="7">
-                                    <label for="chart-line-select-7" data-i18n="usage_stats.chart_line_label_8">曲线 8</label>
-                                    <div class="chart-line-control">
-                                        <select id="chart-line-select-7" class="model-filter-select chart-line-select" data-line-index="7" disabled>
-                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
-                                        </select>
-                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="7">
-                                            <i class="fas fa-trash"></i>
-                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="usage-filter-group chart-line-group chart-line-hidden" data-line-index="8">
-                                    <label for="chart-line-select-8" data-i18n="usage_stats.chart_line_label_9">曲线 9</label>
-                                    <div class="chart-line-control">
-                                        <select id="chart-line-select-8" class="model-filter-select chart-line-select" data-line-index="8" disabled>
-                                            <option value="all" data-i18n="usage_stats.chart_line_all">全部</option>
-                                        </select>
-                                        <button type="button" class="btn btn-small btn-danger chart-line-delete" data-line-index="8">
-                                            <i class="fas fa-trash"></i>
-                                            <span data-i18n="usage_stats.chart_line_delete">删除</span>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 图表区域 -->
-                            <div class="charts-container">
-                                <!-- 请求趋势图 -->
-                                <div class="card chart-card">
-                                    <div class="card-header">
-                                        <h3><i class="fas fa-chart-line"></i> <span
-                                                data-i18n="usage_stats.requests_trend">请求趋势</span></h3>
-                                        <div class="chart-controls">
-                                            <button class="btn btn-small" data-period="hour" id="requests-hour-btn">
-                                                <span data-i18n="usage_stats.by_hour">按小时</span>
-                                            </button>
-                                            <button class="btn btn-small active" data-period="day"
-                                                id="requests-day-btn">
-                                                <span data-i18n="usage_stats.by_day">按天</span>
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="card-content">
-                                        <div class="chart-container">
-                                            <canvas id="requests-chart"></canvas>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <!-- Token使用趋势图 -->
-                                <div class="card chart-card">
-                                    <div class="card-header">
-                                        <h3><i class="fas fa-chart-area"></i> <span
-                                                data-i18n="usage_stats.tokens_trend">Token 使用趋势</span></h3>
-                                        <div class="chart-controls">
-                                            <button class="btn btn-small" data-period="hour" id="tokens-hour-btn">
-                                                <span data-i18n="usage_stats.by_hour">按小时</span>
-                                            </button>
-                                            <button class="btn btn-small active" data-period="day" id="tokens-day-btn">
-                                                <span data-i18n="usage_stats.by_day">按天</span>
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="card-content">
-                                        <div class="chart-container">
-                                            <canvas id="tokens-chart"></canvas>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="card chart-card cost-chart-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-sack-dollar"></i> <span data-i18n="usage_stats.cost_trend">花费统计</span></h3>
-                                    <div class="chart-controls">
-                                        <button class="btn btn-small" data-period="hour" id="cost-hour-btn">
-                                            <span data-i18n="usage_stats.by_hour">按小时</span>
-                                        </button>
-                                        <button class="btn btn-small active" data-period="day" id="cost-day-btn">
-                                            <span data-i18n="usage_stats.by_day">按天</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                    <div class="card-content">
-                                        <div class="chart-container">
-                                            <canvas id="cost-chart"></canvas>
-                                            <div id="cost-chart-placeholder" class="chart-placeholder" data-i18n="usage_stats.cost_need_price">请先设置模型价格</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- API详细统计 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-list"></i> <span data-i18n="usage_stats.api_details">API
-                                            详细统计</span></h3>
-                                    <button id="refresh-usage-stats" class="btn btn-primary">
-                                        <i class="fas fa-sync-alt"></i> <span data-i18n="usage_stats.refresh">刷新</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="api-stats-table" class="api-stats-table">
-                                        <div class="loading-placeholder" data-i18n="common.loading">正在加载...</div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="card cost-config-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-tags"></i> <span data-i18n="usage_stats.model_price_title">模型价格</span></h3>
-                                    <div class="card-actions">
-                                        <button type="button" id="reset-model-prices" class="btn btn-secondary">
-                                            <i class="fas fa-rotate-left"></i> <span data-i18n="usage_stats.model_price_reset">清除价格</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="card-content">
-                                    <form id="model-price-form" class="model-price-form">
-                                        <div class="form-group">
-                                            <label for="model-price-model-select" data-i18n="usage_stats.model_price_model_label">选择模型</label>
-                                            <select id="model-price-model-select" class="model-filter-select">
-                                                <option value="" data-i18n="usage_stats.model_price_select_placeholder">选择模型</option>
-                                            </select>
-                                            <p class="form-hint" data-i18n="usage_stats.model_price_select_hint">模型列表来自使用统计</p>
-                                        </div>
-                                        <div class="price-input-grid">
-                                            <div class="form-group">
-                                                <label for="model-price-prompt" data-i18n="usage_stats.model_price_prompt">提示价格 ($/1M tokens)</label>
-                                                <input type="number" step="0.0001" min="0" id="model-price-prompt" placeholder="0.0000">
-                                            </div>
-                                            <div class="form-group">
-                                                <label for="model-price-completion" data-i18n="usage_stats.model_price_completion">补全价格 ($/1M tokens)</label>
-                                                <input type="number" step="0.0001" min="0" id="model-price-completion" placeholder="0.0000">
-                                            </div>
-                                        </div>
-                                        <div class="price-form-actions">
-                                            <button type="submit" class="btn btn-primary">
-                                                <i class="fas fa-save"></i> <span data-i18n="usage_stats.model_price_save">保存价格</span>
-                                            </button>
-                                        </div>
-                                    </form>
-                                    <div class="model-price-list" id="model-price-list">
-                                        <div class="loading-placeholder" data-i18n="common.loading">正在加载...</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- 配置管理 -->
-                        <section id="config-management" class="content-section">
-                            <h2 data-i18n="config_management.title">配置管理</h2>
-
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-file-code"></i> <span data-i18n="config_management.editor_title">配置文件</span></h3>
-                                    <div class="editor-actions">
-                                        <button id="config-reload-btn" class="btn btn-secondary">
-                                            <i class="fas fa-sync-alt"></i> <span data-i18n="config_management.reload">重新加载</span>
-                                        </button>
-                                        <button id="config-save-btn" class="btn btn-primary">
-                                            <i class="fas fa-save"></i> <span data-i18n="config_management.save">保存</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" data-i18n="config_management.description">查看并编辑服务器上的 config.yaml 配置文件。保存前请确认语法正确。</p>
-                                    <div class="yaml-editor-container">
-                                        <textarea id="config-editor" class="yaml-editor" spellcheck="false" data-i18n="config_management.editor_placeholder"></textarea>
-                                        <div id="config-editor-status" class="editor-status" data-i18n="config_management.status_idle">等待操作</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- 管理中心信息 -->
-                        <section id="system-info" class="content-section">
-                            <h2 data-i18n="system_info.title">管理中心信息</h2>
-
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-layer-group"></i> <span data-i18n="system_info.models_title">可用模型列表</span></h3>
-                                    <button type="button" id="available-models-refresh" class="btn btn-secondary">
-                                        <i class="fas fa-sync-alt"></i> <span data-i18n="common.refresh">刷新</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" data-i18n="system_info.models_desc">展示当前服务返回的 /v1/models 列表（使用服务器保存的 API Key 自动鉴权）。</p>
-                                    <div id="available-models-status" class="available-models-status" data-i18n="common.loading">加载中...</div>
-                                    <div id="available-models-list" class="available-models-list"></div>
-                                </div>
-                            </div>
-
-                            <!-- 连接信息卡片 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-server"></i> <span data-i18n="connection.title">连接信息</span>
-                                    </h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="connection-info">
-                                        <div class="info-item">
-                                            <div class="info-label">
-                                                <i class="fas fa-globe"></i>
-                                                <span data-i18n="connection.server_address">服务器地址:</span>
-                                            </div>
-                                            <div class="info-value" id="display-api-url">-</div>
-                                        </div>
-                                        <div class="info-item">
-                                            <div class="info-label">
-                                                <i class="fas fa-circle"></i>
-                                                <span data-i18n="connection.status">连接状态:</span>
-                                            </div>
-                                            <div class="info-value" id="display-connection-status">
-                                                <span class="status-indicator disconnected"
-                                                    data-i18n="common.disconnected">未连接</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-info-circle"></i> <span
-                                            data-i18n="system_info.connection_status_title">连接状态</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div id="system-status" class="status-info">
-                                        <div class="status-item">
-                                            <span class="status-label" data-i18n="system_info.api_status_label">API
-                                                状态:</span>
-                                            <span id="api-status" class="status-value"
-                                                data-i18n="common.disconnected">未连接</span>
-                                        </div>
-                                        <div class="status-item">
-                                            <span class="status-label"
-                                                data-i18n="system_info.config_status_label">配置状态:</span>
-                                            <span id="config-status" class="status-value"
-                                                data-i18n="system_info.not_loaded">未加载</span>
-                                        </div>
-                                        <div class="status-item">
-                                            <span class="status-label"
-                                                data-i18n="system_info.last_update_label">最后更新:</span>
-                                            <span id="last-update" class="status-value">-</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-arrows-rotate"></i> <span data-i18n="system_info.version_check_title">版本检查</span></h3>
-                                </div>
-                                <div class="card-content version-check">
-                                    <p class="form-hint" data-i18n="system_info.version_check_desc">调用 /latest-version 接口比对服务器版本，提示是否有可用更新。</p>
-                                    <div class="version-check-rows">
-                                        <div class="version-check-row">
-                                            <span class="status-label" data-i18n="system_info.version_current_label">当前版本</span>
-                                            <span id="version-check-current" class="version-check-value">-</span>
-                                        </div>
-                                        <div class="version-check-row">
-                                            <span class="status-label" data-i18n="system_info.version_latest_label">最新版本</span>
-                                            <span id="version-check-latest" class="version-check-value">-</span>
-                                        </div>
-                                    </div>
-                                    <div class="version-check-actions">
-                                        <button type="button" id="version-check-btn" class="btn btn-primary">
-                                            <i class="fas fa-search"></i> <span data-i18n="system_info.version_check_button">检查更新</span>
-                                        </button>
-                                        <span id="version-check-result" class="version-check-result" data-i18n="system_info.version_check_idle">点击检查更新</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                    <!-- /内容区域 -->
-
-                    <!-- 版本信息 -->
-                    <footer class="version-footer">
-                        <div class="version-info">
-                            <span data-i18n="footer.api_version">CLI Proxy API 版本</span>:
-                            <span id="api-version">-</span>
-                            <span class="separator">•</span>
-                            <span data-i18n="footer.build_date">构建时间</span>:
-                            <span id="api-build-date">-</span>
-                            <span class="separator">•</span>
-                            <span data-i18n="footer.version">管理中心版本</span>:
-                            <span id="ui-version" data-ui-version="__VERSION__">-</span>
-                            <span class="separator">•</span>
-                            <span data-i18n="footer.author">作者</span>: CLI Proxy API Team
-                        </div>
-                    </footer>
-                </div>
-                <!-- /主内容区域 -->
-            </div>
-            <!-- /主内容包装器 -->
-        </div>
-        <!-- /主页面 -->
-
-        <!-- 模态框 -->
-        <div id="modal" class="modal">
-            <div class="modal-content">
-                <span class="close">&times;</span>
-                <div id="modal-body"></div>
-            </div>
-        </div>
-
-        <!-- 通知 -->
-        <div id="notification" class="notification"></div>
-
-    </div>
-
-    <script type="module" src="app.js"></script>
-</body>
-
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>cli-proxy-webui-react</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/logo.jpg b/logo.jpg
deleted file mode 100644
index f701a6c..0000000
Binary files a/logo.jpg and /dev/null differ
diff --git a/package-lock.json b/package-lock.json
index 0a30150..3e2c6a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,1064 +1,4287 @@
-{
-  "name": "cli-proxy-api-webui",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "cli-proxy-api-webui",
-      "version": "1.0.0",
-      "license": "MIT",
-      "devDependencies": {
-        "serve": "^14.2.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@zeit/schemas": {
-      "version": "2.36.0",
-      "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.36.0.tgz",
-      "integrity": "sha512-7kjMwcChYEzMKjeex9ZFXkt1AyNov9R5HZtjBKVsmVpw7pa7ZtlCGvCBC2vnnXctaYN+aRI61HjIqeetZW5ROg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ansi-align": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
-      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.1.0"
-      }
-    },
-    "node_modules/ansi-align/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-align/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/ansi-align/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-align/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
-      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
-      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/arch": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
-      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/boxen": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz",
-      "integrity": "sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-align": "^3.0.1",
-        "camelcase": "^7.0.0",
-        "chalk": "^5.0.1",
-        "cli-boxes": "^3.0.0",
-        "string-width": "^5.1.2",
-        "type-fest": "^2.13.0",
-        "widest-line": "^4.0.1",
-        "wrap-ansi": "^8.0.1"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/camelcase": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz",
-      "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/chalk": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz",
-      "integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/chalk-template": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
-      "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk-template?sponsor=1"
-      }
-    },
-    "node_modules/chalk-template/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/chalk-template/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/cli-boxes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
-      "integrity": "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/clipboardy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz",
-      "integrity": "sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "arch": "^2.2.0",
-        "execa": "^5.1.1",
-        "is-wsl": "^2.2.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/compressible": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": ">= 1.43.0 < 2"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/compression": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.1.tgz",
-      "integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "compressible": "~2.0.18",
-        "debug": "2.6.9",
-        "negotiator": "~0.6.4",
-        "on-headers": "~1.1.0",
-        "safe-buffer": "5.2.1",
-        "vary": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/content-disposition": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
-      "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-port-reachable": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-port-reachable/-/is-port-reachable-4.0.0.tgz",
-      "integrity": "sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/mime-db": {
-      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
-      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.18",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
-      "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "~1.33.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types/node_modules/mime-db": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
-      "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/negotiator": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
-      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/on-headers": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
-      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/path-is-inside": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
-      "dev": true,
-      "license": "(WTFPL OR MIT)"
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-to-regexp": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.3.0.tgz",
-      "integrity": "sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
-      "integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/rc": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "dev": true,
-      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
-      "dependencies": {
-        "deep-extend": "^0.6.0",
-        "ini": "~1.3.0",
-        "minimist": "^1.2.0",
-        "strip-json-comments": "~2.0.1"
-      },
-      "bin": {
-        "rc": "cli.js"
-      }
-    },
-    "node_modules/registry-auth-token": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
-      "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "rc": "^1.1.6",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/registry-url": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
-      "integrity": "sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "rc": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/serve": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.5.tgz",
-      "integrity": "sha512-Qn/qMkzCcMFVPb60E/hQy+iRLpiU8PamOfOSYoAHmmF+fFFmpPpqa6Oci2iWYpTdOUM3VF+TINud7CfbQnsZbA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@zeit/schemas": "2.36.0",
-        "ajv": "8.12.0",
-        "arg": "5.0.2",
-        "boxen": "7.0.0",
-        "chalk": "5.0.1",
-        "chalk-template": "0.4.0",
-        "clipboardy": "3.0.0",
-        "compression": "1.8.1",
-        "is-port-reachable": "4.0.0",
-        "serve-handler": "6.1.6",
-        "update-check": "1.5.4"
-      },
-      "bin": {
-        "serve": "build/main.js"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/serve-handler": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.6.tgz",
-      "integrity": "sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "3.0.0",
-        "content-disposition": "0.5.2",
-        "mime-types": "2.1.18",
-        "minimatch": "3.1.2",
-        "path-is-inside": "1.0.2",
-        "path-to-regexp": "3.3.0",
-        "range-parser": "1.2.0"
-      }
-    },
-    "node_modules/serve-handler/node_modules/bytes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
-      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/type-fest": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-      "dev": true,
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/update-check": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.4.tgz",
-      "integrity": "sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "registry-auth-token": "3.3.2",
-        "registry-url": "3.1.0"
-      }
-    },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/widest-line": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",
-      "integrity": "sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "string-width": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    }
-  }
-}
+{
+  "name": "cli-proxy-webui-react",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "cli-proxy-webui-react",
+      "version": "0.0.0",
+      "dependencies": {
+        "@codemirror/lang-yaml": "^6.1.2",
+        "@uiw/react-codemirror": "^4.25.3",
+        "axios": "^1.13.2",
+        "chart.js": "^4.5.1",
+        "i18next": "^25.7.1",
+        "react": "^19.2.1",
+        "react-chartjs-2": "^5.3.1",
+        "react-dom": "^19.2.1",
+        "react-i18next": "^16.4.0",
+        "react-router-dom": "^7.10.1",
+        "zustand": "^5.0.9"
+      },
+      "devDependencies": {
+        "@eslint/js": "^9.39.1",
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
+        "@typescript-eslint/eslint-plugin": "^8.48.1",
+        "@typescript-eslint/parser": "^8.48.1",
+        "@vitejs/plugin-react": "^5.1.1",
+        "eslint": "^9.39.1",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.4.24",
+        "globals": "^16.5.0",
+        "prettier": "^3.7.4",
+        "sass": "^1.94.2",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.48.1",
+        "vite": "^7.2.6",
+        "vite-plugin-singlefile": "^2.3.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.0.tgz",
+      "integrity": "sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.0.tgz",
+      "integrity": "sha512-2xUIc5mHXQzT16JnyOFkh8PvfeXuIut3pslWGfsGOhxP/lpgRm9HOl/mpzLErgt5mXDovqA0d11P21gofRLb9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-yaml": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-yaml/-/lang-yaml-6.1.2.tgz",
+      "integrity": "sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.2.0",
+        "@lezer/lr": "^1.0.0",
+        "@lezer/yaml": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.11.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz",
+      "integrity": "sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.2.tgz",
+      "integrity": "sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.5.11",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.11.tgz",
+      "integrity": "sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
+      "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.38.8",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.8.tgz",
+      "integrity": "sha512-XcE9fcnkHCbWkjeKyi0lllwXmBLtyYb5dt89dJyx23I9+LSh5vZDIuk7OLG4VM1lgrXZQcY6cxyZyk5WVPRv/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.5.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
+      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
+      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz",
+      "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/common": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.4.0.tgz",
+      "integrity": "sha512-DVeMRoGrgn/k45oQNu189BoW4SZwgZFzJ1+1TV5j2NJ/KFC83oa/enRqZSGshyeMk5cPWMhsKs9nx+8o0unwGg==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.4.tgz",
+      "integrity": "sha512-LHL17Mq0OcFXm1pGQssuGTQFPPdxARjKM8f7GA5+sGtHi0K3R84YaSbmche0+RKWHnCsx9asEe5OWOI4FHfe4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/yaml": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/yaml/-/yaml-1.0.3.tgz",
+      "integrity": "sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.4.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.47",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.47.tgz",
+      "integrity": "sha512-8QagwMH3kNCuzD8EWL8R2YPW5e4OrHNSAHRFDdmFqEwEaD/KcNKjVoumo+gP2vW5eKB2UPbM6vTYiGZX0ixLnw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
+      "integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
+      "integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
+      "integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
+      "integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
+      "integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
+      "integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
+      "integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
+      "integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
+      "integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
+      "integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
+      "integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
+      "integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
+      "integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
+      "integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
+      "integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
+      "integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
+      "integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
+      "integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
+      "integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
+      "integrity": "sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
+      "integrity": "sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/react/node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.48.1.tgz",
+      "integrity": "sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.48.1",
+        "@typescript-eslint/type-utils": "8.48.1",
+        "@typescript-eslint/utils": "8.48.1",
+        "@typescript-eslint/visitor-keys": "8.48.1",
+        "graphemer": "^1.4.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.48.1",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.48.1.tgz",
+      "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.48.1",
+        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/typescript-estree": "8.48.1",
+        "@typescript-eslint/visitor-keys": "8.48.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.48.1.tgz",
+      "integrity": "sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.48.1",
+        "@typescript-eslint/types": "^8.48.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.48.1.tgz",
+      "integrity": "sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/visitor-keys": "8.48.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.48.1.tgz",
+      "integrity": "sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.48.1.tgz",
+      "integrity": "sha512-1jEop81a3LrJQLTf/1VfPQdhIY4PlGDBc/i67EVWObrtvcziysbLN3oReexHOM6N3jyXgCrkBsZpqwH0hiDOQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/typescript-estree": "8.48.1",
+        "@typescript-eslint/utils": "8.48.1",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.48.1.tgz",
+      "integrity": "sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.48.1.tgz",
+      "integrity": "sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.48.1",
+        "@typescript-eslint/tsconfig-utils": "8.48.1",
+        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/visitor-keys": "8.48.1",
+        "debug": "^4.3.4",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.48.1.tgz",
+      "integrity": "sha512-fAnhLrDjiVfey5wwFRwrweyRlCmdz5ZxXz2G/4cLn0YDLjTapmN4gcCsTBR1N2rWnZSDeWpYtgLDsJt+FpmcwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.48.1",
+        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/typescript-estree": "8.48.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.48.1.tgz",
+      "integrity": "sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.48.1",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@uiw/codemirror-extensions-basic-setup": {
+      "version": "4.25.3",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.25.3.tgz",
+      "integrity": "sha512-F1doRyD50CWScwGHG2bBUtUpwnOv/zqSnzkZqJcX5YAHQx6Z1CuX8jdnFMH6qktRrPU1tfpNYftTWu3QIoHiMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@codemirror/autocomplete": ">=6.0.0",
+        "@codemirror/commands": ">=6.0.0",
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/lint": ">=6.0.0",
+        "@codemirror/search": ">=6.0.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0"
+      }
+    },
+    "node_modules/@uiw/react-codemirror": {
+      "version": "4.25.3",
+      "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.25.3.tgz",
+      "integrity": "sha512-1wtBZTXPIp8u6F/xjHvsUAYlEeF5Dic4xZBnqJyLzv7o7GjGYEUfSz9Z7bo9aK9GAx2uojG/AuBMfhA4uhvIVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.6",
+        "@codemirror/commands": "^6.1.0",
+        "@codemirror/state": "^6.1.1",
+        "@codemirror/theme-one-dark": "^6.0.0",
+        "@uiw/codemirror-extensions-basic-setup": "4.25.3",
+        "codemirror": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.11.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/theme-one-dark": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0",
+        "codemirror": ">=6.0.0",
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.1.tgz",
+      "integrity": "sha512-WQfkSw0QbQ5aJ2CHYw23ZGkqnRwqKHD/KYsMeTkZzPT4Jcf0DcBxBtwMJxnu6E7oxw5+JC6ZAiePgh28uJ1HBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.47",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.18.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv/node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/browserslist/node_modules/baseline-browser-mapping": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.4.tgz",
+      "integrity": "sha512-ZCQ9GEWl73BVm8bu5Fts8nt7MHdbt5vY9bP6WGnUh+r3l8M7CgfyTlwsgCbMC66BNxPr6Xoce3j66Ms5YUQTNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/browserslist/node_modules/caniuse-lite": {
+      "version": "1.0.30001759",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001759.tgz",
+      "integrity": "sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/browserslist/node_modules/electron-to-chromium": {
+      "version": "1.5.266",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.266.tgz",
+      "integrity": "sha512-kgWEglXvkEfMH7rxP5OSZZwnaDWT7J9EoZCujhnpLbfi0bbNtRkgdX2E3gt0Uer11c61qCYktB3hwkAS325sJg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/codemirror": {
+      "version": "6.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.39.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
+      "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.39.1",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.24.tgz",
+      "integrity": "sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=8.40"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
+      "integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "25.7.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.7.1.tgz",
+      "integrity": "sha512-XbTnkh1yCZWSAZGnA9xcQfHcYNgZs2cNxm+c6v1Ma9UAUGCeJPplRe1ILia6xnDvXBjk0uXU+Z8FYWhA19SKFw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/postcss/node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.4.tgz",
+      "integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
+      "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-chartjs-2": {
+      "version": "5.3.1",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
+      "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.1"
+      }
+    },
+    "node_modules/react-i18next": {
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.4.0.tgz",
+      "integrity": "sha512-bxVeBA8Ky2UeItNhF4JRxHCFIrpEJHGFG/mOAa4CR0JkqaDEYSLmlEgmC4Os63SBlZ+E5U0YyrNJOSVl2mtVqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.6.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.18.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.10.1.tgz",
+      "integrity": "sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.10.1.tgz",
+      "integrity": "sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.10.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.53.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
+      "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.53.3",
+        "@rollup/rollup-android-arm64": "4.53.3",
+        "@rollup/rollup-darwin-arm64": "4.53.3",
+        "@rollup/rollup-darwin-x64": "4.53.3",
+        "@rollup/rollup-freebsd-arm64": "4.53.3",
+        "@rollup/rollup-freebsd-x64": "4.53.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.53.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.53.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.53.3",
+        "@rollup/rollup-linux-arm64-musl": "4.53.3",
+        "@rollup/rollup-linux-loong64-gnu": "4.53.3",
+        "@rollup/rollup-linux-ppc64-gnu": "4.53.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.53.3",
+        "@rollup/rollup-linux-riscv64-musl": "4.53.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-musl": "4.53.3",
+        "@rollup/rollup-openharmony-arm64": "4.53.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.53.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.53.3",
+        "@rollup/rollup-win32-x64-gnu": "4.53.3",
+        "@rollup/rollup-win32-x64-msvc": "4.53.3",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.94.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz",
+      "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass/node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "license": "MIT"
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-eslint": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.48.1.tgz",
+      "integrity": "sha512-FbOKN1fqNoXp1hIl5KYpObVrp0mCn+CLgn479nmu2IsRMrx2vyv74MmsBLVlhg8qVwNFGbXSp8fh1zp8pEoC2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.48.1",
+        "@typescript-eslint/parser": "8.48.1",
+        "@typescript-eslint/typescript-estree": "8.48.1",
+        "@typescript-eslint/utils": "8.48.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.2",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.6.tgz",
+      "integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-singlefile": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-singlefile/-/vite-plugin-singlefile-2.3.0.tgz",
+      "integrity": "sha512-DAcHzYypM0CasNLSz/WG0VdKOCxGHErfrjOoyIPiNxTPTGmO6rRD/te93n1YL/s+miXq66ipF1brMBikf99c6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">18.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^4.44.1",
+        "vite": "^5.4.11 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "license": "MIT"
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz",
+      "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.9.tgz",
+      "integrity": "sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 5092770..fcdd7dd 100644
--- a/package.json
+++ b/package.json
@@ -1,31 +1,45 @@
-{
-  "name": "cli-proxy-api-webui",
-  "version": "1.0.0",
-  "description": "CLI Proxy API 管理界面",
-  "main": "index.html",
-  "type": "module",
-  "scripts": {
-    "start": "npx serve .",
-    "dev": "npx serve . -l 3090",
-    "build": "node build.cjs",
-    "lint": "echo '使用浏览器开发者工具检查代码'"
-  },
-  "keywords": [
-    "cli-proxy-api",
-    "webui",
-    "management",
-    "api"
-  ],
-  "author": "CLI Proxy API WebUI",
-  "license": "MIT",
-  "devDependencies": {
-    "serve": "^14.2.1"
-  },
-  "engines": {
-    "node": ">=14.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "local"
-  }
-}
+{
+  "name": "cli-proxy-webui-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,scss}\"",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@uiw/react-codemirror": "^4.25.3",
+    "axios": "^1.13.2",
+    "chart.js": "^4.5.1",
+    "i18next": "^25.7.1",
+    "react": "^19.2.1",
+    "react-chartjs-2": "^5.3.1",
+    "react-dom": "^19.2.1",
+    "react-i18next": "^16.4.0",
+    "react-router-dom": "^7.10.1",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "prettier": "^3.7.4",
+    "sass": "^1.94.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vite-plugin-singlefile": "^2.3.0"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..b9d355d
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..d42b409
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { LoginPage } from '@/pages/LoginPage';
+import { SettingsPage } from '@/pages/SettingsPage';
+import { ApiKeysPage } from '@/pages/ApiKeysPage';
+import { AiProvidersPage } from '@/pages/AiProvidersPage';
+import { AuthFilesPage } from '@/pages/AuthFilesPage';
+import { OAuthPage } from '@/pages/OAuthPage';
+import { UsagePage } from '@/pages/UsagePage';
+import { ConfigPage } from '@/pages/ConfigPage';
+import { LogsPage } from '@/pages/LogsPage';
+import { SystemPage } from '@/pages/SystemPage';
+import { NotificationContainer } from '@/components/common/NotificationContainer';
+import { MainLayout } from '@/components/layout/MainLayout';
+import { ProtectedRoute } from '@/router/ProtectedRoute';
+import { useAuthStore, useLanguageStore, useThemeStore } from '@/stores';
+
+function App() {
+  const initializeTheme = useThemeStore((state) => state.initializeTheme);
+  const language = useLanguageStore((state) => state.language);
+  const setLanguage = useLanguageStore((state) => state.setLanguage);
+  const restoreSession = useAuthStore((state) => state.restoreSession);
+
+  useEffect(() => {
+    initializeTheme();
+    restoreSession();
+  }, [initializeTheme, restoreSession]);
+
+  useEffect(() => {
+    setLanguage(language);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // 仅用于首屏同步 i18n 语言
+
+  return (
+    <HashRouter>
+      <NotificationContainer />
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route
+          path="/"
+          element={
+            <ProtectedRoute>
+              <MainLayout />
+            </ProtectedRoute>
+          }
+        >
+          <Route index element={<Navigate to="/settings" replace />} />
+          <Route path="settings" element={<SettingsPage />} />
+          <Route path="api-keys" element={<ApiKeysPage />} />
+          <Route path="ai-providers" element={<AiProvidersPage />} />
+          <Route path="auth-files" element={<AuthFilesPage />} />
+          <Route path="oauth" element={<OAuthPage />} />
+          <Route path="usage" element={<UsagePage />} />
+          <Route path="config" element={<ConfigPage />} />
+          <Route path="logs" element={<LogsPage />} />
+          <Route path="system" element={<SystemPage />} />
+          <Route path="*" element={<Navigate to="/settings" replace />} />
+        </Route>
+      </Routes>
+    </HashRouter>
+  );
+}
+
+export default App;
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/common/NotificationContainer.tsx b/src/components/common/NotificationContainer.tsx
new file mode 100644
index 0000000..607f07e
--- /dev/null
+++ b/src/components/common/NotificationContainer.tsx
@@ -0,0 +1,20 @@
+import { useNotificationStore } from '@/stores';
+
+export function NotificationContainer() {
+  const { notifications, removeNotification } = useNotificationStore();
+
+  if (!notifications.length) return null;
+
+  return (
+    <div className="notification-container">
+      {notifications.map((notification) => (
+        <div key={notification.id} className={`notification ${notification.type}`}>
+          <div className="message">{notification.message}</div>
+          <button className="close-btn" onClick={() => removeNotification(notification.id)}>
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
new file mode 100644
index 0000000..bfa23d4
--- /dev/null
+++ b/src/components/layout/MainLayout.tsx
@@ -0,0 +1,225 @@
+import { useEffect, useMemo, useState } from 'react';
+import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { useAuthStore, useConfigStore, useLanguageStore, useNotificationStore, useThemeStore } from '@/stores';
+import { versionApi } from '@/services/api';
+import { isLocalhost } from '@/utils/connection';
+
+const parseVersionSegments = (version?: string | null) => {
+  if (!version) return null;
+  const cleaned = version.trim().replace(/^v/i, '');
+  if (!cleaned) return null;
+  const parts = cleaned
+    .split(/[^0-9]+/)
+    .filter(Boolean)
+    .map((segment) => Number.parseInt(segment, 10))
+    .filter(Number.isFinite);
+  return parts.length ? parts : null;
+};
+
+const compareVersions = (latest?: string | null, current?: string | null) => {
+  const latestParts = parseVersionSegments(latest);
+  const currentParts = parseVersionSegments(current);
+  if (!latestParts || !currentParts) return null;
+  const length = Math.max(latestParts.length, currentParts.length);
+  for (let i = 0; i < length; i++) {
+    const l = latestParts[i] || 0;
+    const c = currentParts[i] || 0;
+    if (l > c) return 1;
+    if (l < c) return -1;
+  }
+  return 0;
+};
+
+export function MainLayout() {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const { showNotification } = useNotificationStore();
+
+  const apiBase = useAuthStore((state) => state.apiBase);
+  const serverVersion = useAuthStore((state) => state.serverVersion);
+  const serverBuildDate = useAuthStore((state) => state.serverBuildDate);
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const checkAuth = useAuthStore((state) => state.checkAuth);
+  const logout = useAuthStore((state) => state.logout);
+
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const theme = useThemeStore((state) => state.theme);
+  const toggleTheme = useThemeStore((state) => state.toggleTheme);
+  const language = useLanguageStore((state) => state.language);
+  const toggleLanguage = useLanguageStore((state) => state.toggleLanguage);
+
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [checkingConnection, setCheckingConnection] = useState(false);
+  const [checkingVersion, setCheckingVersion] = useState(false);
+
+  const isLocal = useMemo(() => isLocalhost(window.location.hostname), []);
+
+  useEffect(() => {
+    fetchConfig().catch(() => {
+      // ignore initial failure; login flow会提示
+    });
+  }, [fetchConfig]);
+
+  const statusClass =
+    connectionStatus === 'connected'
+      ? 'success'
+      : connectionStatus === 'connecting'
+        ? 'warning'
+        : connectionStatus === 'error'
+          ? 'error'
+          : 'muted';
+
+  const navItems = [
+    { path: '/settings', label: t('nav.basic_settings') },
+    { path: '/api-keys', label: t('nav.api_keys') },
+    { path: '/ai-providers', label: t('nav.ai_providers') },
+    { path: '/auth-files', label: t('nav.auth_files') },
+    ...(isLocal ? [{ path: '/oauth', label: t('nav.oauth', { defaultValue: 'OAuth' }) }] : []),
+    { path: '/usage', label: t('nav.usage_stats') },
+    { path: '/config', label: t('nav.config_management') },
+    ...(config?.loggingToFile ? [{ path: '/logs', label: t('nav.logs') }] : []),
+    { path: '/system', label: t('nav.system_info') }
+  ];
+
+  const handleRefreshAll = async () => {
+    clearCache();
+    try {
+      await fetchConfig(undefined, true);
+      showNotification(t('notification.data_refreshed'), 'success');
+    } catch (error: any) {
+      showNotification(`${t('notification.refresh_failed')}: ${error?.message || ''}`, 'error');
+    }
+  };
+
+  const handleCheckConnection = async () => {
+    setCheckingConnection(true);
+    try {
+      const ok = await checkAuth();
+      if (ok) {
+        showNotification(t('common.connected_status'), 'success');
+      } else {
+        showNotification(t('common.disconnected_status'), 'warning');
+      }
+    } catch (error: any) {
+      showNotification(`${t('notification.login_failed')}: ${error?.message || ''}`, 'error');
+    } finally {
+      setCheckingConnection(false);
+    }
+  };
+
+  const handleVersionCheck = async () => {
+    setCheckingVersion(true);
+    try {
+      const data = await versionApi.checkLatest();
+      const latest = data?.['latest-version'] ?? data?.latest_version ?? data?.latest ?? '';
+      const comparison = compareVersions(latest, serverVersion);
+
+      if (!latest) {
+        showNotification(t('system_info.version_check_error'), 'error');
+        return;
+      }
+
+      if (comparison === null) {
+        showNotification(t('system_info.version_current_missing'), 'warning');
+        return;
+      }
+
+      if (comparison > 0) {
+        showNotification(t('system_info.version_update_available', { version: latest }), 'warning');
+      } else {
+        showNotification(t('system_info.version_is_latest'), 'success');
+      }
+    } catch (error: any) {
+      showNotification(`${t('system_info.version_check_error')}: ${error?.message || ''}`, 'error');
+    } finally {
+      setCheckingVersion(false);
+    }
+  };
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login', { replace: true });
+  };
+
+  return (
+    <div className="app-shell">
+      <aside className={`sidebar ${sidebarOpen ? 'open' : ''}`}>
+        <div className="brand">{t('title.abbr')}</div>
+        <div className="nav-section">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
+              onClick={() => setSidebarOpen(false)}
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </div>
+      </aside>
+
+      <div className="content">
+        <header className="main-header">
+          <div className="left">
+            <Button variant="ghost" size="sm" onClick={() => setSidebarOpen((prev) => !prev)}>
+              ☰
+            </Button>
+            <div className="connection">
+              <span className={`status-badge ${statusClass}`}>
+                {t(
+                  connectionStatus === 'connected'
+                    ? 'common.connected_status'
+                    : connectionStatus === 'connecting'
+                      ? 'common.connecting_status'
+                      : 'common.disconnected_status'
+                )}
+              </span>
+              <span className="base">{apiBase || '-'}</span>
+            </div>
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <Button variant="secondary" size="sm" onClick={handleCheckConnection} loading={checkingConnection}>
+              {t('header.check_connection')}
+            </Button>
+            <Button variant="secondary" size="sm" onClick={handleRefreshAll}>
+              {t('header.refresh_all')}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={handleVersionCheck} loading={checkingVersion}>
+              {t('system_info.version_check_button')}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={toggleLanguage}>
+              {t('language.switch')}: {language === 'zh-CN' ? t('language.chinese') : t('language.english')}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={toggleTheme}>
+              {t('theme.switch')}: {theme === 'dark' ? t('theme.dark') : t('theme.light')}
+            </Button>
+            <Button variant="danger" size="sm" onClick={handleLogout}>
+              {t('header.logout')}
+            </Button>
+          </div>
+        </header>
+
+        <main className="main-content">
+          <Outlet />
+        </main>
+
+        <footer className="footer">
+          <span>
+            {t('footer.api_version')}: {serverVersion || t('system_info.version_unknown')}
+          </span>
+          <span>
+            {t('footer.build_date')}:{' '}
+            {serverBuildDate ? new Date(serverBuildDate).toLocaleString(i18n.language) : t('system_info.version_unknown')}
+          </span>
+        </footer>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..00d71a9
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'md' | 'sm';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  fullWidth?: boolean;
+  loading?: boolean;
+}
+
+export function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  fullWidth = false,
+  loading = false,
+  className = '',
+  disabled,
+  ...rest
+}: PropsWithChildren<ButtonProps>) {
+  const classes = [
+    'btn',
+    `btn-${variant}`,
+    size === 'sm' ? 'btn-sm' : '',
+    fullWidth ? 'btn-full' : '',
+    className
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button className={classes} disabled={disabled || loading} {...rest}>
+      {loading && <span className="loading-spinner" aria-hidden="true" />}
+      <span>{children}</span>
+    </button>
+  );
+}
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
new file mode 100644
index 0000000..1e09b2b
--- /dev/null
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,20 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+
+interface CardProps {
+  title?: ReactNode;
+  extra?: ReactNode;
+}
+
+export function Card({ title, extra, children }: PropsWithChildren<CardProps>) {
+  return (
+    <div className="card">
+      {(title || extra) && (
+        <div className="card-header">
+          <div className="title">{title}</div>
+          {extra}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/ui/EmptyState.tsx b/src/components/ui/EmptyState.tsx
new file mode 100644
index 0000000..a3be192
--- /dev/null
+++ b/src/components/ui/EmptyState.tsx
@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+interface EmptyStateProps {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export function EmptyState({ title, description, action }: EmptyStateProps) {
+  return (
+    <div className="empty-state">
+      <div className="empty-content">
+        <div className="empty-icon" aria-hidden="true">
+          ◦
+        </div>
+        <div>
+          <div className="empty-title">{title}</div>
+          {description && <div className="empty-desc">{description}</div>}
+        </div>
+      </div>
+      {action && <div className="empty-action">{action}</div>}
+    </div>
+  );
+}
diff --git a/src/components/ui/HeaderInputList.tsx b/src/components/ui/HeaderInputList.tsx
new file mode 100644
index 0000000..e0fc618
--- /dev/null
+++ b/src/components/ui/HeaderInputList.tsx
@@ -0,0 +1,74 @@
+import { Fragment } from 'react';
+import { Button } from './Button';
+import type { HeaderEntry } from '@/utils/headers';
+
+interface HeaderInputListProps {
+  entries: HeaderEntry[];
+  onChange: (entries: HeaderEntry[]) => void;
+  addLabel: string;
+  disabled?: boolean;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+}
+
+export function HeaderInputList({
+  entries,
+  onChange,
+  addLabel,
+  disabled = false,
+  keyPlaceholder = 'X-Custom-Header',
+  valuePlaceholder = 'value'
+}: HeaderInputListProps) {
+  const currentEntries = entries.length ? entries : [{ key: '', value: '' }];
+
+  const updateEntry = (index: number, field: 'key' | 'value', value: string) => {
+    const next = currentEntries.map((entry, idx) => (idx === index ? { ...entry, [field]: value } : entry));
+    onChange(next);
+  };
+
+  const addEntry = () => {
+    onChange([...currentEntries, { key: '', value: '' }]);
+  };
+
+  const removeEntry = (index: number) => {
+    const next = currentEntries.filter((_, idx) => idx !== index);
+    onChange(next.length ? next : [{ key: '', value: '' }]);
+  };
+
+  return (
+    <div className="header-input-list">
+      {currentEntries.map((entry, index) => (
+        <Fragment key={index}>
+          <div className="header-input-row">
+            <input
+              className="input"
+              placeholder={keyPlaceholder}
+              value={entry.key}
+              onChange={(e) => updateEntry(index, 'key', e.target.value)}
+              disabled={disabled}
+            />
+            <span className="header-separator">:</span>
+            <input
+              className="input"
+              placeholder={valuePlaceholder}
+              value={entry.value}
+              onChange={(e) => updateEntry(index, 'value', e.target.value)}
+              disabled={disabled}
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => removeEntry(index)}
+              disabled={disabled || currentEntries.length <= 1}
+            >
+              ✕
+            </Button>
+          </div>
+        </Fragment>
+      ))}
+      <Button variant="secondary" size="sm" onClick={addEntry} disabled={disabled} className="align-start">
+        {addLabel}
+      </Button>
+    </div>
+  );
+}
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..3ebe3dc
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,26 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  rightElement?: ReactNode;
+}
+
+export function Input({ label, hint, error, rightElement, className = '', ...rest }: InputProps) {
+  return (
+    <div className="form-group">
+      {label && <label>{label}</label>}
+      <div style={{ position: 'relative' }}>
+        <input className={`input ${className}`.trim()} {...rest} />
+        {rightElement && (
+          <div style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)' }}>
+            {rightElement}
+          </div>
+        )}
+      </div>
+      {hint && <div className="hint">{hint}</div>}
+      {error && <div className="error-box">{error}</div>}
+    </div>
+  );
+}
diff --git a/src/components/ui/LoadingSpinner.tsx b/src/components/ui/LoadingSpinner.tsx
new file mode 100644
index 0000000..1ab9274
--- /dev/null
+++ b/src/components/ui/LoadingSpinner.tsx
@@ -0,0 +1,10 @@
+export function LoadingSpinner({ size = 20 }: { size?: number }) {
+  return (
+    <div
+      className="loading-spinner"
+      style={{ width: size, height: size, borderWidth: size / 7 }}
+      role="status"
+      aria-live="polite"
+    />
+  );
+}
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
new file mode 100644
index 0000000..e17205d
--- /dev/null
+++ b/src/components/ui/Modal.tsx
@@ -0,0 +1,34 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+
+interface ModalProps {
+  open: boolean;
+  title?: ReactNode;
+  onClose: () => void;
+  footer?: ReactNode;
+  width?: number | string;
+}
+
+export function Modal({ open, title, onClose, footer, width = 520, children }: PropsWithChildren<ModalProps>) {
+  if (!open) return null;
+
+  const handleMaskClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={handleMaskClick}>
+      <div className="modal" style={{ width }} role="dialog" aria-modal="true">
+        <div className="modal-header">
+          <div className="modal-title">{title}</div>
+          <button className="modal-close" onClick={onClose} aria-label="Close">
+            ×
+          </button>
+        </div>
+        <div className="modal-body">{children}</div>
+        {footer && <div className="modal-footer">{footer}</div>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/ToggleSwitch.tsx b/src/components/ui/ToggleSwitch.tsx
new file mode 100644
index 0000000..d463a92
--- /dev/null
+++ b/src/components/ui/ToggleSwitch.tsx
@@ -0,0 +1,24 @@
+import type { ChangeEvent } from 'react';
+
+interface ToggleSwitchProps {
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+}
+
+export function ToggleSwitch({ checked, onChange, label, disabled = false }: ToggleSwitchProps) {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked);
+  };
+
+  return (
+    <label className="switch">
+      <input type="checkbox" checked={checked} onChange={handleChange} disabled={disabled} />
+      <span className="track">
+        <span className="thumb" />
+      </span>
+      {label && <span className="label">{label}</span>}
+    </label>
+  );
+}
diff --git a/src/core/api-client.js b/src/core/api-client.js
deleted file mode 100644
index 33ec9a3..0000000
--- a/src/core/api-client.js
+++ /dev/null
@@ -1,87 +0,0 @@
-// API 客户端：负责规范化基础地址、构造完整 URL、发送请求并回传版本信息
-export class ApiClient {
-    constructor({ apiBase = '', managementKey = '', onVersionUpdate = null } = {}) {
-        this.apiBase = '';
-        this.apiUrl = '';
-        this.managementKey = managementKey || '';
-        this.onVersionUpdate = onVersionUpdate;
-        this.setApiBase(apiBase);
-    }
-
-    buildHeaders(options = {}) {
-        const customHeaders = options.headers || {};
-        const headers = {
-            'Authorization': `Bearer ${this.managementKey}`,
-            ...customHeaders
-        };
-        const hasContentType = Object.keys(headers).some(key => key.toLowerCase() === 'content-type');
-        const body = options.body;
-        const isFormData = typeof FormData !== 'undefined' && body instanceof FormData;
-        if (!hasContentType && !isFormData) {
-            headers['Content-Type'] = 'application/json';
-        }
-        return headers;
-    }
-
-    normalizeBase(input) {
-        let base = (input || '').trim();
-        if (!base) return '';
-        base = base.replace(/\/?v0\/management\/?$/i, '');
-        base = base.replace(/\/+$/i, '');
-        if (!/^https?:\/\//i.test(base)) {
-            base = 'http://' + base;
-        }
-        return base;
-    }
-
-    computeApiUrl(base) {
-        const normalized = this.normalizeBase(base);
-        if (!normalized) return '';
-        return normalized.replace(/\/$/, '') + '/v0/management';
-    }
-
-    setApiBase(newBase) {
-        this.apiBase = this.normalizeBase(newBase);
-        this.apiUrl = this.computeApiUrl(this.apiBase);
-        return this.apiUrl;
-    }
-
-    setManagementKey(key) {
-        this.managementKey = key || '';
-    }
-
-    async request(endpoint, options = {}) {
-        const url = `${this.apiUrl}${endpoint}`;
-        const headers = this.buildHeaders(options);
-
-        const response = await fetch(url, {
-            ...options,
-            headers
-        });
-
-        if (typeof this.onVersionUpdate === 'function') {
-            this.onVersionUpdate(response.headers);
-        }
-
-        if (!response.ok) {
-            const errorData = await response.json().catch(() => ({}));
-            throw new Error(errorData.error || `HTTP ${response.status}`);
-        }
-
-        return await response.json();
-    }
-
-    // 返回原始 Response，供下载/自定义解析使用
-    async requestRaw(endpoint, options = {}) {
-        const url = `${this.apiUrl}${endpoint}`;
-        const headers = this.buildHeaders(options);
-        const response = await fetch(url, {
-            ...options,
-            headers
-        });
-        if (typeof this.onVersionUpdate === 'function') {
-            this.onVersionUpdate(response.headers);
-        }
-        return response;
-    }
-}
diff --git a/src/core/config-service.js b/src/core/config-service.js
deleted file mode 100644
index b9771ba..0000000
--- a/src/core/config-service.js
+++ /dev/null
@@ -1,70 +0,0 @@
-// 配置缓存服务：负责分段/全量读取配置与缓存控制，不涉及任何 DOM
-export class ConfigService {
-    constructor({ apiClient, cacheExpiry }) {
-        this.apiClient = apiClient;
-        this.cacheExpiry = cacheExpiry;
-        this.cache = {};
-        this.cacheTimestamps = {};
-    }
-
-    isCacheValid(section = null) {
-        if (section) {
-            if (!(section in this.cache) || !(section in this.cacheTimestamps)) {
-                return false;
-            }
-            return (Date.now() - this.cacheTimestamps[section]) < this.cacheExpiry;
-        }
-        if (!this.cache['__full__'] || !this.cacheTimestamps['__full__']) {
-            return false;
-        }
-        return (Date.now() - this.cacheTimestamps['__full__']) < this.cacheExpiry;
-    }
-
-    clearCache(section = null) {
-        if (section) {
-            delete this.cache[section];
-            delete this.cacheTimestamps[section];
-            if (this.cache['__full__']) {
-                delete this.cache['__full__'][section];
-            }
-            return;
-        }
-        Object.keys(this.cache).forEach(key => delete this.cache[key]);
-        Object.keys(this.cacheTimestamps).forEach(key => delete this.cacheTimestamps[key]);
-    }
-
-    async getConfig(section = null, forceRefresh = false) {
-        const now = Date.now();
-
-        if (section && !forceRefresh && this.isCacheValid(section)) {
-            return this.cache[section];
-        }
-
-        if (!section && !forceRefresh && this.isCacheValid()) {
-            return this.cache['__full__'];
-        }
-
-        const config = await this.apiClient.request('/config');
-
-        if (section) {
-            this.cache[section] = config[section];
-            this.cacheTimestamps[section] = now;
-            if (this.cache['__full__']) {
-                this.cache['__full__'][section] = config[section];
-            } else {
-                this.cache['__full__'] = config;
-                this.cacheTimestamps['__full__'] = now;
-            }
-            return config[section];
-        }
-
-        this.cache['__full__'] = config;
-        this.cacheTimestamps['__full__'] = now;
-        Object.keys(config).forEach(key => {
-            this.cache[key] = config[key];
-            this.cacheTimestamps[key] = now;
-        });
-
-        return config;
-    }
-}
diff --git a/src/core/connection.js b/src/core/connection.js
deleted file mode 100644
index 97b4cea..0000000
--- a/src/core/connection.js
+++ /dev/null
@@ -1,746 +0,0 @@
-// 连接与配置缓存核心模块
-// 提供 API 基础地址规范化、请求封装、配置缓存以及统一数据加载能力
-
-import { STATUS_UPDATE_INTERVAL_MS, DEFAULT_API_PORT } from '../utils/constants.js';
-import { secureStorage } from '../utils/secure-storage.js';
-import { normalizeModelList, classifyModels } from '../utils/models.js';
-
-const buildModelsEndpoint = (baseUrl) => {
-    if (!baseUrl) return '';
-    const trimmed = String(baseUrl).trim().replace(/\/+$/g, '');
-    if (!trimmed) return '';
-    return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
-};
-
-const normalizeApiKeyList = (input) => {
-    if (!Array.isArray(input)) return [];
-    const seen = new Set();
-    const keys = [];
-
-    input.forEach(item => {
-        const value = typeof item === 'string'
-            ? item
-            : (item && item['api-key'] ? item['api-key'] : '');
-        const trimmed = String(value || '').trim();
-        if (!trimmed || seen.has(trimmed)) {
-            return;
-        }
-        seen.add(trimmed);
-        keys.push(trimmed);
-    });
-
-    return keys;
-};
-
-export const connectionModule = {
-    // 规范化基础地址，移除尾部斜杠与 /v0/management
-    normalizeBase(input) {
-        return this.apiClient.normalizeBase(input);
-    },
-
-    // 由基础地址生成完整管理 API 地址
-    computeApiUrl(base) {
-        return this.apiClient.computeApiUrl(base);
-    },
-
-    setApiBase(newBase) {
-        this.apiClient.setApiBase(newBase);
-        this.apiBase = this.apiClient.apiBase;
-        this.apiUrl = this.apiClient.apiUrl;
-        secureStorage.setItem('apiBase', this.apiBase);
-        secureStorage.setItem('apiUrl', this.apiUrl); // 兼容旧字段
-        this.updateLoginConnectionInfo();
-    },
-
-    setManagementKey(key, { persist = true } = {}) {
-        this.managementKey = key || '';
-        this.apiClient.setManagementKey(this.managementKey);
-        if (persist) {
-            secureStorage.setItem('managementKey', this.managementKey);
-        }
-    },
-
-    // 加载设置（简化版，仅加载内部状态）
-    loadSettings() {
-        secureStorage.migratePlaintextKeys(['apiBase', 'apiUrl', 'managementKey']);
-
-        const savedBase = secureStorage.getItem('apiBase');
-        const savedUrl = secureStorage.getItem('apiUrl');
-        const savedKey = secureStorage.getItem('managementKey');
-
-        if (savedBase) {
-            this.setApiBase(savedBase);
-        } else if (savedUrl) {
-            const base = (savedUrl || '').replace(/\/?v0\/management\/?$/i, '');
-            this.setApiBase(base);
-        } else {
-            this.setApiBase(this.detectApiBaseFromLocation());
-        }
-
-        this.setManagementKey(savedKey || '', { persist: false });
-
-        this.updateLoginConnectionInfo();
-    },
-
-    // 读取并填充管理中心版本号（可能来自构建时注入或占位符）
-    initUiVersion() {
-        const uiVersion = this.readUiVersionFromDom();
-        this.uiVersion = uiVersion;
-        this.renderVersionInfo();
-    },
-
-    // 从 DOM 获取版本占位符，并处理空值、引号或未替换的占位符
-    readUiVersionFromDom() {
-        const el = document.getElementById('ui-version');
-        if (!el) return null;
-
-        const raw = (el.dataset && el.dataset.uiVersion) ? el.dataset.uiVersion : el.textContent;
-        if (typeof raw !== 'string') return null;
-
-        const cleaned = raw.replace(/^"+|"+$/g, '').trim();
-        if (!cleaned || cleaned === '__VERSION__') {
-            return null;
-        }
-        return cleaned;
-    },
-
-    // 根据响应头更新版本与构建时间
-    updateVersionFromHeaders(headers) {
-        if (!headers || typeof headers.get !== 'function') {
-            return;
-        }
-
-        const version = headers.get('X-CPA-VERSION');
-        const buildDate = headers.get('X-CPA-BUILD-DATE');
-        let updated = false;
-
-        if (version && version !== this.serverVersion) {
-            this.serverVersion = version;
-            updated = true;
-        }
-
-        if (buildDate && buildDate !== this.serverBuildDate) {
-            this.serverBuildDate = buildDate;
-            updated = true;
-        }
-
-        if (updated) {
-            this.renderVersionInfo();
-        }
-    },
-
-    renderVersionCheckStatus({
-        currentVersion,
-        latestVersion,
-        message,
-        status
-    } = {}) {
-        const resolvedCurrent = (typeof currentVersion === 'undefined' || currentVersion === null)
-            ? this.serverVersion
-            : currentVersion;
-        const resolvedLatest = (typeof latestVersion === 'undefined' || latestVersion === null)
-            ? this.latestVersion
-            : latestVersion;
-        const resolvedMessage = (typeof message === 'undefined' || message === null)
-            ? (this.versionCheckMessage || i18n.t('system_info.version_check_idle'))
-            : message;
-        const resolvedStatus = status || this.versionCheckStatus || 'muted';
-
-        this.latestVersion = resolvedLatest || null;
-        this.versionCheckMessage = resolvedMessage;
-        this.versionCheckStatus = resolvedStatus;
-
-        const currentEl = document.getElementById('version-check-current');
-        if (currentEl) {
-            currentEl.textContent = resolvedCurrent || i18n.t('system_info.version_unknown');
-        }
-
-        const latestEl = document.getElementById('version-check-latest');
-        if (latestEl) {
-            latestEl.textContent = resolvedLatest || '-';
-        }
-
-        const resultEl = document.getElementById('version-check-result');
-        if (resultEl) {
-            resultEl.textContent = resolvedMessage;
-            resultEl.className = `version-check-result ${resolvedStatus}`.trim();
-        }
-    },
-
-    resetVersionCheckStatus() {
-        this.latestVersion = null;
-        this.versionCheckMessage = i18n.t('system_info.version_check_idle');
-        this.versionCheckStatus = 'muted';
-        this.renderVersionCheckStatus({
-            currentVersion: this.serverVersion,
-            latestVersion: this.latestVersion,
-            message: this.versionCheckMessage,
-            status: this.versionCheckStatus
-        });
-    },
-
-    // 渲染底栏的版本与构建时间
-    renderVersionInfo() {
-        const versionEl = document.getElementById('api-version');
-        const buildDateEl = document.getElementById('api-build-date');
-        const uiVersionEl = document.getElementById('ui-version');
-
-        if (versionEl) {
-            versionEl.textContent = this.serverVersion || '-';
-        }
-
-        if (buildDateEl) {
-            buildDateEl.textContent = this.serverBuildDate
-                ? this.formatBuildDate(this.serverBuildDate)
-                : '-';
-        }
-
-        if (uiVersionEl) {
-            const domVersion = this.readUiVersionFromDom();
-            uiVersionEl.textContent = this.uiVersion || domVersion || 'v0.0.0-dev';
-        }
-
-        this.renderVersionCheckStatus({
-            currentVersion: this.serverVersion,
-            latestVersion: this.latestVersion,
-            message: this.versionCheckMessage,
-            status: this.versionCheckStatus
-        });
-    },
-
-    // 清空版本信息（例如登出时）
-    resetVersionInfo() {
-        this.serverVersion = null;
-        this.serverBuildDate = null;
-        this.resetVersionCheckStatus();
-        this.renderVersionInfo();
-    },
-
-    // 格式化构建时间，优先使用界面语言对应的本地格式
-    formatBuildDate(buildDate) {
-        if (!buildDate) return '-';
-
-        const parsed = Date.parse(buildDate);
-        if (!Number.isNaN(parsed)) {
-            const locale = i18n?.currentLanguage || undefined;
-            return new Date(parsed).toLocaleString(locale);
-        }
-
-        return buildDate;
-    },
-
-    parseVersionSegments(version) {
-        if (!version || typeof version !== 'string') return null;
-        const cleaned = version.trim().replace(/^v/i, '');
-        if (!cleaned) return null;
-        const parts = cleaned.split(/[^0-9]+/).filter(Boolean).map(segment => {
-            const parsed = parseInt(segment, 10);
-            return Number.isFinite(parsed) ? parsed : 0;
-        });
-        return parts.length ? parts : null;
-    },
-
-    compareVersions(latestVersion, currentVersion) {
-        const latestParts = this.parseVersionSegments(latestVersion);
-        const currentParts = this.parseVersionSegments(currentVersion);
-        if (!latestParts || !currentParts) {
-            return null;
-        }
-
-        const length = Math.max(latestParts.length, currentParts.length);
-        for (let i = 0; i < length; i++) {
-            const latest = latestParts[i] || 0;
-            const current = currentParts[i] || 0;
-            if (latest > current) return 1;
-            if (latest < current) return -1;
-        }
-
-        return 0;
-    },
-
-    async checkLatestVersion() {
-        if (!this.isConnected) {
-            const message = i18n.t('notification.connection_required');
-            this.renderVersionCheckStatus({
-                currentVersion: this.serverVersion,
-                latestVersion: this.latestVersion,
-                message,
-                status: 'warning'
-            });
-            this.showNotification(message, 'error');
-            return;
-        }
-
-        const button = document.getElementById('version-check-btn');
-        const originalLabel = button ? button.innerHTML : '';
-
-        if (button) {
-            button.disabled = true;
-            button.innerHTML = `<div class="loading"></div> ${i18n.t('system_info.version_checking')}`;
-        }
-
-        this.renderVersionCheckStatus({
-            currentVersion: this.serverVersion,
-            latestVersion: this.latestVersion,
-            message: i18n.t('system_info.version_checking'),
-            status: 'info'
-        });
-
-        try {
-            const data = await this.makeRequest('/latest-version');
-            const latestVersion = data?.['latest-version'] || data?.latest_version || '';
-            const latestParts = this.parseVersionSegments(latestVersion);
-            const currentParts = this.parseVersionSegments(this.serverVersion);
-            const comparison = (latestParts && currentParts)
-                ? this.compareVersions(latestVersion, this.serverVersion)
-                : null;
-            let messageKey = 'system_info.version_check_error';
-            let statusClass = 'error';
-
-            if (!latestParts) {
-                messageKey = 'system_info.version_check_error';
-            } else if (!currentParts) {
-                messageKey = 'system_info.version_current_missing';
-                statusClass = 'warning';
-            } else if (comparison > 0) {
-                messageKey = 'system_info.version_update_available';
-                statusClass = 'warning';
-            } else {
-                messageKey = 'system_info.version_is_latest';
-                statusClass = 'success';
-            }
-
-            const message = i18n.t(messageKey, latestVersion ? { version: latestVersion } : undefined);
-            this.renderVersionCheckStatus({
-                currentVersion: this.serverVersion,
-                latestVersion,
-                message,
-                status: statusClass
-            });
-
-            if (latestVersion && comparison !== null) {
-                const notifyKey = comparison > 0
-                    ? 'system_info.version_update_available'
-                    : 'system_info.version_is_latest';
-                const notifyType = comparison > 0 ? 'warning' : 'success';
-                this.showNotification(i18n.t(notifyKey, { version: latestVersion }), notifyType);
-            }
-        } catch (error) {
-            const message = `${i18n.t('system_info.version_check_error')}: ${error.message}`;
-            this.renderVersionCheckStatus({
-                currentVersion: this.serverVersion,
-                latestVersion: this.latestVersion,
-                message,
-                status: 'error'
-            });
-            this.showNotification(message, 'error');
-        } finally {
-            if (button) {
-                button.disabled = false;
-                button.innerHTML = originalLabel;
-            }
-        }
-    },
-
-    // API 请求方法
-    async makeRequest(endpoint, options = {}) {
-        try {
-            return await this.apiClient.request(endpoint, options);
-        } catch (error) {
-            console.error('API请求失败:', error);
-            throw error;
-        }
-    },
-
-    buildAvailableModelsEndpoint() {
-        return buildModelsEndpoint(this.apiBase || this.apiClient?.apiBase || '');
-    },
-
-    setAvailableModelsStatus(message = '', type = 'info') {
-        const statusEl = document.getElementById('available-models-status');
-        if (!statusEl) return;
-        statusEl.textContent = message || '';
-        statusEl.className = `available-models-status ${type}`;
-    },
-
-    renderAvailableModels(models = []) {
-        const listEl = document.getElementById('available-models-list');
-        if (!listEl) return;
-
-        if (!models.length) {
-            listEl.innerHTML = `
-                <div class="available-models-empty">
-                    <i class="fas fa-inbox"></i>
-                    <span>${i18n.t('system_info.models_empty')}</span>
-                </div>
-            `;
-            return;
-        }
-
-        const language = (i18n?.currentLanguage || '').toLowerCase();
-        const otherLabel = language.startsWith('zh') ? '其他' : 'Other';
-        const groups = classifyModels(models, { otherLabel });
-
-        const groupHtml = groups.map(group => {
-            const pills = group.items.map(model => {
-                const name = this.escapeHtml(model.name || '');
-                const alias = model.alias ? `<span class="model-alias">${this.escapeHtml(model.alias)}</span>` : '';
-                const description = model.description ? this.escapeHtml(model.description) : '';
-                const titleAttr = description ? ` title="${description}"` : '';
-                return `
-                    <span class="provider-model-tag available-model-tag"${titleAttr}>
-                        <span class="model-name">${name}</span>
-                        ${alias}
-                    </span>
-                `;
-            }).join('');
-
-            const label = this.escapeHtml(group.label || group.id || '');
-            return `
-                <div class="available-model-group">
-                    <div class="available-model-group-header">
-                        <div class="available-model-group-title">
-                            <span class="available-model-group-label">${label}</span>
-                            <span class="available-model-group-count">${group.items.length}</span>
-                        </div>
-                    </div>
-                    <div class="available-model-group-body">
-                        ${pills}
-                    </div>
-                </div>
-            `;
-        }).join('');
-
-        listEl.innerHTML = groupHtml;
-    },
-
-    clearAvailableModels(messageKey = 'system_info.models_empty') {
-        this.availableModels = [];
-        this.availableModelApiKeysCache = null;
-        const listEl = document.getElementById('available-models-list');
-        if (listEl) {
-            listEl.innerHTML = '';
-        }
-        this.setAvailableModelsStatus(i18n.t(messageKey), 'warning');
-    },
-
-    async resolveApiKeysForModels({ config = null, forceRefresh = false } = {}) {
-        if (!forceRefresh && Array.isArray(this.availableModelApiKeysCache) && this.availableModelApiKeysCache.length) {
-            return this.availableModelApiKeysCache;
-        }
-
-        const configKeys = normalizeApiKeyList(config?.['api-keys'] || this.configCache?.['api-keys']);
-        if (configKeys.length) {
-            this.availableModelApiKeysCache = configKeys;
-            return configKeys;
-        }
-
-        try {
-            const data = await this.makeRequest('/api-keys');
-            const keys = normalizeApiKeyList(data?.['api-keys']);
-            if (keys.length) {
-                this.availableModelApiKeysCache = keys;
-            }
-            return keys;
-        } catch (error) {
-            console.warn('自动获取 API Key 失败:', error);
-            return [];
-        }
-    },
-
-    async loadAvailableModels({ config = null, forceRefresh = false } = {}) {
-        const listEl = document.getElementById('available-models-list');
-        const statusEl = document.getElementById('available-models-status');
-
-        if (!listEl || !statusEl) {
-            return;
-        }
-
-        if (!this.isConnected) {
-            this.setAvailableModelsStatus(i18n.t('common.disconnected'), 'warning');
-            listEl.innerHTML = '';
-            return;
-        }
-
-        const endpoint = this.buildAvailableModelsEndpoint();
-        if (!endpoint) {
-            this.setAvailableModelsStatus(i18n.t('system_info.models_error'), 'error');
-            listEl.innerHTML = `
-                <div class="available-models-empty">
-                    <i class="fas fa-exclamation-circle"></i>
-                    <span>${i18n.t('login.error_invalid')}</span>
-                </div>
-            `;
-            return;
-        }
-
-        this.availableModelsLoading = true;
-        this.setAvailableModelsStatus(i18n.t('system_info.models_loading'), 'info');
-        listEl.innerHTML = '<div class="available-models-placeholder"><i class="fas fa-spinner fa-spin"></i></div>';
-
-        try {
-            const headers = {};
-            const keys = await this.resolveApiKeysForModels({ config, forceRefresh });
-            if (keys.length) {
-                headers.Authorization = `Bearer ${keys[0]}`;
-            }
-
-            const response = await fetch(endpoint, { headers });
-            if (!response.ok) {
-                throw new Error(`${response.status} ${response.statusText}`);
-            }
-
-            let data;
-            try {
-                data = await response.json();
-            } catch (err) {
-                const text = await response.text();
-                throw new Error(text || err.message || 'Invalid JSON');
-            }
-
-            const models = normalizeModelList(data, { dedupe: true });
-            this.availableModels = models;
-
-            if (!models.length) {
-                this.setAvailableModelsStatus(i18n.t('system_info.models_empty'), 'warning');
-                this.renderAvailableModels([]);
-                return;
-            }
-
-            this.setAvailableModelsStatus(i18n.t('system_info.models_count', { count: models.length }), 'success');
-            this.renderAvailableModels(models);
-        } catch (error) {
-            console.error('加载可用模型失败:', error);
-            this.availableModels = [];
-            this.setAvailableModelsStatus(`${i18n.t('system_info.models_error')}: ${error.message}`, 'error');
-            listEl.innerHTML = `
-                <div class="available-models-empty">
-                    <i class="fas fa-exclamation-circle"></i>
-                    <span>${this.escapeHtml(error.message || '')}</span>
-                </div>
-            `;
-        } finally {
-            this.availableModelsLoading = false;
-        }
-    },
-
-    // 测试连接（简化版，用于内部调用）
-    async testConnection() {
-        try {
-            await this.makeRequest('/debug');
-            this.isConnected = true;
-            this.updateConnectionStatus();
-            this.startStatusUpdateTimer();
-            await this.loadAllData();
-            return true;
-        } catch (error) {
-            this.isConnected = false;
-            this.updateConnectionStatus();
-            this.stopStatusUpdateTimer();
-            throw error;
-        }
-    },
-
-    // 更新连接状态
-    updateConnectionStatus() {
-        const statusButton = document.getElementById('connection-status');
-        const apiStatus = document.getElementById('api-status');
-        const configStatus = document.getElementById('config-status');
-        const lastUpdate = document.getElementById('last-update');
-
-        if (this.isConnected) {
-            statusButton.innerHTML = `<i class="fas fa-circle connection-indicator connected"></i> ${i18n.t('common.connected')}`;
-            statusButton.className = 'btn btn-success';
-            apiStatus.textContent = i18n.t('common.connected');
-
-            // 更新配置状态
-            if (this.isCacheValid()) {
-                const fullTimestamp = this.cacheTimestamps && this.cacheTimestamps['__full__'];
-                const cacheAge = fullTimestamp
-                    ? Math.floor((Date.now() - fullTimestamp) / 1000)
-                    : 0;
-                configStatus.textContent = `${i18n.t('system_info.cache_data')} (${cacheAge}${i18n.t('system_info.seconds_ago')})`;
-                configStatus.style.color = '#f59e0b'; // 橙色表示缓存
-            } else if (this.configCache && this.configCache['__full__']) {
-                configStatus.textContent = i18n.t('system_info.real_time_data');
-                configStatus.style.color = '#10b981'; // 绿色表示实时
-            } else {
-                configStatus.textContent = i18n.t('system_info.not_loaded');
-                configStatus.style.color = '#6b7280'; // 灰色表示未加载
-            }
-        } else {
-            statusButton.innerHTML = `<i class="fas fa-circle connection-indicator disconnected"></i> ${i18n.t('common.disconnected')}`;
-            statusButton.className = 'btn btn-danger';
-            apiStatus.textContent = i18n.t('common.disconnected');
-            configStatus.textContent = i18n.t('system_info.not_loaded');
-            configStatus.style.color = '#6b7280';
-            this.setAvailableModelsStatus(i18n.t('common.disconnected'), 'warning');
-            const modelsList = document.getElementById('available-models-list');
-            if (modelsList) {
-                modelsList.innerHTML = '';
-            }
-        }
-
-        lastUpdate.textContent = new Date().toLocaleString('zh-CN');
-
-        if (this.lastEditorConnectionState !== this.isConnected) {
-            this.updateConfigEditorAvailability();
-        }
-
-        // 更新连接信息显示
-        this.updateConnectionInfo();
-
-        if (this.events && typeof this.events.emit === 'function') {
-            const shouldEmit = this.lastConnectionStatusEmitted !== this.isConnected;
-            if (shouldEmit) {
-                this.events.emit('connection:status-changed', {
-                    isConnected: this.isConnected,
-                    apiBase: this.apiBase
-                });
-                this.lastConnectionStatusEmitted = this.isConnected;
-            }
-        }
-    },
-
-    // 检查连接状态
-    async checkConnectionStatus() {
-        await this.testConnection();
-    },
-
-    // 刷新所有数据
-    async refreshAllData() {
-        if (!this.isConnected) {
-            this.showNotification(i18n.t('notification.connection_required'), 'error');
-            return;
-        }
-
-        const button = document.getElementById('refresh-all');
-        const originalText = button.innerHTML;
-
-        button.innerHTML = `<div class="loading"></div> ${i18n.t('common.loading')}`;
-        button.disabled = true;
-
-        try {
-            // 强制刷新，清除缓存
-            await this.loadAllData(true);
-            this.showNotification(i18n.t('notification.data_refreshed'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.refresh_failed')}: ${error.message}`, 'error');
-        } finally {
-            button.innerHTML = originalText;
-            button.disabled = false;
-        }
-    },
-
-    // 检查缓存是否有效
-    isCacheValid(section = null) {
-        return this.configService.isCacheValid(section);
-    },
-
-    // 获取配置（优先使用缓存，支持按段获取）
-    async getConfig(section = null, forceRefresh = false) {
-        try {
-            const config = await this.configService.getConfig(section, forceRefresh);
-            this.configCache = this.configService.cache;
-            this.cacheTimestamps = this.configService.cacheTimestamps;
-            this.updateConnectionStatus();
-            return config;
-        } catch (error) {
-            console.error('获取配置失败:', error);
-            throw error;
-        }
-    },
-
-    // 清除缓存（支持清除特定配置段）
-    clearCache(section = null) {
-        this.configService.clearCache(section);
-        this.configCache = this.configService.cache;
-        this.cacheTimestamps = this.configService.cacheTimestamps;
-        if (!section || section === 'api-keys') {
-            this.availableModelApiKeysCache = null;
-        }
-        if (!section) {
-            this.configYamlCache = '';
-            this.availableModels = [];
-        }
-    },
-
-    // 启动状态更新定时器
-    startStatusUpdateTimer() {
-        if (this.statusUpdateTimer) {
-            clearInterval(this.statusUpdateTimer);
-        }
-        this.statusUpdateTimer = setInterval(() => {
-            if (this.isConnected) {
-                this.updateConnectionStatus();
-            }
-        }, STATUS_UPDATE_INTERVAL_MS);
-    },
-
-    // 停止状态更新定时器
-    stopStatusUpdateTimer() {
-        if (this.statusUpdateTimer) {
-            clearInterval(this.statusUpdateTimer);
-            this.statusUpdateTimer = null;
-        }
-    },
-
-    // 加载所有数据 - 使用新的 /config 端点一次性获取所有配置
-    async loadAllData(forceRefresh = false) {
-        try {
-            console.log(i18n.t('system_info.real_time_data'));
-            // 使用新的 /config 端点一次性获取所有配置
-            // 注意：getConfig(section, forceRefresh)，不传 section 表示获取全部
-            const config = await this.getConfig(null, forceRefresh);
-
-            // 获取一次usage统计数据，供渲染函数和loadUsageStats复用
-            let usageData = null;
-            let keyStats = null;
-            try {
-                const response = await this.makeRequest('/usage');
-                usageData = response?.usage || null;
-                if (usageData) {
-                    keyStats = await this.getKeyStats(usageData);
-                }
-            } catch (error) {
-                console.warn('获取usage统计失败:', error);
-            }
-
-            // 从配置中提取并设置各个设置项（现在传递keyStats）
-            await this.updateSettingsFromConfig(config, keyStats);
-
-            await this.loadAvailableModels({ config, forceRefresh });
-
-            if (this.events && typeof this.events.emit === 'function') {
-                this.events.emit('data:config-loaded', {
-                    config,
-                    usageData,
-                    keyStats,
-                    forceRefresh
-                });
-            }
-
-            console.log('配置加载完成，使用缓存:', !forceRefresh && this.isCacheValid());
-        } catch (error) {
-            console.error('加载配置失败:', error);
-        }
-    },
-
-    // 从配置对象更新所有设置 —— 委派给 settings 模块，保持兼容旧调用
-    async updateSettingsFromConfig(config, keyStats = null) {
-        if (typeof this.applySettingsFromConfig === 'function') {
-            return this.applySettingsFromConfig(config, keyStats);
-        }
-    },
-
-    detectApiBaseFromLocation() {
-        try {
-            const { protocol, hostname, port } = window.location;
-            const normalizedPort = port ? `:${port}` : '';
-            return this.normalizeBase(`${protocol}//${hostname}${normalizedPort}`);
-        } catch (error) {
-            console.warn('无法从当前地址检测 API 基础地址，使用默认设置', error);
-            return this.normalizeBase(this.apiBase || `http://localhost:${DEFAULT_API_PORT}`);
-        }
-    }
-};
diff --git a/src/core/error-handler.js b/src/core/error-handler.js
deleted file mode 100644
index e4df15c..0000000
--- a/src/core/error-handler.js
+++ /dev/null
@@ -1,231 +0,0 @@
-/**
- * 错误处理器
- * 统一管理应用中的错误处理逻辑
- */
-
-import { ERROR_MESSAGES } from '../utils/constants.js';
-
-/**
- * 错误处理器类
- * 提供统一的错误处理接口，确保错误处理的一致性
- */
-export class ErrorHandler {
-    /**
-     * 构造错误处理器
-     * @param {Object} notificationService - 通知服务对象
-     * @param {Function} notificationService.show - 显示通知的方法
-     */
-    constructor(notificationService) {
-        this.notificationService = notificationService;
-    }
-
-    /**
-     * 处理更新操作失败
-     * 包括显示错误通知和执行UI回滚操作
-     *
-     * @param {Error} error - 错误对象
-     * @param {string} context - 操作上下文（如"调试模式"、"代理设置"）
-     * @param {Function} [rollbackFn] - UI回滚函数
-     *
-     * @example
-     * try {
-     *     await this.makeRequest('/debug', { method: 'PATCH', body: JSON.stringify({ enabled: true }) });
-     * } catch (error) {
-     *     this.errorHandler.handleUpdateError(
-     *         error,
-     *         '调试模式',
-     *         () => document.getElementById('debug-toggle').checked = false
-     *     );
-     * }
-     */
-    handleUpdateError(error, context, rollbackFn) {
-        console.error(`更新${context}失败:`, error);
-        const message = `更新${context}失败: ${error.message || ERROR_MESSAGES.OPERATION_FAILED}`;
-        this.notificationService.show(message, 'error');
-
-        // 执行回滚操作
-        if (typeof rollbackFn === 'function') {
-            try {
-                rollbackFn();
-            } catch (rollbackError) {
-                console.error('UI回滚操作失败:', rollbackError);
-            }
-        }
-    }
-
-    /**
-     * 处理加载操作失败
-     *
-     * @param {Error} error - 错误对象
-     * @param {string} context - 加载内容的上下文（如"API密钥"、"使用统计"）
-     *
-     * @example
-     * try {
-     *     const data = await this.makeRequest('/api-keys');
-     *     this.renderApiKeys(data);
-     * } catch (error) {
-     *     this.errorHandler.handleLoadError(error, 'API密钥');
-     * }
-     */
-    handleLoadError(error, context) {
-        console.error(`加载${context}失败:`, error);
-        const message = `加载${context}失败，请检查连接`;
-        this.notificationService.show(message, 'error');
-    }
-
-    /**
-     * 处理删除操作失败
-     *
-     * @param {Error} error - 错误对象
-     * @param {string} context - 删除内容的上下文
-     */
-    handleDeleteError(error, context) {
-        console.error(`删除${context}失败:`, error);
-        const message = `删除${context}失败: ${error.message || ERROR_MESSAGES.OPERATION_FAILED}`;
-        this.notificationService.show(message, 'error');
-    }
-
-    /**
-     * 处理添加操作失败
-     *
-     * @param {Error} error - 错误对象
-     * @param {string} context - 添加内容的上下文
-     */
-    handleAddError(error, context) {
-        console.error(`添加${context}失败:`, error);
-        const message = `添加${context}失败: ${error.message || ERROR_MESSAGES.OPERATION_FAILED}`;
-        this.notificationService.show(message, 'error');
-    }
-
-    /**
-     * 处理网络错误
-     * 检测常见的网络问题并提供友好的错误提示
-     *
-     * @param {Error} error - 错误对象
-     */
-    handleNetworkError(error) {
-        console.error('网络请求失败:', error);
-
-        let message = ERROR_MESSAGES.NETWORK_ERROR;
-
-        // 检测特定错误类型
-        if (error.name === 'TypeError' && error.message.includes('fetch')) {
-            message = ERROR_MESSAGES.NETWORK_ERROR;
-        } else if (error.message && error.message.includes('timeout')) {
-            message = ERROR_MESSAGES.TIMEOUT;
-        } else if (error.message && error.message.includes('401')) {
-            message = ERROR_MESSAGES.UNAUTHORIZED;
-        } else if (error.message && error.message.includes('404')) {
-            message = ERROR_MESSAGES.NOT_FOUND;
-        } else if (error.message && error.message.includes('500')) {
-            message = ERROR_MESSAGES.SERVER_ERROR;
-        } else if (error.message) {
-            message = `网络错误: ${error.message}`;
-        }
-
-        this.notificationService.show(message, 'error');
-    }
-
-    /**
-     * 处理验证错误
-     *
-     * @param {string} fieldName - 字段名称
-     * @param {string} [message] - 自定义错误消息
-     */
-    handleValidationError(fieldName, message) {
-        const errorMessage = message || `请输入有效的${fieldName}`;
-        this.notificationService.show(errorMessage, 'error');
-    }
-
-    /**
-     * 处理通用错误
-     * 当错误类型不明确时使用
-     *
-     * @param {Error} error - 错误对象
-     * @param {string} [defaultMessage] - 默认错误消息
-     */
-    handleGenericError(error, defaultMessage) {
-        console.error('操作失败:', error);
-        const message = error.message || defaultMessage || ERROR_MESSAGES.OPERATION_FAILED;
-        this.notificationService.show(message, 'error');
-    }
-
-    /**
-     * 创建带错误处理的异步函数包装器
-     * 自动捕获并处理错误
-     *
-     * @param {Function} asyncFn - 异步函数
-     * @param {string} context - 操作上下文
-     * @param {Function} [rollbackFn] - 回滚函数
-     * @returns {Function} 包装后的函数
-     *
-     * @example
-     * const safeUpdate = this.errorHandler.withErrorHandling(
-     *     () => this.makeRequest('/debug', { method: 'PATCH', body: '...' }),
-     *     '调试模式',
-     *     () => document.getElementById('debug-toggle').checked = false
-     * );
-     * await safeUpdate();
-     */
-    withErrorHandling(asyncFn, context, rollbackFn) {
-        return async (...args) => {
-            try {
-                return await asyncFn(...args);
-            } catch (error) {
-                this.handleUpdateError(error, context, rollbackFn);
-                throw error; // 重新抛出以便调用者处理
-            }
-        };
-    }
-
-    /**
-     * 创建带重试机制的错误处理包装器
-     *
-     * @param {Function} asyncFn - 异步函数
-     * @param {number} [maxRetries=3] - 最大重试次数
-     * @param {number} [retryDelay=1000] - 重试延迟（毫秒）
-     * @returns {Function} 包装后的函数
-     *
-     * @example
-     * const retryableFetch = this.errorHandler.withRetry(
-     *     () => this.makeRequest('/config'),
-     *     3,
-     *     2000
-     * );
-     * const config = await retryableFetch();
-     */
-    withRetry(asyncFn, maxRetries = 3, retryDelay = 1000) {
-        return async (...args) => {
-            let lastError;
-            for (let attempt = 0; attempt < maxRetries; attempt++) {
-                try {
-                    return await asyncFn(...args);
-                } catch (error) {
-                    lastError = error;
-                    console.warn(`尝试 ${attempt + 1}/${maxRetries} 失败:`, error);
-
-                    if (attempt < maxRetries - 1) {
-                        // 等待后重试
-                        await new Promise(resolve => setTimeout(resolve, retryDelay));
-                    }
-                }
-            }
-
-            // 所有尝试都失败
-            throw lastError;
-        };
-    }
-}
-
-/**
- * 创建错误处理器工厂函数
- * 便于在不同模块中创建错误处理器实例
- *
- * @param {Function} showNotification - 显示通知的函数
- * @returns {ErrorHandler} 错误处理器实例
- */
-export function createErrorHandler(showNotification) {
-    return new ErrorHandler({
-        show: showNotification
-    });
-}
diff --git a/src/core/event-bus.js b/src/core/event-bus.js
deleted file mode 100644
index ddf02cc..0000000
--- a/src/core/event-bus.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// 轻量事件总线，避免模块之间的直接耦合
-export function createEventBus() {
-    const target = new EventTarget();
-
-    const on = (type, listener) => target.addEventListener(type, listener);
-    const off = (type, listener) => target.removeEventListener(type, listener);
-    const emit = (type, detail = {}) => target.dispatchEvent(new CustomEvent(type, { detail }));
-
-    return { on, off, emit };
-}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 0000000..6dc876f
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Hooks 统一导出
+ */
+
+export { useApi } from './useApi';
+export { useDebounce } from './useDebounce';
+export { useLocalStorage } from './useLocalStorage';
+export { useInterval } from './useInterval';
+export { useMediaQuery } from './useMediaQuery';
+export { usePagination } from './usePagination';
diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts
new file mode 100644
index 0000000..7dc3150
--- /dev/null
+++ b/src/hooks/useApi.ts
@@ -0,0 +1,65 @@
+/**
+ * 通用 API 调用 Hook
+ */
+
+import { useState, useCallback } from 'react';
+import { useNotificationStore } from '@/stores';
+
+interface UseApiOptions<T> {
+  onSuccess?: (data: T) => void;
+  onError?: (error: Error) => void;
+  showSuccessNotification?: boolean;
+  showErrorNotification?: boolean;
+  successMessage?: string;
+}
+
+export function useApi<T = any, Args extends any[] = any[]>(
+  apiFunction: (...args: Args) => Promise<T>,
+  options: UseApiOptions<T> = {}
+) {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const { showNotification } = useNotificationStore();
+
+  const execute = useCallback(
+    async (...args: Args) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await apiFunction(...args);
+        setData(result);
+
+        if (options.showSuccessNotification && options.successMessage) {
+          showNotification(options.successMessage, 'success');
+        }
+
+        options.onSuccess?.(result);
+        return result;
+      } catch (err) {
+        const errorObj = err as Error;
+        setError(errorObj);
+
+        if (options.showErrorNotification !== false) {
+          showNotification(errorObj.message, 'error');
+        }
+
+        options.onError?.(errorObj);
+        throw errorObj;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiFunction, options, showNotification]
+  );
+
+  const reset = useCallback(() => {
+    setData(null);
+    setError(null);
+    setLoading(false);
+  }, []);
+
+  return { data, loading, error, execute, reset };
+}
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
new file mode 100644
index 0000000..24e3d20
--- /dev/null
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,21 @@
+/**
+ * 防抖 Hook
+ */
+
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
diff --git a/src/hooks/useInterval.ts b/src/hooks/useInterval.ts
new file mode 100644
index 0000000..41d3d1c
--- /dev/null
+++ b/src/hooks/useInterval.ts
@@ -0,0 +1,24 @@
+/**
+ * 定时器 Hook
+ */
+
+import { useEffect, useRef } from 'react';
+
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (delay === null) return;
+
+    const tick = () => {
+      savedCallback.current?.();
+    };
+
+    const id = setInterval(tick, delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
new file mode 100644
index 0000000..8830893
--- /dev/null
+++ b/src/hooks/useLocalStorage.ts
@@ -0,0 +1,32 @@
+/**
+ * LocalStorage Hook
+ */
+
+import { useState } from 'react';
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: T | ((val: T) => T)) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue];
+}
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..fa4e63f
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,27 @@
+/**
+ * 媒体查询 Hook
+ */
+
+import { useState, useEffect } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+
+    const listener = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    // Set initial value via listener to avoid direct setState in effect
+    listener({ matches: media.matches } as MediaQueryListEvent);
+
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [query]);
+
+  return matches;
+}
diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts
new file mode 100644
index 0000000..f2b7bf4
--- /dev/null
+++ b/src/hooks/usePagination.ts
@@ -0,0 +1,59 @@
+/**
+ * 分页 Hook
+ */
+
+import { useState, useMemo } from 'react';
+import type { PaginationState } from '@/types';
+
+export function usePagination<T>(
+  items: T[],
+  initialPageSize: number = 20
+): PaginationState & {
+  currentItems: T[];
+  goToPage: (page: number) => void;
+  nextPage: () => void;
+  prevPage: () => void;
+  setPageSize: (size: number) => void;
+} {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+
+  const totalItems = items.length;
+  const totalPages = Math.ceil(totalItems / pageSize) || 1;
+
+  const currentItems = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return items.slice(start, end);
+  }, [items, currentPage, pageSize]);
+
+  const goToPage = (page: number) => {
+    const validPage = Math.max(1, Math.min(page, totalPages));
+    setCurrentPage(validPage);
+  };
+
+  const nextPage = () => {
+    goToPage(currentPage + 1);
+  };
+
+  const prevPage = () => {
+    goToPage(currentPage - 1);
+  };
+
+  const handleSetPageSize = (size: number) => {
+    setPageSize(size);
+    setCurrentPage(1); // 重置到第一页
+  };
+
+  return {
+    currentPage,
+    pageSize,
+    totalPages,
+    totalItems,
+    currentItems,
+    goToPage,
+    nextPage,
+    prevPage,
+    setPageSize: handleSetPageSize
+  };
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..0a71883
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,26 @@
+/**
+ * i18next 国际化配置
+ */
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import zhCN from './locales/zh-CN.json';
+import en from './locales/en.json';
+import { STORAGE_KEY_LANGUAGE } from '@/utils/constants';
+
+i18n.use(initReactI18next).init({
+  resources: {
+    'zh-CN': { translation: zhCN },
+    en: { translation: en }
+  },
+  lng: localStorage.getItem(STORAGE_KEY_LANGUAGE) || 'zh-CN',
+  fallbackLng: 'zh-CN',
+  interpolation: {
+    escapeValue: false // React 已经转义
+  },
+  react: {
+    useSuspense: false
+  }
+});
+
+export default i18n;
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
new file mode 100644
index 0000000..00ae33b
--- /dev/null
+++ b/src/i18n/locales/en.json
@@ -0,0 +1,656 @@
+{
+  "common": {
+    "login": "Login",
+    "logout": "Logout",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "add": "Add",
+    "update": "Update",
+    "refresh": "Refresh",
+    "close": "Close",
+    "success": "Success",
+    "error": "Error",
+    "info": "Info",
+    "warning": "Warning",
+    "loading": "Loading...",
+    "connecting": "Connecting...",
+    "connected": "Connected",
+    "disconnected": "Disconnected",
+    "connecting_status": "Connecting",
+    "connected_status": "Connected",
+    "disconnected_status": "Disconnected",
+    "yes": "Yes",
+    "no": "No",
+    "optional": "Optional",
+    "required": "Required",
+    "api_key": "Key",
+    "base_url": "Address",
+    "proxy_url": "Proxy",
+    "alias": "Alias",
+    "failure": "Failure",
+    "unknown_error": "Unknown error",
+    "copy": "Copy",
+    "custom_headers_label": "Custom Headers",
+    "custom_headers_hint": "Optional HTTP headers to send with the request. Leave blank to remove.",
+    "custom_headers_add": "Add Header",
+    "custom_headers_key_placeholder": "Header name, e.g. X-Custom-Header",
+    "custom_headers_value_placeholder": "Header value",
+    "model_name_placeholder": "Model name, e.g. claude-3-5-sonnet-20241022",
+    "model_alias_placeholder": "Model alias (optional)"
+  },
+  "title": {
+    "main": "CLI Proxy API Management Center",
+    "login": "CLI Proxy API Management Center",
+    "abbr": "CPAMC"
+  },
+  "auto_login": {
+    "title": "Auto Login in Progress...",
+    "message": "Attempting to connect to server using locally saved connection information"
+  },
+  "login": {
+    "subtitle": "Please enter connection information to access the management interface",
+    "connection_title": "Connection Address",
+    "connection_current": "Current URL",
+    "connection_auto_hint": "The system will automatically use the current URL for connection",
+    "custom_connection_label": "Custom Connection URL:",
+    "custom_connection_placeholder": "Eg: https://example.com:8317",
+    "custom_connection_hint": "By default the current URL is used. Override it here if needed.",
+    "use_current_address": "Use Current URL",
+    "management_key_label": "Management Key:",
+    "management_key_placeholder": "Enter the management key",
+    "connect_button": "Connect",
+    "submit_button": "Login",
+    "submitting": "Connecting...",
+    "error_title": "Login Failed",
+    "error_required": "Please fill in complete connection information",
+    "error_invalid": "Connection failed, please check address and key"
+  },
+  "header": {
+    "check_connection": "Check Connection",
+    "refresh_all": "Refresh All",
+    "logout": "Logout"
+  },
+  "connection": {
+    "title": "Connection Information",
+    "server_address": "Server Address:",
+    "management_key": "Management Key:",
+    "status": "Connection Status:"
+  },
+  "nav": {
+    "basic_settings": "Basic Settings",
+    "api_keys": "API Keys",
+    "ai_providers": "AI Providers",
+    "auth_files": "Auth Files",
+    "oauth": "OAuth Login",
+    "usage_stats": "Usage Statistics",
+    "config_management": "Config Management",
+    "logs": "Logs Viewer",
+    "system_info": "Management Center Info"
+  },
+  "basic_settings": {
+    "title": "Basic Settings",
+    "debug_title": "Debug Mode",
+    "debug_enable": "Enable Debug Mode",
+    "proxy_title": "Proxy Settings",
+    "proxy_url_label": "Proxy URL:",
+    "proxy_url_placeholder": "e.g.: socks5://user:pass@127.0.0.1:1080/",
+    "proxy_update": "Update",
+    "proxy_clear": "Clear",
+    "retry_title": "Request Retry",
+    "retry_count_label": "Retry Count:",
+    "retry_update": "Update",
+    "quota_title": "Quota Exceeded Behavior",
+    "quota_switch_project": "Auto Switch Project",
+    "quota_switch_preview": "Switch to Preview Model",
+    "usage_statistics_title": "Usage Statistics",
+    "usage_statistics_enable": "Enable usage statistics",
+    "logging_title": "Logging",
+    "logging_to_file_enable": "Enable logging to file",
+    "request_log_enable": "Enable request logging",
+    "ws_auth_title": "WebSocket Authentication",
+    "ws_auth_enable": "Require auth for /ws/*"
+  },
+  "api_keys": {
+    "title": "API Keys Management",
+    "proxy_auth_title": "Proxy Service Authentication Keys",
+    "add_button": "Add Key",
+    "empty_title": "No API Keys",
+    "empty_desc": "Click the button above to add the first key",
+    "item_title": "API Key",
+    "add_modal_title": "Add API Key",
+    "add_modal_key_label": "API Key:",
+    "add_modal_key_placeholder": "Please enter API key",
+    "edit_modal_title": "Edit API Key",
+    "edit_modal_key_label": "API Key:",
+    "delete_confirm": "Are you sure you want to delete this API key?"
+  },
+  "ai_providers": {
+    "title": "AI Providers Configuration",
+    "gemini_title": "Gemini API Keys",
+    "gemini_add_button": "Add Key",
+    "gemini_empty_title": "No Gemini Keys",
+    "gemini_empty_desc": "Click the button above to add the first key",
+    "gemini_item_title": "Gemini Key",
+    "gemini_add_modal_title": "Add Gemini API Key",
+    "gemini_add_modal_key_label": "API Keys:",
+    "gemini_add_modal_key_placeholder": "Enter Gemini API key",
+    "gemini_add_modal_key_hint": "Add keys one by one and optionally specify a Base URL.",
+    "gemini_keys_add_btn": "Add Key",
+    "gemini_base_url_placeholder": "Optional Base URL, e.g. https://generativelanguage.googleapis.com",
+    "gemini_edit_modal_title": "Edit Gemini API Key",
+    "gemini_edit_modal_key_label": "API Key:",
+    "gemini_delete_confirm": "Are you sure you want to delete this Gemini key?",
+    "excluded_models_label": "Excluded models (optional):",
+    "excluded_models_placeholder": "Comma or newline separated, e.g. gemini-1.5-pro, gemini-1.5-flash",
+    "excluded_models_hint": "Leave empty to allow all models; values are trimmed and deduplicated automatically.",
+    "excluded_models_count": "Excluding {count} models",
+    "codex_title": "Codex API Configuration",
+    "codex_add_button": "Add Configuration",
+    "codex_empty_title": "No Codex Configuration",
+    "codex_empty_desc": "Click the button above to add the first configuration",
+    "codex_item_title": "Codex Configuration",
+    "codex_add_modal_title": "Add Codex API Configuration",
+    "codex_add_modal_key_label": "API Key:",
+    "codex_add_modal_key_placeholder": "Please enter Codex API key",
+    "codex_add_modal_url_label": "Base URL (Required):",
+    "codex_add_modal_url_placeholder": "e.g.: https://api.example.com",
+    "codex_add_modal_proxy_label": "Proxy URL (Optional):",
+    "codex_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
+    "codex_edit_modal_title": "Edit Codex API Configuration",
+    "codex_edit_modal_key_label": "API Key:",
+    "codex_edit_modal_url_label": "Base URL (Required):",
+    "codex_edit_modal_proxy_label": "Proxy URL (Optional):",
+    "codex_delete_confirm": "Are you sure you want to delete this Codex configuration?",
+    "claude_title": "Claude API Configuration",
+    "claude_add_button": "Add Configuration",
+    "claude_empty_title": "No Claude Configuration",
+    "claude_empty_desc": "Click the button above to add the first configuration",
+    "claude_item_title": "Claude Configuration",
+    "claude_add_modal_title": "Add Claude API Configuration",
+    "claude_add_modal_key_label": "API Key:",
+    "claude_add_modal_key_placeholder": "Please enter Claude API key",
+    "claude_add_modal_url_label": "Base URL (Optional):",
+    "claude_add_modal_url_placeholder": "e.g.: https://api.anthropic.com",
+    "claude_add_modal_proxy_label": "Proxy URL (Optional):",
+    "claude_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
+    "claude_edit_modal_title": "Edit Claude API Configuration",
+    "claude_edit_modal_key_label": "API Key:",
+    "claude_edit_modal_url_label": "Base URL (Optional):",
+    "claude_edit_modal_proxy_label": "Proxy URL (Optional):",
+    "claude_delete_confirm": "Are you sure you want to delete this Claude configuration?",
+    "claude_models_label": "Custom Models (Optional):",
+    "claude_models_hint": "Leave empty to allow all models, or add name[, alias] entries to limit/alias them.",
+    "claude_models_add_btn": "Add Model",
+    "claude_models_count": "Models Count",
+    "openai_title": "OpenAI Compatible Providers",
+    "openai_add_button": "Add Provider",
+    "openai_empty_title": "No OpenAI Compatible Providers",
+    "openai_empty_desc": "Click the button above to add the first provider",
+    "openai_add_modal_title": "Add OpenAI Compatible Provider",
+    "openai_add_modal_name_label": "Provider Name:",
+    "openai_add_modal_name_placeholder": "e.g.: openrouter",
+    "openai_add_modal_url_label": "Base URL:",
+    "openai_add_modal_url_placeholder": "e.g.: https://openrouter.ai/api/v1",
+    "openai_add_modal_keys_label": "API Keys",
+    "openai_edit_modal_keys_label": "API Keys",
+    "openai_keys_hint": "Add each key separately with an optional proxy URL to keep things organized.",
+    "openai_keys_add_btn": "Add Key",
+    "openai_key_placeholder": "sk-... key",
+    "openai_proxy_placeholder": "Optional proxy URL (e.g. socks5://...)",
+    "openai_add_modal_models_label": "Model List (name[, alias] one per line):",
+    "openai_models_hint": "Example: gpt-4o-mini or moonshotai/kimi-k2:free, kimi-k2",
+    "openai_model_name_placeholder": "Model name, e.g. moonshotai/kimi-k2:free",
+    "openai_model_alias_placeholder": "Model alias (optional)",
+    "openai_models_add_btn": "Add Model",
+    "openai_models_fetch_button": "Fetch via /v1/models",
+    "openai_models_fetch_title": "Pick Models from /v1/models",
+    "openai_models_fetch_hint": "Call the /v1/models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.",
+    "openai_models_fetch_url_label": "Request URL",
+    "openai_models_fetch_refresh": "Refresh",
+    "openai_models_fetch_loading": "Fetching models from /v1/models...",
+    "openai_models_fetch_empty": "No models returned. Please check the endpoint or auth.",
+    "openai_models_fetch_error": "Failed to fetch models",
+    "openai_models_fetch_back": "Back to edit",
+    "openai_models_fetch_apply": "Add selected models",
+    "openai_models_search_label": "Search models",
+    "openai_models_search_placeholder": "Filter by name, alias, or description",
+    "openai_models_search_empty": "No models match your search. Try a different keyword.",
+    "openai_models_fetch_invalid_url": "Please enter a valid Base URL first",
+    "openai_models_fetch_added": "{count} new models added",
+    "openai_edit_modal_title": "Edit OpenAI Compatible Provider",
+    "openai_edit_modal_name_label": "Provider Name:",
+    "openai_edit_modal_url_label": "Base URL:",
+    "openai_edit_modal_models_label": "Model List (name[, alias] one per line):",
+    "openai_delete_confirm": "Are you sure you want to delete this OpenAI provider?",
+    "openai_keys_count": "Keys Count",
+    "openai_models_count": "Models Count",
+    "openai_test_title": "Connection Test",
+    "openai_test_hint": "Send a /v1/chat/completions request with the current settings to verify availability.",
+    "openai_test_model_placeholder": "Model to test",
+    "openai_test_action": "Run Test",
+    "openai_test_running": "Sending test request...",
+    "openai_test_success": "Test succeeded. The model responded.",
+    "openai_test_failed": "Test failed",
+    "openai_test_select_placeholder": "Choose from current models",
+    "openai_test_select_empty": "No models configured, enter manually"
+  },
+  "auth_files": {
+    "title": "Auth Files Management",
+    "title_section": "Auth Files",
+    "description": "Manage all CLI Proxy JSON auth files here (e.g. Qwen, Gemini, Vertex). Uploading a credential immediately enables the corresponding AI integration.",
+    "upload_button": "Upload File",
+    "delete_all_button": "Delete All",
+    "empty_title": "No Auth Files",
+    "empty_desc": "Click the button above to upload the first file",
+    "search_empty_title": "No matching files",
+    "search_empty_desc": "Try changing the filters or clearing the search box.",
+    "file_size": "Size",
+    "file_modified": "Modified",
+    "download_button": "Download",
+    "delete_button": "Delete",
+    "delete_confirm": "Are you sure you want to delete file",
+    "delete_all_confirm": "Are you sure you want to delete all auth files? This operation cannot be undone!",
+    "delete_filtered_confirm": "Are you sure you want to delete all {type} auth files? This operation cannot be undone!",
+    "upload_error_json": "Only JSON files are allowed",
+    "upload_success": "File uploaded successfully",
+    "download_success": "File downloaded successfully",
+    "delete_success": "File deleted successfully",
+    "delete_all_success": "Successfully deleted",
+    "delete_filtered_success": "Deleted {count} {type} auth files successfully",
+    "delete_filtered_partial": "{type} auth files deletion finished: {success} succeeded, {failed} failed",
+    "delete_filtered_none": "No deletable auth files under the current filter ({type})",
+    "files_count": "files",
+    "pagination_prev": "Previous",
+    "pagination_next": "Next",
+    "pagination_info": "Page {current} / {total} · {count} files",
+    "search_label": "Search configs",
+    "search_placeholder": "Filter by name, type, or provider",
+    "page_size_label": "Per page",
+    "page_size_unit": "items",
+    "filter_all": "All",
+    "filter_qwen": "Qwen",
+    "filter_gemini": "Gemini",
+    "filter_gemini-cli": "GeminiCLI",
+    "filter_aistudio": "AIStudio",
+    "filter_claude": "Claude",
+    "filter_codex": "Codex",
+    "filter_antigravity": "Antigravity",
+    "filter_iflow": "iFlow",
+    "filter_vertex": "Vertex",
+    "filter_empty": "Empty",
+    "filter_unknown": "Other",
+    "type_qwen": "Qwen",
+    "type_gemini": "Gemini",
+    "type_gemini-cli": "GeminiCLI",
+    "type_aistudio": "AIStudio",
+    "type_claude": "Claude",
+    "type_codex": "Codex",
+    "type_antigravity": "Antigravity",
+    "type_iflow": "iFlow",
+    "type_vertex": "Vertex",
+    "type_empty": "Empty",
+    "type_unknown": "Other"
+  },
+  "vertex_import": {
+    "title": "Vertex AI Credential Import",
+    "description": "Upload a Google service account JSON to store it as auth-dir/vertex-<project>.json using the same rules as the CLI vertex-import helper.",
+    "location_label": "Region (optional)",
+    "location_placeholder": "us-central1",
+    "location_hint": "Leave empty to use the default region us-central1.",
+    "file_label": "Service account key JSON",
+    "file_hint": "Only Google Cloud service account key JSON files are accepted.",
+    "file_placeholder": "No file selected",
+    "choose_file": "Choose File",
+    "import_button": "Import Vertex Credential",
+    "file_required": "Select a .json credential file first",
+    "success": "Vertex credential imported successfully",
+    "result_title": "Credential saved",
+    "result_project": "Project ID",
+    "result_email": "Service account",
+    "result_location": "Region",
+    "result_file": "Persisted file"
+  },
+  "oauth_excluded": {
+    "title": "OAuth Excluded Models",
+    "description": "Per-provider exclusions are shown as cards; click edit to adjust. Wildcards * are supported and the scope follows the auth file filter.",
+    "add": "Add Exclusion",
+    "add_title": "Add provider exclusion",
+    "edit_title": "Edit exclusions for {provider}",
+    "refresh": "Refresh",
+    "refreshing": "Refreshing...",
+    "provider_label": "Provider",
+    "provider_auto": "Follow current filter",
+    "provider_placeholder": "e.g. gemini-cli",
+    "provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
+    "models_label": "Models to exclude",
+    "models_placeholder": "gpt-4.1-mini\n*-preview",
+    "models_hint": "Separate by commas or new lines; saving an empty list removes that provider. * wildcards are supported.",
+    "save": "Save/Update",
+    "saving": "Saving...",
+    "save_success": "Excluded models updated",
+    "save_failed": "Failed to update excluded models",
+    "delete": "Delete Provider",
+    "delete_confirm": "Delete the exclusion list for {provider}?",
+    "delete_success": "Exclusion list removed",
+    "delete_failed": "Failed to delete exclusion list",
+    "deleting": "Deleting...",
+    "no_models": "No excluded models",
+    "model_count": "{count} models excluded",
+    "list_empty_all": "No exclusions yet—use “Add Exclusion” to create one.",
+    "list_empty_filtered": "No exclusions in this scope; click “Add Exclusion” to add.",
+    "disconnected": "Connect to the server to view exclusions",
+    "load_failed": "Failed to load exclusion list",
+    "provider_required": "Please enter a provider first",
+    "scope_all": "Scope: All providers",
+    "scope_provider": "Scope: {provider}"
+  },
+  "auth_login": {
+    "codex_oauth_title": "Codex OAuth",
+    "codex_oauth_button": "Start Codex Login",
+    "codex_oauth_hint": "Login to Codex service through OAuth flow, automatically obtain and save authentication files.",
+    "codex_oauth_url_label": "Authorization URL:",
+    "codex_open_link": "Open Link",
+    "codex_copy_link": "Copy Link",
+    "codex_oauth_status_waiting": "Waiting for authentication...",
+    "codex_oauth_status_success": "Authentication successful!",
+    "codex_oauth_status_error": "Authentication failed:",
+    "codex_oauth_start_error": "Failed to start Codex OAuth:",
+    "codex_oauth_polling_error": "Failed to check authentication status:",
+    "anthropic_oauth_title": "Anthropic OAuth",
+    "anthropic_oauth_button": "Start Anthropic Login",
+    "anthropic_oauth_hint": "Login to Anthropic (Claude) service through OAuth flow, automatically obtain and save authentication files.",
+    "anthropic_oauth_url_label": "Authorization URL:",
+    "anthropic_open_link": "Open Link",
+    "anthropic_copy_link": "Copy Link",
+    "anthropic_oauth_status_waiting": "Waiting for authentication...",
+    "anthropic_oauth_status_success": "Authentication successful!",
+    "anthropic_oauth_status_error": "Authentication failed:",
+    "anthropic_oauth_start_error": "Failed to start Anthropic OAuth:",
+    "anthropic_oauth_polling_error": "Failed to check authentication status:",
+    "antigravity_oauth_title": "Antigravity OAuth",
+    "antigravity_oauth_button": "Start Antigravity Login",
+    "antigravity_oauth_hint": "Login to Antigravity service (Google account) through OAuth flow, automatically obtain and save authentication files.",
+    "antigravity_oauth_url_label": "Authorization URL:",
+    "antigravity_open_link": "Open Link",
+    "antigravity_copy_link": "Copy Link",
+    "antigravity_oauth_status_waiting": "Waiting for authentication...",
+    "antigravity_oauth_status_success": "Authentication successful!",
+    "antigravity_oauth_status_error": "Authentication failed:",
+    "antigravity_oauth_start_error": "Failed to start Antigravity OAuth:",
+    "antigravity_oauth_polling_error": "Failed to check authentication status:",
+    "gemini_cli_oauth_title": "Gemini CLI OAuth",
+    "gemini_cli_oauth_button": "Start Gemini CLI Login",
+    "gemini_cli_oauth_hint": "Login to Google Gemini CLI service through OAuth flow, automatically obtain and save authentication files.",
+    "gemini_cli_project_id_label": "Google Cloud Project ID (Optional):",
+    "gemini_cli_project_id_placeholder": "Enter Google Cloud Project ID (optional)",
+    "gemini_cli_project_id_hint": "If a project ID is specified, authentication information for that project will be used.",
+    "gemini_cli_oauth_url_label": "Authorization URL:",
+    "gemini_cli_open_link": "Open Link",
+    "gemini_cli_copy_link": "Copy Link",
+    "gemini_cli_oauth_status_waiting": "Waiting for authentication...",
+    "gemini_cli_oauth_status_success": "Authentication successful!",
+    "gemini_cli_oauth_status_error": "Authentication failed:",
+    "gemini_cli_oauth_start_error": "Failed to start Gemini CLI OAuth:",
+    "gemini_cli_oauth_polling_error": "Failed to check authentication status:",
+    "qwen_oauth_title": "Qwen OAuth",
+    "qwen_oauth_button": "Start Qwen Login",
+    "qwen_oauth_hint": "Login to Qwen service through device authorization flow, automatically obtain and save authentication files.",
+    "qwen_oauth_url_label": "Authorization URL:",
+    "qwen_open_link": "Open Link",
+    "qwen_copy_link": "Copy Link",
+    "qwen_oauth_status_waiting": "Waiting for authentication...",
+    "qwen_oauth_status_success": "Authentication successful!",
+    "qwen_oauth_status_error": "Authentication failed:",
+    "qwen_oauth_start_error": "Failed to start Qwen OAuth:",
+    "qwen_oauth_polling_error": "Failed to check authentication status:",
+    "missing_state": "Unable to retrieve authentication state parameter",
+    "iflow_oauth_title": "iFlow OAuth",
+    "iflow_oauth_button": "Start iFlow Login",
+    "iflow_oauth_hint": "Login to iFlow service through OAuth flow, automatically obtain and save authentication files.",
+    "iflow_oauth_url_label": "Authorization URL:",
+    "iflow_open_link": "Open Link",
+    "iflow_copy_link": "Copy Link",
+    "iflow_oauth_status_waiting": "Waiting for authentication...",
+    "iflow_oauth_status_success": "Authentication successful!",
+    "iflow_oauth_status_error": "Authentication failed:",
+    "iflow_oauth_start_error": "Failed to start iFlow OAuth:",
+    "iflow_oauth_polling_error": "Failed to check authentication status:",
+    "iflow_cookie_title": "iFlow Cookie Login",
+    "iflow_cookie_label": "Cookie Value:",
+    "iflow_cookie_placeholder": "Paste browser cookie, e.g. sessionid=...;",
+    "iflow_cookie_hint": "Submit an existing cookie to finish login without opening the authorization link; the credential file will be saved automatically.",
+    "iflow_cookie_button": "Submit Cookie Login",
+    "iflow_cookie_status_success": "Cookie login succeeded and credentials are saved.",
+    "iflow_cookie_status_error": "Cookie login failed:",
+    "iflow_cookie_start_error": "Failed to submit cookie login:",
+    "iflow_cookie_required": "Please provide the Cookie value first.",
+    "iflow_cookie_result_title": "Cookie Login Result",
+    "iflow_cookie_result_email": "Account",
+    "iflow_cookie_result_expired": "Expires At",
+    "iflow_cookie_result_path": "Saved Path",
+    "iflow_cookie_result_type": "Type"
+  },
+  "usage_stats": {
+    "title": "Usage Statistics",
+    "total_requests": "Total Requests",
+    "success_requests": "Success Requests",
+    "failed_requests": "Failed Requests",
+    "total_tokens": "Total Tokens",
+    "cached_tokens": "Cached Tokens",
+    "reasoning_tokens": "Reasoning Tokens",
+    "rpm_30m": "RPM (last 30 min)",
+    "tpm_30m": "TPM (last 30 min)",
+    "requests_trend": "Request Trends",
+    "tokens_trend": "Token Usage Trends",
+    "api_details": "API Details",
+    "by_hour": "By Hour",
+    "by_day": "By Day",
+    "refresh": "Refresh",
+    "chart_line_label_1": "Line 1",
+    "chart_line_label_2": "Line 2",
+    "chart_line_label_3": "Line 3",
+    "chart_line_label_4": "Line 4",
+    "chart_line_label_5": "Line 5",
+    "chart_line_label_6": "Line 6",
+    "chart_line_label_7": "Line 7",
+    "chart_line_label_8": "Line 8",
+    "chart_line_label_9": "Line 9",
+    "chart_line_hidden": "Hide",
+    "chart_line_actions_label": "Lines to display",
+    "chart_line_add": "Add line",
+    "chart_line_all": "All",
+    "chart_line_delete": "Delete line",
+    "chart_line_hint": "Show up to 9 model lines at once",
+    "no_data": "No Data Available",
+    "loading_error": "Loading Failed",
+    "api_endpoint": "API Endpoint",
+    "requests_count": "Request Count",
+    "tokens_count": "Token Count",
+    "models": "Model Statistics",
+    "success_rate": "Success Rate",
+    "total_cost": "Total Cost",
+    "total_cost_hint": "Based on configured model pricing",
+    "model_price_title": "Model Pricing",
+    "model_price_reset": "Clear Prices",
+    "model_price_model_label": "Model",
+    "model_price_select_placeholder": "Choose a model",
+    "model_price_select_hint": "Models come from usage details",
+    "model_price_prompt": "Prompt price ($/1M tokens)",
+    "model_price_completion": "Completion price ($/1M tokens)",
+    "model_price_save": "Save Price",
+    "model_price_empty": "No model prices set",
+    "model_price_model": "Model",
+    "model_price_saved": "Model price saved",
+    "model_price_model_required": "Please choose a model to set pricing",
+    "cost_trend": "Cost Overview",
+    "cost_axis_label": "Cost ($)",
+    "cost_need_price": "Set a model price to view cost stats",
+    "cost_need_usage": "No usage data available to calculate cost",
+    "cost_no_data": "No cost data yet"
+  },
+  "stats": {
+    "success": "Success",
+    "failure": "Failure"
+  },
+  "logs": {
+    "title": "Logs Viewer",
+    "refresh_button": "Refresh Logs",
+    "clear_button": "Clear Logs",
+    "download_button": "Download Logs",
+    "error_log_button": "Select Error Log",
+    "error_logs_modal_title": "Error Request Logs",
+    "error_logs_description": "Pick an error request log file to download (only generated when request logging is off).",
+    "error_logs_empty": "No error request log files found",
+    "error_logs_load_error": "Failed to load error log list",
+    "error_logs_size": "Size",
+    "error_logs_modified": "Last modified",
+    "error_logs_download": "Download",
+    "error_log_download_success": "Error log downloaded successfully",
+    "empty_title": "No Logs Available",
+    "empty_desc": "When \"Enable logging to file\" is enabled, logs will be displayed here",
+    "log_content": "Log Content",
+    "loading": "Loading logs...",
+    "load_error": "Failed to load logs",
+    "clear_confirm": "Are you sure you want to clear all logs? This action cannot be undone!",
+    "clear_success": "Logs cleared successfully",
+    "download_success": "Logs downloaded successfully",
+    "auto_refresh": "Auto Refresh",
+    "auto_refresh_enabled": "Auto refresh enabled",
+    "auto_refresh_disabled": "Auto refresh disabled",
+    "search_placeholder": "Search logs by content or keyword",
+    "search_empty_title": "No matching logs found",
+    "search_empty_desc": "Try a different keyword or clear the search filter.",
+    "lines": "lines",
+    "removed": "Removed",
+    "upgrade_required_title": "Please Upgrade CLI Proxy API",
+    "upgrade_required_desc": "The current server version does not support the logs viewing feature. Please upgrade to the latest version of CLI Proxy API to use this feature."
+  },
+  "config_management": {
+    "title": "Config Management",
+    "editor_title": "Configuration File",
+    "reload": "Reload",
+    "save": "Save",
+    "description": "View and edit the server-side config.yaml file. Validate the syntax before saving.",
+    "status_idle": "Waiting for action",
+    "status_loading": "Loading configuration...",
+    "status_loaded": "Configuration loaded",
+    "status_dirty": "Unsaved changes",
+    "status_disconnected": "Connect to the server to load the configuration",
+    "status_load_failed": "Load failed",
+    "status_saving": "Saving configuration...",
+    "status_saved": "Configuration saved",
+    "status_save_failed": "Save failed",
+    "save_success": "Configuration saved successfully",
+    "error_yaml_not_supported": "Server did not return YAML. Verify the /config.yaml endpoint is available.",
+    "editor_placeholder": "key: value"
+  },
+  "system_info": {
+    "title": "Management Center Info",
+    "connection_status_title": "Connection Status",
+    "api_status_label": "API Status:",
+    "config_status_label": "Config Status:",
+    "last_update_label": "Last Update:",
+    "cache_data": "Cache Data",
+    "real_time_data": "Real-time Data",
+    "not_loaded": "Not Loaded",
+    "seconds_ago": "seconds ago",
+    "models_title": "Available Models",
+    "models_desc": "Shows the /v1/models response and uses saved API keys for auth automatically.",
+    "models_loading": "Loading available models...",
+    "models_empty": "No models returned by /v1/models",
+    "models_error": "Failed to load model list",
+    "models_count": "{count} available models",
+    "version_check_title": "Update Check",
+    "version_check_desc": "Call the /latest-version endpoint to compare with the server version and see if an update is available.",
+    "version_current_label": "Current version",
+    "version_latest_label": "Latest version",
+    "version_check_button": "Check for updates",
+    "version_check_idle": "Click to check for updates",
+    "version_checking": "Checking for the latest version...",
+    "version_update_available": "An update is available: {version}",
+    "version_is_latest": "You are on the latest version",
+    "version_check_error": "Update check failed",
+    "version_current_missing": "Server version is unavailable; cannot compare",
+    "version_unknown": "Unknown"
+  },
+  "notification": {
+    "debug_updated": "Debug settings updated",
+    "proxy_updated": "Proxy settings updated",
+    "proxy_cleared": "Proxy settings cleared",
+    "retry_updated": "Retry settings updated",
+    "quota_switch_project_updated": "Project switch settings updated",
+    "quota_switch_preview_updated": "Preview model switch settings updated",
+    "usage_statistics_updated": "Usage statistics settings updated",
+    "logging_to_file_updated": "Logging settings updated",
+    "request_log_updated": "Request logging setting updated",
+    "ws_auth_updated": "WebSocket authentication setting updated",
+    "api_key_added": "API key added successfully",
+    "api_key_updated": "API key updated successfully",
+    "api_key_deleted": "API key deleted successfully",
+    "gemini_key_added": "Gemini key added successfully",
+    "gemini_key_updated": "Gemini key updated successfully",
+    "gemini_key_deleted": "Gemini key deleted successfully",
+    "gemini_multi_input_required": "Please enter at least one Gemini key",
+    "gemini_multi_failed": "Gemini bulk add failed",
+    "gemini_multi_summary": "Gemini bulk add finished: {success} added, {skipped} skipped, {failed} failed",
+    "codex_config_added": "Codex configuration added successfully",
+    "codex_config_updated": "Codex configuration updated successfully",
+    "codex_config_deleted": "Codex configuration deleted successfully",
+    "codex_base_url_required": "Please enter the Codex Base URL",
+    "claude_config_added": "Claude configuration added successfully",
+    "claude_config_updated": "Claude configuration updated successfully",
+    "claude_config_deleted": "Claude configuration deleted successfully",
+    "field_required": "Required fields cannot be empty",
+    "openai_provider_required": "Please fill in provider name and Base URL",
+    "openai_provider_added": "OpenAI provider added successfully",
+    "openai_provider_updated": "OpenAI provider updated successfully",
+    "openai_provider_deleted": "OpenAI provider deleted successfully",
+    "openai_model_name_required": "Model name is required",
+    "openai_test_url_required": "Please provide a valid Base URL before testing",
+    "openai_test_key_required": "Please add at least one API key before testing",
+    "openai_test_model_required": "Please select or enter a model to test",
+    "data_refreshed": "Data refreshed successfully",
+    "connection_required": "Please establish connection first",
+    "refresh_failed": "Refresh failed",
+    "update_failed": "Update failed",
+    "add_failed": "Add failed",
+    "delete_failed": "Delete failed",
+    "upload_failed": "Upload failed",
+    "download_failed": "Download failed",
+    "login_failed": "Login failed",
+    "please_enter": "Please enter",
+    "please_fill": "Please fill",
+    "provider_name_url": "provider name and Base URL",
+    "api_key": "API key",
+    "gemini_api_key": "Gemini API key",
+    "codex_api_key": "Codex API key",
+    "claude_api_key": "Claude API key",
+    "link_copied": "Link copied to clipboard"
+  },
+  "language": {
+    "switch": "Language",
+    "chinese": "中文",
+    "english": "English"
+  },
+  "theme": {
+    "switch": "Theme",
+    "light": "Light",
+    "dark": "Dark",
+    "switch_to_light": "Switch to light mode",
+    "switch_to_dark": "Switch to dark mode",
+    "auto": "Follow system"
+  },
+  "sidebar": {
+    "toggle_expand": "Expand sidebar",
+    "toggle_collapse": "Collapse sidebar"
+  },
+  "footer": {
+    "api_version": "CLI Proxy API Version",
+    "build_date": "Build Time",
+    "version": "Management UI Version",
+    "author": "Author"
+  }
+}
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
new file mode 100644
index 0000000..d512d95
--- /dev/null
+++ b/src/i18n/locales/zh-CN.json
@@ -0,0 +1,656 @@
+{
+  "common": {
+    "login": "登录",
+    "logout": "登出",
+    "cancel": "取消",
+    "confirm": "确认",
+    "save": "保存",
+    "delete": "删除",
+    "edit": "编辑",
+    "add": "添加",
+    "update": "更新",
+    "refresh": "刷新",
+    "close": "关闭",
+    "success": "成功",
+    "error": "错误",
+    "info": "信息",
+    "warning": "警告",
+    "loading": "加载中...",
+    "connecting": "连接中...",
+    "connected": "已连接",
+    "disconnected": "未连接",
+    "connecting_status": "连接中",
+    "connected_status": "已连接",
+    "disconnected_status": "未连接",
+    "yes": "是",
+    "no": "否",
+    "optional": "可选",
+    "required": "必填",
+    "api_key": "密钥",
+    "base_url": "地址",
+    "proxy_url": "代理",
+    "alias": "别名",
+    "failure": "失败",
+    "unknown_error": "未知错误",
+    "copy": "复制",
+    "custom_headers_label": "自定义请求头",
+    "custom_headers_hint": "可选，设置需要附带到请求中的 HTTP 头，名称和值均不能为空。",
+    "custom_headers_add": "添加请求头",
+    "custom_headers_key_placeholder": "Header 名称，例如 X-Custom-Header",
+    "custom_headers_value_placeholder": "Header 值",
+    "model_name_placeholder": "模型名称，例如 claude-3-5-sonnet-20241022",
+    "model_alias_placeholder": "模型别名 (可选)"
+  },
+  "title": {
+    "main": "CLI Proxy API Management Center",
+    "login": "CLI Proxy API Management Center",
+    "abbr": "CPAMC"
+  },
+  "auto_login": {
+    "title": "正在自动登录...",
+    "message": "正在使用本地保存的连接信息尝试连接服务器"
+  },
+  "login": {
+    "subtitle": "请输入连接信息以访问管理界面",
+    "connection_title": "连接地址",
+    "connection_current": "当前地址",
+    "connection_auto_hint": "系统将自动使用当前访问地址进行连接",
+    "custom_connection_label": "自定义连接地址:",
+    "custom_connection_placeholder": "例如: https://example.com:8317",
+    "custom_connection_hint": "默认使用当前访问地址，若需要可手动输入其他地址。",
+    "use_current_address": "使用当前地址",
+    "management_key_label": "管理密钥:",
+    "management_key_placeholder": "请输入管理密钥",
+    "connect_button": "连接",
+    "submit_button": "登录",
+    "submitting": "连接中...",
+    "error_title": "登录失败",
+    "error_required": "请填写完整的连接信息",
+    "error_invalid": "连接失败，请检查地址和密钥"
+  },
+  "header": {
+    "check_connection": "检查连接",
+    "refresh_all": "刷新全部",
+    "logout": "登出"
+  },
+  "connection": {
+    "title": "连接信息",
+    "server_address": "服务器地址:",
+    "management_key": "管理密钥:",
+    "status": "连接状态:"
+  },
+  "nav": {
+    "basic_settings": "基础设置",
+    "api_keys": "API 密钥",
+    "ai_providers": "AI 提供商",
+    "auth_files": "认证文件",
+    "oauth": "OAuth 登录",
+    "usage_stats": "使用统计",
+    "config_management": "配置管理",
+    "logs": "日志查看",
+    "system_info": "中心信息"
+  },
+  "basic_settings": {
+    "title": "基础设置",
+    "debug_title": "调试模式",
+    "debug_enable": "启用调试模式",
+    "proxy_title": "代理设置",
+    "proxy_url_label": "代理 URL:",
+    "proxy_url_placeholder": "例如: socks5://user:pass@127.0.0.1:1080/",
+    "proxy_update": "更新",
+    "proxy_clear": "清空",
+    "retry_title": "请求重试",
+    "retry_count_label": "重试次数:",
+    "retry_update": "更新",
+    "quota_title": "配额超出行为",
+    "quota_switch_project": "自动切换项目",
+    "quota_switch_preview": "切换到预览模型",
+    "usage_statistics_title": "使用统计",
+    "usage_statistics_enable": "启用使用统计",
+    "logging_title": "日志记录",
+    "logging_to_file_enable": "启用日志记录到文件",
+    "request_log_enable": "启用请求日志",
+    "ws_auth_title": "WebSocket 鉴权",
+    "ws_auth_enable": "启用 /ws/* 鉴权"
+  },
+  "api_keys": {
+    "title": "API 密钥管理",
+    "proxy_auth_title": "代理服务认证密钥",
+    "add_button": "添加密钥",
+    "empty_title": "暂无API密钥",
+    "empty_desc": "点击上方按钮添加第一个密钥",
+    "item_title": "API密钥",
+    "add_modal_title": "添加API密钥",
+    "add_modal_key_label": "API密钥:",
+    "add_modal_key_placeholder": "请输入API密钥",
+    "edit_modal_title": "编辑API密钥",
+    "edit_modal_key_label": "API密钥:",
+    "delete_confirm": "确定要删除这个API密钥吗？"
+  },
+  "ai_providers": {
+    "title": "AI 提供商配置",
+    "gemini_title": "Gemini API 密钥",
+    "gemini_add_button": "添加密钥",
+    "gemini_empty_title": "暂无Gemini密钥",
+    "gemini_empty_desc": "点击上方按钮添加第一个密钥",
+    "gemini_item_title": "Gemini密钥",
+    "gemini_add_modal_title": "添加Gemini API密钥",
+    "gemini_add_modal_key_label": "API密钥",
+    "gemini_add_modal_key_placeholder": "输入 Gemini API 密钥",
+    "gemini_add_modal_key_hint": "逐条输入密钥，可同时指定可选 Base URL。",
+    "gemini_keys_add_btn": "添加密钥",
+    "gemini_base_url_placeholder": "可选 Base URL，如 https://generativelanguage.googleapis.com",
+    "gemini_edit_modal_title": "编辑Gemini API密钥",
+    "gemini_edit_modal_key_label": "API密钥:",
+    "gemini_delete_confirm": "确定要删除这个Gemini密钥吗？",
+    "excluded_models_label": "排除的模型 (可选):",
+    "excluded_models_placeholder": "用逗号或换行分隔，例如: gemini-1.5-pro, gemini-1.5-flash",
+    "excluded_models_hint": "留空表示不过滤；保存时会自动去重并忽略空白。",
+    "excluded_models_count": "排除 {count} 个模型",
+    "codex_title": "Codex API 配置",
+    "codex_add_button": "添加配置",
+    "codex_empty_title": "暂无Codex配置",
+    "codex_empty_desc": "点击上方按钮添加第一个配置",
+    "codex_item_title": "Codex配置",
+    "codex_add_modal_title": "添加Codex API配置",
+    "codex_add_modal_key_label": "API密钥:",
+    "codex_add_modal_key_placeholder": "请输入Codex API密钥",
+    "codex_add_modal_url_label": "Base URL (必填):",
+    "codex_add_modal_url_placeholder": "例如: https://api.example.com",
+    "codex_add_modal_proxy_label": "代理 URL (可选):",
+    "codex_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
+    "codex_edit_modal_title": "编辑Codex API配置",
+    "codex_edit_modal_key_label": "API密钥:",
+    "codex_edit_modal_url_label": "Base URL (必填):",
+    "codex_edit_modal_proxy_label": "代理 URL (可选):",
+    "codex_delete_confirm": "确定要删除这个Codex配置吗？",
+    "claude_title": "Claude API 配置",
+    "claude_add_button": "添加配置",
+    "claude_empty_title": "暂无Claude配置",
+    "claude_empty_desc": "点击上方按钮添加第一个配置",
+    "claude_item_title": "Claude配置",
+    "claude_add_modal_title": "添加Claude API配置",
+    "claude_add_modal_key_label": "API密钥:",
+    "claude_add_modal_key_placeholder": "请输入Claude API密钥",
+    "claude_add_modal_url_label": "Base URL (可选):",
+    "claude_add_modal_url_placeholder": "例如: https://api.anthropic.com",
+    "claude_add_modal_proxy_label": "代理 URL (可选):",
+    "claude_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
+    "claude_edit_modal_title": "编辑Claude API配置",
+    "claude_edit_modal_key_label": "API密钥:",
+    "claude_edit_modal_url_label": "Base URL (可选):",
+    "claude_edit_modal_proxy_label": "代理 URL (可选):",
+    "claude_delete_confirm": "确定要删除这个Claude配置吗？",
+    "claude_models_label": "自定义模型 (可选):",
+    "claude_models_hint": "为空表示使用全部模型；可填写 name[, alias] 以限制或重命名模型。",
+    "claude_models_add_btn": "添加模型",
+    "claude_models_count": "模型数量",
+    "openai_title": "OpenAI 兼容提供商",
+    "openai_add_button": "添加提供商",
+    "openai_empty_title": "暂无OpenAI兼容提供商",
+    "openai_empty_desc": "点击上方按钮添加第一个提供商",
+    "openai_add_modal_title": "添加OpenAI兼容提供商",
+    "openai_add_modal_name_label": "提供商名称:",
+    "openai_add_modal_name_placeholder": "例如: openrouter",
+    "openai_add_modal_url_label": "Base URL:",
+    "openai_add_modal_url_placeholder": "例如: https://openrouter.ai/api/v1",
+    "openai_add_modal_keys_label": "API密钥",
+    "openai_edit_modal_keys_label": "API密钥",
+    "openai_keys_hint": "每个密钥可搭配一个可选代理地址，更便于管理。",
+    "openai_keys_add_btn": "添加密钥",
+    "openai_key_placeholder": "输入 sk- 开头的密钥",
+    "openai_proxy_placeholder": "可选代理 URL (如 socks5://...)",
+    "openai_add_modal_models_label": "模型列表 (name[, alias] 每行一个):",
+    "openai_models_hint": "示例：gpt-4o-mini 或 moonshotai/kimi-k2:free, kimi-k2",
+    "openai_model_name_placeholder": "模型名称，如 moonshotai/kimi-k2:free",
+    "openai_model_alias_placeholder": "模型别名 (可选)",
+    "openai_models_add_btn": "添加模型",
+    "openai_models_fetch_button": "从 /v1/models 获取",
+    "openai_models_fetch_title": "从 /v1/models 选择模型",
+    "openai_models_fetch_hint": "使用上方 Base URL 调用 /v1/models 端点，附带首个 API Key（Bearer）与自定义请求头。",
+    "openai_models_fetch_url_label": "请求地址",
+    "openai_models_fetch_refresh": "重新获取",
+    "openai_models_fetch_loading": "正在从 /v1/models 获取模型列表...",
+    "openai_models_fetch_empty": "未获取到模型，请检查端点或鉴权信息。",
+    "openai_models_fetch_error": "获取模型失败",
+    "openai_models_fetch_back": "返回编辑",
+    "openai_models_fetch_apply": "添加所选模型",
+    "openai_models_search_label": "搜索模型",
+    "openai_models_search_placeholder": "按名称、别名或描述筛选",
+    "openai_models_search_empty": "没有匹配的模型，请更换关键字试试。",
+    "openai_models_fetch_invalid_url": "请先填写有效的 Base URL",
+    "openai_models_fetch_added": "已添加 {count} 个新模型",
+    "openai_edit_modal_title": "编辑OpenAI兼容提供商",
+    "openai_edit_modal_name_label": "提供商名称:",
+    "openai_edit_modal_url_label": "Base URL:",
+    "openai_edit_modal_models_label": "模型列表 (name[, alias] 每行一个):",
+    "openai_delete_confirm": "确定要删除这个OpenAI提供商吗？",
+    "openai_keys_count": "密钥数量",
+    "openai_models_count": "模型数量",
+    "openai_test_title": "连通性测试",
+    "openai_test_hint": "使用当前配置向 /v1/chat/completions 请求，验证是否可用。",
+    "openai_test_model_placeholder": "选择或输入要测试的模型",
+    "openai_test_action": "发送测试",
+    "openai_test_running": "正在发送测试请求...",
+    "openai_test_success": "测试成功，模型可用。",
+    "openai_test_failed": "测试失败",
+    "openai_test_select_placeholder": "从当前模型列表选择",
+    "openai_test_select_empty": "当前未配置模型，可直接输入"
+  },
+  "auth_files": {
+    "title": "认证文件管理",
+    "title_section": "认证文件",
+    "description": "这里集中管理 CLI Proxy 支持的所有 JSON 认证文件（如 Qwen、Gemini、Vertex 等），上传后即可在运行时启用相应的 AI 服务。",
+    "upload_button": "上传文件",
+    "delete_all_button": "删除全部",
+    "empty_title": "暂无认证文件",
+    "empty_desc": "点击上方按钮上传第一个文件",
+    "search_empty_title": "没有匹配的配置文件",
+    "search_empty_desc": "请调整筛选条件或清空搜索关键字再试一次。",
+    "file_size": "大小",
+    "file_modified": "修改时间",
+    "download_button": "下载",
+    "delete_button": "删除",
+    "delete_confirm": "确定要删除文件",
+    "delete_all_confirm": "确定要删除所有认证文件吗？此操作不可恢复！",
+    "delete_filtered_confirm": "确定要删除筛选出的 {type} 认证文件吗？此操作不可恢复！",
+    "upload_error_json": "只能上传JSON文件",
+    "upload_success": "文件上传成功",
+    "download_success": "文件下载成功",
+    "delete_success": "文件删除成功",
+    "delete_all_success": "成功删除",
+    "delete_filtered_success": "成功删除 {count} 个 {type} 认证文件",
+    "delete_filtered_partial": "{type} 认证文件删除完成，成功 {success} 个，失败 {failed} 个",
+    "delete_filtered_none": "当前筛选类型 ({type}) 下没有可删除的认证文件",
+    "files_count": "个文件",
+    "pagination_prev": "上一页",
+    "pagination_next": "下一页",
+    "pagination_info": "第 {current} / {total} 页 · 共 {count} 个文件",
+    "search_label": "搜索配置文件",
+    "search_placeholder": "输入名称、类型或提供方关键字",
+    "page_size_label": "单页数量",
+    "page_size_unit": "个/页",
+    "filter_all": "全部",
+    "filter_qwen": "Qwen",
+    "filter_gemini": "Gemini",
+    "filter_gemini-cli": "GeminiCLI",
+    "filter_aistudio": "AIStudio",
+    "filter_claude": "Claude",
+    "filter_codex": "Codex",
+    "filter_antigravity": "Antigravity",
+    "filter_iflow": "iFlow",
+    "filter_vertex": "Vertex",
+    "filter_empty": "空文件",
+    "filter_unknown": "其他",
+    "type_qwen": "Qwen",
+    "type_gemini": "Gemini",
+    "type_gemini-cli": "GeminiCLI",
+    "type_aistudio": "AIStudio",
+    "type_claude": "Claude",
+    "type_codex": "Codex",
+    "type_antigravity": "Antigravity",
+    "type_iflow": "iFlow",
+    "type_vertex": "Vertex",
+    "type_empty": "空文件",
+    "type_unknown": "其他"
+  },
+  "vertex_import": {
+    "title": "Vertex AI 凭证导入",
+    "description": "上传 Google 服务账号 JSON，使用 CLI vertex-import 同步规则写入 auth-dir/vertex-<project>.json。",
+    "location_label": "目标区域 (可选)",
+    "location_placeholder": "us-central1",
+    "location_hint": "留空表示使用默认区域 us-central1。",
+    "file_label": "服务账号密钥 JSON",
+    "file_hint": "仅支持 Google Cloud service account key JSON 文件，私钥会自动规范化。",
+    "file_placeholder": "尚未选择文件",
+    "choose_file": "选择文件",
+    "import_button": "导入 Vertex 凭证",
+    "file_required": "请先选择 .json 凭证文件",
+    "success": "Vertex 凭证导入成功",
+    "result_title": "凭证已保存",
+    "result_project": "项目 ID",
+    "result_email": "服务账号",
+    "result_location": "区域",
+    "result_file": "存储文件"
+  },
+  "oauth_excluded": {
+    "title": "OAuth 排除列表",
+    "description": "按提供商分列展示，点击卡片编辑或删除；支持 * 通配符，范围跟随上方的配置文件过滤标签。",
+    "add": "新增排除",
+    "add_title": "新增提供商排除列表",
+    "edit_title": "编辑 {provider} 的排除列表",
+    "refresh": "刷新",
+    "refreshing": "刷新中...",
+    "provider_label": "提供商",
+    "provider_auto": "跟随当前过滤",
+    "provider_placeholder": "例如 gemini-cli / openai",
+    "provider_hint": "默认选中当前筛选的提供商，也可直接输入或选择其他名称。",
+    "models_label": "排除的模型",
+    "models_placeholder": "gpt-4.1-mini\n*-preview",
+    "models_hint": "逗号或换行分隔；留空保存将删除该提供商记录；支持 * 通配符。",
+    "save": "保存/更新",
+    "saving": "正在保存...",
+    "save_success": "排除列表已更新",
+    "save_failed": "更新排除列表失败",
+    "delete": "删除提供商",
+    "delete_confirm": "确定要删除 {provider} 的排除列表吗？",
+    "delete_success": "已删除该提供商的排除列表",
+    "delete_failed": "删除排除列表失败",
+    "deleting": "正在删除...",
+    "no_models": "未配置排除模型",
+    "model_count": "排除 {count} 个模型",
+    "list_empty_all": "暂无任何提供商的排除列表，点击“新增排除”创建。",
+    "list_empty_filtered": "当前筛选下没有排除项，点击“新增排除”添加。",
+    "disconnected": "请先连接服务器以查看排除列表",
+    "load_failed": "加载排除列表失败",
+    "provider_required": "请先填写提供商名称",
+    "scope_all": "当前范围：全局（显示所有提供商）",
+    "scope_provider": "当前范围：{provider}"
+  },
+  "auth_login": {
+    "codex_oauth_title": "Codex OAuth",
+    "codex_oauth_button": "开始 Codex 登录",
+    "codex_oauth_hint": "通过 OAuth 流程登录 Codex 服务，自动获取并保存认证文件。",
+    "codex_oauth_url_label": "授权链接:",
+    "codex_open_link": "打开链接",
+    "codex_copy_link": "复制链接",
+    "codex_oauth_status_waiting": "等待认证中...",
+    "codex_oauth_status_success": "认证成功！",
+    "codex_oauth_status_error": "认证失败:",
+    "codex_oauth_start_error": "启动 Codex OAuth 失败:",
+    "codex_oauth_polling_error": "检查认证状态失败:",
+    "anthropic_oauth_title": "Anthropic OAuth",
+    "anthropic_oauth_button": "开始 Anthropic 登录",
+    "anthropic_oauth_hint": "通过 OAuth 流程登录 Anthropic (Claude) 服务，自动获取并保存认证文件。",
+    "anthropic_oauth_url_label": "授权链接:",
+    "anthropic_open_link": "打开链接",
+    "anthropic_copy_link": "复制链接",
+    "anthropic_oauth_status_waiting": "等待认证中...",
+    "anthropic_oauth_status_success": "认证成功！",
+    "anthropic_oauth_status_error": "认证失败:",
+    "anthropic_oauth_start_error": "启动 Anthropic OAuth 失败:",
+    "anthropic_oauth_polling_error": "检查认证状态失败:",
+    "antigravity_oauth_title": "Antigravity OAuth",
+    "antigravity_oauth_button": "开始 Antigravity 登录",
+    "antigravity_oauth_hint": "通过 OAuth 流程登录 Antigravity（Google 账号）服务，自动获取并保存认证文件。",
+    "antigravity_oauth_url_label": "授权链接:",
+    "antigravity_open_link": "打开链接",
+    "antigravity_copy_link": "复制链接",
+    "antigravity_oauth_status_waiting": "等待认证中...",
+    "antigravity_oauth_status_success": "认证成功！",
+    "antigravity_oauth_status_error": "认证失败:",
+    "antigravity_oauth_start_error": "启动 Antigravity OAuth 失败:",
+    "antigravity_oauth_polling_error": "检查认证状态失败:",
+    "gemini_cli_oauth_title": "Gemini CLI OAuth",
+    "gemini_cli_oauth_button": "开始 Gemini CLI 登录",
+    "gemini_cli_oauth_hint": "通过 OAuth 流程登录 Google Gemini CLI 服务，自动获取并保存认证文件。",
+    "gemini_cli_project_id_label": "Google Cloud 项目 ID (可选):",
+    "gemini_cli_project_id_placeholder": "输入 Google Cloud 项目 ID (可选)",
+    "gemini_cli_project_id_hint": "如果指定了项目 ID，将使用该项目的认证信息。",
+    "gemini_cli_oauth_url_label": "授权链接:",
+    "gemini_cli_open_link": "打开链接",
+    "gemini_cli_copy_link": "复制链接",
+    "gemini_cli_oauth_status_waiting": "等待认证中...",
+    "gemini_cli_oauth_status_success": "认证成功！",
+    "gemini_cli_oauth_status_error": "认证失败:",
+    "gemini_cli_oauth_start_error": "启动 Gemini CLI OAuth 失败:",
+    "gemini_cli_oauth_polling_error": "检查认证状态失败:",
+    "qwen_oauth_title": "Qwen OAuth",
+    "qwen_oauth_button": "开始 Qwen 登录",
+    "qwen_oauth_hint": "通过设备授权流程登录 Qwen 服务，自动获取并保存认证文件。",
+    "qwen_oauth_url_label": "授权链接:",
+    "qwen_open_link": "打开链接",
+    "qwen_copy_link": "复制链接",
+    "qwen_oauth_status_waiting": "等待认证中...",
+    "qwen_oauth_status_success": "认证成功！",
+    "qwen_oauth_status_error": "认证失败:",
+    "qwen_oauth_start_error": "启动 Qwen OAuth 失败:",
+    "qwen_oauth_polling_error": "检查认证状态失败:",
+    "missing_state": "无法获取认证状态参数",
+    "iflow_oauth_title": "iFlow OAuth",
+    "iflow_oauth_button": "开始 iFlow 登录",
+    "iflow_oauth_hint": "通过 OAuth 流程登录 iFlow 服务，自动获取并保存认证文件。",
+    "iflow_oauth_url_label": "授权链接:",
+    "iflow_open_link": "打开链接",
+    "iflow_copy_link": "复制链接",
+    "iflow_oauth_status_waiting": "等待认证中...",
+    "iflow_oauth_status_success": "认证成功！",
+    "iflow_oauth_status_error": "认证失败:",
+    "iflow_oauth_start_error": "启动 iFlow OAuth 失败:",
+    "iflow_oauth_polling_error": "检查认证状态失败:",
+    "iflow_cookie_title": "iFlow Cookie 登录",
+    "iflow_cookie_label": "Cookie 内容:",
+    "iflow_cookie_placeholder": "粘贴浏览器中的 Cookie，例如 sessionid=...;",
+    "iflow_cookie_hint": "直接提交 Cookie 以完成登录（无需打开授权链接），服务端将自动保存凭据。",
+    "iflow_cookie_button": "提交 Cookie 登录",
+    "iflow_cookie_status_success": "Cookie 登录成功，凭据已保存。",
+    "iflow_cookie_status_error": "Cookie 登录失败:",
+    "iflow_cookie_start_error": "提交 Cookie 登录失败:",
+    "iflow_cookie_required": "请先填写 Cookie 内容",
+    "iflow_cookie_result_title": "Cookie 登录结果",
+    "iflow_cookie_result_email": "账号",
+    "iflow_cookie_result_expired": "过期时间",
+    "iflow_cookie_result_path": "保存路径",
+    "iflow_cookie_result_type": "类型"
+  },
+  "usage_stats": {
+    "title": "使用统计",
+    "total_requests": "总请求数",
+    "success_requests": "成功请求",
+    "failed_requests": "失败请求",
+    "total_tokens": "总Token数",
+    "cached_tokens": "缓存 Token 数",
+    "reasoning_tokens": "思考 Token 数",
+    "rpm_30m": "RPM（近30分钟）",
+    "tpm_30m": "TPM（近30分钟）",
+    "requests_trend": "请求趋势",
+    "tokens_trend": "Token 使用趋势",
+    "api_details": "API 详细统计",
+    "by_hour": "按小时",
+    "by_day": "按天",
+    "refresh": "刷新",
+    "chart_line_label_1": "曲线 1",
+    "chart_line_label_2": "曲线 2",
+    "chart_line_label_3": "曲线 3",
+    "chart_line_label_4": "曲线 4",
+    "chart_line_label_5": "曲线 5",
+    "chart_line_label_6": "曲线 6",
+    "chart_line_label_7": "曲线 7",
+    "chart_line_label_8": "曲线 8",
+    "chart_line_label_9": "曲线 9",
+    "chart_line_hidden": "不显示",
+    "chart_line_actions_label": "曲线数量",
+    "chart_line_add": "增加曲线",
+    "chart_line_all": "全部",
+    "chart_line_delete": "删除曲线",
+    "chart_line_hint": "最多同时显示 9 条模型曲线",
+    "no_data": "暂无数据",
+    "loading_error": "加载失败",
+    "api_endpoint": "API端点",
+    "requests_count": "请求次数",
+    "tokens_count": "Token数量",
+    "models": "模型统计",
+    "success_rate": "成功率",
+    "total_cost": "总花费",
+    "total_cost_hint": "基于已设置的模型单价",
+    "model_price_title": "模型价格",
+    "model_price_reset": "清除价格",
+    "model_price_model_label": "选择模型",
+    "model_price_select_placeholder": "选择模型",
+    "model_price_select_hint": "模型列表来自使用统计明细",
+    "model_price_prompt": "提示价格 ($/1M tokens)",
+    "model_price_completion": "补全价格 ($/1M tokens)",
+    "model_price_save": "保存价格",
+    "model_price_empty": "暂未设置任何模型价格",
+    "model_price_model": "模型",
+    "model_price_saved": "模型价格已保存",
+    "model_price_model_required": "请选择要设置价格的模型",
+    "cost_trend": "花费统计",
+    "cost_axis_label": "花费 ($)",
+    "cost_need_price": "请先设置模型价格",
+    "cost_need_usage": "暂无使用数据，无法计算花费",
+    "cost_no_data": "没有可计算的花费数据"
+  },
+  "stats": {
+    "success": "成功",
+    "failure": "失败"
+  },
+  "logs": {
+    "title": "日志查看",
+    "refresh_button": "刷新日志",
+    "clear_button": "清空日志",
+    "download_button": "下载日志",
+    "error_log_button": "选择错误日志",
+    "error_logs_modal_title": "错误请求日志",
+    "error_logs_description": "请选择要下载的错误请求日志文件（仅在关闭请求日志时生成）。",
+    "error_logs_empty": "暂无错误请求日志文件",
+    "error_logs_load_error": "加载错误日志列表失败",
+    "error_logs_size": "大小",
+    "error_logs_modified": "最后修改",
+    "error_logs_download": "下载",
+    "error_log_download_success": "错误日志下载成功",
+    "empty_title": "暂无日志记录",
+    "empty_desc": "当启用\"日志记录到文件\"功能后，日志将显示在这里",
+    "log_content": "日志内容",
+    "loading": "正在加载日志...",
+    "load_error": "加载日志失败",
+    "clear_confirm": "确定要清空所有日志吗？此操作不可恢复！",
+    "clear_success": "日志已清空",
+    "download_success": "日志下载成功",
+    "auto_refresh": "自动刷新",
+    "auto_refresh_enabled": "自动刷新已开启",
+    "auto_refresh_disabled": "自动刷新已关闭",
+    "search_placeholder": "搜索日志内容或关键字",
+    "search_empty_title": "未找到匹配的日志",
+    "search_empty_desc": "尝试更换关键字或清空搜索条件。",
+    "lines": "行",
+    "removed": "已删除",
+    "upgrade_required_title": "需要升级 CLI Proxy API",
+    "upgrade_required_desc": "当前服务器版本不支持日志查看功能，请升级到最新版本的 CLI Proxy API 以使用此功能。"
+  },
+  "config_management": {
+    "title": "配置管理",
+    "editor_title": "配置文件",
+    "reload": "重新加载",
+    "save": "保存",
+    "description": "查看并编辑服务器上的 config.yaml 配置文件。保存前请确认语法正确。",
+    "status_idle": "等待操作",
+    "status_loading": "加载配置中...",
+    "status_loaded": "配置已加载",
+    "status_dirty": "有未保存的更改",
+    "status_disconnected": "请先连接服务器以加载配置",
+    "status_load_failed": "加载失败",
+    "status_saving": "正在保存配置...",
+    "status_saved": "配置保存完成",
+    "status_save_failed": "保存失败",
+    "save_success": "配置已保存",
+    "error_yaml_not_supported": "服务器未返回 YAML 格式，请确认 /config.yaml 接口可用",
+    "editor_placeholder": "key: value"
+  },
+  "system_info": {
+    "title": "管理中心信息",
+    "connection_status_title": "连接状态",
+    "api_status_label": "API 状态:",
+    "config_status_label": "配置状态:",
+    "last_update_label": "最后更新:",
+    "cache_data": "缓存数据",
+    "real_time_data": "实时数据",
+    "not_loaded": "未加载",
+    "seconds_ago": "秒前",
+    "models_title": "可用模型列表",
+    "models_desc": "展示 /v1/models 返回的模型，并自动使用服务器保存的 API Key 进行鉴权。",
+    "models_loading": "正在加载可用模型...",
+    "models_empty": "未从 /v1/models 获取到模型数据",
+    "models_error": "获取模型列表失败",
+    "models_count": "可用模型 {count} 个",
+    "version_check_title": "版本检查",
+    "version_check_desc": "调用 /latest-version 接口比对服务器版本，提示是否有可用更新。",
+    "version_current_label": "当前版本",
+    "version_latest_label": "最新版本",
+    "version_check_button": "检查更新",
+    "version_check_idle": "点击检查更新",
+    "version_checking": "正在检查最新版本...",
+    "version_update_available": "有新版本可用：{version}",
+    "version_is_latest": "当前已是最新版本",
+    "version_check_error": "检查更新失败",
+    "version_current_missing": "未获取到服务器版本号，暂无法比对",
+    "version_unknown": "未知"
+  },
+  "notification": {
+    "debug_updated": "调试设置已更新",
+    "proxy_updated": "代理设置已更新",
+    "proxy_cleared": "代理设置已清空",
+    "retry_updated": "重试设置已更新",
+    "quota_switch_project_updated": "项目切换设置已更新",
+    "quota_switch_preview_updated": "预览模型切换设置已更新",
+    "usage_statistics_updated": "使用统计设置已更新",
+    "logging_to_file_updated": "日志记录设置已更新",
+    "request_log_updated": "请求日志设置已更新",
+    "ws_auth_updated": "WebSocket 鉴权设置已更新",
+    "api_key_added": "API密钥添加成功",
+    "api_key_updated": "API密钥更新成功",
+    "api_key_deleted": "API密钥删除成功",
+    "gemini_key_added": "Gemini密钥添加成功",
+    "gemini_key_updated": "Gemini密钥更新成功",
+    "gemini_key_deleted": "Gemini密钥删除成功",
+    "gemini_multi_input_required": "请先输入至少一个Gemini密钥",
+    "gemini_multi_failed": "Gemini密钥批量添加失败",
+    "gemini_multi_summary": "Gemini批量添加完成：成功 {success}，跳过 {skipped}，失败 {failed}",
+    "codex_config_added": "Codex配置添加成功",
+    "codex_config_updated": "Codex配置更新成功",
+    "codex_config_deleted": "Codex配置删除成功",
+    "codex_base_url_required": "请填写Codex Base URL",
+    "claude_config_added": "Claude配置添加成功",
+    "claude_config_updated": "Claude配置更新成功",
+    "claude_config_deleted": "Claude配置删除成功",
+    "field_required": "必填字段不能为空",
+    "openai_provider_required": "请填写提供商名称和Base URL",
+    "openai_provider_added": "OpenAI提供商添加成功",
+    "openai_provider_updated": "OpenAI提供商更新成功",
+    "openai_provider_deleted": "OpenAI提供商删除成功",
+    "openai_model_name_required": "请填写模型名称",
+    "openai_test_url_required": "请先填写有效的 Base URL 以进行测试",
+    "openai_test_key_required": "请至少填写一个 API 密钥以进行测试",
+    "openai_test_model_required": "请选择或输入要测试的模型",
+    "data_refreshed": "数据刷新成功",
+    "connection_required": "请先建立连接",
+    "refresh_failed": "刷新失败",
+    "update_failed": "更新失败",
+    "add_failed": "添加失败",
+    "delete_failed": "删除失败",
+    "upload_failed": "上传失败",
+    "download_failed": "下载失败",
+    "login_failed": "登录失败",
+    "please_enter": "请输入",
+    "please_fill": "请填写",
+    "provider_name_url": "提供商名称和Base URL",
+    "api_key": "API密钥",
+    "gemini_api_key": "Gemini API密钥",
+    "codex_api_key": "Codex API密钥",
+    "claude_api_key": "Claude API密钥",
+    "link_copied": "链接已复制到剪贴板"
+  },
+  "language": {
+    "switch": "语言",
+    "chinese": "中文",
+    "english": "English"
+  },
+  "theme": {
+    "switch": "主题",
+    "light": "亮色",
+    "dark": "暗色",
+    "switch_to_light": "切换到亮色模式",
+    "switch_to_dark": "切换到暗色模式",
+    "auto": "跟随系统"
+  },
+  "sidebar": {
+    "toggle_expand": "展开侧边栏",
+    "toggle_collapse": "收起侧边栏"
+  },
+  "footer": {
+    "api_version": "CLI Proxy API 版本",
+    "build_date": "构建时间",
+    "version": "管理中心版本",
+    "author": "作者"
+  }
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..08a3ac9
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..9a2a810
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@/styles/global.scss';
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/src/modules/ai-providers.js b/src/modules/ai-providers.js
deleted file mode 100644
index ab3e5c9..0000000
--- a/src/modules/ai-providers.js
+++ /dev/null
@@ -1,1921 +0,0 @@
-// AI 提供商配置相关方法模块
-// 这些函数依赖于 CLIProxyManager 实例上的 makeRequest/getConfig/clearCache/showNotification 等能力，
-// 以及 apiKeysModule 中的工具方法（如 applyHeadersToConfig/renderHeaderBadges）。
-
-import { normalizeModelList } from '../utils/models.js';
-
-const getStatsBySource = (stats) => {
-    if (stats && typeof stats === 'object' && stats.bySource) {
-        return stats.bySource;
-    }
-    return stats || {};
-};
-
-const buildModelEndpoint = (baseUrl) => {
-    if (!baseUrl) return '';
-    const trimmed = String(baseUrl).trim().replace(/\/+$/g, '');
-    if (!trimmed) return '';
-
-    // 如果 base 已以 /v1 结尾，直接拼 /models；否则拼 /v1/models，避免丢失中间路径
-    if (trimmed.endsWith('/v1')) {
-        return `${trimmed}/models`;
-    }
-    return `${trimmed}/v1/models`;
-};
-
-const buildChatCompletionsEndpoint = (baseUrl) => {
-    if (!baseUrl) return '';
-    const trimmed = String(baseUrl).trim().replace(/\/+$/g, '');
-    if (!trimmed) return '';
-    if (trimmed.endsWith('/chat/completions')) {
-        return trimmed;
-    }
-    if (trimmed.endsWith('/v1')) {
-        return `${trimmed}/chat/completions`;
-    }
-    return `${trimmed}/v1/chat/completions`;
-};
-
-const normalizeExcludedModels = (input) => {
-    const rawList = Array.isArray(input)
-        ? input
-        : (typeof input === 'string' ? input.split(/[\n,]/) : []);
-    const seen = new Set();
-    const normalized = [];
-
-    rawList.forEach(item => {
-        if (item === undefined || item === null) {
-            return;
-        }
-        const trimmed = String(item).trim();
-        if (!trimmed) return;
-        const key = trimmed.toLowerCase();
-        if (seen.has(key)) return;
-        seen.add(key);
-        normalized.push(trimmed);
-    });
-
-    return normalized;
-};
-
-export function collectExcludedModels(textareaId) {
-    const textarea = document.getElementById(textareaId);
-    if (!textarea) return [];
-    return normalizeExcludedModels(textarea.value);
-}
-
-export function setExcludedModelsValue(textareaId, models = []) {
-    const textarea = document.getElementById(textareaId);
-    if (!textarea) return;
-    textarea.value = normalizeExcludedModels(models).join('\n');
-}
-
-export function renderExcludedModelBadges(models) {
-    const normalized = normalizeExcludedModels(models);
-    if (!normalized.length) {
-        return '';
-    }
-    const badges = normalized.map(model => `
-        <span class="provider-model-tag excluded-model-tag">
-            <span class="model-name">${this.escapeHtml(model)}</span>
-        </span>
-    `).join('');
-
-    return `
-            <div class="item-subtitle">${i18n.t('ai_providers.excluded_models_count', { count: normalized.length })}</div>
-            <div class="provider-models excluded-models">
-                ${badges}
-            </div>
-        `;
-}
-
-export async function loadGeminiKeys() {
-    try {
-        const config = await this.getConfig();
-        const keys = this.getGeminiKeysFromConfig(config);
-        await this.renderGeminiKeys(keys);
-    } catch (error) {
-        console.error('加载Gemini密钥失败:', error);
-    }
-}
-
-export function getGeminiKeysFromConfig(config) {
-    if (!config) {
-        return [];
-    }
-
-    const geminiKeys = Array.isArray(config['gemini-api-key']) ? config['gemini-api-key'] : [];
-    return geminiKeys;
-}
-
-export async function renderGeminiKeys(keys, keyStats = null) {
-    const container = document.getElementById('gemini-keys-list');
-    if (!container) {
-        return;
-    }
-    const normalizedList = (Array.isArray(keys) ? keys : []).map(item => {
-        let normalized = null;
-        if (item && typeof item === 'object') {
-            normalized = { ...item };
-        } else if (typeof item === 'string') {
-            const trimmed = item.trim();
-            if (trimmed) {
-                normalized = { 'api-key': trimmed };
-            }
-        }
-
-        if (normalized && !normalized['base-url'] && normalized['base_url']) {
-            normalized['base-url'] = normalized['base_url'];
-        }
-
-        return normalized;
-    }).filter(config => config && config['api-key']);
-    this.cachedGeminiKeys = normalizedList;
-
-    if (normalizedList.length === 0) {
-        container.innerHTML = `
-                <div class="empty-state">
-                    <i class="fab fa-google"></i>
-                    <h3>${i18n.t('ai_providers.gemini_empty_title')}</h3>
-                    <p>${i18n.t('ai_providers.gemini_empty_desc')}</p>
-                </div>
-            `;
-        return;
-    }
-
-    if (!keyStats) {
-        keyStats = await this.getKeyStats();
-    }
-    const statsBySource = getStatsBySource(keyStats);
-
-    container.innerHTML = normalizedList.map((config, index) => {
-        const rawKey = config['api-key'] || '';
-        const masked = this.maskApiKey(rawKey || '');
-        const maskedDisplay = this.escapeHtml(masked);
-        const usageStats = (rawKey && (statsBySource[rawKey] || statsBySource[masked])) || { success: 0, failure: 0 };
-        const configJson = JSON.stringify(config).replace(/"/g, '&quot;');
-        const apiKeyJson = JSON.stringify(rawKey || '').replace(/"/g, '&quot;');
-        const baseUrl = config['base-url'] || config['base_url'] || '';
-        const excludedModelsHtml = this.renderExcludedModelBadges(config['excluded-models']);
-        return `
-            <div class="key-item">
-                <div class="item-content">
-                    <div class="item-title">${i18n.t('ai_providers.gemini_item_title')} #${index + 1}</div>
-                    <div class="item-subtitle">${i18n.t('common.api_key')}: ${maskedDisplay}</div>
-                    ${baseUrl ? `<div class="item-subtitle">${i18n.t('common.base_url')}: ${this.escapeHtml(baseUrl)}</div>` : ''}
-                    ${this.renderHeaderBadges(config.headers)}
-                    ${excludedModelsHtml}
-                    <div class="item-stats">
-                        <span class="stat-badge stat-success">
-                            <i class="fas fa-check-circle"></i> ${i18n.t('stats.success')}: ${usageStats.success}
-                        </span>
-                        <span class="stat-badge stat-failure">
-                            <i class="fas fa-times-circle"></i> ${i18n.t('stats.failure')}: ${usageStats.failure}
-                        </span>
-                    </div>
-                </div>
-                <div class="item-actions">
-                    <button class="btn btn-secondary" onclick="manager.editGeminiKey(${index}, ${configJson})">
-                        <i class="fas fa-edit"></i>
-                    </button>
-                    <button class="btn btn-danger" onclick="manager.deleteGeminiKey(${apiKeyJson})">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-export function showAddGeminiKeyModal() {
-    const modal = document.getElementById('modal');
-    const modalBody = document.getElementById('modal-body');
-
-    modalBody.innerHTML = `
-            <h3>${i18n.t('ai_providers.gemini_add_modal_title')}</h3>
-            <div class="form-group">
-                <label>${i18n.t('ai_providers.gemini_add_modal_key_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.gemini_add_modal_key_hint')}</p>
-                <div id="new-gemini-keys-wrapper" class="api-key-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addGeminiKeyField('new-gemini-keys-wrapper')">${i18n.t('ai_providers.gemini_keys_add_btn')}</button>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('common.custom_headers_label')}</label>
-                <p class="form-hint">${i18n.t('common.custom_headers_hint')}</p>
-                <div id="new-gemini-headers-wrapper" class="header-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addHeaderField('new-gemini-headers-wrapper')">${i18n.t('common.custom_headers_add')}</button>
-            </div>
-            <div class="form-group">
-                <label for="new-gemini-excluded-models">${i18n.t('ai_providers.excluded_models_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.excluded_models_hint')}</p>
-                <textarea id="new-gemini-excluded-models" rows="3" data-i18n-placeholder="ai_providers.excluded_models_placeholder" placeholder="${i18n.t('ai_providers.excluded_models_placeholder')}"></textarea>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.addGeminiKey()">${i18n.t('common.add')}</button>
-            </div>
-        `;
-
-    modal.style.display = 'block';
-    this.populateGeminiKeyFields('new-gemini-keys-wrapper');
-    this.populateHeaderFields('new-gemini-headers-wrapper');
-    this.setExcludedModelsValue('new-gemini-excluded-models');
-}
-
-export async function addGeminiKey() {
-    const entries = this.collectGeminiKeyFieldInputs('new-gemini-keys-wrapper');
-    const headers = this.collectHeaderInputs('new-gemini-headers-wrapper');
-    const excludedModels = this.collectExcludedModels('new-gemini-excluded-models');
-
-    if (!entries.length) {
-        this.showNotification(i18n.t('notification.gemini_multi_input_required'), 'error');
-        return;
-    }
-
-    try {
-        const data = await this.makeRequest('/gemini-api-key');
-        let currentKeys = Array.isArray(data['gemini-api-key']) ? data['gemini-api-key'] : [];
-        const existingKeys = new Set(currentKeys.map(item => item && item['api-key']).filter(Boolean));
-        const batchSeen = new Set();
-
-        let successCount = 0;
-        let skippedCount = 0;
-        let failedCount = 0;
-
-        for (const entry of entries) {
-            const apiKey = entry['api-key'];
-            if (!apiKey) {
-                continue;
-            }
-
-            if (batchSeen.has(apiKey)) {
-                skippedCount++;
-                continue;
-            }
-            batchSeen.add(apiKey);
-
-            if (existingKeys.has(apiKey)) {
-                skippedCount++;
-                continue;
-            }
-
-            const newConfig = { 'api-key': apiKey };
-            const baseUrl = entry['base-url'];
-            if (baseUrl) {
-                newConfig['base-url'] = baseUrl;
-            } else {
-                delete newConfig['base-url'];
-            }
-            newConfig['excluded-models'] = excludedModels;
-            this.applyHeadersToConfig(newConfig, headers);
-
-            const nextKeys = [...currentKeys, newConfig];
-
-            try {
-                await this.makeRequest('/gemini-api-key', {
-                    method: 'PUT',
-                    body: JSON.stringify(nextKeys)
-                });
-                currentKeys = nextKeys;
-                existingKeys.add(apiKey);
-                successCount++;
-            } catch (error) {
-                failedCount++;
-                console.error('Gemini key add failed:', error);
-            }
-        }
-
-        this.clearCache(); // 清除缓存
-        this.closeModal();
-        this.loadGeminiKeys();
-
-        if (successCount === 1 && skippedCount === 0 && failedCount === 0) {
-            this.showNotification(i18n.t('notification.gemini_key_added'), 'success');
-            return;
-        }
-
-        const summaryTemplate = i18n.t('notification.gemini_multi_summary');
-        const summary = summaryTemplate
-            .replace('{success}', successCount)
-            .replace('{skipped}', skippedCount)
-            .replace('{failed}', failedCount);
-        const status = failedCount > 0 ? 'warning' : (successCount > 0 ? 'success' : 'info');
-        this.showNotification(summary, status);
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.gemini_multi_failed')}: ${error.message}`, 'error');
-    }
-}
-
-export function addGeminiKeyField(wrapperId, entry = {}, options = {}) {
-    const wrapper = document.getElementById(wrapperId);
-    if (!wrapper) return;
-
-    const row = document.createElement('div');
-    row.className = 'api-key-input-row';
-    const apiKeyValue = typeof entry?.['api-key'] === 'string' ? entry['api-key'] : '';
-    const baseUrlValue = typeof entry?.['base-url'] === 'string'
-        ? entry['base-url']
-        : (typeof entry?.['base_url'] === 'string' ? entry['base_url'] : '');
-    const allowRemoval = options.allowRemoval !== false;
-    const removeButtonHtml = allowRemoval
-        ? `<button type="button" class="btn btn-small btn-danger gemini-key-remove-btn"><i class="fas fa-trash"></i></button>`
-        : '';
-    row.innerHTML = `
-            <div class="input-group api-key-input-group">
-                <input type="text" class="api-key-value-input" placeholder="${i18n.t('ai_providers.gemini_add_modal_key_placeholder')}" value="${this.escapeHtml(apiKeyValue)}">
-                <input type="text" class="api-key-proxy-input" placeholder="${i18n.t('ai_providers.gemini_base_url_placeholder')}" value="${this.escapeHtml(baseUrlValue)}">
-                ${removeButtonHtml}
-            </div>
-        `;
-
-    if (allowRemoval) {
-        const removeBtn = row.querySelector('.gemini-key-remove-btn');
-        if (removeBtn) {
-            removeBtn.addEventListener('click', () => {
-                wrapper.removeChild(row);
-                if (wrapper.childElementCount === 0) {
-                    this.addGeminiKeyField(wrapperId, {}, options);
-                }
-            });
-        }
-    }
-
-    wrapper.appendChild(row);
-}
-
-export function populateGeminiKeyFields(wrapperId, entries = [], options = {}) {
-    const wrapper = document.getElementById(wrapperId);
-    if (!wrapper) return;
-    wrapper.innerHTML = '';
-
-    if (!Array.isArray(entries) || entries.length === 0) {
-        this.addGeminiKeyField(wrapperId, {}, options);
-        return;
-    }
-
-    entries.forEach(entry => this.addGeminiKeyField(wrapperId, entry, options));
-}
-
-export function collectGeminiKeyFieldInputs(wrapperId) {
-    const wrapper = document.getElementById(wrapperId);
-    if (!wrapper) return [];
-
-    const rows = Array.from(wrapper.querySelectorAll('.api-key-input-row'));
-    const entries = [];
-
-    rows.forEach(row => {
-        const keyInput = row.querySelector('.api-key-value-input');
-        const urlInput = row.querySelector('.api-key-proxy-input');
-        const apiKey = keyInput ? keyInput.value.trim() : '';
-        const baseUrl = urlInput ? urlInput.value.trim() : '';
-        if (apiKey) {
-            entries.push({ 'api-key': apiKey, 'base-url': baseUrl });
-        }
-    });
-
-    return entries;
-}
-
-export function editGeminiKey(index, config) {
-    const modal = document.getElementById('modal');
-    const modalBody = document.getElementById('modal-body');
-    this.currentGeminiEditConfig = config || {};
-
-    modalBody.innerHTML = `
-            <h3>${i18n.t('ai_providers.gemini_edit_modal_title')}</h3>
-            <div class="form-group">
-                <label>${i18n.t('ai_providers.gemini_edit_modal_key_label')}</label>
-                <div id="edit-gemini-keys-wrapper" class="api-key-input-list"></div>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('common.custom_headers_label')}</label>
-                <p class="form-hint">${i18n.t('common.custom_headers_hint')}</p>
-                <div id="edit-gemini-headers-wrapper" class="header-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addHeaderField('edit-gemini-headers-wrapper')">${i18n.t('common.custom_headers_add')}</button>
-            </div>
-            <div class="form-group">
-                <label for="edit-gemini-excluded-models">${i18n.t('ai_providers.excluded_models_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.excluded_models_hint')}</p>
-                <textarea id="edit-gemini-excluded-models" rows="3" data-i18n-placeholder="ai_providers.excluded_models_placeholder" placeholder="${i18n.t('ai_providers.excluded_models_placeholder')}"></textarea>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.updateGeminiKey(${index})">${i18n.t('common.update')}</button>
-            </div>
-        `;
-
-    modal.style.display = 'block';
-    this.populateGeminiKeyFields('edit-gemini-keys-wrapper', [config], { allowRemoval: false });
-    this.populateHeaderFields('edit-gemini-headers-wrapper', config.headers || null);
-    this.setExcludedModelsValue('edit-gemini-excluded-models', config['excluded-models'] || []);
-}
-
-export async function updateGeminiKey(index) {
-    const entries = this.collectGeminiKeyFieldInputs('edit-gemini-keys-wrapper');
-    if (!entries.length) {
-        this.showNotification(i18n.t('notification.please_enter') + ' ' + i18n.t('notification.gemini_api_key'), 'error');
-        return;
-    }
-    const entry = entries[0];
-    const newKey = entry['api-key'];
-    const baseUrl = entry['base-url'] || '';
-    const headers = this.collectHeaderInputs('edit-gemini-headers-wrapper');
-    const excludedModels = this.collectExcludedModels('edit-gemini-excluded-models');
-
-    if (!newKey) {
-        this.showNotification(i18n.t('notification.please_enter') + ' ' + i18n.t('notification.gemini_api_key'), 'error');
-        return;
-    }
-
-    try {
-        const existingConfig = (this.cachedGeminiKeys && this.cachedGeminiKeys[index]) || this.currentGeminiEditConfig || {};
-        const newConfig = { ...existingConfig, 'api-key': newKey };
-        if (baseUrl) {
-            newConfig['base-url'] = baseUrl;
-        } else {
-            delete newConfig['base-url'];
-        }
-        newConfig['excluded-models'] = excludedModels;
-        this.applyHeadersToConfig(newConfig, headers);
-
-        await this.makeRequest('/gemini-api-key', {
-            method: 'PATCH',
-            body: JSON.stringify({ index, value: newConfig })
-        });
-
-        this.clearCache(); // 清除缓存
-        this.closeModal();
-        this.loadGeminiKeys();
-        this.currentGeminiEditConfig = null;
-        this.showNotification(i18n.t('notification.gemini_key_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-    }
-}
-
-export async function deleteGeminiKey(apiKey) {
-    if (!confirm(i18n.t('ai_providers.gemini_delete_confirm'))) return;
-
-    try {
-        await this.makeRequest(`/gemini-api-key?api-key=${encodeURIComponent(apiKey)}`, { method: 'DELETE' });
-        this.clearCache(); // 清除缓存
-        this.loadGeminiKeys();
-        this.showNotification(i18n.t('notification.gemini_key_deleted'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-    }
-}
-
-// Codex providers
-export async function loadCodexKeys() {
-    try {
-        const config = await this.getConfig();
-        const keys = Array.isArray(config['codex-api-key']) ? config['codex-api-key'] : [];
-        await this.renderCodexKeys(keys);
-    } catch (error) {
-        console.error('加载Codex密钥失败:', error);
-    }
-}
-
-export async function renderCodexKeys(keys, keyStats = null) {
-    const container = document.getElementById('codex-keys-list');
-    if (!container) {
-        return;
-    }
-    const list = Array.isArray(keys) ? keys : [];
-
-    if (list.length === 0) {
-        container.innerHTML = `
-                <div class="empty-state">
-                    <i class="fas fa-code"></i>
-                    <h3>${i18n.t('ai_providers.codex_empty_title')}</h3>
-                    <p>${i18n.t('ai_providers.codex_empty_desc')}</p>
-                </div>
-            `;
-        return;
-    }
-
-    // 使用传入的keyStats，如果没有则获取一次
-    if (!keyStats) {
-        keyStats = await this.getKeyStats();
-    }
-    const statsBySource = getStatsBySource(keyStats);
-
-    container.innerHTML = list.map((config, index) => {
-        const rawKey = config['api-key'] || '';
-        const masked = this.maskApiKey(rawKey || '');
-        const maskedDisplay = this.escapeHtml(masked);
-        const usageStats = (rawKey && (statsBySource[rawKey] || statsBySource[masked])) || { success: 0, failure: 0 };
-        const deleteArg = JSON.stringify(rawKey).replace(/"/g, '&quot;');
-        const excludedModelsHtml = this.renderExcludedModelBadges(config['excluded-models']);
-        return `
-            <div class="provider-item">
-                <div class="item-content">
-                    <div class="item-title">${i18n.t('ai_providers.codex_item_title')} #${index + 1}</div>
-                    <div class="item-subtitle">${i18n.t('common.api_key')}: ${maskedDisplay}</div>
-                    ${config['base-url'] ? `<div class="item-subtitle">${i18n.t('common.base_url')}: ${this.escapeHtml(config['base-url'])}</div>` : ''}
-                    ${config['proxy-url'] ? `<div class="item-subtitle">${i18n.t('common.proxy_url')}: ${this.escapeHtml(config['proxy-url'])}</div>` : ''}
-                    ${this.renderHeaderBadges(config.headers)}
-                    ${excludedModelsHtml}
-                    <div class="item-stats">
-                        <span class="stat-badge stat-success">
-                            <i class="fas fa-check-circle"></i> ${i18n.t('stats.success')}: ${usageStats.success}
-                        </span>
-                        <span class="stat-badge stat-failure">
-                            <i class="fas fa-times-circle"></i> ${i18n.t('stats.failure')}: ${usageStats.failure}
-                        </span>
-                    </div>
-                </div>
-                <div class="item-actions">
-                    <button class="btn btn-secondary" onclick="manager.editCodexKey(${index}, ${JSON.stringify(config).replace(/\"/g, '&quot;')})">
-                        <i class="fas fa-edit"></i>
-                    </button>
-                    <button class="btn btn-danger" onclick="manager.deleteCodexKey(${deleteArg})">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-export function showAddCodexKeyModal() {
-    const modal = document.getElementById('modal');
-    const modalBody = document.getElementById('modal-body');
-
-    modalBody.innerHTML = `
-            <h3>${i18n.t('ai_providers.codex_add_modal_title')}</h3>
-            <div class="form-group">
-                <label for="new-codex-key">${i18n.t('ai_providers.codex_add_modal_key_label')}</label>
-                <input type="text" id="new-codex-key" placeholder="${i18n.t('ai_providers.codex_add_modal_key_placeholder')}">
-            </div>
-            <div class="form-group">
-                <label for="new-codex-url">${i18n.t('ai_providers.codex_add_modal_url_label')}</label>
-                <input type="text" id="new-codex-url" placeholder="${i18n.t('ai_providers.codex_add_modal_url_placeholder')}" required>
-            </div>
-            <div class="form-group">
-                <label for="new-codex-proxy">${i18n.t('ai_providers.codex_add_modal_proxy_label')}</label>
-                <input type="text" id="new-codex-proxy" placeholder="${i18n.t('ai_providers.codex_add_modal_proxy_placeholder')}">
-            </div>
-            <div class="form-group">
-                <label for="new-codex-excluded-models">${i18n.t('ai_providers.excluded_models_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.excluded_models_hint')}</p>
-                <textarea id="new-codex-excluded-models" rows="3" data-i18n-placeholder="ai_providers.excluded_models_placeholder" placeholder="${i18n.t('ai_providers.excluded_models_placeholder')}"></textarea>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('common.custom_headers_label')}</label>
-                <p class="form-hint">${i18n.t('common.custom_headers_hint')}</p>
-                <div id="new-codex-headers-wrapper" class="header-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addHeaderField('new-codex-headers-wrapper')">${i18n.t('common.custom_headers_add')}</button>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.addCodexKey()">${i18n.t('common.add')}</button>
-            </div>
-        `;
-
-    modal.style.display = 'block';
-    this.populateHeaderFields('new-codex-headers-wrapper');
-    this.setExcludedModelsValue('new-codex-excluded-models');
-}
-
-export async function addCodexKey() {
-    const apiKey = document.getElementById('new-codex-key').value.trim();
-    const baseUrl = document.getElementById('new-codex-url').value.trim();
-    const proxyUrl = document.getElementById('new-codex-proxy').value.trim();
-    const headers = this.collectHeaderInputs('new-codex-headers-wrapper');
-    const excludedModels = this.collectExcludedModels('new-codex-excluded-models');
-
-    if (!apiKey) {
-        this.showNotification(i18n.t('notification.field_required'), 'error');
-        return;
-    }
-    if (!baseUrl) {
-        this.showNotification(i18n.t('notification.codex_base_url_required'), 'error');
-        return;
-    }
-
-    try {
-        const data = await this.makeRequest('/codex-api-key');
-        const currentKeys = this.normalizeArrayResponse(data, 'codex-api-key').map(item => ({ ...item }));
-
-        const newConfig = this.buildCodexConfig(apiKey, baseUrl, proxyUrl, {}, headers, excludedModels);
-
-        currentKeys.push(newConfig);
-
-        await this.makeRequest('/codex-api-key', {
-            method: 'PUT',
-            body: JSON.stringify(currentKeys)
-        });
-
-        this.clearCache(); // 清除缓存
-        this.closeModal();
-        this.loadCodexKeys();
-        this.showNotification(i18n.t('notification.codex_config_added'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.add_failed')}: ${error.message}`, 'error');
-    }
-}
-
-export function editCodexKey(index, config) {
-    const modal = document.getElementById('modal');
-    const modalBody = document.getElementById('modal-body');
-
-    modalBody.innerHTML = `
-            <h3>${i18n.t('ai_providers.codex_edit_modal_title')}</h3>
-            <div class="form-group">
-                <label for="edit-codex-key">${i18n.t('ai_providers.codex_edit_modal_key_label')}</label>
-                <input type="text" id="edit-codex-key" value="${config['api-key']}">
-            </div>
-            <div class="form-group">
-                <label for="edit-codex-url">${i18n.t('ai_providers.codex_edit_modal_url_label')}</label>
-                <input type="text" id="edit-codex-url" value="${config['base-url'] || ''}" required>
-            </div>
-            <div class="form-group">
-                <label for="edit-codex-proxy">${i18n.t('ai_providers.codex_edit_modal_proxy_label')}</label>
-                <input type="text" id="edit-codex-proxy" value="${config['proxy-url'] || ''}">
-            </div>
-            <div class="form-group">
-                <label for="edit-codex-excluded-models">${i18n.t('ai_providers.excluded_models_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.excluded_models_hint')}</p>
-                <textarea id="edit-codex-excluded-models" rows="3" data-i18n-placeholder="ai_providers.excluded_models_placeholder" placeholder="${i18n.t('ai_providers.excluded_models_placeholder')}"></textarea>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('common.custom_headers_label')}</label>
-                <p class="form-hint">${i18n.t('common.custom_headers_hint')}</p>
-                <div id="edit-codex-headers-wrapper" class="header-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addHeaderField('edit-codex-headers-wrapper')">${i18n.t('common.custom_headers_add')}</button>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.updateCodexKey(${index})">${i18n.t('common.update')}</button>
-            </div>
-        `;
-
-    modal.style.display = 'block';
-    this.populateHeaderFields('edit-codex-headers-wrapper', config.headers || null);
-    this.setExcludedModelsValue('edit-codex-excluded-models', config['excluded-models'] || []);
-}
-
-export async function updateCodexKey(index) {
-    const apiKey = document.getElementById('edit-codex-key').value.trim();
-    const baseUrl = document.getElementById('edit-codex-url').value.trim();
-    const proxyUrl = document.getElementById('edit-codex-proxy').value.trim();
-    const headers = this.collectHeaderInputs('edit-codex-headers-wrapper');
-    const excludedModels = this.collectExcludedModels('edit-codex-excluded-models');
-
-    if (!apiKey) {
-        this.showNotification(i18n.t('notification.field_required'), 'error');
-        return;
-    }
-    if (!baseUrl) {
-        this.showNotification(i18n.t('notification.codex_base_url_required'), 'error');
-        return;
-    }
-
-    try {
-        const listResponse = await this.makeRequest('/codex-api-key');
-        const currentList = this.normalizeArrayResponse(listResponse, 'codex-api-key');
-
-        if (!Array.isArray(currentList) || index < 0 || index >= currentList.length) {
-            throw new Error('Invalid codex configuration index');
-        }
-
-        const original = currentList[index] ? { ...currentList[index] } : {};
-        const newConfig = this.buildCodexConfig(apiKey, baseUrl, proxyUrl, original, headers, excludedModels);
-
-        await this.makeRequest('/codex-api-key', {
-            method: 'PATCH',
-            body: JSON.stringify({ index, value: newConfig })
-        });
-
-        this.clearCache(); // 清除缓存
-        this.closeModal();
-        this.loadCodexKeys();
-        this.showNotification(i18n.t('notification.codex_config_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-    }
-}
-
-export async function deleteCodexKey(apiKey) {
-    if (!confirm(i18n.t('ai_providers.codex_delete_confirm'))) return;
-
-    try {
-        await this.makeRequest(`/codex-api-key?api-key=${encodeURIComponent(apiKey)}`, { method: 'DELETE' });
-        this.clearCache(); // 清除缓存
-        this.loadCodexKeys();
-        this.showNotification(i18n.t('notification.codex_config_deleted'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-    }
-}
-
-// Claude providers
-export async function loadClaudeKeys() {
-    try {
-        const config = await this.getConfig();
-        const keys = Array.isArray(config['claude-api-key']) ? config['claude-api-key'] : [];
-        await this.renderClaudeKeys(keys);
-    } catch (error) {
-        console.error('加载Claude密钥失败:', error);
-    }
-}
-
-export async function renderClaudeKeys(keys, keyStats = null) {
-    const container = document.getElementById('claude-keys-list');
-    if (!container) {
-        return;
-    }
-    const list = Array.isArray(keys) ? keys : [];
-
-    if (list.length === 0) {
-        container.innerHTML = `
-                <div class="empty-state">
-                    <i class="fas fa-brain"></i>
-                    <h3>${i18n.t('ai_providers.claude_empty_title')}</h3>
-                    <p>${i18n.t('ai_providers.claude_empty_desc')}</p>
-                </div>
-            `;
-        return;
-    }
-
-    // 使用传入的keyStats，如果没有则获取一次
-    if (!keyStats) {
-        keyStats = await this.getKeyStats();
-    }
-    const statsBySource = getStatsBySource(keyStats);
-
-    container.innerHTML = list.map((config, index) => {
-        const rawKey = config['api-key'] || '';
-        const masked = this.maskApiKey(rawKey || '');
-        const maskedDisplay = this.escapeHtml(masked);
-        const usageStats = (rawKey && (statsBySource[rawKey] || statsBySource[masked])) || { success: 0, failure: 0 };
-        const deleteArg = JSON.stringify(rawKey).replace(/"/g, '&quot;');
-        const models = Array.isArray(config.models) ? config.models : [];
-        const modelsCountHtml = models.length
-            ? `<div class="item-subtitle">${i18n.t('ai_providers.claude_models_count')}: ${models.length}</div>`
-            : '';
-        const modelsBadgesHtml = this.renderModelBadges(models);
-        return `
-            <div class="provider-item">
-                <div class="item-content">
-                    <div class="item-title">${i18n.t('ai_providers.claude_item_title')} #${index + 1}</div>
-                    <div class="item-subtitle">${i18n.t('common.api_key')}: ${maskedDisplay}</div>
-                    ${config['base-url'] ? `<div class="item-subtitle">${i18n.t('common.base_url')}: ${this.escapeHtml(config['base-url'])}</div>` : ''}
-                    ${config['proxy-url'] ? `<div class="item-subtitle">${i18n.t('common.proxy_url')}: ${this.escapeHtml(config['proxy-url'])}</div>` : ''}
-                    ${this.renderHeaderBadges(config.headers)}
-                    ${modelsCountHtml}
-                    ${modelsBadgesHtml}
-                    <div class="item-stats">
-                        <span class="stat-badge stat-success">
-                            <i class="fas fa-check-circle"></i> ${i18n.t('stats.success')}: ${usageStats.success}
-                        </span>
-                        <span class="stat-badge stat-failure">
-                            <i class="fas fa-times-circle"></i> ${i18n.t('stats.failure')}: ${usageStats.failure}
-                        </span>
-                    </div>
-                </div>
-                <div class="item-actions">
-                    <button class="btn btn-secondary" onclick="manager.editClaudeKey(${index}, ${JSON.stringify(config).replace(/\"/g, '&quot;')})">
-                        <i class="fas fa-edit"></i>
-                    </button>
-                    <button class="btn btn-danger" onclick="manager.deleteClaudeKey(${deleteArg})">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-export function showAddClaudeKeyModal() {
-    const modal = document.getElementById('modal');
-    const modalBody = document.getElementById('modal-body');
-
-    modalBody.innerHTML = `
-            <h3>${i18n.t('ai_providers.claude_add_modal_title')}</h3>
-            <div class="form-group">
-                <label for="new-claude-key">${i18n.t('ai_providers.claude_add_modal_key_label')}</label>
-                <input type="text" id="new-claude-key" placeholder="${i18n.t('ai_providers.claude_add_modal_key_placeholder')}">
-            </div>
-            <div class="form-group">
-                <label for="new-claude-url">${i18n.t('ai_providers.claude_add_modal_url_label')}</label>
-                <input type="text" id="new-claude-url" placeholder="${i18n.t('ai_providers.claude_add_modal_url_placeholder')}">
-            </div>
-            <div class="form-group">
-                <label for="new-claude-proxy">${i18n.t('ai_providers.claude_add_modal_proxy_label')}</label>
-                <input type="text" id="new-claude-proxy" placeholder="${i18n.t('ai_providers.claude_add_modal_proxy_placeholder')}">
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('common.custom_headers_label')}</label>
-                <p class="form-hint">${i18n.t('common.custom_headers_hint')}</p>
-                <div id="new-claude-headers-wrapper" class="header-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addHeaderField('new-claude-headers-wrapper')">${i18n.t('common.custom_headers_add')}</button>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('ai_providers.claude_models_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.claude_models_hint')}</p>
-                <div id="new-claude-models-wrapper" class="model-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addModelField('new-claude-models-wrapper')">${i18n.t('ai_providers.claude_models_add_btn')}</button>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.addClaudeKey()">${i18n.t('common.add')}</button>
-            </div>
-        `;
-
-    modal.style.display = 'block';
-    this.populateHeaderFields('new-claude-headers-wrapper');
-    this.populateModelFields('new-claude-models-wrapper');
-}
-
-export async function addClaudeKey() {
-    const apiKey = document.getElementById('new-claude-key').value.trim();
-    const baseUrl = document.getElementById('new-claude-url').value.trim();
-    const proxyUrl = document.getElementById('new-claude-proxy').value.trim();
-    const headers = this.collectHeaderInputs('new-claude-headers-wrapper');
-    const models = this.collectModelInputs('new-claude-models-wrapper');
-
-    if (!apiKey) {
-        this.showNotification(i18n.t('notification.field_required'), 'error');
-        return;
-    }
-
-    try {
-        const data = await this.makeRequest('/claude-api-key');
-        const currentKeys = data['claude-api-key'] || [];
-
-        const newConfig = { 'api-key': apiKey };
-        if (baseUrl) {
-            newConfig['base-url'] = baseUrl;
-        }
-        if (proxyUrl) {
-            newConfig['proxy-url'] = proxyUrl;
-        }
-        this.applyHeadersToConfig(newConfig, headers);
-        if (models.length) {
-            newConfig.models = models;
-        }
-
-        currentKeys.push(newConfig);
-
-        await this.makeRequest('/claude-api-key', {
-            method: 'PUT',
-            body: JSON.stringify(currentKeys)
-        });
-
-        this.clearCache(); // 清除缓存
-        this.closeModal();
-        this.loadClaudeKeys();
-        this.showNotification(i18n.t('notification.claude_config_added'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.add_failed')}: ${error.message}`, 'error');
-    }
-}
-
-export function editClaudeKey(index, config) {
-    const modal = document.getElementById('modal');
-    const modalBody = document.getElementById('modal-body');
-
-    modalBody.innerHTML = `
-            <h3>${i18n.t('ai_providers.claude_edit_modal_title')}</h3>
-            <div class="form-group">
-                <label for="edit-claude-key">${i18n.t('ai_providers.claude_edit_modal_key_label')}</label>
-                <input type="text" id="edit-claude-key" value="${config['api-key']}">
-            </div>
-            <div class="form-group">
-                <label for="edit-claude-url">${i18n.t('ai_providers.claude_edit_modal_url_label')}</label>
-                <input type="text" id="edit-claude-url" value="${config['base-url'] || ''}">
-            </div>
-            <div class="form-group">
-                <label for="edit-claude-proxy">${i18n.t('ai_providers.claude_edit_modal_proxy_label')}</label>
-                <input type="text" id="edit-claude-proxy" value="${config['proxy-url'] || ''}">
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('common.custom_headers_label')}</label>
-                <p class="form-hint">${i18n.t('common.custom_headers_hint')}</p>
-                <div id="edit-claude-headers-wrapper" class="header-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addHeaderField('edit-claude-headers-wrapper')">${i18n.t('common.custom_headers_add')}</button>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('ai_providers.claude_models_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.claude_models_hint')}</p>
-                <div id="edit-claude-models-wrapper" class="model-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addModelField('edit-claude-models-wrapper')">${i18n.t('ai_providers.claude_models_add_btn')}</button>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.updateClaudeKey(${index})">${i18n.t('common.update')}</button>
-            </div>
-        `;
-
-    modal.style.display = 'block';
-    this.populateHeaderFields('edit-claude-headers-wrapper', config.headers || null);
-    this.populateModelFields('edit-claude-models-wrapper', Array.isArray(config.models) ? config.models : []);
-}
-
-export async function updateClaudeKey(index) {
-    const apiKey = document.getElementById('edit-claude-key').value.trim();
-    const baseUrl = document.getElementById('edit-claude-url').value.trim();
-    const proxyUrl = document.getElementById('edit-claude-proxy').value.trim();
-    const headers = this.collectHeaderInputs('edit-claude-headers-wrapper');
-    const models = this.collectModelInputs('edit-claude-models-wrapper');
-
-    if (!apiKey) {
-        this.showNotification(i18n.t('notification.field_required'), 'error');
-        return;
-    }
-
-    try {
-        const newConfig = { 'api-key': apiKey };
-        if (baseUrl) {
-            newConfig['base-url'] = baseUrl;
-        }
-        if (proxyUrl) {
-            newConfig['proxy-url'] = proxyUrl;
-        }
-        this.applyHeadersToConfig(newConfig, headers);
-        if (models.length) {
-            newConfig.models = models;
-        }
-
-        await this.makeRequest('/claude-api-key', {
-            method: 'PATCH',
-            body: JSON.stringify({ index, value: newConfig })
-        });
-
-        this.clearCache(); // 清除缓存
-        this.closeModal();
-        this.loadClaudeKeys();
-        this.showNotification(i18n.t('notification.claude_config_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-    }
-}
-
-export async function deleteClaudeKey(apiKey) {
-    if (!confirm(i18n.t('ai_providers.claude_delete_confirm'))) return;
-
-    try {
-        await this.makeRequest(`/claude-api-key?api-key=${encodeURIComponent(apiKey)}`, { method: 'DELETE' });
-        this.clearCache(); // 清除缓存
-        this.loadClaudeKeys();
-        this.showNotification(i18n.t('notification.claude_config_deleted'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-    }
-}
-
-// OpenAI compatible providers
-export async function loadOpenAIProviders() {
-    try {
-        const config = await this.getConfig();
-        const providers = Array.isArray(config['openai-compatibility']) ? config['openai-compatibility'] : [];
-        await this.renderOpenAIProviders(providers);
-    } catch (error) {
-        console.error('加载OpenAI提供商失败:', error);
-    }
-}
-
-export async function renderOpenAIProviders(providers, keyStats = null) {
-    const container = document.getElementById('openai-providers-list');
-    if (!container) {
-        return;
-    }
-    const list = Array.isArray(providers) ? providers : [];
-
-    if (list.length === 0) {
-        container.innerHTML = `
-                <div class="empty-state">
-                    <i class="fas fa-plug"></i>
-                    <h3>${i18n.t('ai_providers.openai_empty_title')}</h3>
-                    <p>${i18n.t('ai_providers.openai_empty_desc')}</p>
-                </div>
-            `;
-        // 重置样式
-        container.style.maxHeight = '';
-        container.style.overflowY = '';
-        return;
-    }
-
-    // 根据提供商数量设置滚动条
-    if (list.length > 5) {
-        container.style.maxHeight = '400px';
-        container.style.overflowY = 'auto';
-    } else {
-        container.style.maxHeight = '';
-        container.style.overflowY = '';
-    }
-
-    // 使用传入的keyStats，如果没有则获取一次
-    if (!keyStats) {
-        keyStats = await this.getKeyStats();
-    }
-    const statsBySource = getStatsBySource(keyStats);
-
-    container.innerHTML = list.map((provider, index) => {
-        const item = typeof provider === 'object' && provider !== null ? provider : {};
-
-        // 处理两种API密钥格式：新的 api-key-entries 和旧的 api-keys
-        let apiKeyEntries = [];
-        if (Array.isArray(item['api-key-entries'])) {
-            // 新格式：{api-key: "...", proxy-url: "..."}
-            apiKeyEntries = item['api-key-entries'];
-        } else if (Array.isArray(item['api-keys'])) {
-            // 旧格式：简单的字符串数组
-            apiKeyEntries = item['api-keys'].map(key => ({ 'api-key': key }));
-        }
-
-        const models = Array.isArray(item.models) ? item.models : [];
-        const name = item.name || '';
-        const baseUrl = item['base-url'] || '';
-
-        let totalSuccess = 0;
-        let totalFailure = 0;
-
-        apiKeyEntries.forEach(entry => {
-            const key = entry && entry['api-key'] ? entry['api-key'] : '';
-            if (!key) return;
-            const masked = this.maskApiKey(key);
-            const usageStats = statsBySource[key] || statsBySource[masked] || { success: 0, failure: 0 };
-            totalSuccess += usageStats.success;
-            totalFailure += usageStats.failure;
-        });
-
-        const deleteArg = JSON.stringify(name).replace(/"/g, '&quot;');
-        return `
-            <div class="provider-item">
-                <div class="item-content">
-                    <div class="item-title">${this.escapeHtml(name)}</div>
-                    <div class="item-subtitle provider-base-url" title="${this.escapeHtml(baseUrl)}">${i18n.t('common.base_url')}: ${this.escapeHtml(baseUrl)}</div>
-                    ${this.renderHeaderBadges(item.headers)}
-                    <div class="item-subtitle">${i18n.t('ai_providers.openai_keys_count')}: ${apiKeyEntries.length}</div>
-                    <div class="item-subtitle">${i18n.t('ai_providers.openai_models_count')}: ${models.length}</div>
-                    ${this.renderModelBadges(models)}
-                    <div class="item-stats">
-                        <span class="stat-badge stat-success">
-                            <i class="fas fa-check-circle"></i> ${i18n.t('stats.success')}: ${totalSuccess}
-                        </span>
-                        <span class="stat-badge stat-failure">
-                            <i class="fas fa-times-circle"></i> ${i18n.t('stats.failure')}: ${totalFailure}
-                        </span>
-                    </div>
-                </div>
-                <div class="item-actions">
-                    <button class="btn btn-secondary" onclick="manager.editOpenAIProvider(${index}, ${JSON.stringify(item).replace(/\"/g, '&quot;')})">
-                        <i class="fas fa-edit"></i>
-                    </button>
-                    <button class="btn btn-danger" onclick="manager.deleteOpenAIProvider(${deleteArg})">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-const getOpenAIContext = (mode = 'new') => {
-    const isEdit = mode === 'edit';
-    return {
-        mode: isEdit ? 'edit' : 'new',
-        baseUrlInputId: isEdit ? 'edit-provider-url' : 'new-provider-url',
-        apiKeyWrapperId: isEdit ? 'edit-openai-keys-wrapper' : 'new-openai-keys-wrapper',
-        headerWrapperId: isEdit ? 'edit-openai-headers-wrapper' : 'new-openai-headers-wrapper',
-        modelWrapperId: isEdit ? 'edit-provider-models-wrapper' : 'new-provider-models-wrapper'
-    };
-};
-
-function ensureOpenAIModelDiscoveryCard(manager) {
-    let overlay = document.getElementById('openai-model-discovery');
-    if (overlay) {
-        return overlay;
-    }
-
-    overlay = document.createElement('div');
-    overlay.id = 'openai-model-discovery';
-    overlay.className = 'model-discovery-overlay';
-    overlay.innerHTML = `
-        <div class="model-discovery-card">
-            <div class="model-discovery-header">
-                <div class="model-discovery-title">
-                    <h3>${i18n.t('ai_providers.openai_models_fetch_title')}</h3>
-                    <p class="form-hint">${i18n.t('ai_providers.openai_models_fetch_hint')}</p>
-                </div>
-                <button type="button" class="btn btn-secondary" id="openai-model-discovery-back">${i18n.t('ai_providers.openai_models_fetch_back')}</button>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('ai_providers.openai_models_fetch_url_label')}</label>
-                <div class="input-group">
-                    <input type="text" id="openai-model-discovery-url" readonly>
-                    <button type="button" class="btn btn-secondary" id="openai-model-discovery-refresh">${i18n.t('ai_providers.openai_models_fetch_refresh')}</button>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="openai-model-discovery-search">${i18n.t('ai_providers.openai_models_search_label')}</label>
-                <input type="text" id="openai-model-discovery-search" placeholder="${i18n.t('ai_providers.openai_models_search_placeholder')}">
-            </div>
-            <div id="openai-model-discovery-status" class="model-discovery-status"></div>
-            <div id="openai-model-discovery-list" class="model-discovery-list"></div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" id="openai-model-discovery-cancel">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" id="openai-model-discovery-apply">${i18n.t('ai_providers.openai_models_fetch_apply')}</button>
-            </div>
-        </div>
-    `;
-
-    document.body.appendChild(overlay);
-
-    const bind = (id, handler) => {
-        const el = document.getElementById(id);
-        if (el) {
-            el.addEventListener('click', handler);
-        }
-    };
-
-    bind('openai-model-discovery-back', () => manager.closeOpenAIModelDiscovery());
-    bind('openai-model-discovery-cancel', () => manager.closeOpenAIModelDiscovery());
-    bind('openai-model-discovery-refresh', () => manager.refreshOpenAIModelDiscovery());
-    bind('openai-model-discovery-apply', () => manager.applyOpenAIModelDiscoverySelection());
-    const searchInput = document.getElementById('openai-model-discovery-search');
-    if (searchInput) {
-        searchInput.addEventListener('input', (event) => {
-            const query = event?.target?.value || '';
-            manager.setOpenAIModelDiscoverySearch(query);
-        });
-    }
-
-    return overlay;
-}
-
-export function setOpenAIModelDiscoveryStatus(message = '', type = 'info') {
-    const status = document.getElementById('openai-model-discovery-status');
-    if (!status) return;
-    status.textContent = message;
-    status.className = `model-discovery-status ${type}`;
-}
-
-export function setOpenAIModelDiscoverySearch(query = '') {
-    if (!this.openAIModelDiscoveryContext) return;
-    const normalized = (query || '').trim();
-    this.openAIModelDiscoveryContext.modelSearchQuery = normalized;
-    const models = this.openAIModelDiscoveryContext.discoveredModels || [];
-    this.renderOpenAIModelDiscoveryList(models);
-}
-
-export function renderOpenAIModelDiscoveryList(models = []) {
-    const list = document.getElementById('openai-model-discovery-list');
-    if (!list) return;
-
-    const context = this.openAIModelDiscoveryContext || {};
-    const filter = (context.modelSearchQuery || '').trim().toLowerCase();
-    const filtered = models
-        .map((model, index) => ({ model, index }))
-        .filter(({ model }) => {
-            if (!filter) return true;
-            const name = (model?.name || '').toLowerCase();
-            const alias = (model?.alias || '').toLowerCase();
-            const desc = (model?.description || '').toLowerCase();
-            return name.includes(filter) || alias.includes(filter) || desc.includes(filter);
-        });
-
-    if (!models.length) {
-        list.innerHTML = `
-            <div class="model-discovery-empty">
-                <i class="fas fa-box-open"></i>
-                <span>${i18n.t('ai_providers.openai_models_fetch_empty')}</span>
-            </div>
-        `;
-        return;
-    }
-
-    if (!filtered.length) {
-        list.innerHTML = `
-            <div class="model-discovery-empty">
-                <i class="fas fa-search"></i>
-                <span>${i18n.t('ai_providers.openai_models_search_empty')}</span>
-            </div>
-        `;
-        return;
-    }
-
-    list.innerHTML = filtered.map(({ model, index }) => {
-        const name = this.escapeHtml(model?.name || '');
-        const alias = model?.alias ? `<span class="model-discovery-alias">${this.escapeHtml(model.alias)}</span>` : '';
-        const desc = model?.description ? `<div class="model-discovery-desc">${this.escapeHtml(model.description)}</div>` : '';
-        return `
-            <label class="model-discovery-row">
-                <input type="checkbox" class="model-discovery-checkbox" data-model-index="${index}">
-                <div class="model-discovery-meta">
-                    <div class="model-discovery-name">${name} ${alias}</div>
-                    ${desc}
-                </div>
-            </label>
-        `;
-    }).join('');
-}
-
-export function openOpenAIModelDiscovery(mode = 'new') {
-    const context = getOpenAIContext(mode);
-    const baseInput = document.getElementById(context.baseUrlInputId);
-    const baseUrl = baseInput ? baseInput.value.trim() : '';
-
-    if (!baseUrl) {
-        this.showNotification(i18n.t('ai_providers.openai_models_fetch_invalid_url'), 'error');
-        return;
-    }
-
-    const endpoint = buildModelEndpoint(baseUrl);
-    if (!endpoint) {
-        this.showNotification(i18n.t('ai_providers.openai_models_fetch_invalid_url'), 'error');
-        return;
-    }
-
-    const apiKeyEntries = this.collectApiKeyEntryInputs(context.apiKeyWrapperId);
-    const firstKey = Array.isArray(apiKeyEntries) ? apiKeyEntries.find(entry => entry && entry['api-key']) : null;
-    const headers = this.collectHeaderInputs(context.headerWrapperId) || {};
-
-    if (firstKey && !headers.Authorization && !headers.authorization) {
-        headers.Authorization = `Bearer ${firstKey['api-key']}`;
-    }
-
-    ensureOpenAIModelDiscoveryCard(this).classList.add('active');
-    this.openAIModelDiscoveryContext = {
-        ...context,
-        endpoint,
-        headers,
-        discoveredModels: [],
-        modelSearchQuery: ''
-    };
-
-    const urlInput = document.getElementById('openai-model-discovery-url');
-    if (urlInput) {
-        urlInput.value = endpoint;
-    }
-    const searchInput = document.getElementById('openai-model-discovery-search');
-    if (searchInput) {
-        searchInput.value = '';
-    }
-
-    this.renderOpenAIModelDiscoveryList([]);
-    this.setOpenAIModelDiscoveryStatus(i18n.t('ai_providers.openai_models_fetch_loading'), 'info');
-    this.refreshOpenAIModelDiscovery();
-}
-
-export async function refreshOpenAIModelDiscovery() {
-    const context = this.openAIModelDiscoveryContext;
-    if (!context || !context.endpoint) {
-        return;
-    }
-
-    this.setOpenAIModelDiscoveryStatus(i18n.t('ai_providers.openai_models_fetch_loading'), 'info');
-    const list = document.getElementById('openai-model-discovery-list');
-    if (list) {
-        list.innerHTML = '<div class="model-discovery-empty"><i class="fas fa-spinner fa-spin"></i></div>';
-    }
-
-    try {
-        const response = await fetch(context.endpoint, {
-            headers: context.headers || {}
-        });
-
-        if (!response.ok) {
-            throw new Error(`${response.status} ${response.statusText}`);
-        }
-
-        let data;
-        try {
-            data = await response.json();
-        } catch (err) {
-            const text = await response.text();
-            throw new Error(text || err.message || 'Invalid JSON');
-        }
-
-        const models = normalizeModelList(data);
-        context.discoveredModels = models;
-
-        this.renderOpenAIModelDiscoveryList(models);
-        if (!models.length) {
-            this.setOpenAIModelDiscoveryStatus(i18n.t('ai_providers.openai_models_fetch_empty'), 'warning');
-        } else {
-            this.setOpenAIModelDiscoveryStatus('', 'info');
-        }
-    } catch (error) {
-        context.discoveredModels = [];
-        this.renderOpenAIModelDiscoveryList([]);
-        this.setOpenAIModelDiscoveryStatus(`${i18n.t('ai_providers.openai_models_fetch_error')}: ${error.message}`, 'error');
-    }
-}
-
-export function applyOpenAIModelDiscoverySelection() {
-    const context = this.openAIModelDiscoveryContext;
-    if (!context || !Array.isArray(context.discoveredModels) || !context.discoveredModels.length) {
-        this.closeOpenAIModelDiscovery();
-        return;
-    }
-
-    const list = document.getElementById('openai-model-discovery-list');
-    if (!list) {
-        this.closeOpenAIModelDiscovery();
-        return;
-    }
-
-    const selectedIndices = Array.from(list.querySelectorAll('.model-discovery-checkbox:checked'))
-        .map(input => Number.parseInt(input.getAttribute('data-model-index') || '-1', 10))
-        .filter(index => Number.isFinite(index) && index >= 0 && index < context.discoveredModels.length);
-
-    const selectedModels = selectedIndices.map(index => context.discoveredModels[index]);
-    if (!selectedModels.length) {
-        this.closeOpenAIModelDiscovery();
-        return;
-    }
-
-    const existing = this.collectModelInputs(context.modelWrapperId);
-    const mergedMap = new Map();
-    existing.forEach(model => {
-        if (model && model.name) {
-            mergedMap.set(model.name, { ...model });
-        }
-    });
-
-    let addedCount = 0;
-    selectedModels.forEach(model => {
-        const name = model && model.name;
-        if (!name) return;
-        if (!mergedMap.has(name)) {
-            mergedMap.set(name, { name, ...(model.alias ? { alias: model.alias } : {}) });
-            addedCount++;
-        }
-    });
-
-    this.populateModelFields(context.modelWrapperId, Array.from(mergedMap.values()));
-    if (context.mode === 'edit' && typeof this.populateOpenAITestModelOptions === 'function') {
-        this.populateOpenAITestModelOptions(Array.from(mergedMap.values()), { preserveInput: true });
-    }
-    this.closeOpenAIModelDiscovery();
-
-    if (addedCount > 0) {
-        const template = i18n.t('ai_providers.openai_models_fetch_added');
-        const message = template.replace('{count}', addedCount);
-        this.showNotification(message, 'success');
-    }
-}
-
-export function closeOpenAIModelDiscovery() {
-    const overlay = document.getElementById('openai-model-discovery');
-    if (overlay) {
-        overlay.classList.remove('active');
-    }
-    this.openAIModelDiscoveryContext = null;
-}
-
-export function populateOpenAITestModelOptions(models = [], { preserveInput = true } = {}) {
-    const select = document.getElementById('openai-test-model-select');
-    const input = document.getElementById('openai-test-model-input');
-    if (!select) return;
-
-    const names = [];
-    const seen = new Set();
-    (Array.isArray(models) ? models : []).forEach(model => {
-        const name = model?.name ? String(model.name).trim() : '';
-        if (!name || seen.has(name)) return;
-        seen.add(name);
-        names.push(name);
-    });
-
-    if (!names.length) {
-        select.disabled = true;
-        select.innerHTML = `<option value="">${i18n.t('ai_providers.openai_test_select_empty')}</option>`;
-        if (input && !preserveInput) {
-            input.value = '';
-        }
-        return;
-    }
-
-    select.disabled = false;
-    const placeholder = `<option value="">${i18n.t('ai_providers.openai_test_select_placeholder')}</option>`;
-    const options = names.map(name => `<option value="${this.escapeHtml(name)}">${this.escapeHtml(name)}</option>`).join('');
-    select.innerHTML = `${placeholder}${options}`;
-
-    if (input) {
-        if (!preserveInput || !input.value) {
-            const firstName = names[0];
-            if (firstName) {
-                input.value = firstName;
-                select.value = firstName;
-                return;
-            }
-        }
-
-        const current = input.value.trim();
-        if (current && names.includes(current)) {
-            select.value = current;
-        } else {
-            select.value = '';
-        }
-    }
-}
-
-export function setOpenAITestStatus(message = '', type = 'info') {
-    const statusEl = document.getElementById('openai-test-status');
-    if (!statusEl) return;
-    statusEl.textContent = message || '';
-    statusEl.className = `openai-test-status ${type || ''}`.trim();
-}
-
-const setOpenAITestButtonState = (state = 'idle') => {
-    const button = document.getElementById('openai-test-button');
-    if (!button) return;
-    button.disabled = state === 'loading';
-    button.classList.remove('openai-test-btn-success', 'openai-test-btn-error');
-
-    switch (state) {
-        case 'loading':
-            button.innerHTML = `<i class="fas fa-spinner fa-spin"></i>`;
-            break;
-        case 'success':
-            button.classList.add('openai-test-btn-success');
-            button.innerHTML = `<i class="fas fa-check"></i>`;
-            break;
-        case 'error':
-            button.classList.add('openai-test-btn-error');
-            button.innerHTML = `<i class="fas fa-times"></i>`;
-            break;
-        default:
-            button.innerHTML = `<i class="fas fa-stethoscope"></i> ${i18n.t('ai_providers.openai_test_action')}`;
-            break;
-    }
-};
-
-export async function testOpenAIProviderConnection() {
-    const baseUrlInput = document.getElementById('edit-provider-url');
-    const baseUrl = baseUrlInput ? baseUrlInput.value.trim() : '';
-    if (!baseUrl) {
-        const message = i18n.t('notification.openai_test_url_required');
-        this.setOpenAITestStatus(message, 'error');
-        this.showNotification(message, 'error');
-        return;
-    }
-
-    const endpoint = buildChatCompletionsEndpoint(baseUrl);
-    if (!endpoint) {
-        const message = i18n.t('notification.openai_test_url_required');
-        this.setOpenAITestStatus(message, 'error');
-        this.showNotification(message, 'error');
-        return;
-    }
-
-    const apiKeyEntries = this.collectApiKeyEntryInputs('edit-openai-keys-wrapper');
-    const firstKeyEntry = Array.isArray(apiKeyEntries) ? apiKeyEntries.find(entry => entry && entry['api-key']) : null;
-    if (!firstKeyEntry) {
-        const message = i18n.t('notification.openai_test_key_required');
-        this.setOpenAITestStatus(message, 'error');
-        this.showNotification(message, 'error');
-        return;
-    }
-
-    const models = this.collectModelInputs('edit-provider-models-wrapper');
-    this.populateOpenAITestModelOptions(models);
-
-    const modelInput = document.getElementById('openai-test-model-input');
-    let modelName = modelInput ? modelInput.value.trim() : '';
-    if (!modelName) {
-        const firstModel = Array.isArray(models) ? models.find(model => model && model.name) : null;
-        if (firstModel && firstModel.name) {
-            modelName = firstModel.name;
-            if (modelInput) {
-                modelInput.value = firstModel.name;
-            }
-        }
-    }
-
-    if (!modelName) {
-        const message = i18n.t('notification.openai_test_model_required');
-        this.setOpenAITestStatus(message, 'error');
-        this.showNotification(message, 'error');
-        return;
-    }
-
-    const customHeaders = this.collectHeaderInputs('edit-openai-headers-wrapper') || {};
-    const headers = {
-        'Content-Type': 'application/json',
-        ...customHeaders
-    };
-    if (!headers.Authorization && !headers.authorization) {
-        headers.Authorization = `Bearer ${firstKeyEntry['api-key']}`;
-    }
-
-    this.setOpenAITestStatus('', 'info');
-    setOpenAITestButtonState('loading');
-
-    try {
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers,
-            body: JSON.stringify({
-                model: modelName,
-                messages: [{ role: 'user', content: 'Hi' }],
-                stream: false,
-                max_tokens: 5
-            })
-        });
-
-        const rawText = await response.text();
-
-        if (!response.ok) {
-            let errorMessage = `${response.status} ${response.statusText}`;
-            try {
-                const parsed = rawText ? JSON.parse(rawText) : null;
-                errorMessage = parsed?.error?.message || parsed?.message || errorMessage;
-            } catch (error) {
-                if (rawText) {
-                    errorMessage = rawText;
-                }
-            }
-            throw new Error(errorMessage);
-        }
-
-        this.setOpenAITestStatus('', 'info');
-        setOpenAITestButtonState('success');
-    } catch (error) {
-        this.setOpenAITestStatus(`${i18n.t('ai_providers.openai_test_failed')}: ${error.message}`, 'error');
-        setOpenAITestButtonState('error');
-    }
-}
-
-export function showAddOpenAIProviderModal() {
-    const modal = document.getElementById('modal');
-    const modalBody = document.getElementById('modal-body');
-
-    modalBody.innerHTML = `
-            <h3>${i18n.t('ai_providers.openai_add_modal_title')}</h3>
-            <div class="form-group">
-                <label for="new-provider-name">${i18n.t('ai_providers.openai_add_modal_name_label')}</label>
-                <input type="text" id="new-provider-name" placeholder="${i18n.t('ai_providers.openai_add_modal_name_placeholder')}">
-            </div>
-            <div class="form-group">
-                <label for="new-provider-url">${i18n.t('ai_providers.openai_add_modal_url_label')}</label>
-                <input type="text" id="new-provider-url" placeholder="${i18n.t('ai_providers.openai_add_modal_url_placeholder')}">
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('ai_providers.openai_add_modal_keys_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.openai_keys_hint')}</p>
-                <div id="new-openai-keys-wrapper" class="api-key-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addApiKeyEntryField('new-openai-keys-wrapper')">${i18n.t('ai_providers.openai_keys_add_btn')}</button>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('common.custom_headers_label')}</label>
-                <p class="form-hint">${i18n.t('common.custom_headers_hint')}</p>
-                <div id="new-openai-headers-wrapper" class="header-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addHeaderField('new-openai-headers-wrapper')">${i18n.t('common.custom_headers_add')}</button>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('ai_providers.openai_add_modal_models_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.openai_models_hint')}</p>
-                <div id="new-provider-models-wrapper" class="model-input-list"></div>
-                <div class="model-actions-inline">
-                    <button type="button" class="btn btn-secondary" onclick="manager.addModelField('new-provider-models-wrapper')">${i18n.t('ai_providers.openai_models_add_btn')}</button>
-                    <button type="button" class="btn btn-secondary" onclick="manager.openOpenAIModelDiscovery('new')">
-                        <i class="fas fa-download"></i> ${i18n.t('ai_providers.openai_models_fetch_button')}
-                    </button>
-                </div>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.addOpenAIProvider()">${i18n.t('common.add')}</button>
-            </div>
-        `;
-
-    modal.style.display = 'block';
-    this.populateModelFields('new-provider-models-wrapper', []);
-    this.populateHeaderFields('new-openai-headers-wrapper');
-    this.populateApiKeyEntryFields('new-openai-keys-wrapper');
-}
-
-export async function addOpenAIProvider() {
-    const name = document.getElementById('new-provider-name').value.trim();
-    const baseUrl = document.getElementById('new-provider-url').value.trim();
-    const apiKeyEntries = this.collectApiKeyEntryInputs('new-openai-keys-wrapper');
-    const models = this.collectModelInputs('new-provider-models-wrapper');
-    const headers = this.collectHeaderInputs('new-openai-headers-wrapper');
-
-    if (!this.validateOpenAIProviderInput(name, baseUrl, models)) {
-        return;
-    }
-
-    try {
-        const data = await this.makeRequest('/openai-compatibility');
-        const currentProviders = data['openai-compatibility'] || [];
-
-        const newProvider = {
-            name,
-            'base-url': baseUrl,
-            'api-key-entries': apiKeyEntries,
-            models
-        };
-        this.applyHeadersToConfig(newProvider, headers);
-
-        currentProviders.push(newProvider);
-
-        await this.makeRequest('/openai-compatibility', {
-            method: 'PUT',
-            body: JSON.stringify(currentProviders)
-        });
-
-        this.clearCache(); // 清除缓存
-        this.closeModal();
-        this.loadOpenAIProviders();
-        this.showNotification(i18n.t('notification.openai_provider_added'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.add_failed')}: ${error.message}`, 'error');
-    }
-}
-
-export function editOpenAIProvider(index, provider) {
-    const modal = document.getElementById('modal');
-    const modalBody = document.getElementById('modal-body');
-
-    // 处理两种API密钥格式：新的 api-key-entries 和旧的 api-keys
-    let apiKeyEntries = [];
-    if (Array.isArray(provider?.['api-key-entries'])) {
-        // 新格式：{api-key: "...", proxy-url: "..."}
-        apiKeyEntries = provider['api-key-entries'];
-    } else if (Array.isArray(provider?.['api-keys'])) {
-        // 旧格式：简单的字符串数组
-        apiKeyEntries = provider['api-keys'].map(key => ({ 'api-key': key, 'proxy-url': '' }));
-    }
-
-    const models = Array.isArray(provider?.models) ? provider.models : [];
-
-    modalBody.innerHTML = `
-            <h3>${i18n.t('ai_providers.openai_edit_modal_title')}</h3>
-            <div class="form-group">
-                <label for="edit-provider-name">${i18n.t('ai_providers.openai_edit_modal_name_label')}</label>
-                <input type="text" id="edit-provider-name" value="${provider?.name ? this.escapeHtml(provider.name) : ''}">
-            </div>
-            <div class="form-group">
-                <label for="edit-provider-url">${i18n.t('ai_providers.openai_edit_modal_url_label')}</label>
-                <input type="text" id="edit-provider-url" value="${provider?.['base-url'] ? this.escapeHtml(provider['base-url']) : ''}">
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('ai_providers.openai_edit_modal_keys_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.openai_keys_hint')}</p>
-                <div id="edit-openai-keys-wrapper" class="api-key-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addApiKeyEntryField('edit-openai-keys-wrapper')">${i18n.t('ai_providers.openai_keys_add_btn')}</button>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('common.custom_headers_label')}</label>
-                <p class="form-hint">${i18n.t('common.custom_headers_hint')}</p>
-                <div id="edit-openai-headers-wrapper" class="header-input-list"></div>
-                <button type="button" class="btn btn-secondary" onclick="manager.addHeaderField('edit-openai-headers-wrapper')">${i18n.t('common.custom_headers_add')}</button>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('ai_providers.openai_edit_modal_models_label')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.openai_models_hint')}</p>
-                <div id="edit-provider-models-wrapper" class="model-input-list"></div>
-                <div class="model-actions-inline">
-                    <button type="button" class="btn btn-secondary" onclick="manager.addModelField('edit-provider-models-wrapper')">${i18n.t('ai_providers.openai_models_add_btn')}</button>
-                    <button type="button" class="btn btn-secondary" onclick="manager.openOpenAIModelDiscovery('edit')">
-                        <i class="fas fa-download"></i> ${i18n.t('ai_providers.openai_models_fetch_button')}
-                    </button>
-                </div>
-            </div>
-            <div class="form-group">
-                <label>${i18n.t('ai_providers.openai_test_title')}</label>
-                <p class="form-hint">${i18n.t('ai_providers.openai_test_hint')}</p>
-                <div class="input-group openai-test-group">
-                    <select id="openai-test-model-select" aria-label="${i18n.t('ai_providers.openai_test_model_placeholder')}"></select>
-                    <input type="text" id="openai-test-model-input" placeholder="${i18n.t('ai_providers.openai_test_model_placeholder')}">
-                    <button type="button" class="btn btn-secondary" id="openai-test-button" onclick="manager.testOpenAIProviderConnection()">
-                        <i class="fas fa-stethoscope"></i> ${i18n.t('ai_providers.openai_test_action')}
-                    </button>
-                </div>
-                <div id="openai-test-status" class="openai-test-status"></div>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.updateOpenAIProvider(${index})">${i18n.t('common.update')}</button>
-            </div>
-        `;
-
-    modal.style.display = 'block';
-    this.populateModelFields('edit-provider-models-wrapper', models);
-    this.populateHeaderFields('edit-openai-headers-wrapper', provider?.headers || null);
-    this.populateApiKeyEntryFields('edit-openai-keys-wrapper', apiKeyEntries);
-    this.populateOpenAITestModelOptions(models);
-    this.setOpenAITestStatus('', 'info');
-    setOpenAITestButtonState('idle');
-
-    const modelWrapper = document.getElementById('edit-provider-models-wrapper');
-    if (modelWrapper) {
-        modelWrapper.addEventListener('input', () => {
-            const currentModels = this.collectModelInputs('edit-provider-models-wrapper');
-            this.populateOpenAITestModelOptions(currentModels, { preserveInput: true });
-        });
-    }
-
-    const modelSelect = document.getElementById('openai-test-model-select');
-    if (modelSelect) {
-        modelSelect.addEventListener('change', (event) => {
-            const value = event?.target?.value || '';
-            const input = document.getElementById('openai-test-model-input');
-            if (input && value) {
-                input.value = value;
-            }
-        });
-    }
-}
-
-export async function updateOpenAIProvider(index) {
-    const name = document.getElementById('edit-provider-name').value.trim();
-    const baseUrl = document.getElementById('edit-provider-url').value.trim();
-    const apiKeyEntries = this.collectApiKeyEntryInputs('edit-openai-keys-wrapper');
-    const models = this.collectModelInputs('edit-provider-models-wrapper');
-    const headers = this.collectHeaderInputs('edit-openai-headers-wrapper');
-
-    if (!this.validateOpenAIProviderInput(name, baseUrl, models)) {
-        return;
-    }
-
-    try {
-        const updatedProvider = {
-            name,
-            'base-url': baseUrl,
-            'api-key-entries': apiKeyEntries,
-            models
-        };
-        this.applyHeadersToConfig(updatedProvider, headers);
-
-        await this.makeRequest('/openai-compatibility', {
-            method: 'PATCH',
-            body: JSON.stringify({ index, value: updatedProvider })
-        });
-
-        this.clearCache(); // 清除缓存
-        this.closeModal();
-        this.loadOpenAIProviders();
-        this.showNotification(i18n.t('notification.openai_provider_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-    }
-}
-
-export async function deleteOpenAIProvider(name) {
-    if (!confirm(i18n.t('ai_providers.openai_delete_confirm'))) return;
-
-    try {
-        await this.makeRequest(`/openai-compatibility?name=${encodeURIComponent(name)}`, { method: 'DELETE' });
-        this.clearCache(); // 清除缓存
-        this.loadOpenAIProviders();
-        this.showNotification(i18n.t('notification.openai_provider_deleted'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-    }
-}
-
-export function addModelField(wrapperId, model = {}) {
-    const wrapper = document.getElementById(wrapperId);
-    if (!wrapper) return;
-
-    const row = document.createElement('div');
-    row.className = 'model-input-row';
-    row.innerHTML = `
-            <div class="input-group">
-                <input type="text" class="model-name-input" placeholder="${i18n.t('common.model_name_placeholder')}" value="${model.name ? this.escapeHtml(model.name) : ''}">
-                <input type="text" class="model-alias-input" placeholder="${i18n.t('common.model_alias_placeholder')}" value="${model.alias ? this.escapeHtml(model.alias) : ''}">
-                <button type="button" class="btn btn-small btn-danger model-remove-btn"><i class="fas fa-trash"></i></button>
-            </div>
-        `;
-
-    const removeBtn = row.querySelector('.model-remove-btn');
-    if (removeBtn) {
-        removeBtn.addEventListener('click', () => {
-            wrapper.removeChild(row);
-        });
-    }
-
-    wrapper.appendChild(row);
-}
-
-export function populateModelFields(wrapperId, models = []) {
-    const wrapper = document.getElementById(wrapperId);
-    if (!wrapper) return;
-    wrapper.innerHTML = '';
-
-    if (!models.length) {
-        this.addModelField(wrapperId);
-        return;
-    }
-
-    models.forEach(model => this.addModelField(wrapperId, model));
-}
-
-export function collectModelInputs(wrapperId) {
-    const wrapper = document.getElementById(wrapperId);
-    if (!wrapper) return [];
-
-    const rows = Array.from(wrapper.querySelectorAll('.model-input-row'));
-    const models = [];
-
-    rows.forEach(row => {
-        const nameInput = row.querySelector('.model-name-input');
-        const aliasInput = row.querySelector('.model-alias-input');
-        const name = nameInput ? nameInput.value.trim() : '';
-        const alias = aliasInput ? aliasInput.value.trim() : '';
-
-        if (name) {
-            const model = { name };
-            if (alias) {
-                model.alias = alias;
-            }
-            models.push(model);
-        }
-    });
-
-    return models;
-}
-
-export function renderModelBadges(models) {
-    if (!models || models.length === 0) {
-        return '';
-    }
-
-    return `
-            <div class="provider-models">
-                ${models.map(model => `
-                    <span class="provider-model-tag">
-                        <span class="model-name">${this.escapeHtml(model.name || '')}</span>
-                        ${model.alias ? `<span class="model-alias">${this.escapeHtml(model.alias)}</span>` : ''}
-                    </span>
-                `).join('')}
-            </div>
-        `;
-}
-
-export function validateOpenAIProviderInput(name, baseUrl, models) {
-    if (!name || !baseUrl) {
-        this.showNotification(i18n.t('notification.openai_provider_required'), 'error');
-        return false;
-    }
-
-    const invalidModel = models.find(model => !model.name);
-    if (invalidModel) {
-        this.showNotification(i18n.t('notification.openai_model_name_required'), 'error');
-        return false;
-    }
-
-    return true;
-}
-
-export const aiProvidersModule = {
-    loadGeminiKeys,
-    getGeminiKeysFromConfig,
-    renderGeminiKeys,
-    showAddGeminiKeyModal,
-    addGeminiKey,
-    addGeminiKeyField,
-    populateGeminiKeyFields,
-    collectGeminiKeyFieldInputs,
-    editGeminiKey,
-    updateGeminiKey,
-    deleteGeminiKey,
-    loadCodexKeys,
-    renderCodexKeys,
-    showAddCodexKeyModal,
-    addCodexKey,
-    editCodexKey,
-    updateCodexKey,
-    deleteCodexKey,
-    loadClaudeKeys,
-    renderClaudeKeys,
-    showAddClaudeKeyModal,
-    addClaudeKey,
-    editClaudeKey,
-    updateClaudeKey,
-    deleteClaudeKey,
-    loadOpenAIProviders,
-    renderOpenAIProviders,
-    showAddOpenAIProviderModal,
-    addOpenAIProvider,
-    editOpenAIProvider,
-    updateOpenAIProvider,
-    deleteOpenAIProvider,
-    openOpenAIModelDiscovery,
-    refreshOpenAIModelDiscovery,
-    renderOpenAIModelDiscoveryList,
-    setOpenAIModelDiscoveryStatus,
-    setOpenAIModelDiscoverySearch,
-    applyOpenAIModelDiscoverySelection,
-    closeOpenAIModelDiscovery,
-    populateOpenAITestModelOptions,
-    setOpenAITestStatus,
-    testOpenAIProviderConnection,
-    addModelField,
-    populateModelFields,
-    collectModelInputs,
-    renderModelBadges,
-    renderExcludedModelBadges,
-    collectExcludedModels,
-    setExcludedModelsValue,
-    validateOpenAIProviderInput
-};
diff --git a/src/modules/api-keys.js b/src/modules/api-keys.js
deleted file mode 100644
index 07d5199..0000000
--- a/src/modules/api-keys.js
+++ /dev/null
@@ -1,390 +0,0 @@
-export const apiKeysModule = {
-    // 加载API密钥
-    async loadApiKeys() {
-        try {
-            const data = await this.makeRequest('/api-keys');
-            const apiKeysValue = data?.['api-keys'] || [];
-            const keys = Array.isArray(apiKeysValue) ? apiKeysValue : [];
-            this.renderApiKeys(keys);
-        } catch (error) {
-            console.error('加载API密钥失败:', error);
-        }
-    },
-
-    // 渲染API密钥列表
-    renderApiKeys(keys) {
-        const container = document.getElementById('api-keys-list');
-
-        if (keys.length === 0) {
-            container.innerHTML = `
-                <div class="empty-state">
-                    <i class="fas fa-key"></i>
-                    <h3>${i18n.t('api_keys.empty_title')}</h3>
-                    <p>${i18n.t('api_keys.empty_desc')}</p>
-                </div>
-            `;
-            return;
-        }
-
-        const rows = keys.map((key, index) => {
-            const normalizedKey = typeof key === 'string' ? key : String(key ?? '');
-            const maskedDisplay = this.escapeHtml(this.maskApiKey(normalizedKey));
-            const keyArgument = encodeURIComponent(normalizedKey);
-            return `
-                <div class="key-table-row">
-                    <div class="key-badge">#${index + 1}</div>
-                    <div class="key-table-value">
-                        <div class="item-title">${i18n.t('api_keys.item_title')}</div>
-                        <div class="key-value">${maskedDisplay}</div>
-                    </div>
-                    <div class="item-actions compact">
-                        <button class="btn btn-secondary" data-action="edit-api-key" data-index="${index}" data-key="${keyArgument}">
-                            <i class="fas fa-edit"></i>
-                        </button>
-                        <button class="btn btn-danger" data-action="delete-api-key" data-index="${index}">
-                            <i class="fas fa-trash"></i>
-                        </button>
-                    </div>
-                </div>
-            `;
-        }).join('');
-
-        container.innerHTML = `
-            <div class="key-table">
-                ${rows}
-            </div>
-        `;
-
-        this.bindApiKeyListEvents(container);
-    },
-
-    // 注意: escapeHtml, maskApiKey, normalizeArrayResponse
-    // 现在由 app.js 通过工具模块提供，通过 this 访问
-
-    // 添加一行自定义请求头输入
-    addHeaderField(wrapperId, header = {}) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return;
-
-        const row = document.createElement('div');
-        row.className = 'header-input-row';
-        const keyValue = typeof header.key === 'string' ? header.key : '';
-        const valueValue = typeof header.value === 'string' ? header.value : '';
-        row.innerHTML = `
-            <div class="input-group header-input-group">
-                <input type="text" class="header-key-input" placeholder="${i18n.t('common.custom_headers_key_placeholder')}" value="${this.escapeHtml(keyValue)}">
-                <span class="header-separator">:</span>
-                <input type="text" class="header-value-input" placeholder="${i18n.t('common.custom_headers_value_placeholder')}" value="${this.escapeHtml(valueValue)}">
-                <button type="button" class="btn btn-small btn-danger header-remove-btn"><i class="fas fa-trash"></i></button>
-            </div>
-        `;
-
-        const removeBtn = row.querySelector('.header-remove-btn');
-        if (removeBtn) {
-            removeBtn.addEventListener('click', () => {
-                wrapper.removeChild(row);
-                if (wrapper.childElementCount === 0) {
-                    this.addHeaderField(wrapperId);
-                }
-            });
-        }
-
-        wrapper.appendChild(row);
-    },
-
-    // 填充自定义请求头输入
-    populateHeaderFields(wrapperId, headers = null) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return;
-        wrapper.innerHTML = '';
-
-        const entries = (headers && typeof headers === 'object')
-            ? Object.entries(headers).filter(([key, value]) => key && value !== undefined && value !== null)
-            : [];
-
-        if (!entries.length) {
-            this.addHeaderField(wrapperId);
-            return;
-        }
-
-        entries.forEach(([key, value]) => this.addHeaderField(wrapperId, { key, value: String(value ?? '') }));
-    },
-
-    // 收集自定义请求头输入
-    collectHeaderInputs(wrapperId) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return null;
-
-        const rows = Array.from(wrapper.querySelectorAll('.header-input-row'));
-        const headers = {};
-
-        rows.forEach(row => {
-            const keyInput = row.querySelector('.header-key-input');
-            const valueInput = row.querySelector('.header-value-input');
-            const key = keyInput ? keyInput.value.trim() : '';
-            const value = valueInput ? valueInput.value.trim() : '';
-            if (key && value) {
-                headers[key] = value;
-            }
-        });
-
-        return Object.keys(headers).length ? headers : null;
-    },
-
-    addApiKeyEntryField(wrapperId, entry = {}) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return;
-
-        const row = document.createElement('div');
-        row.className = 'api-key-input-row';
-        const keyValue = typeof entry?.['api-key'] === 'string' ? entry['api-key'] : '';
-        const proxyValue = typeof entry?.['proxy-url'] === 'string' ? entry['proxy-url'] : '';
-        row.innerHTML = `
-            <div class="input-group api-key-input-group">
-                <input type="text" class="api-key-value-input" placeholder="${i18n.t('ai_providers.openai_key_placeholder')}" value="${this.escapeHtml(keyValue)}">
-                <input type="text" class="api-key-proxy-input" placeholder="${i18n.t('ai_providers.openai_proxy_placeholder')}" value="${this.escapeHtml(proxyValue)}">
-                <button type="button" class="btn btn-small btn-danger api-key-remove-btn"><i class="fas fa-trash"></i></button>
-            </div>
-        `;
-
-        const removeBtn = row.querySelector('.api-key-remove-btn');
-        if (removeBtn) {
-            removeBtn.addEventListener('click', () => {
-                wrapper.removeChild(row);
-                if (wrapper.childElementCount === 0) {
-                    this.addApiKeyEntryField(wrapperId);
-                }
-            });
-        }
-
-        wrapper.appendChild(row);
-    },
-
-    populateApiKeyEntryFields(wrapperId, entries = []) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return;
-        wrapper.innerHTML = '';
-
-        if (!Array.isArray(entries) || entries.length === 0) {
-            this.addApiKeyEntryField(wrapperId);
-            return;
-        }
-
-        entries.forEach(entry => this.addApiKeyEntryField(wrapperId, entry));
-    },
-
-    collectApiKeyEntryInputs(wrapperId) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return [];
-
-        const rows = Array.from(wrapper.querySelectorAll('.api-key-input-row'));
-        const entries = [];
-
-        rows.forEach(row => {
-            const keyInput = row.querySelector('.api-key-value-input');
-            const proxyInput = row.querySelector('.api-key-proxy-input');
-            const key = keyInput ? keyInput.value.trim() : '';
-            const proxy = proxyInput ? proxyInput.value.trim() : '';
-            if (key) {
-                entries.push({ 'api-key': key, 'proxy-url': proxy });
-            }
-        });
-
-        return entries;
-    },
-
-    // 规范化并写入请求头
-    applyHeadersToConfig(target, headers) {
-        if (!target) {
-            return;
-        }
-        if (headers && typeof headers === 'object' && Object.keys(headers).length) {
-            target.headers = { ...headers };
-        } else {
-            delete target.headers;
-        }
-    },
-
-    // 渲染请求头徽章
-    renderHeaderBadges(headers) {
-        if (!headers || typeof headers !== 'object') {
-            return '';
-        }
-        const entries = Object.entries(headers).filter(([key, value]) => key && value !== undefined && value !== null && value !== '');
-        if (!entries.length) {
-            return '';
-        }
-
-        const badges = entries.map(([key, value]) => `
-            <span class="header-badge"><strong>${this.escapeHtml(key)}:</strong> ${this.escapeHtml(String(value))}</span>
-        `).join('');
-
-        return `
-            <div class="item-subtitle header-badges-wrapper">
-                <span class="header-badges-label">${i18n.t('common.custom_headers_label')}:</span>
-                <div class="header-badge-list">
-                    ${badges}
-                </div>
-            </div>
-        `;
-    },
-
-    // 构造Codex配置，保持未展示的字段
-    buildCodexConfig(apiKey, baseUrl, proxyUrl, original = {}, headers = null, excludedModels = null) {
-        const result = {
-            ...original,
-            'api-key': apiKey,
-            'base-url': baseUrl || '',
-            'proxy-url': proxyUrl || ''
-        };
-        this.applyHeadersToConfig(result, headers);
-        if (Array.isArray(excludedModels)) {
-            result['excluded-models'] = excludedModels;
-        }
-        return result;
-    },
-
-    // 显示添加API密钥模态框
-    showAddApiKeyModal() {
-        const modal = document.getElementById('modal');
-        const modalBody = document.getElementById('modal-body');
-
-        modalBody.innerHTML = `
-            <h3>${i18n.t('api_keys.add_modal_title')}</h3>
-            <div class="form-group">
-                <label for="new-api-key">${i18n.t('api_keys.add_modal_key_label')}</label>
-                <input type="text" id="new-api-key" placeholder="${i18n.t('api_keys.add_modal_key_placeholder')}">
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.addApiKey()">${i18n.t('common.add')}</button>
-            </div>
-        `;
-
-        modal.style.display = 'block';
-    },
-
-    // 添加API密钥
-    async addApiKey() {
-        const newKey = document.getElementById('new-api-key').value.trim();
-
-        if (!newKey) {
-            this.showNotification(`${i18n.t('notification.please_enter')} ${i18n.t('notification.api_key')}`, 'error');
-            return;
-        }
-
-        try {
-            const data = await this.makeRequest('/api-keys');
-            const currentKeys = data['api-keys'] || [];
-            currentKeys.push(newKey);
-
-            await this.makeRequest('/api-keys', {
-                method: 'PUT',
-                body: JSON.stringify(currentKeys)
-            });
-
-            this.clearCache('api-keys'); // 仅清除 api-keys 段缓存
-            this.closeModal();
-            this.loadApiKeys();
-            this.showNotification(i18n.t('notification.api_key_added'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.add_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    // 编辑API密钥
-    editApiKey(index, currentKey) {
-        const modal = document.getElementById('modal');
-        const modalBody = document.getElementById('modal-body');
-
-        modalBody.innerHTML = `
-            <h3>${i18n.t('api_keys.edit_modal_title')}</h3>
-            <div class="form-group">
-                <label for="edit-api-key">${i18n.t('api_keys.edit_modal_key_label')}</label>
-                <input type="text" id="edit-api-key" value="${currentKey}">
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.updateApiKey(${index})">${i18n.t('common.update')}</button>
-            </div>
-        `;
-
-        modal.style.display = 'block';
-    },
-
-    // 更新API密钥
-    async updateApiKey(index) {
-        const newKey = document.getElementById('edit-api-key').value.trim();
-
-        if (!newKey) {
-            this.showNotification(`${i18n.t('notification.please_enter')} ${i18n.t('notification.api_key')}`, 'error');
-            return;
-        }
-
-        try {
-            await this.makeRequest('/api-keys', {
-                method: 'PATCH',
-                body: JSON.stringify({ index, value: newKey })
-            });
-
-            this.clearCache('api-keys'); // 仅清除 api-keys 段缓存
-            this.closeModal();
-            this.loadApiKeys();
-            this.showNotification(i18n.t('notification.api_key_updated'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    // 删除API密钥
-    async deleteApiKey(index) {
-        if (!confirm(i18n.t('api_keys.delete_confirm'))) return;
-
-        try {
-            await this.makeRequest(`/api-keys?index=${index}`, { method: 'DELETE' });
-            this.clearCache('api-keys'); // 仅清除 api-keys 段缓存
-            this.loadApiKeys();
-            this.showNotification(i18n.t('notification.api_key_deleted'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    bindApiKeyListEvents(container = null) {
-        if (this.apiKeyListEventsBound) {
-            return;
-        }
-        const listContainer = container || document.getElementById('api-keys-list');
-        if (!listContainer) return;
-
-        listContainer.addEventListener('click', (event) => {
-            const button = event.target.closest('[data-action][data-index]');
-            if (!button || !listContainer.contains(button)) return;
-
-            const action = button.dataset.action;
-            const index = Number(button.dataset.index);
-            if (!Number.isFinite(index)) return;
-
-            switch (action) {
-                case 'edit-api-key': {
-                    const rawKey = button.dataset.key || '';
-                    let decodedKey = '';
-                    try {
-                        decodedKey = decodeURIComponent(rawKey);
-                    } catch (e) {
-                        decodedKey = rawKey;
-                    }
-                    this.editApiKey(index, decodedKey);
-                    break;
-                }
-                case 'delete-api-key':
-                    this.deleteApiKey(index);
-                    break;
-                default:
-                    break;
-            }
-        });
-
-        this.apiKeyListEventsBound = true;
-    }
-};
diff --git a/src/modules/auth-files.js b/src/modules/auth-files.js
deleted file mode 100644
index 067cc94..0000000
--- a/src/modules/auth-files.js
+++ /dev/null
@@ -1,1632 +0,0 @@
-export const authFilesModule = {
-    // 加载认证文件
-    async loadAuthFiles(keyStats = null) {
-        try {
-            const data = await this.makeRequest('/auth-files');
-            if (!keyStats) {
-                keyStats = await this.getKeyStats();
-            }
-            await this.renderAuthFiles(data.files || [], keyStats);
-        } catch (error) {
-            console.error('加载认证文件失败:', error);
-        }
-    },
-
-    // 渲染认证文件列表
-    async renderAuthFiles(files, keyStats = null) {
-        const container = document.getElementById('auth-files-list');
-        if (!container) {
-            return;
-        }
-
-        const allFiles = Array.isArray(files) ? files : [];
-        const visibleFiles = allFiles.filter(file => {
-            if (!file) return false;
-            return this.shouldDisplayDisabledGeminiCli(file) || file.disabled !== true;
-        });
-        const stats = keyStats || await this.getKeyStats();
-
-        this.cachedAuthFiles = visibleFiles.map(file => ({ ...file }));
-        this.authFileStatsCache = stats || { bySource: {}, byAuthIndex: {} };
-        this.syncAuthFileControls();
-
-        if (this.cachedAuthFiles.length === 0) {
-            container.innerHTML = `
-                <div class="empty-state">
-                    <i class="fas fa-file-alt"></i>
-                    <h3>${i18n.t('auth_files.empty_title')}</h3>
-                    <p>${i18n.t('auth_files.empty_desc')}</p>
-                </div>
-            `;
-            this.updateFilterButtons(new Set(['all']));
-            this.bindAuthFileFilterEvents();
-            this.applyAuthFileFilterState(false);
-            this.authFilesPagination.currentPage = 1;
-            this.authFilesPagination.totalPages = 1;
-            this.updatePaginationControls(0);
-            return;
-        }
-
-        const existingTypes = new Set(['all']);
-        this.cachedAuthFiles.forEach(file => {
-            if (file.type) {
-                existingTypes.add(file.type);
-            }
-        });
-
-        this.updateFilterButtons(existingTypes);
-        this.bindAuthFileFilterEvents();
-        this.applyAuthFileFilterState(false);
-        this.renderAuthFilesPage(this.authFilesPagination.currentPage);
-        this.bindAuthFileActionEvents();
-    },
-
-    isRuntimeOnlyAuthFile(file) {
-        if (!file) return false;
-        const runtimeValue = file.runtime_only;
-        return runtimeValue === true || runtimeValue === 'true';
-    },
-
-    shouldDisplayDisabledGeminiCli(file) {
-        if (!file) return false;
-        const provider = typeof file.provider === 'string' ? file.provider.toLowerCase() : '';
-        const type = typeof file.type === 'string' ? file.type.toLowerCase() : '';
-        const isGeminiCli = provider === 'gemini-cli' || type === 'gemini-cli';
-        return isGeminiCli && !this.isRuntimeOnlyAuthFile(file);
-    },
-
-    resolveAuthFileStats(file, stats = {}) {
-        const statsBySource = (stats && stats.bySource) || stats || {};
-        const statsByAuthIndex = (stats && stats.byAuthIndex) || {};
-        const rawFileName = typeof file?.name === 'string' ? file.name : '';
-        const defaultStats = { success: 0, failure: 0 };
-        const authIndexKey = this.normalizeAuthIndexValue(file?.auth_index);
-
-        if (authIndexKey && statsByAuthIndex[authIndexKey]) {
-            return statsByAuthIndex[authIndexKey];
-        }
-
-        if (!rawFileName) {
-            return defaultStats;
-        }
-
-        const fromName = statsBySource[rawFileName];
-        if (fromName && (fromName.success > 0 || fromName.failure > 0)) {
-            return fromName;
-        }
-
-        let fileStats = fromName || defaultStats;
-        if (fileStats.success === 0 && fileStats.failure === 0) {
-            const nameWithoutExt = rawFileName.replace(/\.[^/.]+$/, "");
-
-            if (nameWithoutExt && nameWithoutExt !== rawFileName) {
-                const candidateNames = new Set([nameWithoutExt]);
-                const normalizedName = nameWithoutExt.toLowerCase();
-                const typePrefix = typeof file?.type === 'string' ? file.type.trim().toLowerCase() : '';
-                const providerPrefix = typeof file?.provider === 'string' ? file.provider.trim().toLowerCase() : '';
-                const prefixList = [];
-
-                if (typePrefix) {
-                    prefixList.push(`${typePrefix}-`);
-                }
-                if (providerPrefix && providerPrefix !== typePrefix) {
-                    prefixList.push(`${providerPrefix}-`);
-                }
-
-                prefixList.forEach(prefix => {
-                    if (prefix && normalizedName.startsWith(prefix)) {
-                        const trimmed = nameWithoutExt.substring(prefix.length);
-                        if (trimmed) {
-                            candidateNames.add(trimmed);
-                        }
-                    }
-                });
-
-                for (const candidate of candidateNames) {
-                    const candidateStats = statsBySource[candidate];
-                    if (candidateStats && (candidateStats.success > 0 || candidateStats.failure > 0)) {
-                        fileStats = candidateStats;
-                        break;
-                    }
-                }
-            }
-        }
-
-        return fileStats || defaultStats;
-    },
-
-    normalizeAuthIndexValue(value) {
-        if (typeof value === 'number' && Number.isFinite(value)) {
-            return value.toString();
-        }
-        if (typeof value === 'string') {
-            const trimmed = value.trim();
-            return trimmed ? trimmed : null;
-        }
-        return null;
-    },
-
-    buildAuthFileItemHtml(file) {
-        const rawFileName = typeof file?.name === 'string' ? file.name : '';
-        const safeFileName = this.escapeHtml(rawFileName);
-        const stats = this.authFileStatsCache || {};
-        const fileStats = this.resolveAuthFileStats(file, stats);
-        const fileType = file.type || 'unknown';
-        let typeDisplayKey;
-        switch (fileType) {
-            case 'qwen':
-                typeDisplayKey = 'auth_files.type_qwen';
-                break;
-            case 'gemini':
-                typeDisplayKey = 'auth_files.type_gemini';
-                break;
-            case 'gemini-cli':
-                typeDisplayKey = 'auth_files.type_gemini-cli';
-                break;
-            case 'aistudio':
-                typeDisplayKey = 'auth_files.type_aistudio';
-                break;
-            case 'claude':
-                typeDisplayKey = 'auth_files.type_claude';
-                break;
-            case 'codex':
-                typeDisplayKey = 'auth_files.type_codex';
-                break;
-            case 'antigravity':
-                typeDisplayKey = 'auth_files.type_antigravity';
-                break;
-            case 'iflow':
-                typeDisplayKey = 'auth_files.type_iflow';
-                break;
-            case 'vertex':
-                typeDisplayKey = 'auth_files.type_vertex';
-                break;
-            case 'empty':
-                typeDisplayKey = 'auth_files.type_empty';
-                break;
-            default:
-                typeDisplayKey = 'auth_files.type_unknown';
-                break;
-        }
-        const typeBadge = `<span class="file-type-badge ${fileType}">${i18n.t(typeDisplayKey)}</span>`;
-        const isRuntimeOnly = this.isRuntimeOnlyAuthFile(file);
-        const shouldShowMainFlag = this.shouldDisplayDisabledGeminiCli(file);
-        const mainFlagButton = shouldShowMainFlag ? `
-                            <button class="btn-small btn-warning main-flag-btn" title="主" disabled>主</button>` : '';
-        const actionsHtml = isRuntimeOnly ? `
-                        <div class="item-actions">
-                            <span class="virtual-auth-badge">虚拟认证文件</span>
-                        </div>` : `
-                        <div class="item-actions" data-filename="${safeFileName}">
-                            ${mainFlagButton}
-                            <button class="btn-small btn-info" data-action="showDetails" title="详细信息">
-                                <i class="fas fa-info-circle"></i>
-                            </button>
-                            <button class="btn-small btn-primary" data-action="download" title="下载">
-                                <i class="fas fa-download"></i>
-                            </button>
-                            <button class="btn-small btn-danger" data-action="delete" title="删除">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                        </div>`;
-
-        return `
-            <div class="file-item" data-file-type="${fileType}" data-file-name="${safeFileName}" ${isRuntimeOnly ? 'data-runtime-only="true"' : ''}>
-                <div class="item-content">
-                    <div class="item-title">${typeBadge}${safeFileName}</div>
-                    <div class="item-meta">
-                        <span class="item-subtitle">${i18n.t('auth_files.file_modified')}: ${new Date(file.modtime).toLocaleString(i18n.currentLanguage === 'zh-CN' ? 'zh-CN' : 'en-US')}</span>
-                        <span class="item-subtitle">${i18n.t('auth_files.file_size')}: ${this.formatFileSize(file.size)}</span>
-                    </div>
-                    <div class="item-footer">
-                        <div class="item-stats">
-                            <span class="stat-badge stat-success">
-                                <i class="fas fa-check-circle"></i> ${i18n.t('stats.success')}: ${fileStats.success}
-                            </span>
-                            <span class="stat-badge stat-failure">
-                                <i class="fas fa-times-circle"></i> ${i18n.t('stats.failure')}: ${fileStats.failure}
-                            </span>
-                        </div>
-                        ${actionsHtml}
-                    </div>
-                </div>
-            </div>
-        `;
-    },
-
-    getFilteredAuthFiles(filterType = this.currentAuthFileFilter) {
-        const files = Array.isArray(this.cachedAuthFiles) ? this.cachedAuthFiles : [];
-        if (!files.length) {
-            return [];
-        }
-
-        const typeFilter = (filterType || 'all').toLowerCase();
-        const keyword = (this.authFileSearchQuery || '').trim().toLowerCase();
-
-        return files.filter(file => {
-            const name = String(file?.name || '').toLowerCase();
-            const type = String(file?.type || '').toLowerCase();
-            const provider = String(file?.provider || '').toLowerCase();
-
-            if (typeFilter !== 'all') {
-                if (!type) return false;
-                if (type !== typeFilter) {
-                    if (!provider || provider !== typeFilter) {
-                        return false;
-                    }
-                }
-            }
-
-            if (!keyword) return true;
-            return name.includes(keyword) || type.includes(keyword) || provider.includes(keyword);
-        });
-    },
-
-    updateAuthFileSearchQuery(value = '') {
-        const normalized = (value || '').trim();
-        if (this.authFileSearchQuery === normalized) {
-            return;
-        }
-        this.authFileSearchQuery = normalized;
-        this.authFilesPagination.currentPage = 1;
-        this.renderAuthFilesPage(1);
-    },
-
-    updateAuthFilesPageSize(value) {
-        const normalized = this.normalizeAuthFilesPageSize(value);
-        if (this.authFilesPagination?.pageSize === normalized) {
-            this.syncAuthFileControls();
-            return;
-        }
-        this.authFilesPagination.pageSize = normalized;
-        this.authFilesPagination.currentPage = 1;
-        try {
-            localStorage.setItem(this.authFilesPageSizeKey, `${normalized}`);
-        } catch (error) {
-            console.warn('Failed to persist auth files page size:', error);
-        }
-        this.syncAuthFileControls();
-        this.renderAuthFilesPage(1);
-    },
-
-    syncAuthFileControls() {
-        const searchInput = document.getElementById('auth-files-search-input');
-        if (searchInput && searchInput.value !== this.authFileSearchQuery) {
-            searchInput.value = this.authFileSearchQuery;
-        }
-
-        const pageSizeInput = document.getElementById('auth-files-page-size-input');
-        const targetSize = this.authFilesPagination?.pageSize || 9;
-        if (pageSizeInput && parseInt(pageSizeInput.value, 10) !== targetSize) {
-            pageSizeInput.value = targetSize;
-        }
-    },
-
-    bindAuthFilesSearchControl() {
-        const searchInput = document.getElementById('auth-files-search-input');
-        if (!searchInput) return;
-
-        if (searchInput._authFileSearchListener) {
-            searchInput.removeEventListener('input', searchInput._authFileSearchListener);
-        }
-
-        const debounced = this.debounce((value) => {
-            this.updateAuthFileSearchQuery(value);
-        }, 250);
-
-        const listener = (event) => {
-            const value = event?.target?.value ?? '';
-            debounced(value);
-        };
-
-        searchInput._authFileSearchListener = listener;
-        searchInput.addEventListener('input', listener);
-    },
-
-    bindAuthFilesPageSizeControl() {
-        const pageSizeInput = document.getElementById('auth-files-page-size-input');
-        if (!pageSizeInput) return;
-
-        if (pageSizeInput._authFilePageSizeListener) {
-            pageSizeInput.removeEventListener('change', pageSizeInput._authFilePageSizeListener);
-        }
-
-        const listener = (event) => {
-            const value = parseInt(event?.target?.value, 10);
-            if (!Number.isFinite(value)) {
-                return;
-            }
-            this.updateAuthFilesPageSize(value);
-        };
-
-        pageSizeInput._authFilePageSizeListener = listener;
-        pageSizeInput.addEventListener('change', listener);
-
-        if (pageSizeInput._authFilePageSizeBlur) {
-            pageSizeInput.removeEventListener('blur', pageSizeInput._authFilePageSizeBlur);
-        }
-
-        const blurListener = () => {
-            if (!pageSizeInput.value) {
-                this.syncAuthFileControls();
-            }
-        };
-
-        pageSizeInput._authFilePageSizeBlur = blurListener;
-        pageSizeInput.addEventListener('blur', blurListener);
-    },
-
-    renderAuthFilesPage(page = null) {
-        const container = document.getElementById('auth-files-list');
-        if (!container) return;
-
-        const pageSize = this.authFilesPagination?.pageSize || 9;
-        const filteredFiles = this.getFilteredAuthFiles();
-        const totalItems = filteredFiles.length;
-        const hasCachedFiles = Array.isArray(this.cachedAuthFiles) && this.cachedAuthFiles.length > 0;
-        const filterApplied = (this.currentAuthFileFilter && this.currentAuthFileFilter !== 'all');
-        const searchApplied = Boolean((this.authFileSearchQuery || '').trim());
-
-        if (totalItems === 0) {
-            const titleKey = hasCachedFiles && (filterApplied || searchApplied)
-                ? 'auth_files.search_empty_title'
-                : 'auth_files.empty_title';
-            const descKey = hasCachedFiles && (filterApplied || searchApplied)
-                ? 'auth_files.search_empty_desc'
-                : 'auth_files.empty_desc';
-            container.innerHTML = `
-                <div class="empty-state">
-                    <i class="fas fa-file-alt"></i>
-                    <h3>${i18n.t(titleKey)}</h3>
-                    <p>${i18n.t(descKey)}</p>
-                </div>
-            `;
-            this.authFilesPagination.currentPage = 1;
-            this.updatePaginationControls(0);
-            return;
-        }
-
-        const maxPages = Math.max(1, Math.ceil(totalItems / pageSize));
-        let currentPage = page == null ? (this.authFilesPagination.currentPage || 1) : page;
-        if (currentPage > maxPages) {
-            currentPage = maxPages;
-        }
-        if (currentPage < 1) {
-            currentPage = 1;
-        }
-        this.authFilesPagination.currentPage = currentPage;
-        this.authFilesPagination.totalPages = maxPages;
-
-        const startIndex = (currentPage - 1) * pageSize;
-        const pageFiles = filteredFiles.slice(startIndex, startIndex + pageSize);
-
-        container.innerHTML = pageFiles.map(file => this.buildAuthFileItemHtml(file)).join('');
-        this.updatePaginationControls(totalItems);
-        this.bindAuthFileActionEvents();
-    },
-
-    bindAuthFilesPaginationEvents() {
-        const container = document.getElementById('auth-files-pagination');
-        if (!container) return;
-
-        const oldListener = container._paginationListener;
-        if (oldListener) {
-            container.removeEventListener('click', oldListener);
-        }
-
-        const listener = (event) => {
-            const button = event.target.closest('button[data-action]');
-            if (!button || !container.contains(button)) return;
-            event.preventDefault();
-            const action = button.dataset.action;
-            const currentPage = this.authFilesPagination?.currentPage || 1;
-            if (action === 'prev') {
-                this.renderAuthFilesPage(currentPage - 1);
-            } else if (action === 'next') {
-                this.renderAuthFilesPage(currentPage + 1);
-            }
-        };
-
-        container._paginationListener = listener;
-        container.addEventListener('click', listener);
-    },
-
-    updatePaginationControls(totalItems = 0) {
-        const paginationContainer = document.getElementById('auth-files-pagination');
-        const infoEl = document.getElementById('auth-files-pagination-info');
-        if (!paginationContainer || !infoEl) return;
-
-        const prevBtn = paginationContainer.querySelector('button[data-action=\"prev\"]');
-        const nextBtn = paginationContainer.querySelector('button[data-action=\"next\"]');
-        const pageSize = this.authFilesPagination?.pageSize || 9;
-        const totalPages = this.authFilesPagination?.totalPages || 1;
-        const currentPage = Math.min(this.authFilesPagination?.currentPage || 1, totalPages);
-        const shouldShow = totalItems > pageSize;
-
-        paginationContainer.style.display = shouldShow ? 'flex' : 'none';
-
-        const infoParams = totalItems === 0
-            ? { current: 0, total: 0, count: 0 }
-            : { current: currentPage, total: totalPages, count: totalItems };
-        infoEl.textContent = i18n.t('auth_files.pagination_info', infoParams);
-
-        if (prevBtn) {
-            prevBtn.disabled = currentPage <= 1;
-        }
-        if (nextBtn) {
-            nextBtn.disabled = currentPage >= totalPages;
-        }
-    },
-
-    updateFilterButtons(existingTypes) {
-        const filterContainer = document.querySelector('.auth-file-filter');
-        if (!filterContainer) return;
-
-        const predefinedTypes = [
-            { type: 'all', labelKey: 'auth_files.filter_all' },
-            { type: 'qwen', labelKey: 'auth_files.filter_qwen' },
-            { type: 'gemini', labelKey: 'auth_files.filter_gemini' },
-            { type: 'gemini-cli', labelKey: 'auth_files.filter_gemini-cli' },
-            { type: 'aistudio', labelKey: 'auth_files.filter_aistudio' },
-            { type: 'claude', labelKey: 'auth_files.filter_claude' },
-            { type: 'codex', labelKey: 'auth_files.filter_codex' },
-            { type: 'antigravity', labelKey: 'auth_files.filter_antigravity' },
-            { type: 'iflow', labelKey: 'auth_files.filter_iflow' },
-            { type: 'vertex', labelKey: 'auth_files.filter_vertex' },
-            { type: 'empty', labelKey: 'auth_files.filter_empty' }
-        ];
-
-        const existingButtons = filterContainer.querySelectorAll('.filter-btn');
-        const existingButtonTypes = new Set();
-        existingButtons.forEach(btn => {
-            existingButtonTypes.add(btn.dataset.type);
-        });
-
-        existingButtons.forEach(btn => {
-            const btnType = btn.dataset.type;
-            if (existingTypes.has(btnType)) {
-                btn.style.display = 'inline-block';
-                const match = predefinedTypes.find(item => item.type === btnType);
-                if (match) {
-                    btn.textContent = i18n.t(match.labelKey);
-                    btn.setAttribute('data-i18n-text', match.labelKey);
-                }
-            } else {
-                btn.style.display = 'none';
-            }
-        });
-
-        const predefinedTypeSet = new Set(predefinedTypes.map(t => t.type));
-        existingTypes.forEach(type => {
-            if (type !== 'all' && !predefinedTypeSet.has(type) && !existingButtonTypes.has(type)) {
-                const btn = document.createElement('button');
-                btn.className = 'filter-btn';
-                btn.dataset.type = type;
-
-                const match = predefinedTypes.find(item => item.type === type);
-                if (match) {
-                    btn.setAttribute('data-i18n-text', match.labelKey);
-                    btn.textContent = i18n.t(match.labelKey);
-                } else {
-                    const dynamicKey = `auth_files.filter_${type}`;
-                    btn.setAttribute('data-i18n-text', dynamicKey);
-                    btn.textContent = this.generateDynamicTypeLabel(type);
-                }
-
-                const emptyBtn = filterContainer.querySelector('[data-type=\"empty\"]');
-                if (emptyBtn) {
-                    filterContainer.insertBefore(btn, emptyBtn);
-                } else {
-                    filterContainer.appendChild(btn);
-                }
-            }
-        });
-    },
-
-    handleFilterClick(clickedBtn, options = {}) {
-        if (!clickedBtn) return;
-        const { skipRender = false } = options;
-        const filterBtns = document.querySelectorAll('.auth-file-filter .filter-btn');
-
-        filterBtns.forEach(b => b.classList.remove('active'));
-        clickedBtn.classList.add('active');
-
-        const filterType = clickedBtn.dataset.type;
-        this.currentAuthFileFilter = filterType || 'all';
-
-        if (!skipRender) {
-            this.authFilesPagination.currentPage = 1;
-            this.renderAuthFilesPage(1);
-        }
-
-        this.refreshFilterButtonTexts();
-        this.renderOauthExcludedModels();
-    },
-
-    generateDynamicTypeLabel(type) {
-        if (!type) return '';
-        const key = `auth_files.type_${type}`;
-        const translated = i18n.t(key);
-        if (translated && translated !== key) {
-            return translated;
-        }
-        if (type.toLowerCase() === 'iflow') return 'iFlow';
-        return type.charAt(0).toUpperCase() + type.slice(1);
-    },
-
-    bindAuthFileFilterEvents() {
-        const filterContainer = document.querySelector('.auth-file-filter');
-        if (!filterContainer) return;
-
-        if (filterContainer._filterListener) {
-            filterContainer.removeEventListener('click', filterContainer._filterListener);
-        }
-
-        const listener = (event) => {
-            const button = event.target.closest('.filter-btn');
-            if (!button || !filterContainer.contains(button)) return;
-            event.preventDefault();
-            this.handleFilterClick(button);
-        };
-
-        filterContainer._filterListener = listener;
-        filterContainer.addEventListener('click', listener);
-
-        this.refreshFilterButtonTexts();
-    },
-
-    applyAuthFileFilterState(shouldRender = false) {
-        const filterContainer = document.querySelector('.auth-file-filter');
-        if (!filterContainer) return;
-
-        const currentType = this.currentAuthFileFilter || 'all';
-        const buttons = filterContainer.querySelectorAll('.filter-btn');
-        if (buttons.length === 0) return;
-
-        let targetButton = null;
-        buttons.forEach(btn => {
-            if (btn.dataset.type === currentType) {
-                targetButton = btn;
-            }
-        });
-
-        if (!targetButton) {
-            targetButton = filterContainer.querySelector('.filter-btn[data-type=\"all\"]') || buttons[0];
-            if (targetButton) {
-                this.currentAuthFileFilter = targetButton.dataset.type || 'all';
-            }
-        }
-
-        if (targetButton) {
-            this.handleFilterClick(targetButton, { skipRender: !shouldRender });
-        }
-    },
-
-    removeAuthFileElements(filenames = []) {
-        if (!Array.isArray(filenames) || filenames.length === 0) {
-            return;
-        }
-
-        const removalSet = new Set(filenames);
-        this.cachedAuthFiles = (this.cachedAuthFiles || []).filter(file => file && !removalSet.has(file.name));
-
-        if (!this.cachedAuthFiles.length) {
-            this.authFilesPagination.currentPage = 1;
-        }
-        this.renderAuthFilesPage(this.authFilesPagination.currentPage);
-    },
-
-    refreshFilterButtonTexts() {
-        document.querySelectorAll('.auth-file-filter .filter-btn[data-i18n-text]').forEach(btn => {
-            const key = btn.getAttribute('data-i18n-text');
-            if (key) {
-                btn.textContent = i18n.t(key);
-            }
-        });
-    },
-
-    bindAuthFileActionEvents() {
-        const container = document.getElementById('auth-files-list');
-        if (!container) return;
-
-        const oldListener = container._authFileActionListener;
-        if (oldListener) {
-            container.removeEventListener('click', oldListener);
-        }
-
-        const listener = (e) => {
-            const button = e.target.closest('button[data-action]');
-            if (!button) return;
-
-            const action = button.dataset.action;
-            const actionsContainer = button.closest('.item-actions');
-            if (!actionsContainer) return;
-
-            const filename = actionsContainer.dataset.filename;
-            if (!filename) return;
-
-            switch (action) {
-                case 'showDetails':
-                    this.showAuthFileDetails(filename);
-                    break;
-                case 'download':
-                    this.downloadAuthFile(filename);
-                    break;
-                case 'delete':
-                    this.deleteAuthFile(filename);
-                    break;
-            }
-        };
-
-        container._authFileActionListener = listener;
-        container.addEventListener('click', listener);
-    },
-
-    formatFileSize(bytes) {
-        if (bytes === 0) return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    },
-
-    openVertexFilePicker() {
-        const fileInput = document.getElementById('vertex-file-input');
-        if (fileInput) {
-            fileInput.click();
-        }
-    },
-
-    handleVertexFileSelection(event) {
-        const fileInput = event?.target;
-        const file = fileInput?.files?.[0] || null;
-
-        if (fileInput) {
-            fileInput.value = '';
-        }
-
-        if (file && !file.name.toLowerCase().endsWith('.json')) {
-            this.showNotification(i18n.t('vertex_import.file_required'), 'error');
-            this.vertexImportState.file = null;
-            this.updateVertexFileDisplay();
-            this.updateVertexImportButtonState();
-            return;
-        }
-
-        this.vertexImportState.file = file;
-        this.updateVertexFileDisplay(file ? file.name : '');
-        this.updateVertexImportButtonState();
-    },
-
-    updateVertexFileDisplay(filename = '') {
-        const displayInput = document.getElementById('vertex-file-display');
-        if (!displayInput) return;
-        displayInput.value = filename || '';
-    },
-
-    updateVertexImportButtonState() {
-        const importBtn = document.getElementById('vertex-import-btn');
-        if (!importBtn) return;
-        const disabled = !this.vertexImportState.file || this.vertexImportState.loading;
-        importBtn.disabled = disabled;
-    },
-
-    async importVertexCredential() {
-        if (!this.vertexImportState.file) {
-            this.showNotification(i18n.t('vertex_import.file_required'), 'error');
-            return;
-        }
-
-        const locationInput = document.getElementById('vertex-location');
-        const location = locationInput ? locationInput.value.trim() : '';
-        const formData = new FormData();
-        formData.append('file', this.vertexImportState.file, this.vertexImportState.file.name);
-        if (location) {
-            formData.append('location', location);
-        }
-
-        try {
-            this.vertexImportState.loading = true;
-            this.updateVertexImportButtonState();
-
-            const response = await this.apiClient.requestRaw('/vertex/import', {
-                method: 'POST',
-                body: formData
-            });
-
-            if (!response.ok) {
-                let errorMessage = `HTTP ${response.status}`;
-                try {
-                    const errorData = await response.json();
-                    errorMessage = errorData?.message || errorData?.error || errorMessage;
-                } catch (parseError) {
-                    const text = await response.text();
-                    if (text) {
-                        errorMessage = text;
-                    }
-                }
-                throw new Error(errorMessage);
-            }
-
-            const result = await response.json();
-            this.vertexImportState.result = result;
-            this.renderVertexImportResult(result);
-            this.showNotification(i18n.t('vertex_import.success'), 'success');
-            this.vertexImportState.file = null;
-            this.updateVertexFileDisplay('');
-        } catch (error) {
-            console.error('Vertex credential import failed:', error);
-            this.showNotification(`${i18n.t('notification.import_failed')}: ${error.message}`, 'error');
-        } finally {
-            this.vertexImportState.loading = false;
-            this.updateVertexImportButtonState();
-            const fileInput = document.getElementById('vertex-file-input');
-            if (fileInput) {
-                fileInput.value = '';
-            }
-        }
-    },
-
-    renderVertexImportResult(result = null) {
-        const container = document.getElementById('vertex-import-result');
-        const projectEl = document.getElementById('vertex-result-project');
-        const emailEl = document.getElementById('vertex-result-email');
-        const locationEl = document.getElementById('vertex-result-location');
-        const fileEl = document.getElementById('vertex-result-file');
-        if (!container || !projectEl || !emailEl || !locationEl || !fileEl) return;
-
-        if (!result) {
-            container.style.display = 'none';
-            this.vertexImportState.result = null;
-            return;
-        }
-
-        this.vertexImportState.result = result;
-        projectEl.textContent = result.project || '-';
-        emailEl.textContent = result.email || '-';
-        locationEl.textContent = result.location || '-';
-        fileEl.textContent = result.file || '-';
-        container.style.display = 'block';
-    },
-
-    showAuthFileDetails(filename, content) {
-        const file = (this.cachedAuthFiles || []).find(f => f && f.name === filename);
-        if (!file) return;
-
-        const stats = this.resolveAuthFileStats(file, this.authFileStatsCache || {});
-        const size = typeof file.size === 'number' ? this.formatFileSize(file.size) : '-';
-        const provider = file.provider || '-';
-        const type = file.type || '-';
-        const createdAt = file.created_at ? new Date(file.created_at).toLocaleString('zh-CN') : '-';
-
-        const jsonContent = content || JSON.stringify(file, null, 2);
-
-        // 使用独立的 JSON 弹窗样式，避免被通用 .modal 的 display:none 覆盖
-        const modalHtml = `
-            <div class="json-modal" id="json-modal">
-                <div class="json-modal-content">
-                    <div class="json-modal-header">
-                        <h3>${this.escapeHtml(filename)}</h3>
-                    </div>
-                    <div class="json-modal-body">
-                        <pre class="json-content">${this.escapeHtml(jsonContent)}</pre>
-                    </div>
-                    <div class="json-modal-footer">
-                        <button class="btn btn-secondary" data-action="copy">
-                            <i class="fas fa-copy"></i>
-                            ${i18n.t('common.copy')}
-                        </button>
-                        <button class="btn btn-secondary" data-action="close">
-                            ${i18n.t('common.close')}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        const oldModal = document.getElementById('json-modal');
-        if (oldModal) {
-            oldModal.remove();
-        }
-
-        document.body.insertAdjacentHTML('beforeend', modalHtml);
-        const modal = document.getElementById('json-modal');
-
-        modal.addEventListener('click', (e) => {
-            if (e.target === modal) {
-                this.closeJsonModal();
-            }
-        });
-
-        this.bindJsonModalEvents(modal);
-    },
-
-    bindJsonModalEvents(modal) {
-        modal.addEventListener('click', (e) => {
-            const button = e.target.closest('button[data-action]');
-            if (!button) return;
-
-            const action = button.dataset.action;
-            switch (action) {
-                case 'copy':
-                    this.copyJsonContent();
-                    break;
-                case 'close':
-                    this.closeJsonModal();
-                    break;
-            }
-        });
-    },
-
-    closeJsonModal() {
-        const modal = document.getElementById('json-modal');
-        if (modal) {
-            modal.remove();
-        }
-    },
-
-    copyJsonContent() {
-        const jsonContent = document.querySelector('.json-content');
-        if (jsonContent) {
-            const text = jsonContent.textContent;
-            navigator.clipboard.writeText(text).then(() => {
-                this.showNotification('内容已复制到剪贴板', 'success');
-            }).catch(() => {
-                this.showNotification('复制失败', 'error');
-            });
-        }
-    },
-
-    async downloadAuthFile(filename) {
-        try {
-            const response = await this.apiClient.requestRaw(`/auth-files/download?name=${encodeURIComponent(filename)}`);
-
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}`);
-            }
-
-            const blob = await response.blob();
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = filename;
-            a.click();
-            window.URL.revokeObjectURL(url);
-
-            this.showNotification(i18n.t('auth_files.download_success'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.download_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    async deleteAuthFile(filename) {
-        if (!confirm(`${i18n.t('auth_files.delete_confirm')} "${filename}" 吗？`)) return;
-
-        try {
-            await this.makeRequest(`/auth-files?name=${encodeURIComponent(filename)}`, { method: 'DELETE' });
-            this.removeAuthFileElements([filename]);
-            this.clearCache();
-            await this.loadAuthFiles();
-            this.showNotification(i18n.t('auth_files.delete_success'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    async deleteAllAuthFiles() {
-        const filterType = (this.currentAuthFileFilter || 'all').toLowerCase();
-        const isFiltered = filterType !== 'all';
-        const typeLabel = this.generateDynamicTypeLabel(filterType);
-        const confirmMessage = isFiltered
-            ? i18n.t('auth_files.delete_filtered_confirm').replace('{type}', typeLabel)
-            : i18n.t('auth_files.delete_all_confirm');
-
-        if (!confirm(confirmMessage)) return;
-
-        try {
-            if (!isFiltered) {
-                const response = await this.makeRequest('/auth-files?all=true', { method: 'DELETE' });
-                const currentNames = (this.cachedAuthFiles || []).map(file => file.name).filter(Boolean);
-                if (currentNames.length > 0) {
-                    this.removeAuthFileElements(currentNames);
-                }
-                this.clearCache();
-                this.currentAuthFileFilter = 'all';
-                await this.loadAuthFiles();
-                this.showNotification(`${i18n.t('auth_files.delete_all_success')} ${response.deleted} ${i18n.t('auth_files.files_count')}`, 'success');
-                return;
-            }
-
-            const deletableFiles = (this.cachedAuthFiles || []).filter(file => {
-                if (!file || file.runtime_only) return false;
-                const fileType = (file.type || 'unknown').toLowerCase();
-                return fileType === filterType;
-            });
-
-            if (deletableFiles.length === 0) {
-                this.showNotification(i18n.t('auth_files.delete_filtered_none').replace('{type}', typeLabel), 'info');
-                return;
-            }
-
-            let success = 0;
-            let failed = 0;
-            const deletedNames = [];
-
-            for (const file of deletableFiles) {
-                try {
-                    await this.makeRequest(`/auth-files?name=${encodeURIComponent(file.name)}`, { method: 'DELETE' });
-                    success++;
-                    deletedNames.push(file.name);
-                } catch (error) {
-                    console.error('删除认证文件失败:', file?.name, error);
-                    failed++;
-                }
-            }
-
-            if (deletedNames.length > 0) {
-                this.removeAuthFileElements(deletedNames);
-            }
-
-            this.clearCache();
-            this.currentAuthFileFilter = 'all';
-            await this.loadAuthFiles();
-
-            if (failed === 0) {
-                const successMsg = i18n.t('auth_files.delete_filtered_success')
-                    .replace('{count}', success)
-                    .replace('{type}', typeLabel);
-                this.showNotification(successMsg, 'success');
-            } else {
-                const warningMsg = i18n.t('auth_files.delete_filtered_partial')
-                    .replace('{success}', success)
-                    .replace('{failed}', failed)
-                    .replace('{type}', typeLabel);
-                this.showNotification(warningMsg, 'warning');
-            }
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    // 触发文件上传选择器
-    uploadAuthFile() {
-        const authFileInput = document.getElementById('auth-file-input');
-        if (authFileInput) {
-            authFileInput.click();
-        }
-    },
-
-    // 处理文件上传
-    async handleFileUpload(event) {
-        const input = event?.target;
-        const files = Array.from(input?.files || []);
-        if (input) {
-            input.value = '';
-        }
-        if (!files.length) return;
-
-        const validFiles = [];
-        const invalidFiles = [];
-        files.forEach(file => {
-            if (file && file.name.endsWith('.json')) {
-                validFiles.push(file);
-            } else if (file) {
-                invalidFiles.push(file.name);
-            }
-        });
-
-        if (invalidFiles.length) {
-            this.showNotification(i18n.t('auth_files.upload_error_json'), 'error');
-        }
-        if (!validFiles.length) return;
-
-        let successCount = 0;
-        const failed = [];
-
-        for (const file of validFiles) {
-            try {
-                await this.uploadSingleAuthFile(file);
-                successCount++;
-            } catch (error) {
-                failed.push({ name: file.name, message: error.message });
-            }
-        }
-
-        if (successCount > 0) {
-            this.clearCache();
-            await this.loadAuthFiles();
-            const suffix = validFiles.length > 1 ? ` (${successCount}/${validFiles.length})` : '';
-            this.showNotification(`${i18n.t('auth_files.upload_success')}${suffix}`, failed.length ? 'warning' : 'success');
-        }
-
-        if (failed.length) {
-            const details = failed.map(item => `${item.name}: ${item.message}`).join('; ');
-            this.showNotification(`${i18n.t('notification.upload_failed')}: ${details}`, 'error');
-        }
-    },
-
-    async uploadSingleAuthFile(file) {
-        const formData = new FormData();
-        formData.append('file', file, file.name);
-
-        const response = await this.apiClient.requestRaw('/auth-files', {
-            method: 'POST',
-            body: formData
-        });
-
-        if (!response.ok) {
-            const errorData = await response.json().catch(() => ({}));
-            throw new Error(errorData.error || `HTTP ${response.status}`);
-        }
-    },
-
-    normalizeOauthExcludedMap(payload = {}) {
-        const raw = (payload && (payload['oauth-excluded-models'] || payload.items)) || payload || {};
-        if (!raw || typeof raw !== 'object') {
-            return {};
-        }
-        const normalized = {};
-        Object.entries(raw).forEach(([provider, models]) => {
-            const key = typeof provider === 'string' ? provider.trim() : '';
-            if (!key) return;
-            const list = Array.isArray(models)
-                ? models.map(item => String(item || '').trim()).filter(Boolean)
-                : [];
-            normalized[key.toLowerCase()] = list;
-        });
-        return normalized;
-    },
-
-    resolveOauthExcludedFromConfig(config = null) {
-        const sources = [];
-        if (config && typeof config === 'object') {
-            sources.push(config);
-        }
-        if (this.configCache && typeof this.configCache === 'object') {
-            if (this.configCache['oauth-excluded-models'] !== undefined) {
-                sources.push({ 'oauth-excluded-models': this.configCache['oauth-excluded-models'] });
-            }
-            if (this.configCache['__full__']) {
-                sources.push(this.configCache['__full__']);
-            }
-        }
-
-        for (const source of sources) {
-            if (!source || typeof source !== 'object') continue;
-            if (Object.prototype.hasOwnProperty.call(source, 'oauth-excluded-models')) {
-                return {
-                    map: this.normalizeOauthExcludedMap(source),
-                    found: true
-                };
-            }
-        }
-
-        return { map: {}, found: false };
-    },
-
-    applyOauthExcludedFromConfig(config = null, options = {}) {
-        const { render = true } = options || {};
-        const { map, found } = this.resolveOauthExcludedFromConfig(config);
-        if (!found) {
-            return false;
-        }
-
-        this.oauthExcludedModels = map;
-        this._oauthExcludedLoading = false;
-        this.setOauthExcludedStatus('');
-        this.updateOauthExcludedButtonsState(false);
-        if (render) {
-            this.renderOauthExcludedModels();
-        }
-        return true;
-    },
-
-    getFilteredOauthExcludedMap(filterType = this.currentAuthFileFilter) {
-        const map = this.oauthExcludedModels || {};
-        if (!map || typeof map !== 'object') {
-            return {};
-        }
-        const type = (filterType || 'all').toLowerCase();
-        if (type === 'all') {
-            return map;
-        }
-        const result = {};
-        Object.entries(map).forEach(([provider, models]) => {
-            if ((provider || '').toLowerCase() === type) {
-                result[provider] = models;
-            }
-        });
-        return result;
-    },
-
-    findOauthExcludedEntry(provider) {
-        if (!provider || provider === 'all') {
-            return null;
-        }
-        const normalized = provider.toLowerCase();
-        const map = this.oauthExcludedModels || {};
-        for (const [key, models] of Object.entries(map)) {
-            if ((key || '').toLowerCase() === normalized) {
-                return { provider: key, models: Array.isArray(models) ? models : [] };
-            }
-        }
-        return null;
-    },
-
-    setOauthExcludedForm(provider = '', models = null) {
-        const providerSelect = document.getElementById('oauth-excluded-provider-select');
-        const modelsInput = document.getElementById('oauth-excluded-models');
-
-        const normalizedProvider = (provider || '').trim();
-        if (providerSelect) {
-            const options = Array.from(providerSelect.options || []);
-            let match = options.find(opt => (opt.value || '').toLowerCase() === normalizedProvider.toLowerCase());
-            if (!match && normalizedProvider) {
-                match = new Option(this.generateDynamicTypeLabel(normalizedProvider) || normalizedProvider, normalizedProvider);
-                providerSelect.appendChild(match);
-            }
-            if (normalizedProvider && match) {
-                providerSelect.value = match.value;
-            } else {
-                providerSelect.value = 'auto';
-            }
-        }
-
-        if (modelsInput && models !== null && models !== undefined) {
-            const list = Array.isArray(models) ? models : [];
-            modelsInput.value = list.map(item => item || '').join('\n');
-        }
-    },
-
-    syncOauthExcludedFormWithFilter(overrideModels = false) {
-        const filterType = (this.currentAuthFileFilter || 'all').toLowerCase();
-        const entry = this.findOauthExcludedEntry(filterType);
-
-        if (filterType === 'all') {
-            if (overrideModels) {
-                if (entry) {
-                    this.setOauthExcludedForm(entry.provider, entry.models);
-                } else {
-                    this.setOauthExcludedForm('', '');
-                }
-            }
-            return;
-        }
-
-        if (overrideModels) {
-            this.setOauthExcludedForm(filterType, entry ? entry.models : []);
-        } else {
-            this.setOauthExcludedForm(filterType);
-        }
-    },
-
-    getOauthExcludedProviderValue() {
-        const providerSelect = document.getElementById('oauth-excluded-provider-select');
-        const filterFallback = (this.currentAuthFileFilter && this.currentAuthFileFilter !== 'all')
-            ? this.currentAuthFileFilter
-            : '';
-
-        let selected = (providerSelect && providerSelect.value) ? providerSelect.value.trim() : '';
-        if (!selected || selected === 'auto') {
-            return filterFallback;
-        }
-        return selected;
-    },
-
-    refreshOauthProviderOptions() {
-        const providerSelect = document.getElementById('oauth-excluded-provider-select');
-        if (!providerSelect) return;
-
-        const allowedProviders = ['gemini-cli', 'vertex', 'aistudio', 'antigravity', 'claude', 'codex', 'qwen', 'iflow'];
-        const mapProviders = Object.keys(this.oauthExcludedModels || {});
-        const filterType = (this.currentAuthFileFilter || '').toLowerCase();
-        const providers = Array.from(new Set([...allowedProviders, ...mapProviders].filter(Boolean)));
-
-        const prevValue = providerSelect.value || 'auto';
-
-        providerSelect.innerHTML = '';
-        const addOption = (value, textKey, fallbackText = null) => {
-            const opt = document.createElement('option');
-            opt.value = value;
-            if (textKey) {
-                opt.setAttribute('data-i18n-text', textKey);
-                opt.textContent = i18n.t(textKey);
-            } else {
-                opt.textContent = fallbackText || value;
-            }
-            providerSelect.appendChild(opt);
-        };
-
-        addOption('auto', 'oauth_excluded.provider_auto');
-        providers.sort((a, b) => a.localeCompare(b)).forEach(item => addOption(item, null, this.generateDynamicTypeLabel(item) || item));
-
-        const restoreValue = (() => {
-            if (prevValue && Array.from(providerSelect.options).some(opt => opt.value === prevValue)) {
-                return prevValue;
-            }
-            if (filterType && Array.from(providerSelect.options).some(opt => opt.value === filterType)) {
-                return filterType;
-            }
-            return 'auto';
-        })();
-        providerSelect.value = restoreValue;
-    },
-
-    parseOauthExcludedModelsInput(input = '') {
-        const tokens = (input || '').split(/[\n,]/).map(token => token.trim()).filter(Boolean);
-        const unique = [];
-        tokens.forEach(token => {
-            if (!unique.includes(token)) {
-                unique.push(token);
-            }
-        });
-        return unique;
-    },
-
-    openOauthExcludedEditor(provider = '', models = null) {
-        const modal = document.getElementById('modal');
-        const modalBody = document.getElementById('modal-body');
-        if (!modal || !modalBody) return;
-
-        const normalizedProvider = (provider || '').trim();
-        const fallbackProvider = normalizedProvider
-            || ((this.currentAuthFileFilter && this.currentAuthFileFilter !== 'all') ? this.currentAuthFileFilter : '');
-        let targetModels = models;
-
-        if ((targetModels === null || targetModels === undefined) && fallbackProvider) {
-            const existing = this.findOauthExcludedEntry(fallbackProvider);
-            if (existing) {
-                targetModels = existing.models;
-            }
-        }
-
-        modalBody.innerHTML = `
-            <h3>${fallbackProvider
-                ? i18n.t('oauth_excluded.edit_title', { provider: this.generateDynamicTypeLabel(fallbackProvider) })
-                : i18n.t('oauth_excluded.add_title')
-            }</h3>
-            <div class="provider-item oauth-excluded-editor-card">
-                <div class="item-content">
-                    <div class="form-group">
-                        <label for="oauth-excluded-provider-select" data-i18n="oauth_excluded.provider_label">${i18n.t('oauth_excluded.provider_label')}</label>
-                        <select id="oauth-excluded-provider-select"></select>
-                        <p class="form-hint" data-i18n="oauth_excluded.provider_hint">${i18n.t('oauth_excluded.provider_hint')}</p>
-                    </div>
-                    <div class="form-group">
-                        <label for="oauth-excluded-models" data-i18n="oauth_excluded.models_label">${i18n.t('oauth_excluded.models_label')}</label>
-                        <textarea id="oauth-excluded-models" rows="5" data-i18n-placeholder="oauth_excluded.models_placeholder" placeholder="${i18n.t('oauth_excluded.models_placeholder')}"></textarea>
-                        <p class="form-hint" data-i18n="oauth_excluded.models_hint">${i18n.t('oauth_excluded.models_hint')}</p>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-primary" id="oauth-excluded-save">
-                    <i class="fas fa-save"></i> ${i18n.t('oauth_excluded.save')}
-                </button>
-                <button class="btn btn-danger" id="oauth-excluded-delete">
-                    <i class="fas fa-trash"></i> ${i18n.t('oauth_excluded.delete')}
-                </button>
-                <button class="btn btn-secondary" onclick="manager.closeModal()">
-                    ${i18n.t('common.cancel')}
-                </button>
-            </div>
-        `;
-
-        this.refreshOauthProviderOptions();
-        this.setOauthExcludedForm(fallbackProvider, targetModels != null ? targetModels : []);
-        this.showModal();
-
-        const saveBtn = document.getElementById('oauth-excluded-save');
-        if (saveBtn) {
-            saveBtn.onclick = () => this.saveOauthExcludedEntry();
-        }
-        const deleteBtn = document.getElementById('oauth-excluded-delete');
-        if (deleteBtn) {
-            deleteBtn.onclick = () => this.deleteOauthExcludedEntry();
-        }
-
-        const providerSelect = document.getElementById('oauth-excluded-provider-select');
-        const syncDeleteState = () => {
-            if (deleteBtn) {
-                deleteBtn.disabled = !this.getOauthExcludedProviderValue();
-            }
-        };
-        if (providerSelect) {
-            providerSelect.addEventListener('change', syncDeleteState);
-        }
-        syncDeleteState();
-        this.updateOauthExcludedButtonsState(false);
-    },
-
-    buildOauthExcludedItem(provider, models = []) {
-        const providerLabel = this.generateDynamicTypeLabel(provider) || provider;
-        const normalizedModels = Array.isArray(models) ? models.filter(Boolean) : [];
-        const tags = normalizedModels.length
-            ? normalizedModels.map(model => `<span class="provider-model-tag"><span class="model-name">${this.escapeHtml(String(model))}</span></span>`).join('')
-            : `<span class="oauth-excluded-empty">${i18n.t('oauth_excluded.no_models')}</span>`;
-        const modelCount = normalizedModels.length;
-
-        return `
-            <div class="provider-item oauth-excluded-card" data-provider="${this.escapeHtml(provider)}">
-                <div class="item-content">
-                    <div class="item-title">${this.escapeHtml(providerLabel)}</div>
-                    <div class="item-meta">
-                        <span class="item-subtitle">
-                            ${modelCount > 0
-                                ? i18n.t('oauth_excluded.model_count', { count: modelCount })
-                                : i18n.t('oauth_excluded.no_models')}
-                        </span>
-                    </div>
-                    <div class="provider-models oauth-excluded-tags">
-                        ${tags}
-                    </div>
-                </div>
-                <div class="item-actions">
-                    <button class="btn btn-secondary" data-action="edit" data-provider="${this.escapeHtml(provider)}">
-                        <i class="fas fa-pen"></i>
-                    </button>
-                    <button class="btn btn-danger" data-action="delete" data-provider="${this.escapeHtml(provider)}">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </div>
-            </div>
-        `;
-    },
-
-    renderOauthExcludedModels(filterType = this.currentAuthFileFilter) {
-        const container = document.getElementById('oauth-excluded-list');
-        const scopeEl = document.getElementById('oauth-excluded-scope');
-        if (!container) return;
-
-        const currentType = (filterType || 'all').toLowerCase();
-        const map = this.getFilteredOauthExcludedMap(currentType);
-        const providers = Object.keys(map || {});
-
-        if (scopeEl) {
-            const label = currentType === 'all'
-                ? i18n.t('oauth_excluded.scope_all')
-                : i18n.t('oauth_excluded.scope_provider', { provider: this.generateDynamicTypeLabel(currentType) });
-            scopeEl.textContent = label;
-        }
-
-        if (!this.isConnected) {
-            container.innerHTML = `<div class="oauth-excluded-empty">${i18n.t('oauth_excluded.disconnected')}</div>`;
-            return;
-        }
-
-        if (this._oauthExcludedLoading) {
-            container.innerHTML = `<div class="loading-placeholder">${i18n.t('common.loading')}</div>`;
-            return;
-        }
-
-        if (!providers.length) {
-            const emptyKey = currentType === 'all'
-                ? 'oauth_excluded.list_empty_all'
-                : 'oauth_excluded.list_empty_filtered';
-            container.innerHTML = `<div class="oauth-excluded-empty">${i18n.t(emptyKey)}</div>`;
-            return;
-        }
-
-        const itemsHtml = providers
-            .sort((a, b) => a.localeCompare(b))
-            .map(provider => this.buildOauthExcludedItem(provider, map[provider]))
-            .join('');
-        container.innerHTML = itemsHtml;
-        this.refreshOauthProviderOptions();
-        this.bindOauthExcludedActionEvents();
-    },
-
-    bindOauthExcludedActionEvents() {
-        const container = document.getElementById('oauth-excluded-list');
-        if (!container) return;
-
-        if (container._oauthExcludedListener) {
-            container.removeEventListener('click', container._oauthExcludedListener);
-        }
-
-        const listener = (event) => {
-            const button = event.target.closest('button[data-action]');
-            if (!button || !container.contains(button)) return;
-            const provider = button.dataset.provider;
-            if (!provider) return;
-
-            const entry = this.findOauthExcludedEntry(provider);
-            if (button.dataset.action === 'edit') {
-                this.openOauthExcludedEditor(provider, entry ? entry.models : []);
-            } else if (button.dataset.action === 'delete') {
-                this.deleteOauthExcludedEntry(provider);
-            }
-        };
-
-        container._oauthExcludedListener = listener;
-        container.addEventListener('click', listener);
-    },
-
-    updateOauthExcludedButtonsState(isLoading = false) {
-        const refreshBtn = document.getElementById('oauth-excluded-refresh');
-        const saveBtn = document.getElementById('oauth-excluded-save');
-        const deleteBtn = document.getElementById('oauth-excluded-delete');
-        const addBtn = document.getElementById('oauth-excluded-add');
-        const disabled = isLoading || !this.isConnected;
-        [refreshBtn, saveBtn, deleteBtn, addBtn].forEach(btn => {
-            if (btn) {
-                btn.disabled = disabled;
-            }
-        });
-    },
-
-    setOauthExcludedStatus(message = '') {
-        const statusEl = document.getElementById('oauth-excluded-status');
-        if (statusEl) {
-            statusEl.textContent = message || '';
-        }
-    },
-
-    async loadOauthExcludedModels(forceRefresh = false) {
-        if (!this.isConnected) {
-            this.renderOauthExcludedModels();
-            this.updateOauthExcludedButtonsState();
-            return;
-        }
-
-        if (this._oauthExcludedLoading) {
-            return;
-        }
-
-        this._oauthExcludedLoading = true;
-        this.updateOauthExcludedButtonsState(true);
-        this.setOauthExcludedStatus(i18n.t('oauth_excluded.refreshing'));
-        this.renderOauthExcludedModels();
-
-        try {
-            let targetMap = {};
-            let hasData = false;
-
-            if (!forceRefresh) {
-                const { map, found } = this.resolveOauthExcludedFromConfig();
-                if (found) {
-                    targetMap = map;
-                    hasData = true;
-                }
-            }
-
-            if (!hasData) {
-                try {
-                    const configSection = await this.getConfig('oauth-excluded-models', forceRefresh);
-                    if (configSection !== undefined) {
-                        targetMap = this.normalizeOauthExcludedMap(configSection);
-                        hasData = true;
-                    }
-                } catch (configError) {
-                    console.warn('从配置获取 OAuth 排除列表失败，尝试回退接口:', configError);
-                }
-            }
-
-            if (!hasData) {
-                const data = await this.makeRequest('/oauth-excluded-models');
-                targetMap = this.normalizeOauthExcludedMap(data);
-                hasData = true;
-            }
-
-            this.oauthExcludedModels = targetMap;
-            this.setOauthExcludedStatus('');
-        } catch (error) {
-            console.error('加载 OAuth 排除列表失败:', error);
-            const message = `${i18n.t('oauth_excluded.load_failed')}: ${error.message}`;
-            this.setOauthExcludedStatus(message);
-            this.showNotification(message, 'error');
-        } finally {
-            this._oauthExcludedLoading = false;
-            this.updateOauthExcludedButtonsState(false);
-            this.renderOauthExcludedModels();
-        }
-    },
-
-    async saveOauthExcludedEntry() {
-        if (!this.isConnected) {
-            this.showNotification(i18n.t('notification.connection_required'), 'error');
-            return;
-        }
-        const modelsInput = document.getElementById('oauth-excluded-models');
-        if (!modelsInput) return;
-
-        const providerValue = this.getOauthExcludedProviderValue();
-        if (!providerValue) {
-            this.showNotification(i18n.t('oauth_excluded.provider_required'), 'error');
-            return;
-        }
-
-        const models = this.parseOauthExcludedModelsInput(modelsInput.value);
-        this.updateOauthExcludedButtonsState(true);
-        this.setOauthExcludedStatus(i18n.t('oauth_excluded.saving'));
-
-        try {
-            await this.makeRequest('/oauth-excluded-models', {
-                method: 'PATCH',
-                body: JSON.stringify({
-                    provider: providerValue,
-                    models
-                })
-            });
-            const successKey = models.length === 0 ? 'oauth_excluded.delete_success' : 'oauth_excluded.save_success';
-            this.showNotification(i18n.t(successKey), 'success');
-            this.clearCache('oauth-excluded-models');
-            await this.loadOauthExcludedModels(true);
-            this.closeModal();
-        } catch (error) {
-            this.showNotification(`${i18n.t('oauth_excluded.save_failed')}: ${error.message}`, 'error');
-        } finally {
-            this.setOauthExcludedStatus('');
-            this.updateOauthExcludedButtonsState(false);
-        }
-    },
-
-    async deleteOauthExcludedEntry(providerOverride = null) {
-        if (!this.isConnected) {
-            this.showNotification(i18n.t('notification.connection_required'), 'error');
-            return;
-        }
-        const providerValue = (providerOverride || this.getOauthExcludedProviderValue() || '').trim();
-
-        if (!providerValue) {
-            this.showNotification(i18n.t('oauth_excluded.provider_required'), 'error');
-            return;
-        }
-
-        if (!confirm(i18n.t('oauth_excluded.delete_confirm', { provider: providerValue }))) {
-            return;
-        }
-
-        this.updateOauthExcludedButtonsState(true);
-        this.setOauthExcludedStatus(i18n.t('oauth_excluded.deleting'));
-
-        try {
-            await this.makeRequest(`/oauth-excluded-models?provider=${encodeURIComponent(providerValue)}`, { method: 'DELETE' });
-            this.showNotification(i18n.t('oauth_excluded.delete_success'), 'success');
-            this.clearCache('oauth-excluded-models');
-            await this.loadOauthExcludedModels(true);
-            this.closeModal();
-        } catch (error) {
-            this.showNotification(`${i18n.t('oauth_excluded.delete_failed')}: ${error.message}`, 'error');
-        } finally {
-            this.setOauthExcludedStatus('');
-            this.updateOauthExcludedButtonsState(false);
-        }
-    },
-
-    registerAuthFilesListeners() {
-        if (!this.events || typeof this.events.on !== 'function') {
-            return;
-        }
-        this.events.on('data:config-loaded', async (event) => {
-            const detail = event?.detail || {};
-            const config = detail.config || {};
-            const keyStats = detail.keyStats || null;
-            try {
-                await this.loadAuthFiles(keyStats);
-            } catch (error) {
-                console.error('加载认证文件失败:', error);
-            }
-            try {
-                const applied = this.applyOauthExcludedFromConfig(config, { render: true });
-                if (!applied) {
-                    await this.loadOauthExcludedModels(true);
-                }
-            } catch (error) {
-                console.error('加载 OAuth 排除列表失败:', error);
-            }
-        });
-
-        this.events.on('connection:status-changed', (event) => {
-            const detail = event?.detail || {};
-            this.updateOauthExcludedButtonsState(false);
-            if (detail.isConnected) {
-                if (!this.applyOauthExcludedFromConfig(null, { render: true })) {
-                    this.renderOauthExcludedModels();
-                }
-            } else {
-                this.renderOauthExcludedModels();
-            }
-        });
-    }
-};
diff --git a/src/modules/config-editor.js b/src/modules/config-editor.js
deleted file mode 100644
index 71d60ca..0000000
--- a/src/modules/config-editor.js
+++ /dev/null
@@ -1,272 +0,0 @@
-export const configEditorModule = {
-    setupConfigEditor() {
-        const textarea = document.getElementById('config-editor');
-        const saveBtn = document.getElementById('config-save-btn');
-        const reloadBtn = document.getElementById('config-reload-btn');
-        const statusEl = document.getElementById('config-editor-status');
-
-        this.configEditorElements = {
-            textarea,
-            editorInstance: null,
-            saveBtn,
-            reloadBtn,
-            statusEl
-        };
-
-        if (!textarea || !saveBtn || !reloadBtn || !statusEl) {
-            return;
-        }
-
-        if (window.CodeMirror) {
-            const editorInstance = window.CodeMirror.fromTextArea(textarea, {
-                mode: 'yaml',
-                theme: 'default',
-                lineNumbers: true,
-                indentUnit: 2,
-                tabSize: 2,
-                lineWrapping: true,
-                autoCloseBrackets: true,
-                extraKeys: {
-                    'Ctrl-/': 'toggleComment',
-                    'Cmd-/': 'toggleComment'
-                }
-            });
-
-            editorInstance.on('change', () => {
-                this.isConfigEditorDirty = true;
-                this.updateConfigEditorStatus('info', i18n.t('config_management.status_dirty'));
-            });
-
-            this.configEditorElements.editorInstance = editorInstance;
-        } else {
-            textarea.addEventListener('input', () => {
-                this.isConfigEditorDirty = true;
-                this.updateConfigEditorStatus('info', i18n.t('config_management.status_dirty'));
-            });
-        }
-
-        saveBtn.addEventListener('click', () => this.saveConfigFile());
-        reloadBtn.addEventListener('click', () => this.loadConfigFileEditor(true));
-
-        this.refreshConfigEditor();
-    },
-
-    updateConfigEditorAvailability() {
-        const { textarea, editorInstance, saveBtn, reloadBtn } = this.configEditorElements || {};
-        if ((!textarea && !editorInstance) || !saveBtn || !reloadBtn) {
-            return;
-        }
-
-        const disabled = !this.isConnected;
-        if (editorInstance) {
-            editorInstance.setOption('readOnly', disabled ? 'nocursor' : false);
-            const wrapper = editorInstance.getWrapperElement();
-            if (wrapper) {
-                wrapper.classList.toggle('cm-readonly', disabled);
-            }
-        } else if (textarea) {
-            textarea.disabled = disabled;
-        }
-
-        saveBtn.disabled = disabled;
-        reloadBtn.disabled = disabled;
-
-        if (disabled) {
-            this.updateConfigEditorStatus('info', i18n.t('config_management.status_disconnected'));
-        }
-
-        this.refreshConfigEditor();
-        this.lastEditorConnectionState = this.isConnected;
-    },
-
-    refreshConfigEditor() {
-        const instance = this.configEditorElements && this.configEditorElements.editorInstance;
-        if (instance && typeof instance.refresh === 'function') {
-            setTimeout(() => instance.refresh(), 0);
-        }
-    },
-
-    updateConfigEditorStatus(type, message) {
-        const statusEl = (this.configEditorElements && this.configEditorElements.statusEl) || document.getElementById('config-editor-status');
-        if (!statusEl) {
-            return;
-        }
-
-        statusEl.textContent = message;
-        statusEl.classList.remove('success', 'error');
-
-        if (type === 'success') {
-            statusEl.classList.add('success');
-        } else if (type === 'error') {
-            statusEl.classList.add('error');
-        }
-    },
-
-    async loadConfigFileEditor(forceRefresh = false) {
-        const { textarea, editorInstance, reloadBtn } = this.configEditorElements || {};
-        if (!textarea && !editorInstance) {
-            return;
-        }
-
-        if (!this.isConnected) {
-            this.updateConfigEditorStatus('info', i18n.t('config_management.status_disconnected'));
-            return;
-        }
-
-        if (reloadBtn) {
-            reloadBtn.disabled = true;
-        }
-        this.updateConfigEditorStatus('info', i18n.t('config_management.status_loading'));
-
-        try {
-            const yamlText = await this.fetchConfigFile(forceRefresh);
-
-            if (editorInstance) {
-                editorInstance.setValue(yamlText || '');
-                if (typeof editorInstance.markClean === 'function') {
-                    editorInstance.markClean();
-                }
-            } else if (textarea) {
-                textarea.value = yamlText || '';
-            }
-
-            this.isConfigEditorDirty = false;
-            this.updateConfigEditorStatus('success', i18n.t('config_management.status_loaded'));
-            this.refreshConfigEditor();
-        } catch (error) {
-            console.error('加载配置文件失败:', error);
-            this.updateConfigEditorStatus('error', `${i18n.t('config_management.status_load_failed')}: ${error.message}`);
-        } finally {
-            if (reloadBtn) {
-                reloadBtn.disabled = !this.isConnected;
-            }
-        }
-    },
-
-    async fetchConfigFile(forceRefresh = false) {
-        if (!forceRefresh && this.configYamlCache) {
-            return this.configYamlCache;
-        }
-
-        const requestUrl = '/config.yaml';
-
-        try {
-            const response = await this.apiClient.requestRaw(requestUrl, {
-                method: 'GET',
-                headers: {
-                    'Accept': 'application/yaml'
-                }
-            });
-
-            if (!response.ok) {
-                const errorText = await response.text().catch(() => '');
-                const message = errorText || `HTTP ${response.status}`;
-                throw new Error(message);
-            }
-
-            const contentType = response.headers.get('content-type') || '';
-            if (!/yaml/i.test(contentType)) {
-                throw new Error(i18n.t('config_management.error_yaml_not_supported'));
-            }
-
-            const text = await response.text();
-            this.lastConfigFetchUrl = requestUrl;
-            this.configYamlCache = text;
-            return text;
-        } catch (error) {
-            throw error instanceof Error ? error : new Error(String(error));
-        }
-    },
-
-    async saveConfigFile() {
-        const { textarea, editorInstance, saveBtn, reloadBtn } = this.configEditorElements || {};
-        if ((!textarea && !editorInstance) || !saveBtn) {
-            return;
-        }
-
-        if (!this.isConnected) {
-            this.updateConfigEditorStatus('error', i18n.t('config_management.status_disconnected'));
-            return;
-        }
-
-        const yamlText = editorInstance ? editorInstance.getValue() : (textarea ? textarea.value : '');
-
-        saveBtn.disabled = true;
-        if (reloadBtn) {
-            reloadBtn.disabled = true;
-        }
-        this.updateConfigEditorStatus('info', i18n.t('config_management.status_saving'));
-
-        try {
-            await this.writeConfigFile('/config.yaml', yamlText);
-            this.lastConfigFetchUrl = '/config.yaml';
-            this.configYamlCache = yamlText;
-            this.isConfigEditorDirty = false;
-            if (editorInstance && typeof editorInstance.markClean === 'function') {
-                editorInstance.markClean();
-            }
-            this.showNotification(i18n.t('config_management.save_success'), 'success');
-            this.updateConfigEditorStatus('success', i18n.t('config_management.status_saved'));
-            this.clearCache();
-            if (this.events && typeof this.events.emit === 'function') {
-                this.events.emit('config:refresh-requested', { forceRefresh: true });
-            }
-        } catch (error) {
-            const errorMessage = `${i18n.t('config_management.status_save_failed')}: ${error.message}`;
-            this.updateConfigEditorStatus('error', errorMessage);
-            this.showNotification(errorMessage, 'error');
-            this.isConfigEditorDirty = true;
-        } finally {
-            saveBtn.disabled = !this.isConnected;
-            if (reloadBtn) {
-                reloadBtn.disabled = !this.isConnected;
-            }
-        }
-    },
-
-    async writeConfigFile(endpoint, yamlText) {
-        const response = await this.apiClient.requestRaw(endpoint, {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/yaml',
-                'Accept': 'application/json, text/plain, */*'
-            },
-            body: yamlText
-        });
-
-        if (!response.ok) {
-            const contentType = response.headers.get('content-type') || '';
-            let errorText = '';
-            if (contentType.includes('application/json')) {
-                const data = await response.json().catch(() => ({}));
-                errorText = data.message || data.error || '';
-            } else {
-                errorText = await response.text().catch(() => '');
-            }
-            throw new Error(errorText || `HTTP ${response.status}`);
-        }
-
-        const contentType = response.headers.get('content-type') || '';
-        if (contentType.includes('application/json')) {
-            const data = await response.json().catch(() => null);
-            if (data && data.ok === false) {
-                throw new Error(data.message || data.error || 'Server rejected the update');
-            }
-        }
-    },
-
-    registerConfigEditorListeners() {
-        if (!this.events || typeof this.events.on !== 'function') {
-            return;
-        }
-        this.events.on('data:config-loaded', async (event) => {
-            const detail = event?.detail || {};
-            try {
-                await this.loadConfigFileEditor(detail.forceRefresh || false);
-                this.refreshConfigEditor();
-            } catch (error) {
-                console.error('加载配置文件失败:', error);
-            }
-        });
-    }
-};
diff --git a/src/modules/language.js b/src/modules/language.js
deleted file mode 100644
index e2d41fd..0000000
--- a/src/modules/language.js
+++ /dev/null
@@ -1,37 +0,0 @@
-export const languageModule = {
-    setupLanguageSwitcher() {
-        const loginToggle = document.getElementById('language-toggle');
-        const mainToggle = document.getElementById('language-toggle-main');
-
-        if (loginToggle) {
-            loginToggle.addEventListener('click', () => this.toggleLanguage());
-        }
-        if (mainToggle) {
-            mainToggle.addEventListener('click', () => this.toggleLanguage());
-        }
-    },
-
-    toggleLanguage() {
-        if (this.isLanguageRefreshInProgress) {
-            return;
-        }
-        this.isLanguageRefreshInProgress = true;
-
-        const currentLang = i18n.currentLanguage;
-        const newLang = currentLang === 'zh-CN' ? 'en-US' : 'zh-CN';
-        i18n.setLanguage(newLang);
-
-        this.refreshBrandTitleAfterTextChange();
-        this.updateThemeButtons();
-        this.updateConnectionStatus();
-
-        if (this.isLoggedIn && this.isConnected && this.events && typeof this.events.emit === 'function') {
-            this.events.emit('config:refresh-requested', { forceRefresh: true });
-        }
-
-        // 简单释放锁，避免短时间内的重复触发
-        setTimeout(() => {
-            this.isLanguageRefreshInProgress = false;
-        }, 500);
-    }
-};
diff --git a/src/modules/login.js b/src/modules/login.js
deleted file mode 100644
index b2c0722..0000000
--- a/src/modules/login.js
+++ /dev/null
@@ -1,281 +0,0 @@
-import { secureStorage } from '../utils/secure-storage.js';
-
-export const loginModule = {
-    async checkLoginStatus() {
-        // 将旧的明文缓存迁移为加密格式
-        secureStorage.migratePlaintextKeys(['apiBase', 'apiUrl', 'managementKey']);
-
-        const savedBase = secureStorage.getItem('apiBase');
-        const savedKey = secureStorage.getItem('managementKey');
-        const wasLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
-
-        if (savedBase && savedKey && wasLoggedIn) {
-            try {
-                console.log(i18n.t('auto_login.title'));
-                this.showAutoLoginLoading();
-                await this.attemptAutoLogin(savedBase, savedKey);
-                return;
-            } catch (error) {
-                console.log(`${i18n.t('notification.login_failed')}: ${error.message}`);
-                localStorage.removeItem('isLoggedIn');
-                this.hideAutoLoginLoading();
-            }
-        }
-
-        this.showLoginPage();
-        this.loadLoginSettings();
-    },
-
-    showAutoLoginLoading() {
-        document.getElementById('auto-login-loading').style.display = 'flex';
-        document.getElementById('login-page').style.display = 'none';
-        document.getElementById('main-page').style.display = 'none';
-    },
-
-    hideAutoLoginLoading() {
-        document.getElementById('auto-login-loading').style.display = 'none';
-    },
-
-    async attemptAutoLogin(apiBase, managementKey) {
-        try {
-            this.setApiBase(apiBase);
-            this.setManagementKey(managementKey);
-
-            const savedProxy = localStorage.getItem('proxyUrl');
-            if (savedProxy) {
-                // 代理设置会在后续的API请求中自动使用
-            }
-
-            await this.testConnection();
-
-            this.isLoggedIn = true;
-            this.hideAutoLoginLoading();
-            this.showMainPage();
-
-            console.log(i18n.t('auto_login.title'));
-            return true;
-        } catch (error) {
-            console.error('自动登录失败:', error);
-            this.isLoggedIn = false;
-            this.isConnected = false;
-            throw error;
-        }
-    },
-
-    showLoginPage() {
-        document.getElementById('login-page').style.display = 'flex';
-        document.getElementById('main-page').style.display = 'none';
-        this.isLoggedIn = false;
-        this.resetBrandTitleState();
-        this.updateLoginConnectionInfo();
-    },
-
-    showMainPage() {
-        document.getElementById('login-page').style.display = 'none';
-        document.getElementById('main-page').style.display = 'block';
-        this.isLoggedIn = true;
-        this.updateConnectionInfo();
-        this.startBrandCollapseCycle();
-    },
-
-    async login(apiBase, managementKey) {
-        try {
-            this.setApiBase(apiBase);
-            this.setManagementKey(managementKey);
-
-            await this.testConnection();
-
-            this.isLoggedIn = true;
-            localStorage.setItem('isLoggedIn', 'true');
-
-            this.showMainPage();
-            return true;
-        } catch (error) {
-            console.error('登录失败:', error);
-            throw error;
-        }
-    },
-
-    logout() {
-        this.isLoggedIn = false;
-        this.isConnected = false;
-        this.clearCache();
-        this.stopStatusUpdateTimer();
-        this.resetVersionInfo();
-        this.setManagementKey('', { persist: false });
-        this.oauthExcludedModels = {};
-        this._oauthExcludedLoading = false;
-        if (typeof this.renderOauthExcludedModels === 'function') {
-            this.renderOauthExcludedModels('all');
-        }
-        if (typeof this.clearAvailableModels === 'function') {
-            this.clearAvailableModels('common.disconnected');
-        }
-
-        localStorage.removeItem('isLoggedIn');
-        secureStorage.removeItem('managementKey');
-
-        this.showLoginPage();
-    },
-
-    async handleLogin() {
-        const apiBaseInput = document.getElementById('login-api-base');
-        const managementKeyInput = document.getElementById('login-management-key');
-        const managementKey = managementKeyInput ? managementKeyInput.value.trim() : '';
-
-        if (!managementKey) {
-            this.showLoginError(i18n.t('login.error_required'));
-            return;
-        }
-
-        if (apiBaseInput && apiBaseInput.value.trim()) {
-            this.setApiBase(apiBaseInput.value.trim());
-        }
-
-        const submitBtn = document.getElementById('login-submit');
-        const originalText = submitBtn ? submitBtn.innerHTML : '';
-
-        try {
-            if (submitBtn) {
-                submitBtn.innerHTML = `<div class=\"loading\"></div> ${i18n.t('login.submitting')}`;
-                submitBtn.disabled = true;
-            }
-            this.hideLoginError();
-
-            this.setManagementKey(managementKey);
-
-            await this.login(this.apiBase, this.managementKey);
-        } catch (error) {
-            this.showLoginError(`${i18n.t('login.error_title')}: ${error.message}`);
-        } finally {
-            if (submitBtn) {
-                submitBtn.innerHTML = originalText;
-                submitBtn.disabled = false;
-            }
-        }
-    },
-
-    toggleLoginKeyVisibility(button) {
-        const inputGroup = button.closest('.input-group');
-        const keyInput = inputGroup.querySelector('input[type=\"password\"], input[type=\"text\"]');
-
-        if (keyInput.type === 'password') {
-            keyInput.type = 'text';
-            button.innerHTML = '<i class=\"fas fa-eye-slash\"></i>';
-        } else {
-            keyInput.type = 'password';
-            button.innerHTML = '<i class=\"fas fa-eye\"></i>';
-        }
-    },
-
-    showLoginError(message) {
-        const errorDiv = document.getElementById('login-error');
-        const errorMessage = document.getElementById('login-error-message');
-
-        errorMessage.textContent = message;
-        errorDiv.style.display = 'flex';
-    },
-
-    hideLoginError() {
-        const errorDiv = document.getElementById('login-error');
-        errorDiv.style.display = 'none';
-    },
-
-    updateConnectionInfo() {
-        const apiUrlElement = document.getElementById('display-api-url');
-        const statusElement = document.getElementById('display-connection-status');
-
-        if (apiUrlElement) {
-            apiUrlElement.textContent = this.apiBase || '-';
-        }
-
-        if (statusElement) {
-            let statusHtml = '';
-            if (this.isConnected) {
-                statusHtml = `<span class=\"status-indicator connected\"><i class=\"fas fa-circle\"></i> ${i18n.t('common.connected')}</span>`;
-            } else {
-                statusHtml = `<span class=\"status-indicator disconnected\"><i class=\"fas fa-circle\"></i> ${i18n.t('common.disconnected')}</span>`;
-            }
-            statusElement.innerHTML = statusHtml;
-        }
-    },
-
-    loadLoginSettings() {
-        const savedBase = secureStorage.getItem('apiBase');
-        const savedKey = secureStorage.getItem('managementKey');
-        const loginKeyInput = document.getElementById('login-management-key');
-        const apiBaseInput = document.getElementById('login-api-base');
-
-        if (savedBase) {
-            this.setApiBase(savedBase);
-        } else {
-            this.setApiBase(this.detectApiBaseFromLocation());
-        }
-
-        if (apiBaseInput) {
-            apiBaseInput.value = this.apiBase || '';
-        }
-
-        if (loginKeyInput && savedKey) {
-            loginKeyInput.value = savedKey;
-        }
-        this.setManagementKey(savedKey || '', { persist: false });
-
-        this.setupLoginAutoSave();
-    },
-
-    setupLoginAutoSave() {
-        const loginKeyInput = document.getElementById('login-management-key');
-        const apiBaseInput = document.getElementById('login-api-base');
-        const resetButton = document.getElementById('login-reset-api-base');
-
-        const saveKey = (val) => {
-            const trimmed = val.trim();
-            if (trimmed) {
-                this.setManagementKey(trimmed);
-            }
-        };
-        const saveKeyDebounced = this.debounce(saveKey, 500);
-
-        if (loginKeyInput) {
-            loginKeyInput.addEventListener('change', (e) => saveKey(e.target.value));
-            loginKeyInput.addEventListener('input', (e) => saveKeyDebounced(e.target.value));
-        }
-
-        if (apiBaseInput) {
-            const persistBase = (val) => {
-                const normalized = this.normalizeBase(val);
-                if (normalized) {
-                    this.setApiBase(normalized);
-                }
-            };
-            const persistBaseDebounced = this.debounce(persistBase, 500);
-
-            apiBaseInput.addEventListener('change', (e) => persistBase(e.target.value));
-            apiBaseInput.addEventListener('input', (e) => persistBaseDebounced(e.target.value));
-        }
-
-        if (resetButton) {
-            resetButton.addEventListener('click', () => {
-                const detected = this.detectApiBaseFromLocation();
-                this.setApiBase(detected);
-                if (apiBaseInput) {
-                    apiBaseInput.value = detected;
-                }
-            });
-        }
-
-        this.updateLoginConnectionInfo();
-    },
-
-    updateLoginConnectionInfo() {
-        const connectionUrlElement = document.getElementById('login-connection-url');
-        const customInput = document.getElementById('login-api-base');
-        if (connectionUrlElement) {
-            connectionUrlElement.textContent = this.apiBase || '-';
-        }
-        if (customInput && customInput !== document.activeElement) {
-            customInput.value = this.apiBase || '';
-        }
-    }
-};
diff --git a/src/modules/logs.js b/src/modules/logs.js
deleted file mode 100644
index 8d027be..0000000
--- a/src/modules/logs.js
+++ /dev/null
@@ -1,657 +0,0 @@
-export const logsModule = {
-    toggleLogsNavItem(show) {
-        const logsNavItem = document.getElementById('logs-nav-item');
-        if (logsNavItem) {
-            logsNavItem.style.display = show ? '' : 'none';
-        }
-    },
-
-    async refreshLogs(incremental = false) {
-        const logsContent = document.getElementById('logs-content');
-        if (!logsContent) return;
-
-        try {
-            if (incremental && !this.latestLogTimestamp) {
-                incremental = false;
-            }
-
-            if (!incremental) {
-                logsContent.innerHTML = '<div class="loading-placeholder" data-i18n="logs.loading">' + i18n.t('logs.loading') + '</div>';
-            }
-
-            let url = '/logs';
-            const params = new URLSearchParams();
-
-            if (incremental && this.latestLogTimestamp) {
-                params.set('after', this.latestLogTimestamp);
-            }
-
-            const logFetchLimit = Number.isFinite(this.logFetchLimit) ? this.logFetchLimit : 2500;
-            if (logFetchLimit > 0) {
-                params.set('limit', logFetchLimit);
-            }
-
-            const queryString = params.toString();
-            if (queryString) {
-                url += `?${queryString}`;
-            }
-
-            const response = await this.makeRequest(url, {
-                method: 'GET'
-            });
-
-            if (response && response.lines) {
-                if (response['latest-timestamp']) {
-                    this.latestLogTimestamp = response['latest-timestamp'];
-                }
-
-                if (incremental && response.lines.length > 0) {
-                    this.appendLogs(response.lines, response['line-count'] || 0);
-                } else if (!incremental && response.lines.length > 0) {
-                    this.renderLogs(response.lines, response['line-count'] || response.lines.length, true);
-                } else if (!incremental) {
-                    this.latestLogTimestamp = null;
-                    this.renderLogs([], 0, false);
-                }
-            } else if (!incremental) {
-                this.latestLogTimestamp = null;
-                this.renderLogs([], 0, false);
-            }
-        } catch (error) {
-            console.error('加载日志失败:', error);
-            if (!incremental) {
-                this.allLogLines = [];
-                this.displayedLogLines = [];
-                this.latestLogTimestamp = null;
-                const is404 = error.message && (error.message.includes('404') || error.message.includes('Not Found'));
-
-                if (is404) {
-                    logsContent.innerHTML = '<div class="upgrade-notice"><i class="fas fa-arrow-circle-up"></i><h3 data-i18n="logs.upgrade_required_title">' +
-                        i18n.t('logs.upgrade_required_title') + '</h3><p data-i18n="logs.upgrade_required_desc">' +
-                        i18n.t('logs.upgrade_required_desc') + '</p></div>';
-                } else {
-                    logsContent.innerHTML = '<div class="error-state"><i class="fas fa-exclamation-triangle"></i><p data-i18n="logs.load_error">' +
-                        i18n.t('logs.load_error') + '</p><p>' + error.message + '</p></div>';
-                }
-            }
-        }
-    },
-
-    renderLogs(lines, lineCount, scrollToBottom = true) {
-        const logsContent = document.getElementById('logs-content');
-        if (!logsContent) return;
-
-        const sourceLines = Array.isArray(lines) ? lines : [];
-        const filteredLines = sourceLines.filter(line => !line.includes('/v0/management/'));
-        let displayedLines = filteredLines;
-        if (filteredLines.length > this.maxDisplayLogLines) {
-            const linesToRemove = filteredLines.length - this.maxDisplayLogLines;
-            displayedLines = filteredLines.slice(linesToRemove);
-        }
-
-        this.allLogLines = displayedLines.slice();
-
-        if (displayedLines.length === 0) {
-            this.displayedLogLines = [];
-            logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i><p data-i18n="logs.empty_title">' +
-                i18n.t('logs.empty_title') + '</p><p data-i18n="logs.empty_desc">' +
-                i18n.t('logs.empty_desc') + '</p></div>';
-            return;
-        }
-
-        const visibleLines = this.filterLogLinesBySearch(displayedLines);
-        this.displayedLogLines = visibleLines.slice();
-
-        if (visibleLines.length === 0) {
-            logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-search"></i><p data-i18n="logs.search_empty_title">' +
-                i18n.t('logs.search_empty_title') + '</p><p data-i18n="logs.search_empty_desc">' +
-                i18n.t('logs.search_empty_desc') + '</p></div>';
-            return;
-        }
-
-        const displayedLineCount = this.displayedLogLines.length;
-        logsContent.innerHTML = `
-            <div class="logs-info">
-                <span><i class="fas fa-list-ol"></i> ${displayedLineCount} ${i18n.t('logs.lines')}</span>
-            </div>
-            <pre class="logs-text">${this.buildLogsHtml(this.displayedLogLines)}</pre>
-        `;
-
-        if (scrollToBottom && !this.logSearchQuery) {
-            const logsTextElement = logsContent.querySelector('.logs-text');
-            if (logsTextElement) {
-                logsTextElement.scrollTop = logsTextElement.scrollHeight;
-            }
-        }
-    },
-
-    appendLogs(newLines, totalLineCount) {
-        const logsContent = document.getElementById('logs-content');
-        if (!logsContent) return;
-
-        if (!newLines || newLines.length === 0) {
-            return;
-        }
-
-        const logsTextElement = logsContent.querySelector('.logs-text');
-        const logsInfoElement = logsContent.querySelector('.logs-info');
-
-        const filteredNewLines = newLines.filter(line => !line.includes('/v0/management/'));
-        if (filteredNewLines.length === 0) {
-            return;
-        }
-
-        if (!logsTextElement) {
-            this.renderLogs(filteredNewLines, totalLineCount || filteredNewLines.length, true);
-            return;
-        }
-
-        const isAtBottom = logsTextElement.scrollHeight - logsTextElement.scrollTop - logsTextElement.clientHeight < 50;
-
-        const baseLines = Array.isArray(this.allLogLines) && this.allLogLines.length > 0
-            ? this.allLogLines
-            : (Array.isArray(this.displayedLogLines) ? this.displayedLogLines : []);
-
-        this.allLogLines = baseLines.concat(filteredNewLines);
-        if (this.allLogLines.length > this.maxDisplayLogLines) {
-            this.allLogLines = this.allLogLines.slice(this.allLogLines.length - this.maxDisplayLogLines);
-        }
-
-        const visibleLines = this.filterLogLinesBySearch(this.allLogLines);
-        this.displayedLogLines = visibleLines.slice();
-
-        if (visibleLines.length === 0) {
-            this.renderLogs(this.allLogLines, this.allLogLines.length, false);
-            return;
-        }
-
-        logsTextElement.innerHTML = this.buildLogsHtml(this.displayedLogLines);
-
-        if (logsInfoElement) {
-            const displayedLines = this.displayedLogLines.length;
-            logsInfoElement.innerHTML = `<span><i class="fas fa-list-ol"></i> ${displayedLines} ${i18n.t('logs.lines')}</span>`;
-        }
-
-        if (isAtBottom && !this.logSearchQuery) {
-            logsTextElement.scrollTop = logsTextElement.scrollHeight;
-        }
-    },
-
-    filterLogLinesBySearch(lines) {
-        const keyword = (this.logSearchQuery || '').toLowerCase();
-        if (!keyword) {
-            return Array.isArray(lines) ? lines.slice() : [];
-        }
-        if (!Array.isArray(lines) || lines.length === 0) {
-            return [];
-        }
-        return lines.filter(line => (line || '').toLowerCase().includes(keyword));
-    },
-
-    updateLogSearchQuery(value = '') {
-        const normalized = (value || '').trim();
-        if (this.logSearchQuery === normalized) {
-            return;
-        }
-        this.logSearchQuery = normalized;
-        this.applyLogSearchFilter();
-    },
-
-    applyLogSearchFilter() {
-        const logsContent = document.getElementById('logs-content');
-        if (!logsContent) return;
-        if (logsContent.querySelector('.upgrade-notice') || logsContent.querySelector('.error-state')) {
-            return;
-        }
-        const baseLines = Array.isArray(this.allLogLines) ? this.allLogLines : [];
-        if (baseLines.length === 0 && logsContent.querySelector('.loading-placeholder')) {
-            return;
-        }
-        this.renderLogs(baseLines, baseLines.length, false);
-    },
-
-    buildLogsHtml(lines) {
-        if (!lines || lines.length === 0) {
-            return '';
-        }
-
-        return lines.map(line => {
-            let processedLine = line.replace(/\[GIN\]\s+\d{4}\/\d{2}\/\d{2}\s+-\s+\d{2}:\d{2}:\d{2}\s+/g, '');
-            const highlights = [];
-
-            const statusInfo = this.detectHttpStatus(line);
-            if (statusInfo) {
-                const statusPattern = new RegExp(`\\b${statusInfo.code}\\b`);
-                const match = statusPattern.exec(processedLine);
-                if (match) {
-                    highlights.push({
-                        start: match.index,
-                        end: match.index + match[0].length,
-                        className: `log-status-tag log-status-${statusInfo.bucket}`,
-                        priority: 10
-                    });
-                }
-            }
-
-            const timestampPattern = /\d{4}[-/]\d{2}[-/]\d{2}[T]\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})?|\[\d{2}:\d{2}:\d{2}\]/g;
-            let match;
-            while ((match = timestampPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-timestamp',
-                    priority: 5
-                });
-            }
-
-            const bracketTimestampPattern = /\[\d{4}[-/]\d{2}[-/]\d{2}\s+\d{2}:\d{2}:\d{2}(?:\.\d+)?\]/g;
-            while ((match = bracketTimestampPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-timestamp',
-                    priority: 5
-                });
-            }
-
-            const levelPattern = /\[(ERROR|ERRO|ERR|FATAL|CRITICAL|CRIT|WARN|WARNING|INFO|DEBUG|TRACE|PANIC)\]/gi;
-            while ((match = levelPattern.exec(processedLine)) !== null) {
-                const level = match[1].toUpperCase();
-                let className = 'log-level';
-                if (['ERROR', 'ERRO', 'ERR', 'FATAL', 'CRITICAL', 'CRIT', 'PANIC'].includes(level)) {
-                    className += ' log-level-error';
-                } else if (['WARN', 'WARNING'].includes(level)) {
-                    className += ' log-level-warn';
-                } else if (level === 'INFO') {
-                    className += ' log-level-info';
-                } else if (['DEBUG', 'TRACE'].includes(level)) {
-                    className += ' log-level-debug';
-                }
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className,
-                    priority: 8
-                });
-            }
-
-            const methodPattern = /\b(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\b/g;
-            while ((match = methodPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-http-method',
-                    priority: 6
-                });
-            }
-
-            const urlPattern = /(https?:\/\/[^\s<>"']+)/g;
-            while ((match = urlPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-path',
-                    priority: 4
-                });
-            }
-
-            const ipPattern = /\b(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\b/g;
-            while ((match = ipPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-ip',
-                    priority: 7
-                });
-            }
-
-            const successPattern = /\b(success|successful|succeeded|completed|ok|done|passed)\b/gi;
-            while ((match = successPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-keyword-success',
-                    priority: 3
-                });
-            }
-
-            const errorPattern = /\b(failed|failure|error|exception|panic|fatal|critical|aborted|denied|refused|timeout|invalid)\b/gi;
-            while ((match = errorPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-keyword-error',
-                    priority: 3
-                });
-            }
-
-            const headersPattern = /\b(x-[a-z0-9-]+|authorization|content-type|user-agent)\b/gi;
-            while ((match = headersPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-header-key',
-                    priority: 2
-                });
-            }
-
-            highlights.sort((a, b) => {
-                if (a.start === b.start) {
-                    return b.priority - a.priority;
-                }
-                return a.start - b.start;
-            });
-
-            let cursor = 0;
-            let result = '';
-
-            highlights.forEach((highlight) => {
-                if (highlight.start < cursor) {
-                    return;
-                }
-
-                result += this.escapeHtml(processedLine.slice(cursor, highlight.start));
-                result += `<span class="${highlight.className}">${this.escapeHtml(processedLine.slice(highlight.start, highlight.end))}</span>`;
-                cursor = highlight.end;
-            });
-
-            result += this.escapeHtml(processedLine.slice(cursor));
-
-            return `<span class="log-line">${result}</span>`;
-        }).join('');
-    },
-
-    detectHttpStatus(line) {
-        if (!line) return null;
-
-        const patterns = [
-            /\|\s*([1-5]\d{2})\s*\|/,
-            /\b([1-5]\d{2})\s*-/,
-            /\b(?:GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\s+\S+\s+([1-5]\d{2})\b/,
-            /\b(?:status|code|http)[:\s]+([1-5]\d{2})\b/i,
-            /\b([1-5]\d{2})\s+(?:OK|Created|Accepted|No Content|Moved|Found|Bad Request|Unauthorized|Forbidden|Not Found|Method Not Allowed|Internal Server Error|Bad Gateway|Service Unavailable|Gateway Timeout)\b/i
-        ];
-
-        for (const pattern of patterns) {
-            const match = line.match(pattern);
-            if (match) {
-                const code = parseInt(match[1], 10);
-                if (Number.isNaN(code)) {
-                    continue;
-                }
-
-                if (code >= 500) {
-                    return { code, bucket: '5xx', match: match[1] };
-                }
-                if (code >= 400) {
-                    return { code, bucket: '4xx', match: match[1] };
-                }
-                if (code >= 300) {
-                    return { code, bucket: '3xx', match: match[1] };
-                }
-                if (code >= 200) {
-                    return { code, bucket: '2xx', match: match[1] };
-                }
-                if (code >= 100) {
-                    return { code, bucket: '1xx', match: match[1] };
-                }
-            }
-        }
-
-        return null;
-    },
-
-    async openErrorLogsModal() {
-        const modalBody = document.getElementById('modal-body');
-        if (!modalBody) return;
-
-        modalBody.innerHTML = `
-            <h3>${i18n.t('logs.error_logs_modal_title')}</h3>
-            <div class="provider-item">
-                <div class="item-content">
-                    <p class="form-hint">${i18n.t('logs.error_logs_description')}</p>
-                    <div class="loading-placeholder">${i18n.t('common.loading')}</div>
-                </div>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.close')}</button>
-            </div>
-        `;
-        this.showModal();
-
-        try {
-            const response = await this.makeRequest('/request-error-logs', {
-                method: 'GET'
-            });
-            const files = Array.isArray(response?.files) ? response.files.slice() : [];
-            if (files.length > 1) {
-                files.sort((a, b) => (b.modified || 0) - (a.modified || 0));
-            }
-            modalBody.innerHTML = this.buildErrorLogsModal(files);
-            this.showModal();
-            this.bindErrorLogDownloadButtons();
-        } catch (error) {
-            console.error('加载错误日志列表失败:', error);
-            modalBody.innerHTML = `
-                <h3>${i18n.t('logs.error_logs_modal_title')}</h3>
-                <div class="provider-item">
-                    <div class="item-content">
-                        <div class="error-state">
-                            <i class="fas fa-exclamation-triangle"></i>
-                            <p>${i18n.t('logs.error_logs_load_error')}</p>
-                            <p>${this.escapeHtml(error.message || '')}</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-actions">
-                    <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.close')}</button>
-                </div>
-            `;
-            this.showNotification(`${i18n.t('logs.error_logs_load_error')}: ${error.message}`, 'error');
-        }
-    },
-
-    buildErrorLogsModal(files) {
-        const listHtml = Array.isArray(files) && files.length > 0
-            ? files.map(file => this.buildErrorLogCard(file)).join('')
-            : `
-                <div class="empty-state">
-                    <i class="fas fa-inbox"></i>
-                    <h3>${i18n.t('logs.error_logs_empty')}</h3>
-                    <p>${i18n.t('logs.error_logs_description')}</p>
-                </div>
-            `;
-
-        return `
-            <h3>${i18n.t('logs.error_logs_modal_title')}</h3>
-            <p class="form-hint">${i18n.t('logs.error_logs_description')}</p>
-            <div class="provider-list">
-                ${listHtml}
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.close')}</button>
-            </div>
-        `;
-    },
-
-    buildErrorLogCard(file) {
-        const name = file?.name || '';
-        const size = typeof file?.size === 'number' ? this.formatFileSize(file.size) : '-';
-        const modified = file?.modified ? this.formatErrorLogTime(file.modified) : '-';
-        return `
-            <div class="provider-item">
-                <div class="item-content">
-                    <div class="item-title">${this.escapeHtml(name)}</div>
-                    <div class="item-subtitle">${i18n.t('logs.error_logs_size')}: ${this.escapeHtml(size)}</div>
-                    <div class="item-subtitle">${i18n.t('logs.error_logs_modified')}: ${this.escapeHtml(modified)}</div>
-                </div>
-                <div class="item-actions">
-                    <button class="btn btn-secondary error-log-download-btn" data-log-name="${this.escapeHtml(name)}">
-                        <i class="fas fa-download"></i> ${i18n.t('logs.error_logs_download')}
-                    </button>
-                </div>
-            </div>
-        `;
-    },
-
-    bindErrorLogDownloadButtons() {
-        const modalBody = document.getElementById('modal-body');
-        if (!modalBody) return;
-        const buttons = modalBody.querySelectorAll('.error-log-download-btn');
-        buttons.forEach(button => {
-            button.onclick = () => {
-                const filename = button.getAttribute('data-log-name');
-                if (filename) {
-                    this.downloadErrorLog(filename);
-                }
-            };
-        });
-    },
-
-    formatErrorLogTime(timestamp) {
-        const numeric = Number(timestamp);
-        if (!Number.isFinite(numeric) || numeric <= 0) {
-            return '-';
-        }
-        const date = new Date(numeric * 1000);
-        if (Number.isNaN(date.getTime())) {
-            return '-';
-        }
-        const locale = i18n?.currentLanguage || undefined;
-        return date.toLocaleString(locale);
-    },
-
-    async downloadErrorLog(filename) {
-        if (!filename) return;
-        try {
-            const response = await this.apiClient.requestRaw(`/request-error-logs/${encodeURIComponent(filename)}`, {
-                method: 'GET'
-            });
-
-            if (!response.ok) {
-                let errorMessage = `HTTP ${response.status}`;
-                try {
-                    const errorData = await response.json();
-                    if (errorData && errorData.error) {
-                        errorMessage = errorData.error;
-                    }
-                } catch (parseError) {
-                    // ignore JSON parse error and use default message
-                }
-                throw new Error(errorMessage);
-            }
-
-            const blob = await response.blob();
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = filename;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            window.URL.revokeObjectURL(url);
-            this.showNotification(i18n.t('logs.error_log_download_success'), 'success');
-        } catch (error) {
-            console.error('下载错误日志失败:', error);
-            this.showNotification(`${i18n.t('notification.download_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    async downloadLogs() {
-        try {
-            const response = await this.makeRequest('/logs', {
-                method: 'GET'
-            });
-
-            if (response && response.lines && response.lines.length > 0) {
-                const logsText = response.lines.join('\n');
-                const blob = new Blob([logsText], { type: 'text/plain' });
-                const url = window.URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `cli-proxy-api-logs-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.log`;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                window.URL.revokeObjectURL(url);
-                this.showNotification(i18n.t('logs.download_success'), 'success');
-            } else {
-                this.showNotification(i18n.t('logs.empty_title'), 'info');
-            }
-        } catch (error) {
-            console.error('下载日志失败:', error);
-            this.showNotification(`${i18n.t('notification.download_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    async clearLogs() {
-        if (!confirm(i18n.t('logs.clear_confirm'))) {
-            return;
-        }
-
-        try {
-            const response = await this.makeRequest('/logs', {
-                method: 'DELETE'
-            });
-
-            if (response && response.status === 'ok') {
-                const removedCount = response.removed || 0;
-                const message = `${i18n.t('logs.clear_success')} (${i18n.t('logs.removed')}: ${removedCount} ${i18n.t('logs.lines')})`;
-                this.showNotification(message, 'success');
-            } else {
-                this.showNotification(i18n.t('logs.clear_success'), 'success');
-            }
-
-            this.latestLogTimestamp = null;
-            await this.refreshLogs(false);
-        } catch (error) {
-            console.error('清空日志失败:', error);
-            this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    toggleLogsAutoRefresh(enabled) {
-        if (enabled) {
-            if (this.logsRefreshTimer) {
-                clearInterval(this.logsRefreshTimer);
-            }
-            this.logsRefreshTimer = setInterval(() => {
-                const logsSection = document.getElementById('logs');
-                if (logsSection && logsSection.classList.contains('active')) {
-                    this.refreshLogs(true);
-                }
-            }, 5000);
-            this.showNotification(i18n.t('logs.auto_refresh_enabled'), 'success');
-        } else {
-            if (this.logsRefreshTimer) {
-                clearInterval(this.logsRefreshTimer);
-                this.logsRefreshTimer = null;
-            }
-            this.showNotification(i18n.t('logs.auto_refresh_disabled'), 'info');
-        }
-    },
-
-    registerLogsListeners() {
-        if (!this.events || typeof this.events.on !== 'function') {
-            return;
-        }
-        this.events.on('connection:status-changed', (event) => {
-            const detail = event?.detail || {};
-            if (detail.isConnected) {
-                // 仅在日志页激活时刷新，避免非日志页面触发请求
-                const logsSection = document.getElementById('logs');
-                if (logsSection && logsSection.classList.contains('active')) {
-                    this.refreshLogs(false);
-                }
-            } else {
-                this.latestLogTimestamp = null;
-            }
-        });
-        this.events.on('navigation:section-activated', (event) => {
-            const detail = event?.detail || {};
-            if (detail.sectionId === 'logs' && this.isConnected) {
-                this.refreshLogs(false);
-            }
-        });
-    }
-};
diff --git a/src/modules/navigation.js b/src/modules/navigation.js
deleted file mode 100644
index bf205ac..0000000
--- a/src/modules/navigation.js
+++ /dev/null
@@ -1,103 +0,0 @@
-export const navigationModule = {
-    setupNavigation() {
-        const navItems = document.querySelectorAll('.nav-item');
-        navItems.forEach(item => {
-            item.addEventListener('click', (e) => {
-                e.preventDefault();
-
-                navItems.forEach(nav => nav.classList.remove('active'));
-                document.querySelectorAll('.content-section').forEach(section => section.classList.remove('active'));
-
-                item.classList.add('active');
-                const sectionId = item.getAttribute('data-section');
-                const section = document.getElementById(sectionId);
-                if (section) {
-                    section.classList.add('active');
-                }
-
-                if (sectionId === 'config-management') {
-                    this.loadConfigFileEditor();
-                    this.refreshConfigEditor();
-                }
-                if (this.events && typeof this.events.emit === 'function') {
-                    this.events.emit('navigation:section-activated', { sectionId });
-                }
-            });
-        });
-    },
-
-    toggleMobileSidebar() {
-        const sidebar = document.getElementById('sidebar');
-        const overlay = document.getElementById('sidebar-overlay');
-        const layout = document.getElementById('layout-container');
-        const mainWrapper = document.getElementById('main-wrapper');
-
-        if (sidebar && overlay) {
-            const isOpen = sidebar.classList.toggle('mobile-open');
-            overlay.classList.toggle('active');
-            if (layout) {
-                layout.classList.toggle('sidebar-open', isOpen);
-            }
-            if (mainWrapper) {
-                mainWrapper.classList.toggle('sidebar-open', isOpen);
-            }
-        }
-    },
-
-    closeMobileSidebar() {
-        const sidebar = document.getElementById('sidebar');
-        const overlay = document.getElementById('sidebar-overlay');
-        const layout = document.getElementById('layout-container');
-        const mainWrapper = document.getElementById('main-wrapper');
-
-        if (sidebar && overlay) {
-            sidebar.classList.remove('mobile-open');
-            overlay.classList.remove('active');
-            if (layout) {
-                layout.classList.remove('sidebar-open');
-            }
-            if (mainWrapper) {
-                mainWrapper.classList.remove('sidebar-open');
-            }
-        }
-    },
-
-    toggleSidebar() {
-        const sidebar = document.getElementById('sidebar');
-        const layout = document.getElementById('layout-container');
-
-        if (sidebar && layout) {
-            const isCollapsed = sidebar.classList.toggle('collapsed');
-            layout.classList.toggle('sidebar-collapsed', isCollapsed);
-
-            localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
-
-            const toggleBtn = document.getElementById('sidebar-toggle-btn-desktop');
-            if (toggleBtn) {
-                toggleBtn.setAttribute('data-i18n-title', isCollapsed ? 'sidebar.toggle_expand' : 'sidebar.toggle_collapse');
-                toggleBtn.title = i18n.t(isCollapsed ? 'sidebar.toggle_expand' : 'sidebar.toggle_collapse');
-            }
-        }
-    },
-
-    restoreSidebarState() {
-        if (window.innerWidth > 1024) {
-            const savedState = localStorage.getItem('sidebarCollapsed');
-            if (savedState === 'true') {
-                const sidebar = document.getElementById('sidebar');
-                const layout = document.getElementById('layout-container');
-
-                if (sidebar && layout) {
-                    sidebar.classList.add('collapsed');
-                    layout.classList.add('sidebar-collapsed');
-
-                    const toggleBtn = document.getElementById('sidebar-toggle-btn-desktop');
-                    if (toggleBtn) {
-                        toggleBtn.setAttribute('data-i18n-title', 'sidebar.toggle_expand');
-                        toggleBtn.title = i18n.t('sidebar.toggle_expand');
-                    }
-                }
-            }
-        }
-    }
-};
diff --git a/src/modules/oauth.js b/src/modules/oauth.js
deleted file mode 100644
index 61e7ad5..0000000
--- a/src/modules/oauth.js
+++ /dev/null
@@ -1,949 +0,0 @@
-export const oauthModule = {
-    // ===== Codex OAuth 相关方法 =====
-
-    // 开始 Codex OAuth 流程
-    async startCodexOAuth() {
-        try {
-            const response = await this.makeRequest('/codex-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('codex-oauth-url');
-            const content = document.getElementById('codex-oauth-content');
-            const status = document.getElementById('codex-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.codex_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startCodexOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.codex_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 从 URL 中提取 state 参数
-    extractStateFromUrl(url) {
-        try {
-            const urlObj = new URL(url);
-            return urlObj.searchParams.get('state');
-        } catch (error) {
-            console.error('Failed to extract state from URL:', error);
-            return null;
-        }
-    },
-
-    // 打开 Codex 授权链接
-    openCodexLink() {
-        const urlInput = document.getElementById('codex-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Codex 授权链接
-    async copyCodexLink() {
-        const urlInput = document.getElementById('codex-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 OAuth 状态
-    startCodexOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('codex-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetCodexOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.codex_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.codex_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.codex_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetCodexOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.codex_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('codex-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.codex_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.codex_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetCodexOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Codex OAuth UI 到初始状态
-    resetCodexOAuthUI() {
-        const urlInput = document.getElementById('codex-oauth-url');
-        const content = document.getElementById('codex-oauth-content');
-        const status = document.getElementById('codex-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== Anthropic OAuth 相关方法 =====
-
-    // 开始 Anthropic OAuth 流程
-    async startAnthropicOAuth() {
-        try {
-            const response = await this.makeRequest('/anthropic-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('anthropic-oauth-url');
-            const content = document.getElementById('anthropic-oauth-content');
-            const status = document.getElementById('anthropic-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.anthropic_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startAnthropicOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.anthropic_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 Anthropic 授权链接
-    openAnthropicLink() {
-        const urlInput = document.getElementById('anthropic-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Anthropic 授权链接
-    async copyAnthropicLink() {
-        const urlInput = document.getElementById('anthropic-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 Anthropic OAuth 状态
-    startAnthropicOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('anthropic-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetAnthropicOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.anthropic_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.anthropic_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.anthropic_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetAnthropicOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.anthropic_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('anthropic-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.anthropic_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.anthropic_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetAnthropicOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Anthropic OAuth UI 到初始状态
-    resetAnthropicOAuthUI() {
-        const urlInput = document.getElementById('anthropic-oauth-url');
-        const content = document.getElementById('anthropic-oauth-content');
-        const status = document.getElementById('anthropic-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== Antigravity OAuth 相关方法 =====
-
-    // 开始 Antigravity OAuth 流程
-    async startAntigravityOAuth() {
-        try {
-            const response = await this.makeRequest('/antigravity-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = response.state || this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('antigravity-oauth-url');
-            const content = document.getElementById('antigravity-oauth-content');
-            const status = document.getElementById('antigravity-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.antigravity_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startAntigravityOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.antigravity_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 Antigravity 授权链接
-    openAntigravityLink() {
-        const urlInput = document.getElementById('antigravity-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Antigravity 授权链接
-    async copyAntigravityLink() {
-        const urlInput = document.getElementById('antigravity-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 Antigravity OAuth 状态
-    startAntigravityOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('antigravity-oauth-status');
-
-                if (status === 'ok') {
-                    clearInterval(pollInterval);
-                    this.resetAntigravityOAuthUI();
-                    this.showNotification(i18n.t('auth_login.antigravity_oauth_status_success'), 'success');
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.antigravity_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.antigravity_oauth_status_error')} ${errorMessage}`, 'error');
-                    setTimeout(() => {
-                        this.resetAntigravityOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.antigravity_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('antigravity-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.antigravity_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.antigravity_oauth_polling_error')} ${error.message}`, 'error');
-                setTimeout(() => {
-                    this.resetAntigravityOAuthUI();
-                }, 3000);
-            }
-        }, 2000);
-
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Antigravity OAuth UI 到初始状态
-    resetAntigravityOAuthUI() {
-        const urlInput = document.getElementById('antigravity-oauth-url');
-        const content = document.getElementById('antigravity-oauth-content');
-        const status = document.getElementById('antigravity-oauth-status');
-
-        if (urlInput) {
-            urlInput.value = '';
-        }
-        if (content) {
-            content.style.display = 'none';
-        }
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== Gemini CLI OAuth 相关方法 =====
-
-    // 开始 Gemini CLI OAuth 流程
-    async startGeminiCliOAuth() {
-        try {
-            const response = await this.makeRequest('/gemini-cli-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('gemini-cli-oauth-url');
-            const content = document.getElementById('gemini-cli-oauth-content');
-            const status = document.getElementById('gemini-cli-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.gemini_cli_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startGeminiCliOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.gemini_cli_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 Gemini CLI 授权链接
-    openGeminiCliLink() {
-        const urlInput = document.getElementById('gemini-cli-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Gemini CLI 授权链接
-    async copyGeminiCliLink() {
-        const urlInput = document.getElementById('gemini-cli-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 Gemini CLI OAuth 状态
-    startGeminiCliOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('gemini-cli-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetGeminiCliOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.gemini_cli_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.gemini_cli_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.gemini_cli_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetGeminiCliOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.gemini_cli_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('gemini-cli-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.gemini_cli_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.gemini_cli_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetGeminiCliOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Gemini CLI OAuth UI 到初始状态
-    resetGeminiCliOAuthUI() {
-        const urlInput = document.getElementById('gemini-cli-oauth-url');
-        const content = document.getElementById('gemini-cli-oauth-content');
-        const status = document.getElementById('gemini-cli-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== Qwen OAuth 相关方法 =====
-
-    // 开始 Qwen OAuth 流程
-    async startQwenOAuth() {
-        try {
-            const response = await this.makeRequest('/qwen-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('qwen-oauth-url');
-            const content = document.getElementById('qwen-oauth-content');
-            const status = document.getElementById('qwen-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.qwen_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startQwenOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.qwen_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 Qwen 授权链接
-    openQwenLink() {
-        const urlInput = document.getElementById('qwen-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Qwen 授权链接
-    async copyQwenLink() {
-        const urlInput = document.getElementById('qwen-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 Qwen OAuth 状态
-    startQwenOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('qwen-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetQwenOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.qwen_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.qwen_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.qwen_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetQwenOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.qwen_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('qwen-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.qwen_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.qwen_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetQwenOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Qwen OAuth UI 到初始状态
-    resetQwenOAuthUI() {
-        const urlInput = document.getElementById('qwen-oauth-url');
-        const content = document.getElementById('qwen-oauth-content');
-        const status = document.getElementById('qwen-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== iFlow OAuth 相关方法 =====
-
-    // 开始 iFlow OAuth 流程
-    async startIflowOAuth() {
-        try {
-            const response = await this.makeRequest('/iflow-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('iflow-oauth-url');
-            const content = document.getElementById('iflow-oauth-content');
-            const status = document.getElementById('iflow-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.iflow_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startIflowOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.iflow_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 iFlow 授权链接
-    openIflowLink() {
-        const urlInput = document.getElementById('iflow-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 iFlow 授权链接
-    async copyIflowLink() {
-        const urlInput = document.getElementById('iflow-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 iFlow OAuth 状态
-    startIflowOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('iflow-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetIflowOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.iflow_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.iflow_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.iflow_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetIflowOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.iflow_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('iflow-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.iflow_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.iflow_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetIflowOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 iFlow OAuth UI 到初始状态
-    resetIflowOAuthUI() {
-        const urlInput = document.getElementById('iflow-oauth-url');
-        const content = document.getElementById('iflow-oauth-content');
-        const status = document.getElementById('iflow-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // 提交 iFlow Cookie 登录
-    async submitIflowCookieLogin() {
-        const cookieInput = document.getElementById('iflow-cookie-input');
-        const statusEl = document.getElementById('iflow-cookie-status');
-        const submitBtn = document.getElementById('iflow-cookie-submit');
-        const cookieValue = cookieInput ? cookieInput.value.trim() : '';
-
-        this.renderIflowCookieResult(null);
-
-        if (!cookieValue) {
-            this.showNotification(i18n.t('auth_login.iflow_cookie_required'), 'error');
-            if (statusEl) {
-                statusEl.textContent = `${i18n.t('auth_login.iflow_cookie_status_error')} ${i18n.t('auth_login.iflow_cookie_required')}`;
-                statusEl.style.color = 'var(--error-text)';
-            }
-            return;
-        }
-
-        try {
-            if (submitBtn) {
-                submitBtn.disabled = true;
-            }
-            if (statusEl) {
-                statusEl.textContent = i18n.t('auth_login.iflow_oauth_status_waiting');
-                statusEl.style.color = 'var(--warning-text)';
-            }
-
-            const response = await this.makeRequest('/iflow-auth-url', {
-                method: 'POST',
-                body: JSON.stringify({ cookie: cookieValue })
-            });
-
-            this.renderIflowCookieResult(response);
-            if (statusEl) {
-                statusEl.textContent = i18n.t('auth_login.iflow_cookie_status_success');
-                statusEl.style.color = 'var(--success-text)';
-            }
-            if (cookieInput) {
-                cookieInput.value = '';
-            }
-
-            this.showNotification(i18n.t('auth_login.iflow_cookie_status_success'), 'success');
-            this.loadAuthFiles();
-        } catch (error) {
-            if (statusEl) {
-                statusEl.textContent = `${i18n.t('auth_login.iflow_cookie_status_error')} ${error.message}`;
-                statusEl.style.color = 'var(--error-text)';
-            }
-            this.showNotification(`${i18n.t('auth_login.iflow_cookie_start_error')} ${error.message}`, 'error');
-        } finally {
-            if (submitBtn) {
-                submitBtn.disabled = false;
-            }
-        }
-    },
-
-    renderIflowCookieResult(result = null) {
-        const container = document.getElementById('iflow-cookie-result');
-        const emailEl = document.getElementById('iflow-cookie-result-email');
-        const expiredEl = document.getElementById('iflow-cookie-result-expired');
-        const pathEl = document.getElementById('iflow-cookie-result-path');
-        const typeEl = document.getElementById('iflow-cookie-result-type');
-
-        if (!container || !emailEl || !expiredEl || !pathEl || !typeEl) {
-            return;
-        }
-
-        if (!result) {
-            container.style.display = 'none';
-            emailEl.textContent = '-';
-            expiredEl.textContent = '-';
-            pathEl.textContent = '-';
-            typeEl.textContent = '-';
-            return;
-        }
-
-        emailEl.textContent = result.email || '-';
-        expiredEl.textContent = result.expired || '-';
-        pathEl.textContent = result.saved_path || result.savedPath || result.path || '-';
-        typeEl.textContent = result.type || '-';
-        container.style.display = 'block';
-    }
-};
diff --git a/src/modules/settings.js b/src/modules/settings.js
deleted file mode 100644
index 6e83e1d..0000000
--- a/src/modules/settings.js
+++ /dev/null
@@ -1,411 +0,0 @@
-// 设置与开关相关方法模块
-// 注意：这些函数依赖于在 CLIProxyManager 实例上提供的 makeRequest/clearCache/showNotification/errorHandler 等基础能力
-
-export async function updateDebug(enabled) {
-    const previousValue = !enabled;
-    try {
-        await this.makeRequest('/debug', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache('debug'); // 仅清除 debug 配置段的缓存
-        this.showNotification(i18n.t('notification.debug_updated'), 'success');
-    } catch (error) {
-        this.errorHandler.handleUpdateError(
-            error,
-            i18n.t('settings.debug_mode') || '调试模式',
-            () => document.getElementById('debug-toggle').checked = previousValue
-        );
-    }
-}
-
-export async function updateProxyUrl() {
-    const proxyUrl = document.getElementById('proxy-url').value.trim();
-    const previousValue = document.getElementById('proxy-url').getAttribute('data-previous-value') || '';
-
-    try {
-        await this.makeRequest('/proxy-url', {
-            method: 'PUT',
-            body: JSON.stringify({ value: proxyUrl })
-        });
-        this.clearCache('proxy-url'); // 仅清除 proxy-url 配置段的缓存
-        document.getElementById('proxy-url').setAttribute('data-previous-value', proxyUrl);
-        this.showNotification(i18n.t('notification.proxy_updated'), 'success');
-    } catch (error) {
-        this.errorHandler.handleUpdateError(
-            error,
-            i18n.t('settings.proxy_url') || '代理设置',
-            () => document.getElementById('proxy-url').value = previousValue
-        );
-    }
-}
-
-export async function clearProxyUrl() {
-    const previousValue = document.getElementById('proxy-url').value;
-
-    try {
-        await this.makeRequest('/proxy-url', { method: 'DELETE' });
-        document.getElementById('proxy-url').value = '';
-        document.getElementById('proxy-url').setAttribute('data-previous-value', '');
-        this.clearCache('proxy-url'); // 仅清除 proxy-url 配置段的缓存
-        this.showNotification(i18n.t('notification.proxy_cleared'), 'success');
-    } catch (error) {
-        this.errorHandler.handleUpdateError(
-            error,
-            i18n.t('settings.proxy_url') || '代理设置',
-            () => document.getElementById('proxy-url').value = previousValue
-        );
-    }
-}
-
-export async function updateRequestRetry() {
-    const retryInput = document.getElementById('request-retry');
-    const retryCount = parseInt(retryInput.value);
-    const previousValue = retryInput.getAttribute('data-previous-value') || '0';
-
-    try {
-        await this.makeRequest('/request-retry', {
-            method: 'PUT',
-            body: JSON.stringify({ value: retryCount })
-        });
-        this.clearCache('request-retry'); // 仅清除 request-retry 配置段的缓存
-        retryInput.setAttribute('data-previous-value', retryCount.toString());
-        this.showNotification(i18n.t('notification.retry_updated'), 'success');
-    } catch (error) {
-        this.errorHandler.handleUpdateError(
-            error,
-            i18n.t('settings.request_retry') || '重试设置',
-            () => retryInput.value = previousValue
-        );
-    }
-}
-
-export async function loadDebugSettings() {
-    try {
-        const debugValue = await this.getConfig('debug'); // 仅获取 debug 配置段
-        if (debugValue !== undefined) {
-            document.getElementById('debug-toggle').checked = debugValue;
-        }
-    } catch (error) {
-        this.errorHandler.handleLoadError(error, i18n.t('settings.debug_mode') || '调试设置');
-    }
-}
-
-export async function loadProxySettings() {
-    try {
-        const proxyUrl = await this.getConfig('proxy-url'); // 仅获取 proxy-url 配置段
-        const proxyInput = document.getElementById('proxy-url');
-        if (proxyUrl !== undefined) {
-            proxyInput.value = proxyUrl || '';
-            proxyInput.setAttribute('data-previous-value', proxyUrl || '');
-        }
-    } catch (error) {
-        this.errorHandler.handleLoadError(error, i18n.t('settings.proxy_settings') || '代理设置');
-    }
-}
-
-export async function loadRetrySettings() {
-    try {
-        const config = await this.getConfig();
-        if (config['request-retry'] !== undefined) {
-            document.getElementById('request-retry').value = config['request-retry'];
-        }
-    } catch (error) {
-        console.error('加载重试设置失败:', error);
-    }
-}
-
-export async function loadQuotaSettings() {
-    try {
-        const config = await this.getConfig();
-        if (config['quota-exceeded']) {
-            if (config['quota-exceeded']['switch-project'] !== undefined) {
-                document.getElementById('switch-project-toggle').checked = config['quota-exceeded']['switch-project'];
-            }
-            if (config['quota-exceeded']['switch-preview-model'] !== undefined) {
-                document.getElementById('switch-preview-model-toggle').checked = config['quota-exceeded']['switch-preview-model'];
-            }
-        }
-    } catch (error) {
-        console.error('加载配额设置失败:', error);
-    }
-}
-
-export async function loadUsageStatisticsSettings() {
-    try {
-        const config = await this.getConfig();
-        if (config['usage-statistics-enabled'] !== undefined) {
-            const usageToggle = document.getElementById('usage-statistics-enabled-toggle');
-            if (usageToggle) {
-                usageToggle.checked = config['usage-statistics-enabled'];
-            }
-        }
-    } catch (error) {
-        console.error('加载使用统计设置失败:', error);
-    }
-}
-
-export async function loadRequestLogSetting() {
-    try {
-        const config = await this.getConfig();
-        if (config['request-log'] !== undefined) {
-            const requestLogToggle = document.getElementById('request-log-toggle');
-            if (requestLogToggle) {
-                requestLogToggle.checked = config['request-log'];
-            }
-        }
-    } catch (error) {
-        console.error('加载请求日志设置失败:', error);
-    }
-}
-
-export async function loadWsAuthSetting() {
-    try {
-        const config = await this.getConfig();
-        if (config['ws-auth'] !== undefined) {
-            const wsAuthToggle = document.getElementById('ws-auth-toggle');
-            if (wsAuthToggle) {
-                wsAuthToggle.checked = config['ws-auth'];
-            }
-        }
-    } catch (error) {
-        console.error('加载 WebSocket 鉴权设置失败:', error);
-    }
-}
-
-export async function updateUsageStatisticsEnabled(enabled) {
-    try {
-        await this.makeRequest('/usage-statistics-enabled', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache();
-        this.showNotification(i18n.t('notification.usage_statistics_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        const usageToggle = document.getElementById('usage-statistics-enabled-toggle');
-        if (usageToggle) {
-            usageToggle.checked = !enabled;
-        }
-    }
-}
-
-export async function updateRequestLog(enabled) {
-    try {
-        await this.makeRequest('/request-log', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache();
-        this.showNotification(i18n.t('notification.request_log_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        const requestLogToggle = document.getElementById('request-log-toggle');
-        if (requestLogToggle) {
-            requestLogToggle.checked = !enabled;
-        }
-    }
-}
-
-export async function updateWsAuth(enabled) {
-    try {
-        await this.makeRequest('/ws-auth', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache();
-        this.showNotification(i18n.t('notification.ws_auth_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        const wsAuthToggle = document.getElementById('ws-auth-toggle');
-        if (wsAuthToggle) {
-            wsAuthToggle.checked = !enabled;
-        }
-    }
-}
-
-export async function updateLoggingToFile(enabled) {
-    try {
-        await this.makeRequest('/logging-to-file', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache();
-        this.showNotification(i18n.t('notification.logging_to_file_updated'), 'success');
-        // 显示或隐藏日志查看栏目
-        this.toggleLogsNavItem(enabled);
-        // 如果启用了日志记录，自动刷新日志
-        if (enabled) {
-            setTimeout(() => this.refreshLogs(), 500);
-        }
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        const loggingToggle = document.getElementById('logging-to-file-toggle');
-        if (loggingToggle) {
-            loggingToggle.checked = !enabled;
-        }
-    }
-}
-
-export async function updateSwitchProject(enabled) {
-    try {
-        await this.makeRequest('/quota-exceeded/switch-project', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache(); // 清除缓存
-        this.showNotification(i18n.t('notification.quota_switch_project_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        document.getElementById('switch-project-toggle').checked = !enabled;
-    }
-}
-
-export async function updateSwitchPreviewModel(enabled) {
-    try {
-        await this.makeRequest('/quota-exceeded/switch-preview-model', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache(); // 清除缓存
-        this.showNotification(i18n.t('notification.quota_switch_preview_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        document.getElementById('switch-preview-model-toggle').checked = !enabled;
-    }
-}
-
-// 统一应用配置到界面，供 connection 模块或事件总线调用
-export async function applySettingsFromConfig(config = {}, keyStats = null) {
-    if (!config || typeof config !== 'object') {
-        return;
-    }
-
-    // 调试设置
-    if (config.debug !== undefined) {
-        const toggle = document.getElementById('debug-toggle');
-        if (toggle) {
-            toggle.checked = config.debug;
-        }
-    }
-
-    // 代理设置
-    if (config['proxy-url'] !== undefined) {
-        const proxyInput = document.getElementById('proxy-url');
-        if (proxyInput) {
-            proxyInput.value = config['proxy-url'] || '';
-        }
-    }
-
-    // 请求重试设置
-    if (config['request-retry'] !== undefined) {
-        const retryInput = document.getElementById('request-retry');
-        if (retryInput) {
-            retryInput.value = config['request-retry'];
-        }
-    }
-
-    // 配额超出行为
-    if (config['quota-exceeded']) {
-        if (config['quota-exceeded']['switch-project'] !== undefined) {
-            const toggle = document.getElementById('switch-project-toggle');
-            if (toggle) {
-                toggle.checked = config['quota-exceeded']['switch-project'];
-            }
-        }
-        if (config['quota-exceeded']['switch-preview-model'] !== undefined) {
-            const toggle = document.getElementById('switch-preview-model-toggle');
-            if (toggle) {
-                toggle.checked = config['quota-exceeded']['switch-preview-model'];
-            }
-        }
-    }
-
-    if (config['usage-statistics-enabled'] !== undefined) {
-        const usageToggle = document.getElementById('usage-statistics-enabled-toggle');
-        if (usageToggle) {
-            usageToggle.checked = config['usage-statistics-enabled'];
-        }
-    }
-
-    // 日志记录设置
-    if (config['logging-to-file'] !== undefined) {
-        const loggingToggle = document.getElementById('logging-to-file-toggle');
-        if (loggingToggle) {
-            loggingToggle.checked = config['logging-to-file'];
-        }
-        if (typeof this.toggleLogsNavItem === 'function') {
-            this.toggleLogsNavItem(config['logging-to-file']);
-        }
-    }
-    if (config['request-log'] !== undefined) {
-        const requestLogToggle = document.getElementById('request-log-toggle');
-        if (requestLogToggle) {
-            requestLogToggle.checked = config['request-log'];
-        }
-    }
-    if (config['ws-auth'] !== undefined) {
-        const wsAuthToggle = document.getElementById('ws-auth-toggle');
-        if (wsAuthToggle) {
-            wsAuthToggle.checked = config['ws-auth'];
-        }
-    }
-
-    // API 密钥
-    if (config['api-keys'] && typeof this.renderApiKeys === 'function') {
-        this.renderApiKeys(config['api-keys']);
-    }
-
-    // Gemini keys
-    if (typeof this.renderGeminiKeys === 'function') {
-        await this.renderGeminiKeys(this.getGeminiKeysFromConfig(config), keyStats);
-    }
-
-    // Codex 密钥
-    if (typeof this.renderCodexKeys === 'function') {
-        await this.renderCodexKeys(Array.isArray(config['codex-api-key']) ? config['codex-api-key'] : [], keyStats);
-    }
-
-    // Claude 密钥
-    if (typeof this.renderClaudeKeys === 'function') {
-        await this.renderClaudeKeys(Array.isArray(config['claude-api-key']) ? config['claude-api-key'] : [], keyStats);
-    }
-
-    // OpenAI 兼容提供商
-    if (typeof this.renderOpenAIProviders === 'function') {
-        await this.renderOpenAIProviders(Array.isArray(config['openai-compatibility']) ? config['openai-compatibility'] : [], keyStats);
-    }
-}
-
-// 设置模块订阅全局事件，减少与连接层耦合
-export function registerSettingsListeners() {
-    if (!this.events || typeof this.events.on !== 'function') {
-        return;
-    }
-    this.events.on('data:config-loaded', (event) => {
-        const detail = event?.detail || {};
-        this.applySettingsFromConfig(detail.config || {}, detail.keyStats || null);
-    });
-}
-
-export const settingsModule = {
-    updateDebug,
-    updateProxyUrl,
-    clearProxyUrl,
-    updateRequestRetry,
-    loadDebugSettings,
-    loadProxySettings,
-    loadRetrySettings,
-    loadQuotaSettings,
-    loadUsageStatisticsSettings,
-    loadRequestLogSetting,
-    loadWsAuthSetting,
-    updateUsageStatisticsEnabled,
-    updateRequestLog,
-    updateWsAuth,
-    updateLoggingToFile,
-    updateSwitchProject,
-    updateSwitchPreviewModel,
-    applySettingsFromConfig,
-    registerSettingsListeners
-};
diff --git a/src/modules/theme.js b/src/modules/theme.js
deleted file mode 100644
index 5b3743b..0000000
--- a/src/modules/theme.js
+++ /dev/null
@@ -1,73 +0,0 @@
-export const themeModule = {
-    initializeTheme() {
-        const savedTheme = localStorage.getItem('preferredTheme');
-        if (savedTheme && ['light', 'dark'].includes(savedTheme)) {
-            this.currentTheme = savedTheme;
-        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            this.currentTheme = 'dark';
-        } else {
-            this.currentTheme = 'light';
-        }
-
-        this.applyTheme(this.currentTheme);
-        this.updateThemeButtons();
-
-        if (window.matchMedia) {
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-                if (!localStorage.getItem('preferredTheme')) {
-                    this.currentTheme = e.matches ? 'dark' : 'light';
-                    this.applyTheme(this.currentTheme);
-                    this.updateThemeButtons();
-                }
-            });
-        }
-    },
-
-    applyTheme(theme) {
-        if (theme === 'dark') {
-            document.documentElement.setAttribute('data-theme', 'dark');
-        } else {
-            document.documentElement.removeAttribute('data-theme');
-        }
-        this.currentTheme = theme;
-    },
-
-    toggleTheme() {
-        const newTheme = this.currentTheme === 'light' ? 'dark' : 'light';
-        this.applyTheme(newTheme);
-        this.updateThemeButtons();
-        localStorage.setItem('preferredTheme', newTheme);
-    },
-
-    updateThemeButtons() {
-        const loginThemeBtn = document.getElementById('theme-toggle');
-        const mainThemeBtn = document.getElementById('theme-toggle-main');
-
-        const updateButton = (btn) => {
-            if (!btn) return;
-            const icon = btn.querySelector('i');
-            if (this.currentTheme === 'dark') {
-                icon.className = 'fas fa-sun';
-                btn.title = i18n.t('theme.switch_to_light');
-            } else {
-                icon.className = 'fas fa-moon';
-                btn.title = i18n.t('theme.switch_to_dark');
-            }
-        };
-
-        updateButton(loginThemeBtn);
-        updateButton(mainThemeBtn);
-    },
-
-    setupThemeSwitcher() {
-        const loginToggle = document.getElementById('theme-toggle');
-        const mainToggle = document.getElementById('theme-toggle-main');
-
-        if (loginToggle) {
-            loginToggle.addEventListener('click', () => this.toggleTheme());
-        }
-        if (mainToggle) {
-            mainToggle.addEventListener('click', () => this.toggleTheme());
-        }
-    }
-};
diff --git a/src/modules/usage.js b/src/modules/usage.js
deleted file mode 100644
index f49a567..0000000
--- a/src/modules/usage.js
+++ /dev/null
@@ -1,1913 +0,0 @@
-const DEFAULT_MODEL_PRICE_STORAGE_KEY = 'cli-proxy-model-prices-v2';
-const LEGACY_MODEL_PRICE_STORAGE_KEY = 'cli-proxy-model-prices';
-const TOKENS_PER_PRICE_UNIT = 1_000_000;
-const DEFAULT_CHART_LINE_COUNT = 3;
-const MIN_CHART_LINE_COUNT = 1;
-const ALL_MODELS_VALUE = 'all';
-
-export function maskUsageSensitiveValue(value) {
-    if (value === null || value === undefined) {
-        return '';
-    }
-    const raw = typeof value === 'string' ? value : String(value);
-    if (!raw) {
-        return '';
-    }
-    const maskFn = (this && typeof this.maskApiKey === 'function') ? this.maskApiKey : (v) => v;
-    let masked = raw;
-
-    const queryRegex = /([?&])(api[-_]?key|key|token|access_token|authorization)=([^&#\s]+)/ig;
-    masked = masked.replace(queryRegex, (full, prefix, keyName, valuePart) => `${prefix}${keyName}=${maskFn(valuePart)}`);
-
-    const headerRegex = /(api[-_]?key|key|token|access[-_]?token|authorization)\s*([:=])\s*([A-Za-z0-9._-]+)/ig;
-    masked = masked.replace(headerRegex, (full, keyName, separator, valuePart) => `${keyName}${separator}${maskFn(valuePart)}`);
-
-    const keyLikeRegex = /(sk-[A-Za-z0-9]{6,}|AI[a-zA-Z0-9_-]{6,}|AIza[0-9A-Za-z-_]{8,}|hf_[A-Za-z0-9]{6,}|pk_[A-Za-z0-9]{6,}|rk_[A-Za-z0-9]{6,})/g;
-    masked = masked.replace(keyLikeRegex, match => maskFn(match));
-
-    if (masked === raw) {
-        const trimmed = raw.trim();
-        if (trimmed && !/\s/.test(trimmed)) {
-            const looksLikeKey = /^sk-/i.test(trimmed)
-                || /^AI/i.test(trimmed)
-                || /^AIza/i.test(trimmed)
-                || /^hf_/i.test(trimmed)
-                || /^pk_/i.test(trimmed)
-                || /^rk_/i.test(trimmed)
-                || (!/[\\/]/.test(trimmed) && (/\d/.test(trimmed) || trimmed.length >= 10))
-                || trimmed.length >= 24;
-            if (looksLikeKey) {
-                return maskFn(trimmed);
-            }
-        }
-    }
-
-    return masked;
-}
-
-// 获取API密钥的统计信息
-export async function getKeyStats(usageData = null) {
-    try {
-        let usage = usageData;
-        if (!usage) {
-            const response = await this.makeRequest('/usage');
-            usage = response?.usage || null;
-        }
-
-        if (!usage) {
-            return { bySource: {}, byAuthIndex: {} };
-        }
-
-        const sourceStats = {};
-        const authIndexStats = {};
-        const ensureBucket = (bucket, key) => {
-            if (!bucket[key]) {
-                bucket[key] = { success: 0, failure: 0 };
-            }
-            return bucket[key];
-        };
-        const normalizeAuthIndex = (value) => {
-            if (typeof value === 'number' && Number.isFinite(value)) {
-                return value.toString();
-            }
-            if (typeof value === 'string') {
-                const trimmed = value.trim();
-                return trimmed ? trimmed : null;
-            }
-            return null;
-        };
-        const apis = usage.apis || {};
-
-        Object.values(apis).forEach(apiEntry => {
-            const models = apiEntry.models || {};
-
-            Object.values(models).forEach(modelEntry => {
-                const details = modelEntry.details || [];
-
-                details.forEach(detail => {
-                    const source = this.maskUsageSensitiveValue
-                        ? this.maskUsageSensitiveValue(detail.source)
-                        : detail.source;
-                    const authIndexKey = normalizeAuthIndex(detail?.auth_index);
-                    const isFailed = detail.failed === true;
-
-                    if (source) {
-                        const bucket = ensureBucket(sourceStats, source);
-                        if (isFailed) {
-                            bucket.failure += 1;
-                        } else {
-                            bucket.success += 1;
-                        }
-                    }
-
-                    if (authIndexKey) {
-                        const bucket = ensureBucket(authIndexStats, authIndexKey);
-                        if (isFailed) {
-                            bucket.failure += 1;
-                        } else {
-                            bucket.success += 1;
-                        }
-                    }
-                });
-            });
-        });
-
-        return {
-            bySource: sourceStats,
-            byAuthIndex: authIndexStats
-        };
-    } catch (error) {
-        console.error('获取统计信息失败:', error);
-        return { bySource: {}, byAuthIndex: {} };
-    }
-}
-
-// 加载使用统计
-export async function loadUsageStats(usageData = null) {
-    try {
-        let usage = usageData;
-        // 如果没有传入usage数据，则调用API获取
-        if (!usage) {
-            const response = await this.makeRequest('/usage');
-            usage = response?.usage || null;
-        }
-        this.currentUsageData = usage;
-        this.ensureModelPriceState();
-
-        if (!usage) {
-            throw new Error('usage payload missing');
-        }
-
-        // 更新概览卡片
-        this.updateUsageOverview(usage);
-        this.renderOverviewSparklines(usage);
-        this.updateChartLineSelectors(usage);
-        this.renderModelPriceOptions(usage);
-        this.renderSavedModelPrices();
-
-        // 读取当前图表周期
-        const requestsHourActive = document.getElementById('requests-hour-btn')?.classList.contains('active');
-        const tokensHourActive = document.getElementById('tokens-hour-btn')?.classList.contains('active');
-        const costHourActive = document.getElementById('cost-hour-btn')?.classList.contains('active');
-        const requestsPeriod = requestsHourActive ? 'hour' : 'day';
-        const tokensPeriod = tokensHourActive ? 'hour' : 'day';
-        const costPeriod = costHourActive ? 'hour' : 'day';
-
-        // 初始化图表（使用当前周期）
-        this.initializeRequestsChart(requestsPeriod);
-        this.initializeTokensChart(tokensPeriod);
-        this.updateCostSummaryAndChart(usage, costPeriod);
-
-        // 更新API详细统计表格
-        this.updateApiStatsTable(usage);
-
-    } catch (error) {
-        console.error('加载使用统计失败:', error);
-        this.currentUsageData = null;
-        this.updateChartLineSelectors(null);
-        this.ensureModelPriceState();
-        this.renderModelPriceOptions(null);
-        this.renderSavedModelPrices();
-        this.updateCostSummaryAndChart(null);
-        this.destroySparklineCharts();
-
-        // 清空概览数据
-        ['total-requests', 'success-requests', 'failed-requests', 'total-tokens', 'cached-tokens', 'reasoning-tokens', 'rpm-30m', 'tpm-30m'].forEach(id => {
-            const el = document.getElementById(id);
-            if (el) el.textContent = '-';
-        });
-
-        // 清空图表
-        if (this.requestsChart) {
-            this.requestsChart.destroy();
-            this.requestsChart = null;
-        }
-        if (this.tokensChart) {
-            this.tokensChart.destroy();
-            this.tokensChart = null;
-        }
-
-        const tableElement = document.getElementById('api-stats-table');
-        if (tableElement) {
-            tableElement.innerHTML = `<div class="no-data-message">${i18n.t('usage_stats.loading_error')}: ${error.message}</div>`;
-        }
-    }
-}
-
-// 更新使用统计概览
-export function updateUsageOverview(data) {
-    const safeData = data || {};
-    document.getElementById('total-requests').textContent = safeData.total_requests ?? 0;
-    document.getElementById('success-requests').textContent = safeData.success_count ?? 0;
-    document.getElementById('failed-requests').textContent = safeData.failure_count ?? 0;
-    const totalTokensValue = safeData.total_tokens ?? 0;
-    document.getElementById('total-tokens').textContent = this.formatTokensInMillions(totalTokensValue);
-
-    const tokenBreakdown = this.calculateTokenBreakdown(safeData);
-    const cachedEl = document.getElementById('cached-tokens');
-    const reasoningEl = document.getElementById('reasoning-tokens');
-    if (cachedEl) {
-        cachedEl.textContent = this.formatTokensInMillions(tokenBreakdown.cachedTokens);
-    }
-    if (reasoningEl) {
-        reasoningEl.textContent = this.formatTokensInMillions(tokenBreakdown.reasoningTokens);
-    }
-
-    const recentRate = this.calculateRecentPerMinuteRates(30, safeData);
-    document.getElementById('rpm-30m').textContent = this.formatPerMinuteValue(recentRate.rpm);
-    document.getElementById('tpm-30m').textContent = this.formatPerMinuteValue(recentRate.tpm);
-}
-
-export function formatTokensInMillions(value) {
-    const num = Number(value);
-    if (!Number.isFinite(num)) {
-        return '0.00M';
-    }
-    return `${(num / 1_000_000).toFixed(2)}M`;
-}
-
-export function formatPerMinuteValue(value) {
-    const num = Number(value);
-    if (!Number.isFinite(num)) {
-        return '0.00';
-    }
-    const abs = Math.abs(num);
-    if (abs >= 1000) {
-        return Math.round(num).toLocaleString();
-    }
-    if (abs >= 100) {
-        return num.toFixed(0);
-    }
-    if (abs >= 10) {
-        return num.toFixed(1);
-    }
-    return num.toFixed(2);
-}
-
-export function formatCompactNumber(value) {
-    const num = Number(value);
-    if (!Number.isFinite(num)) {
-        return '0';
-    }
-    const abs = Math.abs(num);
-    if (abs >= 1_000_000) {
-        return `${(num / 1_000_000).toFixed(1)}M`;
-    }
-    if (abs >= 1_000) {
-        return `${(num / 1_000).toFixed(1)}K`;
-    }
-    return abs >= 1 ? num.toFixed(0) : num.toFixed(2);
-}
-
-export function formatCompactNumber(value) {
-    const num = Number(value);
-    if (!Number.isFinite(num)) {
-        return '0';
-    }
-    const abs = Math.abs(num);
-    if (abs >= 1_000_000) {
-        return `${(num / 1_000_000).toFixed(1)}M`;
-    }
-    if (abs >= 1_000) {
-        return `${(num / 1_000).toFixed(1)}K`;
-    }
-    return abs >= 1 ? num.toFixed(0) : num.toFixed(2);
-}
-
-export function getModelNamesFromUsage(usage) {
-    if (!usage) {
-        return [];
-    }
-    const apis = usage.apis || {};
-    const names = new Set();
-    Object.values(apis).forEach(apiEntry => {
-        const models = apiEntry.models || {};
-        Object.keys(models).forEach(modelName => {
-            if (modelName) {
-                names.add(modelName);
-            }
-        });
-    });
-    return Array.from(names).sort((a, b) => a.localeCompare(b));
-}
-
-export function getChartLineMaxCount() {
-    const idCount = Array.isArray(this.chartLineSelectIds) ? this.chartLineSelectIds.length : 0;
-    const configuredMax = Number(this.chartLineMaxCount);
-    const fallback = idCount || DEFAULT_CHART_LINE_COUNT;
-    const resolvedMax = Number.isFinite(configuredMax) ? configuredMax : fallback;
-    if (idCount > 0) {
-        return Math.max(MIN_CHART_LINE_COUNT, Math.min(resolvedMax, idCount));
-    }
-    return Math.max(MIN_CHART_LINE_COUNT, resolvedMax);
-}
-
-export function getVisibleChartLineCount() {
-    const maxCount = this.getChartLineMaxCount();
-    const stored = Number(this.chartLineVisibleCount);
-    const base = Number.isFinite(stored)
-        ? stored
-        : (Array.isArray(this.chartLineSelections) ? this.chartLineSelections.length : DEFAULT_CHART_LINE_COUNT);
-    const resolved = Math.min(Math.max(base, MIN_CHART_LINE_COUNT), maxCount);
-    this.chartLineVisibleCount = resolved;
-    return resolved;
-}
-
-export function ensureChartLineSelectionLength(targetLength = null) {
-    const maxCount = this.getChartLineMaxCount();
-    const desiredLength = Math.min(
-        Math.max(targetLength ?? this.getVisibleChartLineCount(), MIN_CHART_LINE_COUNT),
-        maxCount
-    );
-
-    if (!Array.isArray(this.chartLineSelections)) {
-        this.chartLineSelections = Array(desiredLength).fill('none');
-        return this.chartLineSelections;
-    }
-
-    const trimmed = this.chartLineSelections.slice(0, maxCount);
-    if (trimmed.length < desiredLength) {
-        this.chartLineSelections = [...trimmed, ...Array(desiredLength - trimmed.length).fill('none')];
-    } else if (trimmed.length > desiredLength) {
-        this.chartLineSelections = trimmed.slice(0, desiredLength);
-    } else {
-        this.chartLineSelections = trimmed;
-    }
-    return this.chartLineSelections;
-}
-
-export function updateChartLineControlsUI() {
-    const maxCount = this.getChartLineMaxCount();
-    const visibleCount = this.getVisibleChartLineCount();
-    const counter = document.getElementById('chart-line-count');
-    if (counter) {
-        counter.textContent = `${visibleCount}/${maxCount}`;
-    }
-    const addBtn = document.getElementById('add-chart-line');
-    if (addBtn) {
-        addBtn.disabled = visibleCount >= maxCount;
-    }
-    const deleteButtons = document.querySelectorAll('.chart-line-delete');
-    if (deleteButtons.length) {
-        deleteButtons.forEach(button => {
-            const group = button.closest('.chart-line-group');
-            const index = Number.parseInt(button.getAttribute('data-line-index'), 10);
-            const isVisible = group
-                ? !group.classList.contains('chart-line-hidden')
-                : (Number.isFinite(index) ? index < visibleCount : true);
-            button.disabled = visibleCount <= MIN_CHART_LINE_COUNT || !isVisible;
-        });
-    }
-}
-
-export function setChartLineVisibleCount(count) {
-    const maxCount = this.getChartLineMaxCount();
-    const nextCount = Math.min(Math.max(count, MIN_CHART_LINE_COUNT), maxCount);
-    const current = this.getVisibleChartLineCount();
-    if (nextCount === current) {
-        this.updateChartLineControlsUI();
-        return;
-    }
-    this.chartLineVisibleCount = nextCount;
-    this.ensureChartLineSelectionLength(nextCount);
-    this.updateChartLineSelectors(this.currentUsageData);
-    this.refreshChartsForSelections();
-}
-
-export function changeChartLineCount(delta = 0) {
-    const current = this.getVisibleChartLineCount();
-    this.setChartLineVisibleCount(current + delta);
-}
-
-export function removeChartLine(index) {
-    const visibleCount = this.getVisibleChartLineCount();
-    const normalizedIndex = Number.parseInt(index, 10);
-    if (!Number.isFinite(normalizedIndex) || normalizedIndex < 0 || normalizedIndex >= visibleCount) {
-        return;
-    }
-    if (visibleCount <= MIN_CHART_LINE_COUNT) {
-        return;
-    }
-    const nextSelections = this.ensureChartLineSelectionLength(visibleCount).slice(0, visibleCount);
-    nextSelections.splice(normalizedIndex, 1);
-    this.chartLineSelections = nextSelections;
-    this.chartLineVisibleCount = Math.max(MIN_CHART_LINE_COUNT, visibleCount - 1);
-    this.updateChartLineSelectors(this.currentUsageData);
-    this.refreshChartsForSelections();
-}
-
-export function updateChartLineSelectors(usage) {
-    const modelNames = this.getModelNamesFromUsage(usage);
-    const selectors = this.chartLineSelectIds
-        .map(id => document.getElementById(id))
-        .filter(Boolean);
-
-    const availableCount = selectors.length || this.getChartLineMaxCount();
-    const visibleCount = Math.min(this.getVisibleChartLineCount(), availableCount);
-    this.chartLineVisibleCount = visibleCount;
-    this.ensureChartLineSelectionLength(visibleCount);
-    const wasInitialized = this.chartLineSelectionsInitialized === true;
-
-    if (!selectors.length) {
-        this.chartLineSelections = Array(visibleCount).fill('none');
-        this.chartLineSelectionsInitialized = false;
-        this.updateChartLineControlsUI();
-        return;
-    }
-
-    const optionsFragment = () => {
-        const fragment = document.createDocumentFragment();
-        const allOption = document.createElement('option');
-        allOption.value = ALL_MODELS_VALUE;
-        allOption.textContent = i18n.t('usage_stats.chart_line_all');
-        fragment.appendChild(allOption);
-        modelNames.forEach(name => {
-            const option = document.createElement('option');
-            option.value = name;
-            option.textContent = name;
-            fragment.appendChild(option);
-        });
-        return fragment;
-    };
-
-    const hasModels = modelNames.length > 0;
-    selectors.forEach((select, index) => {
-        const group = select.closest('.chart-line-group');
-        const isVisible = index < visibleCount;
-        if (group) {
-            group.classList.toggle('chart-line-hidden', !isVisible);
-        }
-        const deleteBtn = group ? group.querySelector('.chart-line-delete') : null;
-        select.innerHTML = '';
-        select.appendChild(optionsFragment());
-        select.disabled = !isVisible;
-        if (deleteBtn) {
-            deleteBtn.disabled = !isVisible || visibleCount <= MIN_CHART_LINE_COUNT;
-        }
-        if (!isVisible) {
-            select.value = ALL_MODELS_VALUE;
-        }
-    });
-
-    if (!hasModels) {
-        this.chartLineSelections = Array(visibleCount).fill(ALL_MODELS_VALUE);
-        this.chartLineSelectionsInitialized = false;
-        selectors.forEach((select, index) => {
-            const group = select.closest('.chart-line-group');
-            if (group) {
-                group.classList.toggle('chart-line-hidden', index >= visibleCount);
-            }
-            select.value = ALL_MODELS_VALUE;
-        });
-        this.updateChartLineControlsUI();
-        return;
-    }
-
-    const nextSelections = this.ensureChartLineSelectionLength(visibleCount).slice(0, visibleCount);
-
-    const validNames = new Set([...modelNames, ALL_MODELS_VALUE]);
-    let hasActiveSelection = false;
-    for (let i = 0; i < nextSelections.length; i++) {
-        const selection = nextSelections[i];
-        if (selection && selection !== 'none' && !validNames.has(selection)) {
-            nextSelections[i] = ALL_MODELS_VALUE;
-        }
-        if (nextSelections[i] && nextSelections[i] !== 'none') {
-            hasActiveSelection = true;
-        }
-    }
-
-    const allSelectionsAreAll = nextSelections.length > 0 && nextSelections.every(value => value === ALL_MODELS_VALUE);
-
-    if (!hasActiveSelection || (!wasInitialized && allSelectionsAreAll)) {
-        modelNames.slice(0, nextSelections.length).forEach((name, index) => {
-            nextSelections[index] = name;
-        });
-    }
-
-    for (let i = 0; i < nextSelections.length; i++) {
-        if (!nextSelections[i] || nextSelections[i] === 'none') {
-            nextSelections[i] = modelNames[i % Math.max(modelNames.length, 1)] || ALL_MODELS_VALUE;
-        }
-    }
-
-    this.chartLineSelections = nextSelections;
-    selectors.forEach((select, index) => {
-        const value = this.chartLineSelections[index] || ALL_MODELS_VALUE;
-        select.value = index < visibleCount ? value : ALL_MODELS_VALUE;
-    });
-    this.chartLineSelectionsInitialized = hasModels;
-    this.updateChartLineControlsUI();
-}
-
-export function handleChartLineSelectionChange(index, value) {
-    const visibleCount = this.getVisibleChartLineCount();
-    if (index < 0 || index >= visibleCount) {
-        return;
-    }
-    this.ensureChartLineSelectionLength(visibleCount);
-    const normalized = (value && value !== 'none') ? value : ALL_MODELS_VALUE;
-    if (this.chartLineSelections[index] === normalized) {
-        return;
-    }
-    this.chartLineSelections[index] = normalized;
-    this.refreshChartsForSelections();
-}
-
-export function refreshChartsForSelections() {
-    if (!this.currentUsageData) {
-        return;
-    }
-    const requestsHourActive = document.getElementById('requests-hour-btn')?.classList.contains('active');
-    const tokensHourActive = document.getElementById('tokens-hour-btn')?.classList.contains('active');
-    const requestsPeriod = requestsHourActive ? 'hour' : 'day';
-    const tokensPeriod = tokensHourActive ? 'hour' : 'day';
-
-    if (this.requestsChart) {
-        this.requestsChart.data = this.getRequestsChartData(requestsPeriod);
-        this.requestsChart.update();
-    } else {
-        this.initializeRequestsChart(requestsPeriod);
-    }
-
-    if (this.tokensChart) {
-        this.tokensChart.data = this.getTokensChartData(tokensPeriod);
-        this.tokensChart.update();
-    } else {
-        this.initializeTokensChart(tokensPeriod);
-    }
-}
-
-export function getActiveChartLineSelections() {
-    const visibleCount = this.getVisibleChartLineCount();
-    const selections = this.ensureChartLineSelectionLength(visibleCount).slice(0, visibleCount);
-    return selections
-        .map((value, index) => ({ model: value, index }))
-        .filter(item => item.model && item.model !== 'none');
-}
-
-// 收集所有请求明细，供图表等复用
-export function collectUsageDetailsFromUsage(usage) {
-    if (!usage) {
-        return [];
-    }
-    const apis = usage.apis || {};
-    const details = [];
-    Object.values(apis).forEach(apiEntry => {
-        const models = apiEntry.models || {};
-        Object.entries(models).forEach(([modelName, modelEntry]) => {
-            const modelDetails = Array.isArray(modelEntry.details) ? modelEntry.details : [];
-            modelDetails.forEach(detail => {
-                if (detail && detail.timestamp) {
-                    details.push({
-                        ...detail,
-                        __modelName: modelName
-                    });
-                }
-            });
-        });
-    });
-    return details;
-}
-
-export function collectUsageDetails() {
-    return this.collectUsageDetailsFromUsage(this.currentUsageData);
-}
-
-export function migrateLegacyModelPrices() {
-    try {
-        if (typeof localStorage === 'undefined') {
-            return;
-        }
-        const storageKey = this.modelPriceStorageKey || DEFAULT_MODEL_PRICE_STORAGE_KEY;
-        const hasCurrent = localStorage.getItem(storageKey);
-        const legacyRaw = localStorage.getItem(LEGACY_MODEL_PRICE_STORAGE_KEY);
-
-        if (!legacyRaw || hasCurrent) {
-            return;
-        }
-
-        const parsed = JSON.parse(legacyRaw);
-        if (!parsed || typeof parsed !== 'object') {
-            return;
-        }
-
-        const migrated = {};
-        Object.entries(parsed).forEach(([model, price]) => {
-            if (!model) return;
-            const prompt = Number(price?.prompt);
-            const completion = Number(price?.completion);
-            const hasPrompt = Number.isFinite(prompt);
-            const hasCompletion = Number.isFinite(completion);
-            if (!hasPrompt && !hasCompletion) {
-                return;
-            }
-            migrated[model] = {
-                prompt: hasPrompt && prompt >= 0 ? prompt * 1000 : 0,
-                completion: hasCompletion && completion >= 0 ? completion * 1000 : 0
-            };
-        });
-
-        if (Object.keys(migrated).length) {
-            localStorage.setItem(storageKey, JSON.stringify(migrated));
-        }
-        localStorage.removeItem(LEGACY_MODEL_PRICE_STORAGE_KEY);
-    } catch (error) {
-        console.warn('迁移模型价格失败:', error);
-    }
-}
-
-export function ensureModelPriceState() {
-    if (this.modelPriceInitialized) {
-        return;
-    }
-    this.modelPriceStorageKey = this.modelPriceStorageKey || DEFAULT_MODEL_PRICE_STORAGE_KEY;
-    this.migrateLegacyModelPrices();
-    this.modelPrices = this.loadModelPricesFromStorage();
-    this.modelPriceInitialized = true;
-}
-
-export function loadModelPricesFromStorage() {
-    const storageKey = this.modelPriceStorageKey || DEFAULT_MODEL_PRICE_STORAGE_KEY;
-    try {
-        if (typeof localStorage === 'undefined') {
-            return {};
-        }
-        const raw = localStorage.getItem(storageKey);
-        if (!raw) {
-            return {};
-        }
-        const parsed = JSON.parse(raw);
-        if (!parsed || typeof parsed !== 'object') {
-            return {};
-        }
-        const normalized = {};
-        Object.entries(parsed).forEach(([model, price]) => {
-            if (!model) return;
-            const prompt = Number(price?.prompt);
-            const completion = Number(price?.completion);
-            if (!Number.isFinite(prompt) && !Number.isFinite(completion)) {
-                return;
-            }
-            normalized[model] = {
-                prompt: Number.isFinite(prompt) && prompt >= 0 ? prompt : 0,
-                completion: Number.isFinite(completion) && completion >= 0 ? completion : 0
-            };
-        });
-        return normalized;
-    } catch (error) {
-        console.warn('读取模型价格失败:', error);
-        return {};
-    }
-}
-
-export function persistModelPrices(prices = {}) {
-    const storageKey = this.modelPriceStorageKey || DEFAULT_MODEL_PRICE_STORAGE_KEY;
-    this.modelPrices = prices;
-    try {
-        if (typeof localStorage === 'undefined') {
-            return;
-        }
-        localStorage.setItem(storageKey, JSON.stringify(prices));
-    } catch (error) {
-        console.warn('保存模型价格失败:', error);
-    }
-}
-
-export function renderModelPriceOptions(usage = null) {
-    const select = document.getElementById('model-price-model-select');
-    if (!select) return;
-    const models = this.getModelNamesFromUsage(usage);
-    const previousValue = select.value;
-    select.innerHTML = '';
-
-    const placeholderOption = document.createElement('option');
-    placeholderOption.value = '';
-    placeholderOption.textContent = i18n.t('usage_stats.model_price_select_placeholder');
-    select.appendChild(placeholderOption);
-
-    models.forEach(name => {
-        const option = document.createElement('option');
-        option.value = name;
-        option.textContent = name;
-        select.appendChild(option);
-    });
-
-    select.disabled = models.length === 0;
-    if (models.includes(previousValue)) {
-        select.value = previousValue;
-    } else {
-        select.value = '';
-    }
-    this.prefillModelPriceInputs();
-}
-
-export function renderSavedModelPrices() {
-    const container = document.getElementById('model-price-list');
-    if (!container) return;
-    const entries = Object.entries(this.modelPrices || {});
-    if (!entries.length) {
-        container.innerHTML = `<div class="no-data-message">${i18n.t('usage_stats.model_price_empty')}</div>`;
-        return;
-    }
-    const rows = entries.map(([model, price]) => {
-        const prompt = Number(price?.prompt) || 0;
-        const completion = Number(price?.completion) || 0;
-        const safeModel = this.escapeHtml ? this.escapeHtml(model) : model;
-        const editArg = JSON.stringify(model).replace(/"/g, '&quot;');
-        return `
-            <div class="provider-item model-price-item" onclick="manager.handleModelPriceEdit(${editArg})">
-                <div class="item-content">
-                    <div class="item-title">${safeModel}</div>
-                    <div class="item-meta">
-                        <span class="stat-badge stat-neutral">${i18n.t('usage_stats.model_price_prompt')}: $${prompt.toFixed(4)} / 1M</span>
-                        <span class="stat-badge stat-neutral">${i18n.t('usage_stats.model_price_completion')}: $${completion.toFixed(4)} / 1M</span>
-                    </div>
-                </div>
-                <div class="item-actions">
-                    <button class="btn btn-secondary" onclick="event.stopPropagation(); manager.handleModelPriceEdit(${editArg});">
-                        <i class="fas fa-edit"></i>
-                    </button>
-                </div>
-            </div>
-        `;
-    }).join('');
-
-    container.innerHTML = rows;
-}
-
-export function handleModelPriceEdit(modelName) {
-    const model = (modelName || '').trim();
-    const select = document.getElementById('model-price-model-select');
-    const promptInput = document.getElementById('model-price-prompt');
-    const completionInput = document.getElementById('model-price-completion');
-    const form = document.getElementById('model-price-form');
-    if (!select || !promptInput || !completionInput) {
-        return;
-    }
-
-    const options = Array.from(select.options).map(opt => opt.value);
-    if (model && !options.includes(model)) {
-        const opt = document.createElement('option');
-        opt.value = model;
-        opt.textContent = model;
-        select.appendChild(opt);
-    }
-
-    select.disabled = false;
-    select.value = model;
-    const price = this.modelPrices?.[model];
-    if (price) {
-        promptInput.value = Number.isFinite(price.prompt) ? price.prompt : '';
-        completionInput.value = Number.isFinite(price.completion) ? price.completion : '';
-    } else {
-        promptInput.value = '';
-        completionInput.value = '';
-    }
-
-    promptInput.focus();
-    if (form && typeof form.scrollIntoView === 'function') {
-        form.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-}
-
-export function prefillModelPriceInputs() {
-    const select = document.getElementById('model-price-model-select');
-    const promptInput = document.getElementById('model-price-prompt');
-    const completionInput = document.getElementById('model-price-completion');
-    if (!select || !promptInput || !completionInput) {
-        return;
-    }
-    const model = (select.value || '').trim();
-    const price = this.modelPrices?.[model];
-    if (price) {
-        promptInput.value = Number.isFinite(price.prompt) ? price.prompt : '';
-        completionInput.value = Number.isFinite(price.completion) ? price.completion : '';
-    } else {
-        promptInput.value = '';
-        completionInput.value = '';
-    }
-}
-
-export function normalizePriceValue(value) {
-    const parsed = Number(value);
-    if (!Number.isFinite(parsed) || parsed < 0) {
-        return 0;
-    }
-    return Number(parsed.toFixed(6));
-}
-
-export function handleModelPriceSubmit() {
-    this.ensureModelPriceState();
-    const select = document.getElementById('model-price-model-select');
-    const promptInput = document.getElementById('model-price-prompt');
-    const completionInput = document.getElementById('model-price-completion');
-    if (!select || !promptInput || !completionInput) {
-        return;
-    }
-
-    const model = (select.value || '').trim();
-    if (!model) {
-        this.showNotification(i18n.t('usage_stats.model_price_model_required'), 'warning');
-        return;
-    }
-    const prompt = this.normalizePriceValue(promptInput.value);
-    const completion = this.normalizePriceValue(completionInput.value);
-
-    const next = { ...(this.modelPrices || {}) };
-    next[model] = { prompt, completion };
-    this.persistModelPrices(next);
-    this.renderSavedModelPrices();
-    this.updateCostSummaryAndChart(this.currentUsageData, this.getCostChartPeriod());
-    this.renderOverviewSparklines(this.currentUsageData);
-    this.showNotification(i18n.t('usage_stats.model_price_saved'), 'success');
-}
-
-export function handleModelPriceReset() {
-    this.persistModelPrices({});
-    if (typeof localStorage !== 'undefined') {
-        const key = this.modelPriceStorageKey || DEFAULT_MODEL_PRICE_STORAGE_KEY;
-        try {
-            localStorage.removeItem(key);
-            localStorage.removeItem(LEGACY_MODEL_PRICE_STORAGE_KEY);
-        } catch (error) {
-            console.warn('清除模型价格失败:', error);
-        }
-    }
-    this.renderSavedModelPrices();
-    this.prefillModelPriceInputs();
-    this.updateCostSummaryAndChart(this.currentUsageData, this.getCostChartPeriod());
-    this.renderOverviewSparklines(this.currentUsageData);
-}
-
-export function calculateTokenBreakdown(usage = null) {
-    const details = this.collectUsageDetailsFromUsage(usage || this.currentUsageData);
-    if (!details.length) {
-        return { cachedTokens: 0, reasoningTokens: 0 };
-    }
-
-    let cachedTokens = 0;
-    let reasoningTokens = 0;
-
-    details.forEach(detail => {
-        const tokens = detail?.tokens || {};
-        if (typeof tokens.cached_tokens === 'number') {
-            cachedTokens += tokens.cached_tokens;
-        }
-        if (typeof tokens.reasoning_tokens === 'number') {
-            reasoningTokens += tokens.reasoning_tokens;
-        }
-    });
-
-    return { cachedTokens, reasoningTokens };
-}
-
-export function calculateRecentPerMinuteRates(windowMinutes = 30, usage = null) {
-    const details = this.collectUsageDetailsFromUsage(usage || this.currentUsageData);
-    const effectiveWindow = Number.isFinite(windowMinutes) && windowMinutes > 0
-        ? windowMinutes
-        : 30;
-
-    if (!details.length) {
-        return { rpm: 0, tpm: 0, windowMinutes: effectiveWindow, requestCount: 0, tokenCount: 0 };
-    }
-
-    const now = Date.now();
-    const windowStart = now - effectiveWindow * 60 * 1000;
-    let requestCount = 0;
-    let tokenCount = 0;
-
-    details.forEach(detail => {
-        const timestamp = Date.parse(detail.timestamp);
-        if (Number.isNaN(timestamp) || timestamp < windowStart) {
-            return;
-        }
-        requestCount += 1;
-        tokenCount += this.extractTotalTokens(detail);
-    });
-
-    const denominator = effectiveWindow > 0 ? effectiveWindow : 1;
-    return {
-        rpm: requestCount / denominator,
-        tpm: tokenCount / denominator,
-        windowMinutes: effectiveWindow,
-        requestCount,
-        tokenCount
-    };
-}
-
-export function buildRecentWindowSeries(windowMinutes = 30, usage = null, prices = null) {
-    const usagePayload = usage || this.currentUsageData;
-    const effectiveWindow = Number.isFinite(windowMinutes) && windowMinutes > 0
-        ? Math.min(windowMinutes, 720)
-        : 30;
-    const bucketMs = 60 * 1000;
-    const bucketCount = Math.max(1, Math.floor(effectiveWindow));
-    const now = Date.now();
-    const windowStart = now - bucketCount * bucketMs;
-    const labels = Array.from({ length: bucketCount }, (_, index) =>
-        this.formatMinuteLabel(new Date(windowStart + index * bucketMs))
-    );
-
-    const requestSeries = new Array(bucketCount).fill(0);
-    const tokenSeries = new Array(bucketCount).fill(0);
-    const costSeries = new Array(bucketCount).fill(0);
-    const priceTable = prices || this.modelPrices || {};
-    const hasPrices = Object.keys(priceTable).length > 0;
-
-    if (!usagePayload) {
-        return {
-            labels,
-            requests: requestSeries,
-            tokens: tokenSeries,
-            rpm: requestSeries,
-            tpm: tokenSeries,
-            cost: costSeries,
-            hasPrices
-        };
-    }
-
-    const details = this.collectUsageDetailsFromUsage(usagePayload);
-    const calculateDetailCost = (detail) => {
-        if (!hasPrices) {
-            return 0;
-        }
-        const modelName = detail.__modelName || '';
-        const price = priceTable[modelName];
-        if (!price) {
-            return 0;
-        }
-        const tokens = detail?.tokens || {};
-        const promptTokens = Number(tokens.input_tokens) || 0;
-        const completionTokens = Number(tokens.output_tokens) || 0;
-        const promptCost = (promptTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.prompt) || 0);
-        const completionCost = (completionTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.completion) || 0);
-        const total = promptCost + completionCost;
-        return Number.isFinite(total) && total > 0 ? total : 0;
-    };
-
-    details.forEach(detail => {
-        const timestamp = Date.parse(detail.timestamp);
-        if (Number.isNaN(timestamp) || timestamp < windowStart) {
-            return;
-        }
-        const bucketIndex = Math.min(bucketCount - 1, Math.floor((timestamp - windowStart) / bucketMs));
-        if (bucketIndex < 0 || bucketIndex >= bucketCount) {
-            return;
-        }
-
-        requestSeries[bucketIndex] += 1;
-        tokenSeries[bucketIndex] += this.extractTotalTokens(detail);
-        costSeries[bucketIndex] += calculateDetailCost(detail);
-    });
-
-    return {
-        labels,
-        requests: requestSeries,
-        tokens: tokenSeries,
-        rpm: requestSeries,
-        tpm: tokenSeries,
-        cost: costSeries,
-        hasPrices
-    };
-}
-
-export function destroySparklineCharts(targetIds = null) {
-    if (!this.sparklineCharts) {
-        this.sparklineCharts = {};
-    }
-    const ids = targetIds && targetIds.length ? targetIds : Object.keys(this.sparklineCharts);
-    ids.forEach(id => {
-        const chart = this.sparklineCharts[id];
-        if (chart && typeof chart.destroy === 'function') {
-            chart.destroy();
-        }
-        delete this.sparklineCharts[id];
-
-        const canvas = document.getElementById(id);
-        if (canvas && typeof canvas.getContext === 'function') {
-            const ctx = canvas.getContext('2d');
-            if (ctx) {
-                const width = canvas.width || canvas.clientWidth || 300;
-                const height = canvas.height || canvas.clientHeight || 80;
-                ctx.clearRect(0, 0, width, height);
-            }
-        }
-    });
-}
-
-export function renderOverviewSparklines(usage = null) {
-    const series = this.buildRecentWindowSeries(30, usage, this.modelPrices);
-    const labels = series.labels || [];
-    const styleFor = (index = 0) => {
-        const fallback = { borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' };
-        if (!Array.isArray(this.chartLineStyles) || !this.chartLineStyles.length) {
-            return fallback;
-        }
-        return this.chartLineStyles[index % this.chartLineStyles.length] || fallback;
-    };
-
-    const createSparkline = ({ id, data, styleIndex, requirePrices = false }) => {
-        if (requirePrices && !series.hasPrices) {
-            this.destroySparklineCharts([id]);
-            return;
-        }
-        const canvas = document.getElementById(id);
-        if (!canvas) {
-            return;
-        }
-
-        const style = styleFor(styleIndex);
-        const values = Array.isArray(data) && data.length ? data : [0];
-        const maxValue = values.reduce((max, value) => Math.max(max, Number(value) || 0), 0);
-        const suggestedMax = maxValue > 0 ? maxValue * 1.2 : 1;
-
-        this.destroySparklineCharts([id]);
-        if (!this.sparklineCharts) {
-            this.sparklineCharts = {};
-        }
-
-        this.sparklineCharts[id] = new Chart(canvas, {
-            type: 'line',
-            data: {
-                labels,
-                datasets: [{
-                    data: values,
-                    borderColor: style.borderColor,
-                    backgroundColor: style.backgroundColor,
-                    fill: true,
-                    tension: 0.35,
-                    pointRadius: 0,
-                    pointHoverRadius: 3,
-                    borderWidth: 2,
-                    spanGaps: true
-                }]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                animation: false,
-                interaction: { intersect: false, mode: 'index' },
-                plugins: {
-                    legend: { display: false },
-                    tooltip: {
-                        callbacks: {
-                            label: (ctx) => this.formatCompactNumber(ctx.parsed.y || 0)
-                        }
-                    }
-                },
-                layout: { padding: { left: 2, right: 2, top: 6, bottom: 6 } },
-                scales: {
-                    x: { display: false },
-                    y: {
-                        display: false,
-                        beginAtZero: true,
-                        suggestedMin: 0,
-                        suggestedMax
-                    }
-                },
-                elements: {
-                    line: { borderWidth: 2, tension: 0.35 },
-                    point: { radius: 0, hitRadius: 3 }
-                }
-            }
-        });
-    };
-
-    createSparkline({ id: 'requests-sparkline', data: series.requests, styleIndex: 0 });
-    createSparkline({ id: 'tokens-sparkline', data: series.tokens, styleIndex: 1 });
-    createSparkline({ id: 'rpm-sparkline', data: series.rpm, styleIndex: 2 });
-    createSparkline({ id: 'tpm-sparkline', data: series.tpm, styleIndex: 3 });
-    createSparkline({ id: 'cost-sparkline', data: series.cost, styleIndex: 7, requirePrices: true });
-}
-
-export function createHourlyBucketMeta() {
-    const hourMs = 60 * 60 * 1000;
-    const now = new Date();
-    const currentHour = new Date(now);
-    currentHour.setMinutes(0, 0, 0);
-
-    const earliestBucket = new Date(currentHour);
-    earliestBucket.setHours(earliestBucket.getHours() - 23);
-    const earliestTime = earliestBucket.getTime();
-    const labels = [];
-    for (let i = 0; i < 24; i++) {
-        const bucketStart = earliestTime + i * hourMs;
-        labels.push(this.formatHourLabel(new Date(bucketStart)));
-    }
-
-    return {
-        labels,
-        earliestTime,
-        bucketSize: hourMs,
-        lastBucketTime: earliestTime + (labels.length - 1) * hourMs
-    };
-}
-
-export function buildHourlySeriesByModel(metric = 'requests') {
-    const meta = this.createHourlyBucketMeta();
-    const details = this.collectUsageDetails();
-    const dataByModel = new Map();
-    let hasData = false;
-
-    if (!details.length) {
-        return { labels: meta.labels, dataByModel, hasData };
-    }
-
-    details.forEach(detail => {
-        const timestamp = Date.parse(detail.timestamp);
-        if (Number.isNaN(timestamp)) {
-            return;
-        }
-
-        const normalized = new Date(timestamp);
-        normalized.setMinutes(0, 0, 0);
-        const bucketStart = normalized.getTime();
-        if (bucketStart < meta.earliestTime || bucketStart > meta.lastBucketTime) {
-            return;
-        }
-
-        const bucketIndex = Math.floor((bucketStart - meta.earliestTime) / meta.bucketSize);
-        if (bucketIndex < 0 || bucketIndex >= meta.labels.length) {
-            return;
-        }
-
-        const modelName = detail.__modelName || 'Unknown';
-        if (!dataByModel.has(modelName)) {
-            dataByModel.set(modelName, new Array(meta.labels.length).fill(0));
-        }
-
-        const bucketValues = dataByModel.get(modelName);
-        if (metric === 'tokens') {
-            bucketValues[bucketIndex] += this.extractTotalTokens(detail);
-        } else {
-            bucketValues[bucketIndex] += 1;
-        }
-        hasData = true;
-    });
-
-    return { labels: meta.labels, dataByModel, hasData };
-}
-
-export function buildDailySeriesByModel(metric = 'requests') {
-    const details = this.collectUsageDetails();
-    const valuesByModel = new Map();
-    const labelsSet = new Set();
-    let hasData = false;
-
-    if (!details.length) {
-        return { labels: [], dataByModel: new Map(), hasData };
-    }
-
-    details.forEach(detail => {
-        const timestamp = Date.parse(detail.timestamp);
-        if (Number.isNaN(timestamp)) {
-            return;
-        }
-        const dayLabel = this.formatDayLabel(new Date(timestamp));
-        if (!dayLabel) {
-            return;
-        }
-
-        const modelName = detail.__modelName || 'Unknown';
-        if (!valuesByModel.has(modelName)) {
-            valuesByModel.set(modelName, new Map());
-        }
-        const modelDayMap = valuesByModel.get(modelName);
-        const increment = metric === 'tokens' ? this.extractTotalTokens(detail) : 1;
-        modelDayMap.set(dayLabel, (modelDayMap.get(dayLabel) || 0) + increment);
-        labelsSet.add(dayLabel);
-        hasData = true;
-    });
-
-    const labels = Array.from(labelsSet).sort();
-    const dataByModel = new Map();
-    valuesByModel.forEach((dayMap, modelName) => {
-        const series = labels.map(label => dayMap.get(label) || 0);
-        dataByModel.set(modelName, series);
-    });
-
-    return { labels, dataByModel, hasData };
-}
-
-export function buildChartDataForMetric(period = 'day', metric = 'requests') {
-    const baseSeries = period === 'hour'
-        ? this.buildHourlySeriesByModel(metric)
-        : this.buildDailySeriesByModel(metric);
-
-    const labels = baseSeries?.labels || [];
-    const dataByModel = baseSeries?.dataByModel || new Map();
-    const activeSelections = this.getActiveChartLineSelections();
-    let allSeriesCache = null;
-
-    const getAllSeries = () => {
-        if (allSeriesCache) {
-            return allSeriesCache;
-        }
-        const summed = new Array(labels.length).fill(0);
-        dataByModel.forEach(values => {
-            values.forEach((value, idx) => {
-                summed[idx] = (summed[idx] || 0) + value;
-            });
-        });
-        allSeriesCache = summed;
-        return summed;
-    };
-
-    const getSeriesForSelection = (selectionValue) => {
-        if (selectionValue === ALL_MODELS_VALUE) {
-            return getAllSeries();
-        }
-        return dataByModel.get(selectionValue) || new Array(labels.length).fill(0);
-    };
-
-    const datasets = activeSelections.map(selection => {
-        const values = getSeriesForSelection(selection.model);
-        const style = this.chartLineStyles[selection.index % this.chartLineStyles.length] || this.chartLineStyles[0];
-        const label = selection.model === ALL_MODELS_VALUE
-            ? i18n.t('usage_stats.chart_line_all')
-            : selection.model;
-        return {
-            label,
-            data: values,
-            borderColor: style.borderColor,
-            backgroundColor: style.backgroundColor,
-            fill: false,
-            tension: 0.35,
-            pointBackgroundColor: style.borderColor,
-            pointBorderColor: '#ffffff',
-            pointBorderWidth: 2,
-            pointRadius: values.some(v => v > 0) ? 4 : 3
-        };
-    });
-
-    return { labels, datasets };
-}
-
-// 统一格式化小时标签
-export function formatHourLabel(date) {
-    if (!(date instanceof Date)) {
-        return '';
-    }
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    const hour = date.getHours().toString().padStart(2, '0');
-    return `${month}-${day} ${hour}:00`;
-}
-
-export function formatMinuteLabel(date) {
-    if (!(date instanceof Date)) {
-        return '';
-    }
-    const hour = date.getHours().toString().padStart(2, '0');
-    const minute = date.getMinutes().toString().padStart(2, '0');
-    return `${hour}:${minute}`;
-}
-
-export function formatDayLabel(date) {
-    if (!(date instanceof Date)) {
-        return '';
-    }
-    const year = date.getFullYear();
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    return `${year}-${month}-${day}`;
-}
-
-export function extractTotalTokens(detail) {
-    const tokens = detail?.tokens || {};
-    if (typeof tokens.total_tokens === 'number') {
-        return tokens.total_tokens;
-    }
-    const tokenKeys = ['input_tokens', 'output_tokens', 'reasoning_tokens', 'cached_tokens'];
-    return tokenKeys.reduce((sum, key) => {
-        const value = tokens[key];
-        return sum + (typeof value === 'number' ? value : 0);
-    }, 0);
-}
-
-export function formatUsd(value) {
-    const num = Number(value);
-    if (!Number.isFinite(num)) {
-        return '$0.00';
-    }
-    const fixed = num.toFixed(2);
-    const parts = Number(fixed).toLocaleString(undefined, {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-    });
-    return `$${parts}`;
-}
-
-export function calculateCostData(prices = null, usage = null, period = 'day') {
-    const priceTable = prices || this.modelPrices || {};
-    const usagePayload = usage || this.currentUsageData;
-    const entries = Object.entries(priceTable || {});
-    const result = { totalCost: 0, labels: [], datasets: [] };
-
-    if (!entries.length || !usagePayload) {
-        return result;
-    }
-
-    const details = this.collectUsageDetailsFromUsage(usagePayload);
-    if (!details.length) {
-        return result;
-    }
-
-    const normalizedDetails = details.map(detail => {
-        const modelName = detail.__modelName || 'Unknown';
-        const price = priceTable[modelName];
-        if (!price) {
-            return null;
-        }
-
-        const tokens = detail?.tokens || {};
-        const promptTokens = Number(tokens.input_tokens) || 0;
-        const completionTokens = Number(tokens.output_tokens) || 0;
-        const promptCost = (promptTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.prompt) || 0);
-        const completionCost = (completionTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.completion) || 0);
-        const detailCost = promptCost + completionCost;
-        const parsedTimestamp = Date.parse(detail.timestamp);
-
-        if (!Number.isFinite(detailCost) || detailCost <= 0 || Number.isNaN(parsedTimestamp)) {
-            return null;
-        }
-
-        return { modelName, cost: detailCost, timestamp: parsedTimestamp };
-    }).filter(Boolean);
-
-    if (!normalizedDetails.length) {
-        return result;
-    }
-
-    const totalCost = normalizedDetails.reduce((sum, item) => sum + item.cost, 0);
-
-    if (period === 'hour') {
-        const meta = this.createHourlyBucketMeta();
-        const dataByModel = new Map();
-
-        normalizedDetails.forEach(({ modelName, cost, timestamp }) => {
-            const normalized = new Date(timestamp);
-            normalized.setMinutes(0, 0, 0);
-            const bucketStart = normalized.getTime();
-            if (bucketStart < meta.earliestTime || bucketStart > meta.lastBucketTime) {
-                return;
-            }
-            const bucketIndex = Math.floor((bucketStart - meta.earliestTime) / meta.bucketSize);
-            if (bucketIndex < 0 || bucketIndex >= meta.labels.length) {
-                return;
-            }
-            if (!dataByModel.has(modelName)) {
-                dataByModel.set(modelName, new Array(meta.labels.length).fill(0));
-            }
-            const bucketValues = dataByModel.get(modelName);
-            bucketValues[bucketIndex] += cost;
-        });
-
-        const datasets = [];
-        dataByModel.forEach((series, modelName) => {
-            datasets.push({ label: modelName, data: series.map(value => Number(value.toFixed(4))) });
-        });
-
-        return { totalCost, labels: meta.labels, datasets };
-    }
-
-    const labelSet = new Set();
-    const costByModelDay = new Map();
-
-    normalizedDetails.forEach(({ modelName, cost, timestamp }) => {
-        const dayLabel = this.formatDayLabel(new Date(timestamp));
-        if (!dayLabel) {
-            return;
-        }
-
-        if (!costByModelDay.has(modelName)) {
-            costByModelDay.set(modelName, new Map());
-        }
-        const dayMap = costByModelDay.get(modelName);
-        dayMap.set(dayLabel, (dayMap.get(dayLabel) || 0) + cost);
-        labelSet.add(dayLabel);
-    });
-
-    const labels = Array.from(labelSet).sort();
-    const datasets = [];
-    costByModelDay.forEach((dayMap, modelName) => {
-        const series = labels.map(label => Number((dayMap.get(label) || 0).toFixed(4)));
-        datasets.push({ label: modelName, data: series });
-    });
-
-    return { totalCost, labels, datasets };
-}
-
-export function setCostChartPlaceholder(messageKey = null) {
-    const placeholder = document.getElementById('cost-chart-placeholder');
-    const canvas = document.getElementById('cost-chart');
-    if (!placeholder || !canvas) {
-        return;
-    }
-    if (messageKey) {
-        placeholder.textContent = i18n.t(messageKey);
-        placeholder.style.display = 'flex';
-        canvas.style.display = 'none';
-    } else {
-        placeholder.style.display = 'none';
-        canvas.style.display = 'block';
-    }
-}
-
-export function destroyCostChart() {
-    if (this.costChart) {
-        this.costChart.destroy();
-        this.costChart = null;
-    }
-}
-
-export function initializeCostChart(costData, period = 'day') {
-    const canvas = document.getElementById('cost-chart');
-    if (!canvas) {
-        return;
-    }
-    this.destroyCostChart();
-
-    const datasets = (costData.datasets || []).map((dataset, index) => {
-        const style = this.chartLineStyles[index % this.chartLineStyles.length] || this.chartLineStyles[0];
-        return {
-            ...dataset,
-            borderColor: style.borderColor,
-            backgroundColor: style.backgroundColor || 'rgba(59, 130, 246, 0.15)',
-            fill: true,
-            tension: 0.35,
-            pointBackgroundColor: style.borderColor,
-            pointBorderColor: '#ffffff',
-            pointBorderWidth: 2,
-            pointRadius: dataset.data.some(v => v > 0) ? 4 : 3
-        };
-    });
-
-    this.costChart = new Chart(canvas, {
-        type: 'line',
-        data: {
-            labels: costData.labels || [],
-            datasets
-        },
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            interaction: {
-                mode: 'index',
-                intersect: false
-            },
-            plugins: {
-                legend: {
-                    display: true,
-                    position: 'top',
-                    align: 'start',
-                    labels: {
-                        usePointStyle: true
-                    }
-                },
-                tooltip: {
-                    callbacks: {
-                        label: context => {
-                            const label = context.dataset.label || '';
-                            const value = Number(context.parsed.y) || 0;
-                            return `${label}: ${this.formatUsd(value)}`;
-                        }
-                    }
-                }
-            },
-            scales: {
-                x: {
-                    title: {
-                        display: true,
-                        text: i18n.t(period === 'hour' ? 'usage_stats.by_hour' : 'usage_stats.by_day')
-                    }
-                },
-                y: {
-                    beginAtZero: true,
-                    title: {
-                        display: true,
-                        text: i18n.t('usage_stats.cost_axis_label')
-                    },
-                    ticks: {
-                        callback: (value) => this.formatUsd(value).replace('$', '')
-                    }
-                }
-            },
-            elements: {
-                line: {
-                    borderWidth: 2
-                },
-                point: {
-                    borderWidth: 2
-                }
-            }
-        }
-    });
-    this.setCostChartPlaceholder(null);
-}
-
-export function getCostChartPeriod() {
-    const costHourActive = document.getElementById('cost-hour-btn')?.classList.contains('active');
-    return costHourActive ? 'hour' : 'day';
-}
-
-export function updateCostSummaryAndChart(usage = null, period = null) {
-    this.ensureModelPriceState();
-    const totalCostEl = document.getElementById('total-cost');
-    const hasPrices = Object.keys(this.modelPrices || {}).length > 0;
-    const usagePayload = usage || this.currentUsageData;
-    const resolvedPeriod = period || this.getCostChartPeriod();
-
-    if (!hasPrices) {
-        if (totalCostEl) {
-            totalCostEl.textContent = '--';
-        }
-        this.destroyCostChart();
-        this.setCostChartPlaceholder('usage_stats.cost_need_price');
-        return;
-    }
-
-    if (!usagePayload) {
-        if (totalCostEl) {
-            totalCostEl.textContent = '--';
-        }
-        this.destroyCostChart();
-        this.setCostChartPlaceholder('usage_stats.cost_need_usage');
-        return;
-    }
-
-    const costData = this.calculateCostData(this.modelPrices, usagePayload, resolvedPeriod);
-    if (totalCostEl) {
-        totalCostEl.textContent = this.formatUsd(costData.totalCost);
-    }
-
-    if (!costData.labels.length || !costData.datasets.length) {
-        this.destroyCostChart();
-        this.setCostChartPlaceholder('usage_stats.cost_no_data');
-        return;
-    }
-
-    this.initializeCostChart(costData, resolvedPeriod);
-}
-
-// 初始化图表
-export function initializeCharts() {
-    const requestsHourActive = document.getElementById('requests-hour-btn')?.classList.contains('active');
-    const tokensHourActive = document.getElementById('tokens-hour-btn')?.classList.contains('active');
-    const costHourActive = document.getElementById('cost-hour-btn')?.classList.contains('active');
-    this.initializeRequestsChart(requestsHourActive ? 'hour' : 'day');
-    this.initializeTokensChart(tokensHourActive ? 'hour' : 'day');
-    this.updateCostSummaryAndChart(this.currentUsageData, costHourActive ? 'hour' : 'day');
-}
-
-// 初始化请求趋势图表
-export function initializeRequestsChart(period = 'day') {
-    const ctx = document.getElementById('requests-chart');
-    if (!ctx) return;
-
-    // 销毁现有图表
-    if (this.requestsChart) {
-        this.requestsChart.destroy();
-    }
-
-    const data = this.getRequestsChartData(period);
-
-    this.requestsChart = new Chart(ctx, {
-        type: 'line',
-        data: data,
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            interaction: {
-                mode: 'index',
-                intersect: false
-            },
-            plugins: {
-                legend: {
-                    display: true,
-                    position: 'top',
-                    align: 'start',
-                    labels: {
-                        usePointStyle: true
-                    }
-                }
-            },
-            scales: {
-                x: {
-                    title: {
-                        display: true,
-                        text: i18n.t(period === 'hour' ? 'usage_stats.by_hour' : 'usage_stats.by_day')
-                    }
-                },
-                y: {
-                    beginAtZero: true,
-                    title: {
-                        display: true,
-                        text: i18n.t('usage_stats.requests_count')
-                    }
-                }
-            },
-            elements: {
-                line: {
-                    tension: 0.35,
-                    borderWidth: 2
-                },
-                point: {
-                    borderWidth: 2,
-                    radius: 4
-                }
-            }
-        }
-    });
-}
-
-// 初始化Token使用趋势图表
-export function initializeTokensChart(period = 'day') {
-    const ctx = document.getElementById('tokens-chart');
-    if (!ctx) return;
-
-    // 销毁现有图表
-    if (this.tokensChart) {
-        this.tokensChart.destroy();
-    }
-
-    const data = this.getTokensChartData(period);
-
-    this.tokensChart = new Chart(ctx, {
-        type: 'line',
-        data: data,
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            interaction: {
-                mode: 'index',
-                intersect: false
-            },
-            plugins: {
-                legend: {
-                    display: true,
-                    position: 'top',
-                    align: 'start',
-                    labels: {
-                        usePointStyle: true
-                    }
-                }
-            },
-            scales: {
-                x: {
-                    title: {
-                        display: true,
-                        text: i18n.t(period === 'hour' ? 'usage_stats.by_hour' : 'usage_stats.by_day')
-                    }
-                },
-                y: {
-                    beginAtZero: true,
-                    title: {
-                        display: true,
-                        text: i18n.t('usage_stats.tokens_count')
-                    }
-                }
-            },
-            elements: {
-                line: {
-                    tension: 0.35,
-                    borderWidth: 2
-                },
-                point: {
-                    borderWidth: 2,
-                    radius: 4
-                }
-            }
-        }
-    });
-}
-
-// 获取请求图表数据
-export function getRequestsChartData(period) {
-    if (!this.currentUsageData) {
-        return { labels: [], datasets: [] };
-    }
-    return this.buildChartDataForMetric(period, 'requests');
-}
-
-// 获取Token图表数据
-export function getTokensChartData(period) {
-    if (!this.currentUsageData) {
-        return { labels: [], datasets: [] };
-    }
-    return this.buildChartDataForMetric(period, 'tokens');
-}
-
-// 切换请求图表时间周期
-export function switchRequestsPeriod(period) {
-    // 更新按钮状态
-    document.getElementById('requests-hour-btn').classList.toggle('active', period === 'hour');
-    document.getElementById('requests-day-btn').classList.toggle('active', period === 'day');
-
-    // 更新图表数据
-    if (this.requestsChart) {
-        const newData = this.getRequestsChartData(period);
-        this.requestsChart.data = newData;
-        this.requestsChart.options.scales.x.title.text = i18n.t(period === 'hour' ? 'usage_stats.by_hour' : 'usage_stats.by_day');
-        this.requestsChart.update();
-    }
-}
-
-// 切换Token图表时间周期
-export function switchTokensPeriod(period) {
-    // 更新按钮状态
-    document.getElementById('tokens-hour-btn').classList.toggle('active', period === 'hour');
-    document.getElementById('tokens-day-btn').classList.toggle('active', period === 'day');
-
-    // 更新图表数据
-    if (this.tokensChart) {
-        const newData = this.getTokensChartData(period);
-        this.tokensChart.data = newData;
-        this.tokensChart.options.scales.x.title.text = i18n.t(period === 'hour' ? 'usage_stats.by_hour' : 'usage_stats.by_day');
-        this.tokensChart.update();
-    }
-}
-
-export function switchCostPeriod(period) {
-    if (period !== 'hour' && period !== 'day') {
-        return;
-    }
-    const hourBtn = document.getElementById('cost-hour-btn');
-    const dayBtn = document.getElementById('cost-day-btn');
-    if (hourBtn && dayBtn) {
-        hourBtn.classList.toggle('active', period === 'hour');
-        dayBtn.classList.toggle('active', period === 'day');
-    }
-
-    this.updateCostSummaryAndChart(this.currentUsageData, period);
-}
-
-// 更新API详细统计表格
-export function updateApiStatsTable(data) {
-    const container = document.getElementById('api-stats-table');
-    if (!container) return;
-
-    const apis = data.apis || {};
-
-    if (Object.keys(apis).length === 0) {
-        container.innerHTML = `<div class="no-data-message">${i18n.t('usage_stats.no_data')}</div>`;
-        return;
-    }
-
-    const hasPrices = Object.keys(this.modelPrices || {}).length > 0;
-    const calculateEndpointCost = (apiData) => {
-        if (!hasPrices) return 0;
-        let cost = 0;
-        const models = apiData.models || {};
-        Object.entries(models).forEach(([modelName, modelData]) => {
-            const price = this.modelPrices?.[modelName];
-            if (!price) return;
-            const details = Array.isArray(modelData.details) ? modelData.details : [];
-            details.forEach(detail => {
-                const tokens = detail?.tokens || {};
-                const promptTokens = Number(tokens.input_tokens) || 0;
-                const completionTokens = Number(tokens.output_tokens) || 0;
-                const detailCost = (promptTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.prompt) || 0)
-                    + (completionTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.completion) || 0);
-                if (Number.isFinite(detailCost) && detailCost > 0) {
-                    cost += detailCost;
-                }
-            });
-        });
-        return Number(cost.toFixed(4));
-    };
-
-    let tableHtml = `
-        <table class="stats-table">
-            <thead>
-                <tr>
-                    <th>${i18n.t('usage_stats.api_endpoint')}</th>
-                    <th>${i18n.t('usage_stats.requests_count')}</th>
-                    <th>${i18n.t('usage_stats.tokens_count')}</th>
-                    <th>${i18n.t('usage_stats.total_cost')}</th>
-                    <th>${i18n.t('usage_stats.models')}</th>
-                </tr>
-            </thead>
-            <tbody>
-    `;
-
-    Object.entries(apis).forEach(([endpoint, apiData]) => {
-        const totalRequests = apiData.total_requests || 0;
-        const endpointCost = calculateEndpointCost(apiData);
-        const displayEndpoint = (this.maskUsageSensitiveValue
-            ? this.maskUsageSensitiveValue(endpoint)
-            : (endpoint ?? '')) || '-';
-        const safeEndpoint = this.escapeHtml
-            ? this.escapeHtml(displayEndpoint)
-            : displayEndpoint;
-
-        // 构建模型详情
-        let modelsHtml = '';
-        if (apiData.models && Object.keys(apiData.models).length > 0) {
-            modelsHtml = '<div class="model-details">';
-            Object.entries(apiData.models).forEach(([modelName, modelData]) => {
-                const safeModel = this.escapeHtml ? this.escapeHtml(modelName || '') : (modelName || '');
-                const modelRequests = modelData.total_requests ?? 0;
-                const modelTokens = this.formatTokensInMillions(modelData.total_tokens ?? 0);
-                modelsHtml += `
-                    <div class="model-item">
-                        <span class="model-name">${safeModel}</span>
-                        <span>${modelRequests} 请求 / ${modelTokens} tokens</span>
-                    </div>
-                `;
-            });
-            modelsHtml += '</div>';
-        }
-
-        tableHtml += `
-            <tr>
-                <td>${safeEndpoint}</td>
-                <td>${totalRequests}</td>
-                <td>${this.formatTokensInMillions(apiData.total_tokens || 0)}</td>
-                <td>${hasPrices && endpointCost > 0 ? this.formatUsd(endpointCost) : '--'}</td>
-                <td>${modelsHtml || '-'}</td>
-            </tr>
-        `;
-    });
-
-    tableHtml += '</tbody></table>';
-    container.innerHTML = tableHtml;
-}
-
-export const usageModule = {
-    getKeyStats,
-    loadUsageStats,
-    updateUsageOverview,
-    maskUsageSensitiveValue,
-    getModelNamesFromUsage,
-    getChartLineMaxCount,
-    getVisibleChartLineCount,
-    ensureChartLineSelectionLength,
-    updateChartLineControlsUI,
-    setChartLineVisibleCount,
-    changeChartLineCount,
-    removeChartLine,
-    updateChartLineSelectors,
-    handleChartLineSelectionChange,
-    refreshChartsForSelections,
-    getActiveChartLineSelections,
-    collectUsageDetailsFromUsage,
-    collectUsageDetails,
-    migrateLegacyModelPrices,
-    ensureModelPriceState,
-    loadModelPricesFromStorage,
-    persistModelPrices,
-    renderModelPriceOptions,
-    renderSavedModelPrices,
-    handleModelPriceEdit,
-    prefillModelPriceInputs,
-    normalizePriceValue,
-    handleModelPriceSubmit,
-    handleModelPriceReset,
-    calculateTokenBreakdown,
-    calculateRecentPerMinuteRates,
-    buildRecentWindowSeries,
-    createHourlyBucketMeta,
-    buildHourlySeriesByModel,
-    buildDailySeriesByModel,
-    buildChartDataForMetric,
-    formatHourLabel,
-    formatMinuteLabel,
-    formatTokensInMillions,
-    formatPerMinuteValue,
-    formatCompactNumber,
-    formatDayLabel,
-    extractTotalTokens,
-    formatUsd,
-    calculateCostData,
-    getCostChartPeriod,
-    setCostChartPlaceholder,
-    destroyCostChart,
-    destroySparklineCharts,
-    renderOverviewSparklines,
-    initializeCostChart,
-    updateCostSummaryAndChart,
-    initializeCharts,
-    initializeRequestsChart,
-    initializeTokensChart,
-    getRequestsChartData,
-    getTokensChartData,
-    switchRequestsPeriod,
-    switchTokensPeriod,
-    switchCostPeriod,
-    updateApiStatsTable,
-    registerUsageListeners
-};
-
-// 订阅全局事件，基于配置加载结果渲染使用统计
-export function registerUsageListeners() {
-    if (!this.events || typeof this.events.on !== 'function') {
-        return;
-    }
-    this.events.on('data:config-loaded', (event) => {
-        const detail = event?.detail || {};
-        const usageData = detail.usageData || null;
-        this.loadUsageStats(usageData);
-    });
-}
diff --git a/src/pages/AiProvidersPage.module.scss b/src/pages/AiProvidersPage.module.scss
new file mode 100644
index 0000000..9947223
--- /dev/null
+++ b/src/pages/AiProvidersPage.module.scss
@@ -0,0 +1,46 @@
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xl;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  h3 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+}
+
+.providerList {
+  display: grid;
+  gap: $spacing-md;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/pages/AiProvidersPage.tsx b/src/pages/AiProvidersPage.tsx
new file mode 100644
index 0000000..49dd29b
--- /dev/null
+++ b/src/pages/AiProvidersPage.tsx
@@ -0,0 +1,782 @@
+import { Fragment, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { HeaderInputList } from '@/components/ui/HeaderInputList';
+import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
+import { providersApi } from '@/services/api';
+import type {
+  GeminiKeyConfig,
+  ProviderKeyConfig,
+  OpenAIProviderConfig,
+  ApiKeyEntry,
+  ModelAlias
+} from '@/types';
+import { headersToEntries, buildHeaderObject, type HeaderEntry } from '@/utils/headers';
+import { maskApiKey } from '@/utils/format';
+
+type ProviderModal =
+  | { type: 'gemini'; index: number | null }
+  | { type: 'codex'; index: number | null }
+  | { type: 'claude'; index: number | null }
+  | { type: 'openai'; index: number | null };
+
+interface OpenAIFormState {
+  name: string;
+  baseUrl: string;
+  headers: HeaderEntry[];
+  priority?: number;
+  testModel?: string;
+  modelsText: string;
+  apiKeyEntries: ApiKeyEntry[];
+}
+
+const parseModelsText = (value: string): ModelAlias[] => {
+  return value
+    .split(/\n+/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => {
+      const [namePart, aliasPart] = line.split(',').map((item) => item.trim());
+      if (!namePart) return null;
+      const entry: ModelAlias = { name: namePart };
+      if (aliasPart && aliasPart !== namePart) entry.alias = aliasPart;
+      return entry;
+    })
+    .filter(Boolean) as ModelAlias[];
+};
+
+const modelsToText = (models?: ModelAlias[]) =>
+  Array.isArray(models)
+    ? models
+        .map((m) => (m.alias && m.alias !== m.name ? `${m.name}, ${m.alias}` : m.name))
+        .filter(Boolean)
+        .join('\n')
+    : '';
+
+const parseExcludedModels = (text: string): string[] =>
+  text
+    .split(/[\n,]+/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+
+const excludedModelsToText = (models?: string[]) => (Array.isArray(models) ? models.join('\n') : '');
+
+const buildApiKeyEntry = (input?: Partial<ApiKeyEntry>): ApiKeyEntry => ({
+  apiKey: input?.apiKey ?? '',
+  proxyUrl: input?.proxyUrl ?? '',
+  headers: input?.headers ?? {}
+});
+
+export function AiProvidersPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const [geminiKeys, setGeminiKeys] = useState<GeminiKeyConfig[]>([]);
+  const [codexConfigs, setCodexConfigs] = useState<ProviderKeyConfig[]>([]);
+  const [claudeConfigs, setClaudeConfigs] = useState<ProviderKeyConfig[]>([]);
+  const [openaiProviders, setOpenaiProviders] = useState<OpenAIProviderConfig[]>([]);
+
+  const [modal, setModal] = useState<ProviderModal | null>(null);
+
+  const [geminiForm, setGeminiForm] = useState<GeminiKeyConfig & { excludedText: string }>({
+    apiKey: '',
+    baseUrl: '',
+    headers: {},
+    excludedModels: [],
+    excludedText: ''
+  });
+  const [providerForm, setProviderForm] = useState<ProviderKeyConfig & { modelsText: string }>({
+    apiKey: '',
+    baseUrl: '',
+    proxyUrl: '',
+    headers: {},
+    models: [],
+    modelsText: ''
+  });
+  const [openaiForm, setOpenaiForm] = useState<OpenAIFormState>({
+    name: '',
+    baseUrl: '',
+    headers: [],
+    apiKeyEntries: [buildApiKeyEntry()],
+    modelsText: ''
+  });
+  const [saving, setSaving] = useState(false);
+
+  const disableControls = useMemo(() => connectionStatus !== 'connected', [connectionStatus]);
+
+  const loadConfigs = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await fetchConfig(undefined, true);
+      setGeminiKeys(data?.geminiApiKeys || []);
+      setCodexConfigs(data?.codexApiKeys || []);
+      setClaudeConfigs(data?.claudeApiKeys || []);
+      setOpenaiProviders(data?.openaiCompatibility || []);
+    } catch (err: any) {
+      setError(err?.message || t('notification.refresh_failed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadConfigs();
+  }, []);
+
+  useEffect(() => {
+    if (config?.geminiApiKeys) setGeminiKeys(config.geminiApiKeys);
+    if (config?.codexApiKeys) setCodexConfigs(config.codexApiKeys);
+    if (config?.claudeApiKeys) setClaudeConfigs(config.claudeApiKeys);
+    if (config?.openaiCompatibility) setOpenaiProviders(config.openaiCompatibility);
+  }, [config?.geminiApiKeys, config?.codexApiKeys, config?.claudeApiKeys, config?.openaiCompatibility]);
+
+  const closeModal = () => {
+    setModal(null);
+    setGeminiForm({
+      apiKey: '',
+      baseUrl: '',
+      headers: {},
+      excludedModels: [],
+      excludedText: ''
+    });
+    setProviderForm({
+      apiKey: '',
+      baseUrl: '',
+      proxyUrl: '',
+      headers: {},
+      models: [],
+      modelsText: ''
+    });
+    setOpenaiForm({
+      name: '',
+      baseUrl: '',
+      headers: [],
+      apiKeyEntries: [buildApiKeyEntry()],
+      modelsText: '',
+      priority: undefined,
+      testModel: undefined
+    });
+  };
+
+  const openGeminiModal = (index: number | null) => {
+    if (index !== null) {
+      const entry = geminiKeys[index];
+      setGeminiForm({
+        ...entry,
+        excludedText: excludedModelsToText(entry?.excludedModels)
+      });
+    }
+    setModal({ type: 'gemini', index });
+  };
+
+  const openProviderModal = (type: 'codex' | 'claude', index: number | null) => {
+    const source = type === 'codex' ? codexConfigs : claudeConfigs;
+    if (index !== null) {
+      const entry = source[index];
+      setProviderForm({
+        ...entry,
+        modelsText: modelsToText(entry?.models)
+      });
+    }
+    setModal({ type, index });
+  };
+
+  const openOpenaiModal = (index: number | null) => {
+    if (index !== null) {
+      const entry = openaiProviders[index];
+      setOpenaiForm({
+        name: entry.name,
+        baseUrl: entry.baseUrl,
+        headers: headersToEntries(entry.headers),
+        priority: entry.priority,
+        testModel: entry.testModel,
+        modelsText: modelsToText(entry.models),
+        apiKeyEntries: entry.apiKeyEntries?.length ? entry.apiKeyEntries : [buildApiKeyEntry()]
+      });
+    }
+    setModal({ type: 'openai', index });
+  };
+
+  const saveGemini = async () => {
+    setSaving(true);
+    try {
+      const payload: GeminiKeyConfig = {
+        apiKey: geminiForm.apiKey.trim(),
+        baseUrl: geminiForm.baseUrl?.trim() || undefined,
+        headers: buildHeaderObject(headersToEntries(geminiForm.headers as any)),
+        excludedModels: parseExcludedModels(geminiForm.excludedText)
+      };
+      const nextList =
+        modal?.type === 'gemini' && modal.index !== null
+          ? geminiKeys.map((item, idx) => (idx === modal.index ? payload : item))
+          : [...geminiKeys, payload];
+
+      await providersApi.saveGeminiKeys(nextList);
+      setGeminiKeys(nextList);
+      updateConfigValue('gemini-api-key', nextList);
+      clearCache('gemini-api-key');
+      const message =
+        modal?.index !== null ? t('notification.gemini_key_updated') : t('notification.gemini_key_added');
+      showNotification(message, 'success');
+      closeModal();
+    } catch (err: any) {
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deleteGemini = async (apiKey: string) => {
+    if (!window.confirm(t('ai_providers.gemini_delete_confirm'))) return;
+    try {
+      await providersApi.deleteGeminiKey(apiKey);
+      const next = geminiKeys.filter((item) => item.apiKey !== apiKey);
+      setGeminiKeys(next);
+      updateConfigValue('gemini-api-key', next);
+      clearCache('gemini-api-key');
+      showNotification(t('notification.gemini_key_deleted'), 'success');
+    } catch (err: any) {
+      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    }
+  };
+
+  const saveProvider = async (type: 'codex' | 'claude') => {
+    setSaving(true);
+    try {
+      const payload: ProviderKeyConfig = {
+        apiKey: providerForm.apiKey.trim(),
+        baseUrl: providerForm.baseUrl?.trim() || undefined,
+        proxyUrl: providerForm.proxyUrl?.trim() || undefined,
+        headers: buildHeaderObject(headersToEntries(providerForm.headers as any)),
+        models: parseModelsText(providerForm.modelsText)
+      };
+
+      const source = type === 'codex' ? codexConfigs : claudeConfigs;
+      const nextList =
+        modal?.type === type && modal.index !== null
+          ? source.map((item, idx) => (idx === modal.index ? payload : item))
+          : [...source, payload];
+
+      if (type === 'codex') {
+        await providersApi.saveCodexConfigs(nextList);
+        setCodexConfigs(nextList);
+        updateConfigValue('codex-api-key', nextList);
+        clearCache('codex-api-key');
+        const message =
+          modal?.index !== null ? t('notification.codex_config_updated') : t('notification.codex_config_added');
+        showNotification(message, 'success');
+      } else {
+        await providersApi.saveClaudeConfigs(nextList);
+        setClaudeConfigs(nextList);
+        updateConfigValue('claude-api-key', nextList);
+        clearCache('claude-api-key');
+        const message =
+          modal?.index !== null ? t('notification.claude_config_updated') : t('notification.claude_config_added');
+        showNotification(message, 'success');
+      }
+
+      closeModal();
+    } catch (err: any) {
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deleteProviderEntry = async (type: 'codex' | 'claude', apiKey: string) => {
+    if (!window.confirm(t(`ai_providers.${type}_delete_confirm` as any))) return;
+    try {
+      if (type === 'codex') {
+        await providersApi.deleteCodexConfig(apiKey);
+        const next = codexConfigs.filter((item) => item.apiKey !== apiKey);
+        setCodexConfigs(next);
+        updateConfigValue('codex-api-key', next);
+        clearCache('codex-api-key');
+        showNotification(t('notification.codex_config_deleted'), 'success');
+      } else {
+        await providersApi.deleteClaudeConfig(apiKey);
+        const next = claudeConfigs.filter((item) => item.apiKey !== apiKey);
+        setClaudeConfigs(next);
+        updateConfigValue('claude-api-key', next);
+        clearCache('claude-api-key');
+        showNotification(t('notification.claude_config_deleted'), 'success');
+      }
+    } catch (err: any) {
+      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    }
+  };
+
+  const saveOpenai = async () => {
+    setSaving(true);
+    try {
+      const payload: OpenAIProviderConfig = {
+        name: openaiForm.name.trim(),
+        baseUrl: openaiForm.baseUrl.trim(),
+        headers: buildHeaderObject(openaiForm.headers),
+        apiKeyEntries: openaiForm.apiKeyEntries.map((entry) => ({
+          apiKey: entry.apiKey.trim(),
+          proxyUrl: entry.proxyUrl?.trim() || undefined,
+          headers: entry.headers
+        }))
+      };
+      if (openaiForm.priority !== undefined) payload.priority = openaiForm.priority;
+      if (openaiForm.testModel) payload.testModel = openaiForm.testModel.trim();
+      const models = parseModelsText(openaiForm.modelsText);
+      if (models.length) payload.models = models;
+
+      const nextList =
+        modal?.type === 'openai' && modal.index !== null
+          ? openaiProviders.map((item, idx) => (idx === modal.index ? payload : item))
+          : [...openaiProviders, payload];
+
+      await providersApi.saveOpenAIProviders(nextList);
+      setOpenaiProviders(nextList);
+      updateConfigValue('openai-compatibility', nextList);
+      clearCache('openai-compatibility');
+      const message =
+        modal?.index !== null ? t('notification.openai_provider_updated') : t('notification.openai_provider_added');
+      showNotification(message, 'success');
+      closeModal();
+    } catch (err: any) {
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deleteOpenai = async (name: string) => {
+    if (!window.confirm(t('ai_providers.openai_delete_confirm'))) return;
+    try {
+      await providersApi.deleteOpenAIProvider(name);
+      const next = openaiProviders.filter((item) => item.name !== name);
+      setOpenaiProviders(next);
+      updateConfigValue('openai-compatibility', next);
+      clearCache('openai-compatibility');
+      showNotification(t('notification.openai_provider_deleted'), 'success');
+    } catch (err: any) {
+      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    }
+  };
+
+  const renderKeyEntries = (entries: ApiKeyEntry[]) => {
+    const list = entries.length ? entries : [buildApiKeyEntry()];
+    const updateEntry = (idx: number, field: keyof ApiKeyEntry, value: string) => {
+      const next = list.map((entry, i) => (i === idx ? { ...entry, [field]: value } : entry));
+      setOpenaiForm((prev) => ({ ...prev, apiKeyEntries: next }));
+    };
+
+    const removeEntry = (idx: number) => {
+      const next = list.filter((_, i) => i !== idx);
+      setOpenaiForm((prev) => ({ ...prev, apiKeyEntries: next.length ? next : [buildApiKeyEntry()] }));
+    };
+
+    const addEntry = () => {
+      setOpenaiForm((prev) => ({ ...prev, apiKeyEntries: [...list, buildApiKeyEntry()] }));
+    };
+
+    return (
+      <div className="stack">
+        {list.map((entry, index) => (
+          <div key={index} className="item-row">
+            <div className="item-meta">
+              <Input
+                label={`${t('common.api_key')} #${index + 1}`}
+                value={entry.apiKey}
+                onChange={(e) => updateEntry(index, 'apiKey', e.target.value)}
+              />
+              <Input
+                label={t('common.proxy_url')}
+                value={entry.proxyUrl ?? ''}
+                onChange={(e) => updateEntry(index, 'proxyUrl', e.target.value)}
+              />
+            </div>
+            <div className="item-actions">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => removeEntry(index)}
+                disabled={list.length <= 1 || saving}
+              >
+                {t('common.delete')}
+              </Button>
+            </div>
+          </div>
+        ))}
+        <Button variant="secondary" size="sm" onClick={addEntry} disabled={saving}>
+          {t('ai_providers.openai_keys_add_btn')}
+        </Button>
+      </div>
+    );
+  };
+
+  const renderList = <T,>(
+    items: T[],
+    keyField: (item: T) => string,
+    renderContent: (item: T, index: number) => ReactNode,
+    onEdit: (index: number) => void,
+    onDelete: (item: T) => void,
+    addLabel: string,
+    deleteLabel?: string
+  ) => {
+    if (loading) {
+      return <div className="hint">{t('common.loading')}</div>;
+    }
+
+    if (!items.length) {
+      return (
+        <EmptyState
+          title={t('common.info')}
+          description={t('ai_providers.gemini_empty_desc')}
+          action={
+            <Button onClick={() => onEdit(-1)} disabled={disableControls}>
+              {addLabel}
+            </Button>
+          }
+        />
+      );
+    }
+
+    return (
+      <div className="item-list">
+        {items.map((item, index) => (
+          <div key={keyField(item)} className="item-row">
+            <div className="item-meta">{renderContent(item, index)}</div>
+            <div className="item-actions">
+              <Button variant="secondary" size="sm" onClick={() => onEdit(index)} disabled={disableControls}>
+                {t('common.edit')}
+              </Button>
+              <Button variant="danger" size="sm" onClick={() => onDelete(item)} disabled={disableControls}>
+                {deleteLabel || t('common.delete')}
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="stack">
+      {error && <div className="error-box">{error}</div>}
+
+      <Card
+        title={t('ai_providers.gemini_title')}
+        extra={
+          <Button size="sm" onClick={() => openGeminiModal(null)} disabled={disableControls}>
+            {t('ai_providers.gemini_add_button')}
+          </Button>
+        }
+      >
+        {renderList<GeminiKeyConfig>(
+          geminiKeys,
+          (item) => item.apiKey,
+          (item, index) => (
+            <Fragment>
+              <div className="item-title">
+                {t('ai_providers.gemini_item_title')} #{index + 1}
+              </div>
+              <div className="item-subtitle">{maskApiKey(item.apiKey)}</div>
+              {item.baseUrl && <div className="pill">{item.baseUrl}</div>}
+              {item.excludedModels?.length ? (
+                <div className="item-subtitle">
+                  {t('ai_providers.excluded_models_count', { count: item.excludedModels.length })}
+                </div>
+              ) : null}
+            </Fragment>
+          ),
+          (index) => openGeminiModal(index),
+          (item) => deleteGemini(item.apiKey),
+          t('ai_providers.gemini_add_button')
+        )}
+      </Card>
+
+      <Card
+        title={t('ai_providers.codex_title')}
+        extra={
+          <Button size="sm" onClick={() => openProviderModal('codex', null)} disabled={disableControls}>
+            {t('ai_providers.codex_add_button')}
+          </Button>
+        }
+      >
+        {renderList<ProviderKeyConfig>(
+          codexConfigs,
+          (item) => item.apiKey,
+          (item) => (
+            <Fragment>
+              <div className="item-title">{item.baseUrl || t('ai_providers.codex_item_title')}</div>
+              <div className="item-subtitle">{maskApiKey(item.apiKey)}</div>
+              {item.proxyUrl && <div className="pill">{item.proxyUrl}</div>}
+            </Fragment>
+          ),
+          (index) => openProviderModal('codex', index),
+          (item) => deleteProviderEntry('codex', item.apiKey),
+          t('ai_providers.codex_add_button')
+        )}
+      </Card>
+
+      <Card
+        title={t('ai_providers.claude_title')}
+        extra={
+          <Button size="sm" onClick={() => openProviderModal('claude', null)} disabled={disableControls}>
+            {t('ai_providers.claude_add_button')}
+          </Button>
+        }
+      >
+        {renderList<ProviderKeyConfig>(
+          claudeConfigs,
+          (item) => item.apiKey,
+          (item) => (
+            <Fragment>
+              <div className="item-title">{item.baseUrl || t('ai_providers.claude_item_title')}</div>
+              <div className="item-subtitle">{maskApiKey(item.apiKey)}</div>
+              {item.proxyUrl && <div className="pill">{item.proxyUrl}</div>}
+              {item.models?.length ? (
+                <div className="item-subtitle">
+                  {t('ai_providers.claude_models_count')}: {item.models.length}
+                </div>
+              ) : null}
+            </Fragment>
+          ),
+          (index) => openProviderModal('claude', index),
+          (item) => deleteProviderEntry('claude', item.apiKey),
+          t('ai_providers.claude_add_button')
+        )}
+      </Card>
+
+      <Card
+        title={t('ai_providers.openai_title')}
+        extra={
+          <Button size="sm" onClick={() => openOpenaiModal(null)} disabled={disableControls}>
+            {t('ai_providers.openai_add_button')}
+          </Button>
+        }
+      >
+        {renderList<OpenAIProviderConfig>(
+          openaiProviders,
+          (item) => item.name,
+          (item) => (
+            <Fragment>
+              <div className="item-title">{item.name}</div>
+              <div className="item-subtitle">{item.baseUrl}</div>
+              <div className="pill">
+                {t('ai_providers.openai_keys_count')}: {item.apiKeyEntries?.length || 0}
+              </div>
+              <div className="pill">
+                {t('ai_providers.openai_models_count')}: {item.models?.length || 0}
+              </div>
+              {item.priority !== undefined && <div className="pill">Priority: {item.priority}</div>}
+              {item.testModel && <div className="pill">{item.testModel}</div>}
+            </Fragment>
+          ),
+          (index) => openOpenaiModal(index),
+          (item) => deleteOpenai(item.name),
+          t('ai_providers.openai_add_button'),
+          t('ai_providers.openai_delete_confirm')
+        )}
+      </Card>
+
+      {/* Gemini Modal */}
+      <Modal
+        open={modal?.type === 'gemini'}
+        onClose={closeModal}
+        title={
+          modal?.index !== null ? t('ai_providers.gemini_edit_modal_title') : t('ai_providers.gemini_add_modal_title')
+        }
+        footer={
+          <>
+            <Button variant="secondary" onClick={closeModal} disabled={saving}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={saveGemini} loading={saving}>
+              {t('common.save')}
+            </Button>
+          </>
+        }
+      >
+        <Input
+          label={t('ai_providers.gemini_add_modal_key_label')}
+          placeholder={t('ai_providers.gemini_add_modal_key_placeholder')}
+          value={geminiForm.apiKey}
+          onChange={(e) => setGeminiForm((prev) => ({ ...prev, apiKey: e.target.value }))}
+        />
+        <Input
+          label={t('ai_providers.gemini_base_url_placeholder')}
+          placeholder={t('ai_providers.gemini_base_url_placeholder')}
+          value={geminiForm.baseUrl ?? ''}
+          onChange={(e) => setGeminiForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+        />
+        <HeaderInputList
+          entries={headersToEntries(geminiForm.headers as any)}
+          onChange={(entries) => setGeminiForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
+          addLabel={t('common.custom_headers_add')}
+          keyPlaceholder={t('common.custom_headers_key_placeholder')}
+          valuePlaceholder={t('common.custom_headers_value_placeholder')}
+        />
+        <div className="form-group">
+          <label>{t('ai_providers.excluded_models_label')}</label>
+          <textarea
+            className="input"
+            placeholder={t('ai_providers.excluded_models_placeholder')}
+            value={geminiForm.excludedText}
+            onChange={(e) => setGeminiForm((prev) => ({ ...prev, excludedText: e.target.value }))}
+            rows={4}
+          />
+          <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
+        </div>
+      </Modal>
+
+      {/* Codex / Claude Modal */}
+      <Modal
+        open={modal?.type === 'codex' || modal?.type === 'claude'}
+        onClose={closeModal}
+        title={
+          modal?.type === 'codex'
+            ? modal.index !== null
+              ? t('ai_providers.codex_edit_modal_title')
+              : t('ai_providers.codex_add_modal_title')
+            : modal?.type === 'claude' && modal.index !== null
+              ? t('ai_providers.claude_edit_modal_title')
+              : t('ai_providers.claude_add_modal_title')
+        }
+        footer={
+          <>
+            <Button variant="secondary" onClick={closeModal} disabled={saving}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={() => saveProvider(modal?.type as 'codex' | 'claude')} loading={saving}>
+              {t('common.save')}
+            </Button>
+          </>
+        }
+      >
+        <Input
+          label={
+            modal?.type === 'codex'
+              ? t('ai_providers.codex_add_modal_key_label')
+              : t('ai_providers.claude_add_modal_key_label')
+          }
+          value={providerForm.apiKey}
+          onChange={(e) => setProviderForm((prev) => ({ ...prev, apiKey: e.target.value }))}
+        />
+        <Input
+          label={
+            modal?.type === 'codex'
+              ? t('ai_providers.codex_add_modal_url_label')
+              : t('ai_providers.claude_add_modal_url_label')
+          }
+          value={providerForm.baseUrl ?? ''}
+          onChange={(e) => setProviderForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+        />
+        <Input
+          label={
+            modal?.type === 'codex'
+              ? t('ai_providers.codex_add_modal_proxy_label')
+              : t('ai_providers.claude_add_modal_proxy_label')
+          }
+          value={providerForm.proxyUrl ?? ''}
+          onChange={(e) => setProviderForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
+        />
+        <HeaderInputList
+          entries={headersToEntries(providerForm.headers as any)}
+          onChange={(entries) => setProviderForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
+          addLabel={t('common.custom_headers_add')}
+          keyPlaceholder={t('common.custom_headers_key_placeholder')}
+          valuePlaceholder={t('common.custom_headers_value_placeholder')}
+        />
+        <div className="form-group">
+          <label>{t('ai_providers.claude_models_label')}</label>
+          <textarea
+            className="input"
+            placeholder={t('ai_providers.claude_models_hint')}
+            value={providerForm.modelsText}
+            onChange={(e) => setProviderForm((prev) => ({ ...prev, modelsText: e.target.value }))}
+            rows={4}
+          />
+          <div className="hint">{t('ai_providers.claude_models_hint')}</div>
+        </div>
+      </Modal>
+
+      {/* OpenAI Modal */}
+      <Modal
+        open={modal?.type === 'openai'}
+        onClose={closeModal}
+        title={
+          modal?.index !== null ? t('ai_providers.openai_edit_modal_title') : t('ai_providers.openai_add_modal_title')
+        }
+        footer={
+          <>
+            <Button variant="secondary" onClick={closeModal} disabled={saving}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={saveOpenai} loading={saving}>
+              {t('common.save')}
+            </Button>
+          </>
+        }
+      >
+        <Input
+          label={t('ai_providers.openai_add_modal_name_label')}
+          value={openaiForm.name}
+          onChange={(e) => setOpenaiForm((prev) => ({ ...prev, name: e.target.value }))}
+        />
+        <Input
+          label={t('ai_providers.openai_add_modal_url_label')}
+          value={openaiForm.baseUrl}
+          onChange={(e) => setOpenaiForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+        />
+        <Input
+          label="Priority"
+          type="number"
+          value={openaiForm.priority ?? ''}
+          onChange={(e) =>
+            setOpenaiForm((prev) => ({ ...prev, priority: e.target.value ? Number(e.target.value) : undefined }))
+          }
+        />
+        <Input
+          label={t('ai_providers.openai_test_model_placeholder')}
+          value={openaiForm.testModel ?? ''}
+          onChange={(e) => setOpenaiForm((prev) => ({ ...prev, testModel: e.target.value }))}
+        />
+
+        <HeaderInputList
+          entries={openaiForm.headers}
+          onChange={(entries) => setOpenaiForm((prev) => ({ ...prev, headers: entries }))}
+          addLabel={t('common.custom_headers_add')}
+          keyPlaceholder={t('common.custom_headers_key_placeholder')}
+          valuePlaceholder={t('common.custom_headers_value_placeholder')}
+        />
+
+        <div className="form-group">
+          <label>{t('ai_providers.openai_models_fetch_title')}</label>
+          <textarea
+            className="input"
+            placeholder={t('ai_providers.openai_models_hint')}
+            value={openaiForm.modelsText}
+            onChange={(e) => setOpenaiForm((prev) => ({ ...prev, modelsText: e.target.value }))}
+            rows={4}
+          />
+          <div className="hint">{t('ai_providers.openai_models_hint')}</div>
+        </div>
+
+        <div className="form-group">
+          <label>{t('ai_providers.openai_add_modal_keys_label')}</label>
+          {renderKeyEntries(openaiForm.apiKeyEntries)}
+        </div>
+      </Modal>
+    </div>
+  );
+}
diff --git a/src/pages/ApiKeysPage.module.scss b/src/pages/ApiKeysPage.module.scss
new file mode 100644
index 0000000..b30bb31
--- /dev/null
+++ b/src/pages/ApiKeysPage.module.scss
@@ -0,0 +1,54 @@
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.actions {
+  display: flex;
+  gap: $spacing-sm;
+}
+
+.emptyState {
+  text-align: center;
+  padding: $spacing-2xl;
+  color: var(--text-secondary);
+
+  i {
+    font-size: 48px;
+    margin-bottom: $spacing-md;
+    opacity: 0.5;
+  }
+
+  h3 {
+    margin: 0 0 $spacing-sm 0;
+    color: var(--text-primary);
+  }
+
+  p {
+    margin: 0;
+  }
+}
diff --git a/src/pages/ApiKeysPage.tsx b/src/pages/ApiKeysPage.tsx
new file mode 100644
index 0000000..9bf69fa
--- /dev/null
+++ b/src/pages/ApiKeysPage.tsx
@@ -0,0 +1,217 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
+import { apiKeysApi } from '@/services/api';
+import { maskApiKey } from '@/utils/format';
+
+export function ApiKeysPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [apiKeys, setApiKeys] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [inputValue, setInputValue] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [deletingIndex, setDeletingIndex] = useState<number | null>(null);
+
+  const disableControls = useMemo(() => connectionStatus !== 'connected', [connectionStatus]);
+
+  const loadApiKeys = useCallback(
+    async (force = false) => {
+      setLoading(true);
+      setError('');
+      try {
+        const result = (await fetchConfig('api-keys', force)) as string[] | undefined;
+        const list = Array.isArray(result) ? result : [];
+        setApiKeys(list);
+      } catch (err: any) {
+        setError(err?.message || t('notification.refresh_failed'));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [fetchConfig, t]
+  );
+
+  useEffect(() => {
+    loadApiKeys(true);
+  }, [loadApiKeys]);
+
+  useEffect(() => {
+    if (Array.isArray(config?.apiKeys)) {
+      setApiKeys(config.apiKeys);
+    }
+  }, [config?.apiKeys]);
+
+  const openAddModal = () => {
+    setEditingIndex(null);
+    setInputValue('');
+    setModalOpen(true);
+  };
+
+  const openEditModal = (index: number) => {
+    setEditingIndex(index);
+    setInputValue(apiKeys[index] ?? '');
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalOpen(false);
+    setInputValue('');
+    setEditingIndex(null);
+  };
+
+  const handleSave = async () => {
+    const trimmed = inputValue.trim();
+    if (!trimmed) {
+      showNotification(`${t('notification.please_enter')} ${t('notification.api_key')}`, 'error');
+      return;
+    }
+
+    const isEdit = editingIndex !== null;
+    const nextKeys = isEdit
+      ? apiKeys.map((key, idx) => (idx === editingIndex ? trimmed : key))
+      : [...apiKeys, trimmed];
+
+    setSaving(true);
+    try {
+      if (isEdit && editingIndex !== null) {
+        await apiKeysApi.update(editingIndex, trimmed);
+        showNotification(t('notification.api_key_updated'), 'success');
+      } else {
+        await apiKeysApi.replace(nextKeys);
+        showNotification(t('notification.api_key_added'), 'success');
+      }
+
+      setApiKeys(nextKeys);
+      updateConfigValue('api-keys', nextKeys);
+      clearCache('api-keys');
+      closeModal();
+    } catch (err: any) {
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (index: number) => {
+    if (!window.confirm(t('api_keys.delete_confirm'))) return;
+    setDeletingIndex(index);
+    try {
+      await apiKeysApi.delete(index);
+      const nextKeys = apiKeys.filter((_, idx) => idx !== index);
+      setApiKeys(nextKeys);
+      updateConfigValue('api-keys', nextKeys);
+      clearCache('api-keys');
+      showNotification(t('notification.api_key_deleted'), 'success');
+    } catch (err: any) {
+      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setDeletingIndex(null);
+    }
+  };
+
+  const actionButtons = (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <Button variant="secondary" size="sm" onClick={() => loadApiKeys(true)} disabled={loading}>
+        {t('common.refresh')}
+      </Button>
+      <Button size="sm" onClick={openAddModal} disabled={disableControls}>
+        {t('api_keys.add_button')}
+      </Button>
+    </div>
+  );
+
+  return (
+    <Card title={t('api_keys.proxy_auth_title')} extra={actionButtons}>
+      {error && <div className="error-box">{error}</div>}
+
+      {loading ? (
+        <div className="flex-center" style={{ padding: '24px 0' }}>
+          <LoadingSpinner size={28} />
+        </div>
+      ) : apiKeys.length === 0 ? (
+        <EmptyState
+          title={t('api_keys.empty_title')}
+          description={t('api_keys.empty_desc')}
+          action={
+            <Button onClick={openAddModal} disabled={disableControls}>
+              {t('api_keys.add_button')}
+            </Button>
+          }
+        />
+      ) : (
+        <div className="item-list">
+          {apiKeys.map((key, index) => (
+            <div key={index} className="item-row">
+              <div className="item-meta">
+                <div className="pill">#{index + 1}</div>
+                <div className="item-title">{t('api_keys.item_title')}</div>
+                <div className="item-subtitle">{maskApiKey(String(key || ''))}</div>
+              </div>
+              <div className="item-actions">
+                <Button variant="secondary" size="sm" onClick={() => openEditModal(index)} disabled={disableControls}>
+                  {t('common.edit')}
+                </Button>
+                <Button
+                  variant="danger"
+                  size="sm"
+                  onClick={() => handleDelete(index)}
+                  disabled={disableControls || deletingIndex === index}
+                  loading={deletingIndex === index}
+                >
+                  {t('common.delete')}
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <Modal
+        open={modalOpen}
+        onClose={closeModal}
+        title={editingIndex !== null ? t('api_keys.edit_modal_title') : t('api_keys.add_modal_title')}
+        footer={
+          <>
+            <Button variant="secondary" onClick={closeModal} disabled={saving}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={handleSave} loading={saving}>
+              {editingIndex !== null ? t('common.update') : t('common.add')}
+            </Button>
+          </>
+        }
+      >
+        <Input
+          label={
+            editingIndex !== null ? t('api_keys.edit_modal_key_label') : t('api_keys.add_modal_key_label')
+          }
+          placeholder={
+            editingIndex !== null
+              ? t('api_keys.edit_modal_key_label')
+              : t('api_keys.add_modal_key_placeholder')
+          }
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          disabled={saving}
+        />
+      </Modal>
+    </Card>
+  );
+}
diff --git a/src/pages/AuthFilesPage.module.scss b/src/pages/AuthFilesPage.module.scss
new file mode 100644
index 0000000..57f40a9
--- /dev/null
+++ b/src/pages/AuthFilesPage.module.scss
@@ -0,0 +1,58 @@
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-md 0;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.filters {
+  display: flex;
+  gap: $spacing-sm;
+  flex-wrap: wrap;
+}
+
+.fileGrid {
+  display: grid;
+  gap: $spacing-md;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: $spacing-md;
+  margin-top: $spacing-lg;
+}
diff --git a/src/pages/AuthFilesPage.tsx b/src/pages/AuthFilesPage.tsx
new file mode 100644
index 0000000..1698fbd
--- /dev/null
+++ b/src/pages/AuthFilesPage.tsx
@@ -0,0 +1,416 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { useAuthStore, useNotificationStore } from '@/stores';
+import { authFilesApi } from '@/services/api';
+import { apiClient } from '@/services/api/client';
+import type { AuthFileItem } from '@/types';
+import { formatFileSize } from '@/utils/format';
+
+interface ExcludedFormState {
+  provider: string;
+  modelsText: string;
+}
+
+export function AuthFilesPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+
+  const [files, setFiles] = useState<AuthFileItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [filter, setFilter] = useState<'all' | string>('all');
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [uploading, setUploading] = useState(false);
+  const [deleting, setDeleting] = useState<string | null>(null);
+
+  const [excluded, setExcluded] = useState<Record<string, string[]>>({});
+  const [excludedModalOpen, setExcludedModalOpen] = useState(false);
+  const [excludedForm, setExcludedForm] = useState<ExcludedFormState>({ provider: '', modelsText: '' });
+  const [savingExcluded, setSavingExcluded] = useState(false);
+
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const disableControls = connectionStatus !== 'connected';
+
+  const loadFiles = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await authFilesApi.list();
+      setFiles(data?.files || []);
+    } catch (err: any) {
+      setError(err?.message || t('notification.refresh_failed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadExcluded = async () => {
+    try {
+      const res = await authFilesApi.getOauthExcludedModels();
+      setExcluded(res || {});
+    } catch (err) {
+      // ignore silently
+    }
+  };
+
+  useEffect(() => {
+    loadFiles();
+    loadExcluded();
+  }, []);
+
+  const filtered = useMemo(() => {
+    return files.filter((item) => {
+      const matchType = filter === 'all' || item.type === filter;
+      const term = search.trim().toLowerCase();
+      const matchSearch =
+        !term ||
+        item.name.toLowerCase().includes(term) ||
+        (item.type || '').toString().toLowerCase().includes(term) ||
+        (item.provider || '').toString().toLowerCase().includes(term);
+      return matchType && matchSearch;
+    });
+  }, [files, filter, search]);
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const start = (currentPage - 1) * pageSize;
+  const pageItems = filtered.slice(start, start + pageSize);
+
+  const totalSize = useMemo(() => files.reduce((sum, item) => sum + (item.size || 0), 0), [files]);
+
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    try {
+      await authFilesApi.upload(file);
+      showNotification(t('auth_files.upload_success'), 'success');
+      await loadFiles();
+    } catch (err: any) {
+      showNotification(`${t('notification.upload_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setUploading(false);
+      event.target.value = '';
+    }
+  };
+
+  const handleDelete = async (name: string) => {
+    if (!window.confirm(t('auth_files.delete_confirm'))) return;
+    setDeleting(name);
+    try {
+      await authFilesApi.deleteFile(name);
+      showNotification(t('auth_files.delete_success'), 'success');
+      setFiles((prev) => prev.filter((item) => item.name !== name));
+    } catch (err: any) {
+      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  const handleDeleteAll = async () => {
+    if (!window.confirm(t('auth_files.delete_all_confirm'))) return;
+    try {
+      await authFilesApi.deleteAll();
+      showNotification(t('auth_files.delete_all_success'), 'success');
+      setFiles([]);
+    } catch (err: any) {
+      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    }
+  };
+
+  const handleDownload = async (name: string) => {
+    try {
+      const response = await apiClient.getRaw(`/auth-files/${encodeURIComponent(name)}`, {
+        responseType: 'blob'
+      });
+      const blob = new Blob([response.data]);
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = name;
+      a.click();
+      window.URL.revokeObjectURL(url);
+      showNotification(t('auth_files.download_success'), 'success');
+    } catch (err: any) {
+      showNotification(`${t('notification.download_failed')}: ${err?.message || ''}`, 'error');
+    }
+  };
+
+  const openExcludedModal = (provider?: string) => {
+    const models = provider ? excluded[provider] : [];
+    setExcludedForm({
+      provider: provider || '',
+      modelsText: Array.isArray(models) ? models.join('\n') : ''
+    });
+    setExcludedModalOpen(true);
+  };
+
+  const saveExcludedModels = async () => {
+    const provider = excludedForm.provider.trim();
+    if (!provider) {
+      showNotification(t('oauth_excluded.provider_required'), 'error');
+      return;
+    }
+    const models = excludedForm.modelsText
+      .split(/[\n,]+/)
+      .map((item) => item.trim())
+      .filter(Boolean);
+    setSavingExcluded(true);
+    try {
+      if (models.length) {
+        await authFilesApi.saveOauthExcludedModels(provider, models);
+      } else {
+        await authFilesApi.deleteOauthExcludedEntry(provider);
+      }
+      await loadExcluded();
+      showNotification(t('oauth_excluded.save_success'), 'success');
+      setExcludedModalOpen(false);
+    } catch (err: any) {
+      showNotification(`${t('oauth_excluded.save_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setSavingExcluded(false);
+    }
+  };
+
+  const deleteExcluded = async (provider: string) => {
+    if (!window.confirm(t('oauth_excluded.delete_confirm', { provider }))) return;
+    try {
+      await authFilesApi.deleteOauthExcludedEntry(provider);
+      await loadExcluded();
+      showNotification(t('oauth_excluded.delete_success'), 'success');
+    } catch (err: any) {
+      showNotification(`${t('oauth_excluded.delete_failed')}: ${err?.message || ''}`, 'error');
+    }
+  };
+
+  const typeOptions: { value: string; label: string }[] = [
+    { value: 'all', label: t('auth_files.filter_all') },
+    { value: 'qwen', label: t('auth_files.filter_qwen') },
+    { value: 'gemini', label: t('auth_files.filter_gemini') },
+    { value: 'gemini-cli', label: t('auth_files.filter_gemini-cli') },
+    { value: 'aistudio', label: t('auth_files.filter_aistudio') },
+    { value: 'claude', label: t('auth_files.filter_claude') },
+    { value: 'codex', label: t('auth_files.filter_codex') },
+    { value: 'antigravity', label: t('auth_files.filter_antigravity') },
+    { value: 'iflow', label: t('auth_files.filter_iflow') },
+    { value: 'vertex', label: t('auth_files.filter_vertex') },
+    { value: 'empty', label: t('auth_files.filter_empty') },
+    { value: 'unknown', label: t('auth_files.filter_unknown') }
+  ];
+
+  return (
+    <div className="stack">
+      <Card
+        title={t('auth_files.title')}
+        extra={
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            <Button variant="secondary" size="sm" onClick={loadFiles} disabled={loading}>
+              {t('common.refresh')}
+            </Button>
+            <Button variant="secondary" size="sm" onClick={handleDeleteAll} disabled={disableControls || loading}>
+              {t('auth_files.delete_all_button')}
+            </Button>
+            <Button size="sm" onClick={handleUploadClick} disabled={disableControls || uploading}>
+              {t('auth_files.upload_button')}
+            </Button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".json,application/json"
+              style={{ display: 'none' }}
+              onChange={handleFileChange}
+            />
+          </div>
+        }
+      >
+        {error && <div className="error-box">{error}</div>}
+
+        <div className="filters">
+          <div className="filter-item">
+            <label>{t('auth_files.search_label')}</label>
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder={t('auth_files.search_placeholder')}
+            />
+          </div>
+          <div className="filter-item">
+            <label>{t('auth_files.page_size_label')}</label>
+            <input
+              className="input"
+              type="number"
+              min={1}
+              value={pageSize}
+              onChange={(e) => setPageSize(Number(e.target.value) || 10)}
+            />
+          </div>
+          <div className="filter-item">
+            <label>{t('common.info')}</label>
+            <div className="pill">
+              {files.length} {t('auth_files.files_count')} · {formatFileSize(totalSize)}
+            </div>
+          </div>
+          <div className="filter-item">
+            <label>{t('auth_files.filter_all')}</label>
+            <select className="input" value={filter} onChange={(e) => setFilter(e.target.value)}>
+              {typeOptions.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="hint">{t('common.loading')}</div>
+        ) : pageItems.length === 0 ? (
+          <EmptyState title={t('auth_files.search_empty_title')} description={t('auth_files.search_empty_desc')} />
+        ) : (
+          <div className="table">
+            <div className="table-header">
+              <div>{t('auth_files.title_section')}</div>
+              <div>{t('auth_files.file_size')}</div>
+              <div>{t('auth_files.file_modified')}</div>
+              <div>Actions</div>
+            </div>
+            {pageItems.map((item) => (
+              <div key={item.name} className="table-row">
+                <div className="cell">
+                  <div className="item-title">{item.name}</div>
+                  <div className="item-subtitle">
+                    {item.type || t('auth_files.type_unknown')} {item.provider ? `· ${item.provider}` : ''}
+                  </div>
+                </div>
+                <div className="cell">{item.size ? formatFileSize(item.size) : '-'}</div>
+                <div className="cell">
+                  {item.modified ? new Date(item.modified).toLocaleString() : t('auth_files.file_modified')}
+                </div>
+                <div className="cell">
+                  <div className="item-actions">
+                    <Button variant="secondary" size="sm" onClick={() => handleDownload(item.name)} disabled={disableControls}>
+                      {t('auth_files.download_button')}
+                    </Button>
+                    <Button
+                      variant="danger"
+                      size="sm"
+                      onClick={() => handleDelete(item.name)}
+                      loading={deleting === item.name}
+                      disabled={disableControls}
+                    >
+                      {t('auth_files.delete_button')}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="pagination">
+          <Button variant="secondary" size="sm" onClick={() => setPage(Math.max(1, currentPage - 1))}>
+            {t('auth_files.pagination_prev')}
+          </Button>
+          <div className="pill">
+            {t('auth_files.pagination_info', {
+              current: currentPage,
+              total: totalPages,
+              count: filtered.length
+            })}
+          </div>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => setPage(Math.min(totalPages, currentPage + 1))}
+          >
+            {t('auth_files.pagination_next')}
+          </Button>
+        </div>
+      </Card>
+
+      <Card
+        title={t('oauth_excluded.title')}
+        extra={
+          <Button size="sm" onClick={() => openExcludedModal()} disabled={disableControls}>
+            {t('oauth_excluded.add')}
+          </Button>
+        }
+      >
+        {Object.keys(excluded).length === 0 ? (
+          <EmptyState title={t('oauth_excluded.list_empty_all')} />
+        ) : (
+          <div className="item-list">
+            {Object.entries(excluded).map(([provider, models]) => (
+              <div key={provider} className="item-row">
+                <div className="item-meta">
+                  <div className="item-title">{provider}</div>
+                  <div className="item-subtitle">
+                    {models?.length
+                      ? t('oauth_excluded.model_count', { count: models.length })
+                      : t('oauth_excluded.no_models')}
+                  </div>
+                </div>
+                <div className="item-actions">
+                  <Button variant="secondary" size="sm" onClick={() => openExcludedModal(provider)}>
+                    {t('common.edit')}
+                  </Button>
+                  <Button variant="danger" size="sm" onClick={() => deleteExcluded(provider)}>
+                    {t('oauth_excluded.delete')}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+
+      <Modal
+        open={excludedModalOpen}
+        onClose={() => setExcludedModalOpen(false)}
+        title={t('oauth_excluded.add_title')}
+        footer={
+          <>
+            <Button variant="secondary" onClick={() => setExcludedModalOpen(false)} disabled={savingExcluded}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={saveExcludedModels} loading={savingExcluded}>
+              {t('oauth_excluded.save')}
+            </Button>
+          </>
+        }
+      >
+        <Input
+          label={t('oauth_excluded.provider_label')}
+          placeholder={t('oauth_excluded.provider_placeholder')}
+          value={excludedForm.provider}
+          onChange={(e) => setExcludedForm((prev) => ({ ...prev, provider: e.target.value }))}
+        />
+        <div className="form-group">
+          <label>{t('oauth_excluded.models_label')}</label>
+          <textarea
+            className="input"
+            rows={4}
+            placeholder={t('oauth_excluded.models_placeholder')}
+            value={excludedForm.modelsText}
+            onChange={(e) => setExcludedForm((prev) => ({ ...prev, modelsText: e.target.value }))}
+          />
+          <div className="hint">{t('oauth_excluded.models_hint')}</div>
+        </div>
+      </Modal>
+    </div>
+  );
+}
diff --git a/src/pages/ConfigPage.module.scss b/src/pages/ConfigPage.module.scss
new file mode 100644
index 0000000..7a776c9
--- /dev/null
+++ b/src/pages/ConfigPage.module.scss
@@ -0,0 +1,65 @@
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-md 0;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.status {
+  font-size: 14px;
+  color: var(--text-secondary);
+
+  &.modified {
+    color: #f59e0b;
+  }
+
+  &.saved {
+    color: #16a34a;
+  }
+
+  &.error {
+    color: #dc2626;
+  }
+}
+
+.editorWrapper {
+  width: 100%;
+  height: 500px;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  overflow: hidden;
+}
+
+.actions {
+  display: flex;
+  gap: $spacing-sm;
+  justify-content: flex-end;
+}
diff --git a/src/pages/ConfigPage.tsx b/src/pages/ConfigPage.tsx
new file mode 100644
index 0000000..9a9b642
--- /dev/null
+++ b/src/pages/ConfigPage.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { useNotificationStore, useAuthStore } from '@/stores';
+import { configFileApi } from '@/services/api/configFile';
+
+export function ConfigPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+
+  const [content, setContent] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [dirty, setDirty] = useState(false);
+
+  const disableControls = connectionStatus !== 'connected';
+
+  const loadConfig = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await configFileApi.fetchConfigYaml();
+      setContent(data);
+      setDirty(false);
+    } catch (err: any) {
+      setError(err?.message || t('notification.refresh_failed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadConfig();
+  }, []);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await configFileApi.saveConfigYaml(content);
+      setDirty(false);
+      showNotification(t('notification.saved_success'), 'success');
+    } catch (err: any) {
+      showNotification(`${t('notification.save_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Card
+      title={t('nav.config_management')}
+      extra={
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Button variant="secondary" size="sm" onClick={loadConfig} disabled={loading}>
+            {t('common.refresh')}
+          </Button>
+          <Button size="sm" onClick={handleSave} loading={saving} disabled={disableControls || loading || !dirty}>
+            {t('common.save')}
+          </Button>
+        </div>
+      }
+    >
+      {error && <div className="error-box">{error}</div>}
+      <div className="form-group">
+        <label>{t('nav.config_management')}</label>
+        <textarea
+          className="input"
+          rows={20}
+          value={content}
+          onChange={(e) => {
+            setContent(e.target.value);
+            setDirty(true);
+          }}
+          disabled={disableControls}
+          placeholder="config.yaml"
+        />
+        <div className="hint">
+          {dirty ? t('system_info.version_current_missing') : loading ? t('common.loading') : t('system_info.version_is_latest')}
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/pages/Login/Login.module.scss b/src/pages/Login/Login.module.scss
new file mode 100644
index 0000000..a964ee2
--- /dev/null
+++ b/src/pages/Login/Login.module.scss
@@ -0,0 +1,124 @@
+.container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%);
+  padding: $spacing-md;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  padding: $spacing-md 0;
+}
+
+.controls {
+  display: flex;
+  gap: $spacing-sm;
+}
+
+.iconButton {
+  @include button-reset;
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+  padding: $spacing-sm $spacing-md;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+  border-radius: $radius-md;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+
+  i {
+    font-size: 18px;
+  }
+
+  span {
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+.loginBox {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 450px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.logo {
+  width: 80px;
+  height: 80px;
+  background-color: white;
+  border-radius: $radius-full;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40px;
+  color: var(--primary-color);
+  margin-bottom: $spacing-lg;
+  box-shadow: var(--shadow-lg);
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  color: white;
+  margin: 0 0 $spacing-sm 0;
+  text-align: center;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 0 0 $spacing-2xl 0;
+  text-align: center;
+}
+
+.form {
+  width: 100%;
+  background-color: var(--bg-primary);
+  padding: $spacing-2xl;
+  border-radius: $radius-lg;
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.detectedInfo {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-md;
+  background-color: rgba(59, 130, 246, 0.1);
+  border-radius: $radius-md;
+  font-size: 13px;
+  color: var(--text-secondary);
+
+  i {
+    color: var(--primary-color);
+  }
+
+  strong {
+    color: var(--text-primary);
+  }
+}
+
+.footer {
+  margin-top: $spacing-xl;
+  text-align: center;
+}
+
+.version {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  margin: 0;
+}
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..f3af89b
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,150 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useAuthStore, useNotificationStore } from '@/stores';
+import { detectApiBaseFromLocation, normalizeApiBase } from '@/utils/connection';
+
+export function LoginPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { showNotification } = useNotificationStore();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const login = useAuthStore((state) => state.login);
+  const restoreSession = useAuthStore((state) => state.restoreSession);
+  const storedBase = useAuthStore((state) => state.apiBase);
+  const storedKey = useAuthStore((state) => state.managementKey);
+
+  const [apiBase, setApiBase] = useState('');
+  const [managementKey, setManagementKey] = useState('');
+  const [showCustomBase, setShowCustomBase] = useState(false);
+  const [showKey, setShowKey] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [autoLoading, setAutoLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const detectedBase = useMemo(() => detectApiBaseFromLocation(), []);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const autoLoggedIn = await restoreSession();
+        if (!autoLoggedIn) {
+          setApiBase(storedBase || detectedBase);
+          setManagementKey(storedKey || '');
+        }
+      } finally {
+        setAutoLoading(false);
+      }
+    };
+
+    init();
+  }, [detectedBase, restoreSession, storedBase, storedKey]);
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      const redirect = (location.state as any)?.from?.pathname || '/';
+      navigate(redirect, { replace: true });
+    }
+  }, [isAuthenticated, navigate, location.state]);
+
+  const handleUseCurrent = () => {
+    setApiBase(detectedBase);
+  };
+
+  const handleSubmit = async () => {
+    if (!managementKey.trim()) {
+      setError(t('login.error_required'));
+      return;
+    }
+
+    const baseToUse = apiBase ? normalizeApiBase(apiBase) : detectedBase;
+    setLoading(true);
+    setError('');
+    try {
+      await login({ apiBase: baseToUse, managementKey: managementKey.trim() });
+      showNotification(t('common.connected_status'), 'success');
+      navigate('/', { replace: true });
+    } catch (err: any) {
+      const message = err?.message || t('login.error_invalid');
+      setError(message);
+      showNotification(`${t('notification.login_failed')}: ${message}`, 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <div className="login-header">
+          <div className="title">{t('title.login')}</div>
+          <div className="subtitle">{t('login.subtitle')}</div>
+        </div>
+
+        <div className="connection-box">
+          <div className="label">{t('login.connection_current')}</div>
+          <div className="value">{apiBase || detectedBase}</div>
+          <div className="hint">{t('login.connection_auto_hint')}</div>
+        </div>
+
+        <div className="toggle-advanced">
+          <input
+            id="custom-connection-toggle"
+            type="checkbox"
+            checked={showCustomBase}
+            onChange={(e) => setShowCustomBase(e.target.checked)}
+          />
+          <label htmlFor="custom-connection-toggle">{t('login.custom_connection_label')}</label>
+        </div>
+
+        {showCustomBase && (
+          <Input
+            label={t('login.custom_connection_label')}
+            placeholder={t('login.custom_connection_placeholder')}
+            value={apiBase}
+            onChange={(e) => setApiBase(e.target.value)}
+            hint={t('login.custom_connection_hint')}
+          />
+        )}
+
+        <Input
+          label={t('login.management_key_label')}
+          placeholder={t('login.management_key_placeholder')}
+          type={showKey ? 'text' : 'password'}
+          value={managementKey}
+          onChange={(e) => setManagementKey(e.target.value)}
+          rightElement={
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              onClick={() => setShowKey((prev) => !prev)}
+            >
+              {showKey ? '🙈' : '👁️'}
+            </button>
+          }
+        />
+
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <Button variant="secondary" onClick={handleUseCurrent}>
+            {t('login.use_current_address')}
+          </Button>
+          <Button fullWidth onClick={handleSubmit} loading={loading}>
+            {loading ? t('login.submitting') : t('login.submit_button')}
+          </Button>
+        </div>
+
+        {error && <div className="error-box">{error}</div>}
+
+        {autoLoading && (
+          <div className="connection-box">
+            <div className="label">{t('auto_login.title')}</div>
+            <div className="value">{t('auto_login.message')}</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/LogsPage.module.scss b/src/pages/LogsPage.module.scss
new file mode 100644
index 0000000..55a585e
--- /dev/null
+++ b/src/pages/LogsPage.module.scss
@@ -0,0 +1,81 @@
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.actions {
+  display: flex;
+  gap: $spacing-sm;
+
+  @include mobile {
+    flex-wrap: wrap;
+  }
+}
+
+.logViewer {
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+  padding: $spacing-lg;
+  border-radius: $radius-lg;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  overflow-x: auto;
+  max-height: 600px;
+  overflow-y: auto;
+
+  pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}
+
+.searchBox {
+  margin-bottom: $spacing-md;
+}
+
+.emptyState {
+  text-align: center;
+  padding: $spacing-2xl;
+  color: var(--text-secondary);
+
+  i {
+    font-size: 48px;
+    margin-bottom: $spacing-md;
+    opacity: 0.5;
+  }
+
+  h3 {
+    margin: 0 0 $spacing-sm 0;
+    color: var(--text-primary);
+  }
+
+  p {
+    margin: 0;
+  }
+}
diff --git a/src/pages/LogsPage.tsx b/src/pages/LogsPage.tsx
new file mode 100644
index 0000000..ab50f93
--- /dev/null
+++ b/src/pages/LogsPage.tsx
@@ -0,0 +1,198 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { useNotificationStore, useAuthStore } from '@/stores';
+import { logsApi } from '@/services/api/logs';
+
+interface ErrorLogItem {
+  name: string;
+  size?: number;
+  modified?: number;
+}
+
+export function LogsPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+
+  const [logs, setLogs] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [intervalId, setIntervalId] = useState<number | null>(null);
+  const [errorLogs, setErrorLogs] = useState<ErrorLogItem[]>([]);
+  const [loadingErrors, setLoadingErrors] = useState(false);
+
+  const disableControls = connectionStatus !== 'connected';
+
+  const loadLogs = async () => {
+    if (connectionStatus !== 'connected') {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    try {
+      const data = await logsApi.fetchLogs({ limit: 500 });
+      const text = Array.isArray(data) ? data.join('\n') : data?.logs || data || '';
+      setLogs(text);
+    } catch (err: any) {
+      console.error('Failed to load logs:', err);
+      setError(err?.message || t('logs.load_error'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearLogs = async () => {
+    if (!window.confirm(t('logs.clear_confirm'))) return;
+    try {
+      await logsApi.clearLogs();
+      setLogs('');
+      showNotification(t('logs.clear_success'), 'success');
+    } catch (err: any) {
+      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    }
+  };
+
+  const downloadLogs = () => {
+    const blob = new Blob([logs], { type: 'text/plain' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'logs.txt';
+    a.click();
+    window.URL.revokeObjectURL(url);
+    showNotification(t('logs.download_success'), 'success');
+  };
+
+  const loadErrorLogs = async () => {
+    if (connectionStatus !== 'connected') {
+      setLoadingErrors(false);
+      return;
+    }
+
+    setLoadingErrors(true);
+    try {
+      const res = await logsApi.fetchErrorLogs();
+      const list: ErrorLogItem[] = Array.isArray(res)
+        ? res
+        : Object.entries(res || {}).map(([name, meta]) => ({
+            name,
+            size: (meta as any)?.size,
+            modified: (meta as any)?.modified
+          }));
+      setErrorLogs(list);
+    } catch (err: any) {
+      console.error('Failed to load error logs:', err);
+      // 静默失败,不影响主日志显示
+      setErrorLogs([]);
+    } finally {
+      setLoadingErrors(false);
+    }
+  };
+
+  const downloadErrorLog = async (name: string) => {
+    try {
+      const response = await logsApi.downloadErrorLog(name);
+      const blob = new Blob([response.data], { type: 'text/plain' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = name;
+      a.click();
+      window.URL.revokeObjectURL(url);
+      showNotification(t('logs.error_log_download_success'), 'success');
+    } catch (err: any) {
+      showNotification(`${t('notification.download_failed')}: ${err?.message || ''}`, 'error');
+    }
+  };
+
+  useEffect(() => {
+    if (connectionStatus === 'connected') {
+      loadLogs();
+      loadErrorLogs();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connectionStatus]);
+
+  useEffect(() => {
+    if (autoRefresh) {
+      const id = window.setInterval(loadLogs, 8000);
+      setIntervalId(id);
+      return () => window.clearInterval(id);
+    }
+    if (intervalId) {
+      window.clearInterval(intervalId);
+      setIntervalId(null);
+    }
+  }, [autoRefresh]);
+
+  return (
+    <div className="stack">
+      <Card
+        title={t('logs.title')}
+        extra={
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            <Button variant="secondary" size="sm" onClick={loadLogs} disabled={loading}>
+              {t('logs.refresh_button')}
+            </Button>
+            <Button variant="secondary" size="sm" onClick={() => setAutoRefresh((v) => !v)}>
+              {t('logs.auto_refresh')}: {autoRefresh ? t('common.yes') : t('common.no')}
+            </Button>
+            <Button variant="secondary" size="sm" onClick={downloadLogs} disabled={!logs}>
+              {t('logs.download_button')}
+            </Button>
+            <Button variant="danger" size="sm" onClick={clearLogs} disabled={disableControls}>
+              {t('logs.clear_button')}
+            </Button>
+          </div>
+        }
+      >
+        {error && <div className="error-box">{error}</div>}
+        {loading ? (
+          <div className="hint">{t('logs.loading')}</div>
+        ) : logs ? (
+          <pre className="log-viewer">{logs}</pre>
+        ) : (
+          <EmptyState title={t('logs.empty_title')} description={t('logs.empty_desc')} />
+        )}
+      </Card>
+
+      <Card
+        title={t('logs.error_logs_modal_title')}
+        extra={
+          <Button variant="secondary" size="sm" onClick={loadErrorLogs} loading={loadingErrors}>
+            {t('common.refresh')}
+          </Button>
+        }
+      >
+        {errorLogs.length === 0 ? (
+          <div className="hint">{t('logs.error_logs_empty')}</div>
+        ) : (
+          <div className="item-list">
+            {errorLogs.map((item) => (
+              <div key={item.name} className="item-row">
+                <div className="item-meta">
+                  <div className="item-title">{item.name}</div>
+                  <div className="item-subtitle">
+                    {item.size ? `${(item.size / 1024).toFixed(1)} KB` : ''}{' '}
+                    {item.modified ? new Date(item.modified).toLocaleString() : ''}
+                  </div>
+                </div>
+                <div className="item-actions">
+                  <Button variant="secondary" size="sm" onClick={() => downloadErrorLog(item.name)}>
+                    {t('logs.error_logs_download')}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/src/pages/OAuthPage.module.scss b/src/pages/OAuthPage.module.scss
new file mode 100644
index 0000000..c0e468c
--- /dev/null
+++ b/src/pages/OAuthPage.module.scss
@@ -0,0 +1,59 @@
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xl;
+}
+
+.oauthSection {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.oauthGrid {
+  display: grid;
+  gap: $spacing-lg;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.oauthCard {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.oauthStatus {
+  padding: $spacing-md;
+  border-radius: $radius-md;
+  font-size: 14px;
+
+  &.success {
+    background-color: rgba(34, 197, 94, 0.1);
+    color: #16a34a;
+  }
+
+  &.error {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: #dc2626;
+  }
+
+  &.waiting {
+    background-color: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+  }
+}
diff --git a/src/pages/OAuthPage.tsx b/src/pages/OAuthPage.tsx
new file mode 100644
index 0000000..b5a15e4
--- /dev/null
+++ b/src/pages/OAuthPage.tsx
@@ -0,0 +1,160 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { useNotificationStore } from '@/stores';
+import { oauthApi, type OAuthProvider } from '@/services/api/oauth';
+import { isLocalhost } from '@/utils/connection';
+
+interface ProviderState {
+  url?: string;
+  state?: string;
+  status?: 'idle' | 'waiting' | 'success' | 'error';
+  error?: string;
+  polling?: boolean;
+}
+
+const PROVIDERS: { id: OAuthProvider; titleKey: string; hintKey: string; urlLabelKey: string }[] = [
+  { id: 'codex', titleKey: 'auth_login.codex_oauth_title', hintKey: 'auth_login.codex_oauth_hint', urlLabelKey: 'auth_login.codex_oauth_url_label' },
+  { id: 'anthropic', titleKey: 'auth_login.anthropic_oauth_title', hintKey: 'auth_login.anthropic_oauth_hint', urlLabelKey: 'auth_login.anthropic_oauth_url_label' },
+  { id: 'antigravity', titleKey: 'auth_login.antigravity_oauth_title', hintKey: 'auth_login.antigravity_oauth_hint', urlLabelKey: 'auth_login.antigravity_oauth_url_label' },
+  { id: 'gemini-cli', titleKey: 'auth_login.gemini_cli_oauth_title', hintKey: 'auth_login.gemini_cli_oauth_hint', urlLabelKey: 'auth_login.gemini_cli_oauth_url_label' },
+  { id: 'qwen', titleKey: 'auth_login.qwen_oauth_title', hintKey: 'auth_login.qwen_oauth_hint', urlLabelKey: 'auth_login.qwen_oauth_url_label' },
+  { id: 'iflow', titleKey: 'auth_login.iflow_oauth_title', hintKey: 'auth_login.iflow_oauth_hint', urlLabelKey: 'auth_login.iflow_oauth_url_label' }
+];
+
+export function OAuthPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const [states, setStates] = useState<Record<OAuthProvider, ProviderState>>({} as Record<OAuthProvider, ProviderState>);
+  const timers = useRef<Record<string, number>>({});
+
+  const isLocal = useMemo(() => isLocalhost(window.location.hostname), []);
+
+  useEffect(() => {
+    return () => {
+      Object.values(timers.current).forEach((timer) => window.clearInterval(timer));
+    };
+  }, []);
+
+  const startPolling = (provider: OAuthProvider, state: string) => {
+    if (timers.current[provider]) {
+      clearInterval(timers.current[provider]);
+    }
+    const timer = window.setInterval(async () => {
+      try {
+        const res = await oauthApi.getAuthStatus(state);
+        if (res.status === 'ok') {
+          setStates((prev) => ({
+            ...prev,
+            [provider]: { ...prev[provider], status: 'success', polling: false }
+          }));
+          showNotification(t('auth_login.codex_oauth_status_success'), 'success');
+          window.clearInterval(timer);
+          delete timers.current[provider];
+        } else if (res.status === 'error') {
+          setStates((prev) => ({
+            ...prev,
+            [provider]: { ...prev[provider], status: 'error', error: res.error, polling: false }
+          }));
+          showNotification(`${t('auth_login.codex_oauth_status_error')} ${res.error || ''}`, 'error');
+          window.clearInterval(timer);
+          delete timers.current[provider];
+        }
+      } catch (err: any) {
+        setStates((prev) => ({
+          ...prev,
+          [provider]: { ...prev[provider], status: 'error', error: err?.message, polling: false }
+        }));
+        window.clearInterval(timer);
+        delete timers.current[provider];
+      }
+    }, 3000);
+    timers.current[provider] = timer;
+  };
+
+  const startAuth = async (provider: OAuthProvider) => {
+    setStates((prev) => ({
+      ...prev,
+      [provider]: { ...prev[provider], status: 'waiting', polling: true, error: undefined }
+    }));
+    try {
+      const res = await oauthApi.startAuth(provider);
+      setStates((prev) => ({
+        ...prev,
+        [provider]: { ...prev[provider], url: res.url, state: res.state, status: 'waiting', polling: true }
+      }));
+      if (res.state) {
+        startPolling(provider, res.state);
+      }
+    } catch (err: any) {
+      setStates((prev) => ({
+        ...prev,
+        [provider]: { ...prev[provider], status: 'error', error: err?.message, polling: false }
+      }));
+      showNotification(`${t('auth_login.codex_oauth_start_error')} ${err?.message || ''}`, 'error');
+    }
+  };
+
+  const copyLink = async (url?: string) => {
+    if (!url) return;
+    try {
+      await navigator.clipboard.writeText(url);
+      showNotification(t('notification.link_copied'), 'success');
+    } catch {
+      showNotification('Copy failed', 'error');
+    }
+  };
+
+  if (!isLocal) {
+    return <Card title="OAuth">OAuth is only available on localhost.</Card>;
+  }
+
+  return (
+    <div className="stack">
+      {PROVIDERS.map((provider) => {
+        const state = states[provider.id] || {};
+        return (
+          <Card
+            key={provider.id}
+            title={t(provider.titleKey)}
+            extra={
+              <Button onClick={() => startAuth(provider.id)} loading={state.polling}>
+                {t('common.login')}
+              </Button>
+            }
+          >
+            <div className="hint">{t(provider.hintKey)}</div>
+            {state.url && (
+              <div className="connection-box">
+                <div className="label">{t(provider.urlLabelKey)}</div>
+                <div className="value">{state.url}</div>
+                <div className="item-actions" style={{ marginTop: 8 }}>
+                  <Button variant="secondary" size="sm" onClick={() => copyLink(state.url!)}>
+                    {t('auth_login.codex_copy_link')}
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => window.open(state.url, '_blank', 'noopener,noreferrer')}
+                  >
+                    {t('auth_login.codex_open_link')}
+                  </Button>
+                </div>
+              </div>
+            )}
+            <div className="status-badge" style={{ marginTop: 8 }}>
+              {state.status === 'success'
+                ? t('auth_login.codex_oauth_status_success')
+                : state.status === 'error'
+                  ? `${t('auth_login.codex_oauth_status_error')} ${state.error || ''}`
+                  : state.status === 'waiting'
+                    ? t('auth_login.codex_oauth_status_waiting')
+                    : t('common.info')}
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/pages/PlaceholderPage.module.scss b/src/pages/PlaceholderPage.module.scss
new file mode 100644
index 0000000..ce72441
--- /dev/null
+++ b/src/pages/PlaceholderPage.module.scss
@@ -0,0 +1,32 @@
+.container {
+  width: 100%;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholder {
+  text-align: center;
+  padding: $spacing-2xl;
+
+  .icon {
+    font-size: 64px;
+    color: var(--text-secondary);
+    opacity: 0.5;
+    margin-bottom: $spacing-lg;
+  }
+
+  h2 {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0 0 $spacing-md 0;
+  }
+
+  p {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin: 0;
+  }
+}
diff --git a/src/pages/PlaceholderPage.tsx b/src/pages/PlaceholderPage.tsx
new file mode 100644
index 0000000..fa25158
--- /dev/null
+++ b/src/pages/PlaceholderPage.tsx
@@ -0,0 +1,12 @@
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+
+export function PlaceholderPage({ titleKey }: { titleKey: string }) {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t(titleKey)}>
+      <p style={{ color: 'var(--text-secondary)' }}>{t('common.loading')}</p>
+    </Card>
+  );
+}
diff --git a/src/pages/Settings/Settings.module.scss b/src/pages/Settings/Settings.module.scss
new file mode 100644
index 0000000..bd5d42a
--- /dev/null
+++ b/src/pages/Settings/Settings.module.scss
@@ -0,0 +1,105 @@
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.grid {
+  display: grid;
+  gap: $spacing-lg;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.settingRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+}
+
+.settingInfo {
+  flex: 1;
+
+  h4 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0 0 $spacing-xs 0;
+  }
+
+  p {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin: 0;
+  }
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 52px;
+  height: 28px;
+  flex-shrink: 0;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + .slider {
+      background-color: var(--primary-color);
+
+      &:before {
+        transform: translateX(24px);
+      }
+    }
+
+    &:focus + .slider {
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    }
+  }
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--border-color);
+  transition: $transition-fast;
+  border-radius: $radius-full;
+
+  &:before {
+    position: absolute;
+    content: '';
+    height: 20px;
+    width: 20px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: $transition-fast;
+    border-radius: $radius-full;
+  }
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.buttonGroup {
+  display: flex;
+  gap: $spacing-sm;
+}
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
new file mode 100644
index 0000000..c2a5460
--- /dev/null
+++ b/src/pages/SettingsPage.tsx
@@ -0,0 +1,326 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
+import { configApi } from '@/services/api';
+import type { Config } from '@/types';
+
+type PendingKey =
+  | 'debug'
+  | 'proxy'
+  | 'retry'
+  | 'switchProject'
+  | 'switchPreview'
+  | 'usage'
+  | 'requestLog'
+  | 'loggingToFile'
+  | 'wsAuth';
+
+export function SettingsPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [loading, setLoading] = useState(true);
+  const [proxyValue, setProxyValue] = useState('');
+  const [retryValue, setRetryValue] = useState(0);
+  const [pending, setPending] = useState<Record<PendingKey, boolean>>({} as Record<PendingKey, boolean>);
+  const [error, setError] = useState('');
+
+  const disableControls = connectionStatus !== 'connected';
+
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      setError('');
+      try {
+        const data = (await fetchConfig(undefined, true)) as Config;
+        setProxyValue(data?.proxyUrl ?? '');
+        setRetryValue(typeof data?.requestRetry === 'number' ? data.requestRetry : 0);
+      } catch (err: any) {
+        setError(err?.message || t('notification.refresh_failed'));
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    load();
+  }, [fetchConfig, t]);
+
+  useEffect(() => {
+    if (config) {
+      setProxyValue(config.proxyUrl ?? '');
+      if (typeof config.requestRetry === 'number') {
+        setRetryValue(config.requestRetry);
+      }
+    }
+  }, [config?.proxyUrl, config?.requestRetry]);
+
+  const setPendingFlag = (key: PendingKey, value: boolean) => {
+    setPending((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const toggleSetting = async (
+    section: PendingKey,
+    rawKey: 'debug' | 'usage-statistics-enabled' | 'request-log' | 'logging-to-file' | 'ws-auth',
+    value: boolean,
+    updater: (val: boolean) => Promise<any>,
+    successMessage: string
+  ) => {
+    const previous = (() => {
+      switch (rawKey) {
+        case 'debug':
+          return config?.debug ?? false;
+        case 'usage-statistics-enabled':
+          return config?.usageStatisticsEnabled ?? false;
+        case 'request-log':
+          return config?.requestLog ?? false;
+        case 'logging-to-file':
+          return config?.loggingToFile ?? false;
+        case 'ws-auth':
+          return config?.wsAuth ?? false;
+        default:
+          return false;
+      }
+    })();
+
+    setPendingFlag(section, true);
+    updateConfigValue(rawKey, value);
+
+    try {
+      await updater(value);
+      clearCache(rawKey);
+      showNotification(successMessage, 'success');
+    } catch (err: any) {
+      updateConfigValue(rawKey, previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag(section, false);
+    }
+  };
+
+  const handleProxyUpdate = async () => {
+    const previous = config?.proxyUrl ?? '';
+    setPendingFlag('proxy', true);
+    updateConfigValue('proxy-url', proxyValue);
+    try {
+      await configApi.updateProxyUrl(proxyValue.trim());
+      clearCache('proxy-url');
+      showNotification(t('notification.proxy_updated'), 'success');
+    } catch (err: any) {
+      setProxyValue(previous);
+      updateConfigValue('proxy-url', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('proxy', false);
+    }
+  };
+
+  const handleProxyClear = async () => {
+    const previous = config?.proxyUrl ?? '';
+    setPendingFlag('proxy', true);
+    updateConfigValue('proxy-url', '');
+    try {
+      await configApi.clearProxyUrl();
+      clearCache('proxy-url');
+      setProxyValue('');
+      showNotification(t('notification.proxy_cleared'), 'success');
+    } catch (err: any) {
+      setProxyValue(previous);
+      updateConfigValue('proxy-url', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('proxy', false);
+    }
+  };
+
+  const handleRetryUpdate = async () => {
+    const previous = config?.requestRetry ?? 0;
+    const parsed = Number(retryValue);
+    if (!Number.isFinite(parsed) || parsed < 0) {
+      showNotification(t('login.error_invalid'), 'error');
+      setRetryValue(previous);
+      return;
+    }
+    setPendingFlag('retry', true);
+    updateConfigValue('request-retry', parsed);
+    try {
+      await configApi.updateRequestRetry(parsed);
+      clearCache('request-retry');
+      showNotification(t('notification.retry_updated'), 'success');
+    } catch (err: any) {
+      setRetryValue(previous);
+      updateConfigValue('request-retry', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('retry', false);
+    }
+  };
+
+  const quotaSwitchProject = config?.quotaExceeded?.switchProject ?? false;
+  const quotaSwitchPreview = config?.quotaExceeded?.switchPreviewModel ?? false;
+
+  return (
+    <div className="grid cols-2">
+      <Card title={t('basic_settings.title')}>
+        {error && <div className="error-box">{error}</div>}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <ToggleSwitch
+            label={t('basic_settings.debug_enable')}
+            checked={config?.debug ?? false}
+            disabled={disableControls || pending.debug || loading}
+            onChange={(value) =>
+              toggleSetting('debug', 'debug', value, configApi.updateDebug, t('notification.debug_updated'))
+            }
+          />
+
+          <ToggleSwitch
+            label={t('basic_settings.usage_statistics_enable')}
+            checked={config?.usageStatisticsEnabled ?? false}
+            disabled={disableControls || pending.usage || loading}
+            onChange={(value) =>
+              toggleSetting(
+                'usage',
+                'usage-statistics-enabled',
+                value,
+                configApi.updateUsageStatistics,
+                t('notification.usage_statistics_updated')
+              )
+            }
+          />
+
+          <ToggleSwitch
+            label={t('basic_settings.request_log_enable')}
+            checked={config?.requestLog ?? false}
+            disabled={disableControls || pending.requestLog || loading}
+            onChange={(value) =>
+              toggleSetting(
+                'requestLog',
+                'request-log',
+                value,
+                configApi.updateRequestLog,
+                t('notification.request_log_updated')
+              )
+            }
+          />
+
+          <ToggleSwitch
+            label={t('basic_settings.logging_to_file_enable')}
+            checked={config?.loggingToFile ?? false}
+            disabled={disableControls || pending.loggingToFile || loading}
+            onChange={(value) =>
+              toggleSetting(
+                'loggingToFile',
+                'logging-to-file',
+                value,
+                configApi.updateLoggingToFile,
+                t('notification.logging_to_file_updated')
+              )
+            }
+          />
+
+          <ToggleSwitch
+            label={t('basic_settings.ws_auth_enable')}
+            checked={config?.wsAuth ?? false}
+            disabled={disableControls || pending.wsAuth || loading}
+            onChange={(value) =>
+              toggleSetting(
+                'wsAuth',
+                'ws-auth',
+                value,
+                configApi.updateWsAuth,
+                t('notification.ws_auth_updated')
+              )
+            }
+          />
+        </div>
+      </Card>
+
+      <Card title={t('basic_settings.proxy_title')}>
+        <Input
+          label={t('basic_settings.proxy_url_label')}
+          placeholder={t('basic_settings.proxy_url_placeholder')}
+          value={proxyValue}
+          onChange={(e) => setProxyValue(e.target.value)}
+          disabled={disableControls || loading}
+        />
+        <div style={{ display: 'flex', gap: 12 }}>
+          <Button variant="secondary" onClick={handleProxyClear} disabled={disableControls || pending.proxy || loading}>
+            {t('basic_settings.proxy_clear')}
+          </Button>
+          <Button onClick={handleProxyUpdate} loading={pending.proxy} disabled={disableControls || loading}>
+            {t('basic_settings.proxy_update')}
+          </Button>
+        </div>
+        <Input
+          label={t('basic_settings.retry_count_label')}
+          type="number"
+          value={retryValue}
+          onChange={(e) => setRetryValue(Number(e.target.value))}
+          disabled={disableControls || loading}
+        />
+        <Button onClick={handleRetryUpdate} loading={pending.retry} disabled={disableControls || loading} fullWidth>
+          {t('basic_settings.retry_update')}
+        </Button>
+      </Card>
+
+      <Card title={t('basic_settings.quota_title')}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <ToggleSwitch
+            label={t('basic_settings.quota_switch_project')}
+            checked={quotaSwitchProject}
+            disabled={disableControls || pending.switchProject || loading}
+            onChange={(value) =>
+              (async () => {
+                const previous = config?.quotaExceeded?.switchProject ?? false;
+                const nextQuota = { ...(config?.quotaExceeded || {}), switchProject: value };
+                setPendingFlag('switchProject', true);
+                updateConfigValue('quota-exceeded', nextQuota);
+                try {
+                  await configApi.updateSwitchProject(value);
+                  clearCache('quota-exceeded');
+                  showNotification(t('notification.quota_switch_project_updated'), 'success');
+                } catch (err: any) {
+                  updateConfigValue('quota-exceeded', { ...(config?.quotaExceeded || {}), switchProject: previous });
+                  showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+                } finally {
+                  setPendingFlag('switchProject', false);
+                }
+              })()
+            }
+          />
+          <ToggleSwitch
+            label={t('basic_settings.quota_switch_preview')}
+            checked={quotaSwitchPreview}
+            disabled={disableControls || pending.switchPreview || loading}
+            onChange={(value) =>
+              (async () => {
+                const previous = config?.quotaExceeded?.switchPreviewModel ?? false;
+                const nextQuota = { ...(config?.quotaExceeded || {}), switchPreviewModel: value };
+                setPendingFlag('switchPreview', true);
+                updateConfigValue('quota-exceeded', nextQuota);
+                try {
+                  await configApi.updateSwitchPreviewModel(value);
+                  clearCache('quota-exceeded');
+                  showNotification(t('notification.quota_switch_preview_updated'), 'success');
+                } catch (err: any) {
+                  updateConfigValue('quota-exceeded', { ...(config?.quotaExceeded || {}), switchPreviewModel: previous });
+                  showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+                } finally {
+                  setPendingFlag('switchPreview', false);
+                }
+              })()
+            }
+          />
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/pages/SystemPage.module.scss b/src/pages/SystemPage.module.scss
new file mode 100644
index 0000000..7a856f9
--- /dev/null
+++ b/src/pages/SystemPage.module.scss
@@ -0,0 +1,109 @@
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xl;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.sectionTitle {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-md 0;
+}
+
+.sectionDescription {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 $spacing-md 0;
+}
+
+.infoGrid {
+  display: grid;
+  gap: $spacing-sm;
+
+  .infoRow {
+    display: flex;
+    justify-content: space-between;
+    padding: $spacing-sm $spacing-md;
+    background-color: var(--bg-secondary);
+    border-radius: $radius-md;
+
+    .label {
+      font-weight: 500;
+      color: var(--text-secondary);
+    }
+
+    .value {
+      color: var(--text-primary);
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    }
+  }
+}
+
+.modelsList {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.modelItem {
+  padding: $spacing-sm $spacing-md;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-md;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+
+  &:hover {
+    background-color: var(--bg-hover);
+  }
+}
+
+.versionCheck {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.versionInfo {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: $spacing-md;
+
+  .versionItem {
+    padding: $spacing-md;
+    background-color: var(--bg-secondary);
+    border-radius: $radius-md;
+
+    .label {
+      font-size: 12px;
+      color: var(--text-secondary);
+      margin-bottom: $spacing-xs;
+    }
+
+    .version {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    }
+  }
+}
diff --git a/src/pages/SystemPage.tsx b/src/pages/SystemPage.tsx
new file mode 100644
index 0000000..6458b5c
--- /dev/null
+++ b/src/pages/SystemPage.tsx
@@ -0,0 +1,113 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
+import { modelsApi } from '@/services/api/models';
+import { classifyModels, type ModelInfo } from '@/utils/models';
+
+export function SystemPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const auth = useAuthStore();
+  const configStore = useConfigStore();
+
+  const [models, setModels] = useState<ModelInfo[]>([]);
+  const [loadingModels, setLoadingModels] = useState(false);
+  const [error, setError] = useState('');
+
+  const openaiProviders = configStore.config?.openaiCompatibility || [];
+  const primaryProvider = openaiProviders[0];
+  const primaryKey = primaryProvider?.apiKeyEntries?.[0]?.apiKey;
+
+  const groupedModels = useMemo(() => classifyModels(models, { otherLabel: 'Other' }), [models]);
+
+  const fetchModels = async () => {
+    if (!primaryProvider?.baseUrl) {
+      showNotification('No OpenAI provider configured for model fetch', 'warning');
+      return;
+    }
+    setLoadingModels(true);
+    setError('');
+    try {
+      const list = await modelsApi.fetchModels(primaryProvider.baseUrl, primaryKey);
+      setModels(list);
+    } catch (err: any) {
+      setError(err?.message || t('notification.refresh_failed'));
+    } finally {
+      setLoadingModels(false);
+    }
+  };
+
+  useEffect(() => {
+    configStore.fetchConfig().catch(() => {
+      // ignore
+    });
+  }, []);
+
+  return (
+    <div className="stack">
+      <Card
+        title={t('nav.system_info')}
+        extra={
+          <Button variant="secondary" size="sm" onClick={() => configStore.fetchConfig(undefined, true)}>
+            {t('common.refresh')}
+          </Button>
+        }
+      >
+        <div className="grid cols-2">
+          <div className="stat-card">
+            <div className="stat-label">{t('connection.server_address')}</div>
+            <div className="stat-value">{auth.apiBase || '-'}</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-label">{t('footer.api_version')}</div>
+            <div className="stat-value">{auth.serverVersion || t('system_info.version_unknown')}</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-label">{t('footer.build_date')}</div>
+            <div className="stat-value">
+              {auth.serverBuildDate ? new Date(auth.serverBuildDate).toLocaleString() : t('system_info.version_unknown')}
+            </div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-label">{t('connection.status')}</div>
+            <div className="stat-value">{t(`common.${auth.connectionStatus}_status` as any)}</div>
+          </div>
+        </div>
+      </Card>
+
+      <Card
+        title="Models"
+        extra={
+          <Button variant="secondary" size="sm" onClick={fetchModels} loading={loadingModels}>
+            {t('common.refresh')}
+          </Button>
+        }
+      >
+        {error && <div className="error-box">{error}</div>}
+        {loadingModels ? (
+          <div className="hint">{t('common.loading')}</div>
+        ) : models.length === 0 ? (
+          <div className="hint">{t('usage_stats.no_data')}</div>
+        ) : (
+          <div className="item-list">
+            {groupedModels.map((group) => (
+              <div key={group.id} className="item-row">
+                <div className="item-meta">
+                  <div className="item-title">
+                    {group.label} ({group.items.length})
+                  </div>
+                  <div className="item-subtitle">
+                    {group.items.map((model) => model.name).slice(0, 5).join(', ')}
+                    {group.items.length > 5 ? '…' : ''}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/src/pages/UsagePage.module.scss b/src/pages/UsagePage.module.scss
new file mode 100644
index 0000000..64203ab
--- /dev/null
+++ b/src/pages/UsagePage.module.scss
@@ -0,0 +1,71 @@
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xl;
+}
+
+.statsGrid {
+  display: grid;
+  gap: $spacing-md;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.statCard {
+  padding: $spacing-lg;
+  background-color: var(--bg-primary);
+  border-radius: $radius-lg;
+  border: 1px solid var(--border-color);
+
+  .label {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin-bottom: $spacing-sm;
+  }
+
+  .value {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+}
+
+.chartSection {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.chartControls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.chartWrapper {
+  padding: $spacing-lg;
+  background-color: var(--bg-primary);
+  border-radius: $radius-lg;
+  border: 1px solid var(--border-color);
+  min-height: 300px;
+}
diff --git a/src/pages/UsagePage.tsx b/src/pages/UsagePage.tsx
new file mode 100644
index 0000000..2c57c68
--- /dev/null
+++ b/src/pages/UsagePage.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { usageApi } from '@/services/api/usage';
+import type { KeyStats } from '@/utils/usage';
+
+interface UsagePayload {
+  total_requests?: number;
+  success_requests?: number;
+  failed_requests?: number;
+  total_tokens?: number;
+  cached_tokens?: number;
+  reasoning_tokens?: number;
+  rpm_30m?: number;
+  tpm_30m?: number;
+  [key: string]: any;
+}
+
+export function UsagePage() {
+  const { t } = useTranslation();
+
+  const [usage, setUsage] = useState<UsagePayload | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [keyStats, setKeyStats] = useState<KeyStats | null>(null);
+
+  const loadUsage = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await usageApi.getUsage();
+      const payload = data?.usage ?? data;
+      setUsage(payload);
+      const stats = await usageApi.getKeyStats(payload);
+      setKeyStats(stats);
+    } catch (err: any) {
+      setError(err?.message || t('usage_stats.loading_error'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadUsage();
+  }, []);
+
+  const overviewItems = [
+    { label: t('usage_stats.total_requests'), value: usage?.total_requests },
+    { label: t('usage_stats.success_requests'), value: usage?.success_requests },
+    { label: t('usage_stats.failed_requests'), value: usage?.failed_requests },
+    { label: t('usage_stats.total_tokens'), value: usage?.total_tokens },
+    { label: t('usage_stats.cached_tokens'), value: usage?.cached_tokens },
+    { label: t('usage_stats.reasoning_tokens'), value: usage?.reasoning_tokens },
+    { label: t('usage_stats.rpm_30m'), value: usage?.rpm_30m },
+    { label: t('usage_stats.tpm_30m'), value: usage?.tpm_30m }
+  ];
+
+  return (
+    <div className="stack">
+      <Card
+        title={t('usage_stats.title')}
+        extra={
+          <Button variant="secondary" size="sm" onClick={loadUsage} disabled={loading}>
+            {t('usage_stats.refresh')}
+          </Button>
+        }
+      >
+        {error && <div className="error-box">{error}</div>}
+        {loading ? (
+          <div className="hint">{t('common.loading')}</div>
+        ) : (
+          <div className="grid cols-2">
+            {overviewItems.map((item) => (
+              <div key={item.label} className="stat-card">
+                <div className="stat-label">{item.label}</div>
+                <div className="stat-value">{item.value ?? '-'}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+
+      <Card title={t('usage_stats.api_details')}>
+        {loading ? (
+          <div className="hint">{t('common.loading')}</div>
+        ) : keyStats && Object.keys(keyStats.bySource || {}).length ? (
+          <div className="table">
+            <div className="table-header">
+              <div>{t('usage_stats.api_endpoint')}</div>
+              <div>{t('stats.success')}</div>
+              <div>{t('stats.failure')}</div>
+            </div>
+            {Object.entries(keyStats.bySource || {}).map(([source, bucket]) => (
+              <div key={source} className="table-row">
+                <div className="cell item-subtitle">{source}</div>
+                <div className="cell">{bucket.success}</div>
+                <div className="cell">{bucket.failure}</div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="hint">{t('usage_stats.no_data')}</div>
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/src/router/ProtectedRoute.tsx b/src/router/ProtectedRoute.tsx
new file mode 100644
index 0000000..7093b4f
--- /dev/null
+++ b/src/router/ProtectedRoute.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useState, type ReactElement } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuthStore } from '@/stores';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+
+export function ProtectedRoute({ children }: { children: ReactElement }) {
+  const location = useLocation();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const managementKey = useAuthStore((state) => state.managementKey);
+  const apiBase = useAuthStore((state) => state.apiBase);
+  const checkAuth = useAuthStore((state) => state.checkAuth);
+  const [checking, setChecking] = useState(false);
+
+  useEffect(() => {
+    const tryRestore = async () => {
+      if (!isAuthenticated && managementKey && apiBase) {
+        setChecking(true);
+        try {
+          await checkAuth();
+        } finally {
+          setChecking(false);
+        }
+      }
+    };
+    tryRestore();
+  }, [apiBase, isAuthenticated, managementKey, checkAuth]);
+
+  if (checking) {
+    return (
+      <div className="main-content">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace state={{ from: location }} />;
+  }
+
+  return children;
+}
diff --git a/src/services/api/apiKeys.ts b/src/services/api/apiKeys.ts
new file mode 100644
index 0000000..a88ceb4
--- /dev/null
+++ b/src/services/api/apiKeys.ts
@@ -0,0 +1,19 @@
+/**
+ * API 密钥管理
+ */
+
+import { apiClient } from './client';
+
+export const apiKeysApi = {
+  async list(): Promise<string[]> {
+    const data = await apiClient.get('/api-keys');
+    const keys = (data && (data['api-keys'] ?? data.apiKeys)) as unknown;
+    return Array.isArray(keys) ? (keys as string[]) : [];
+  },
+
+  replace: (keys: string[]) => apiClient.put('/api-keys', keys),
+
+  update: (index: number, value: string) => apiClient.patch('/api-keys', { index, value }),
+
+  delete: (index: number) => apiClient.delete(`/api-keys?index=${index}`)
+};
diff --git a/src/services/api/authFiles.ts b/src/services/api/authFiles.ts
new file mode 100644
index 0000000..0844d41
--- /dev/null
+++ b/src/services/api/authFiles.ts
@@ -0,0 +1,29 @@
+/**
+ * 认证文件与 OAuth 排除模型相关 API
+ */
+
+import { apiClient } from './client';
+import type { AuthFilesResponse } from '@/types/authFile';
+
+export const authFilesApi = {
+  list: () => apiClient.get<AuthFilesResponse>('/auth-files'),
+
+  upload: (file: File) => {
+    const formData = new FormData();
+    formData.append('file', file, file.name);
+    return apiClient.postForm('/auth-files', formData);
+  },
+
+  deleteFile: (name: string) => apiClient.delete(`/auth-files?name=${encodeURIComponent(name)}`),
+
+  deleteAll: () => apiClient.delete('/auth-files', { params: { all: true } }),
+
+  // OAuth 排除模型
+  getOauthExcludedModels: () => apiClient.get('/oauth-excluded-models'),
+
+  saveOauthExcludedModels: (provider: string, models: string[]) =>
+    apiClient.patch('/oauth-excluded-models', { provider, models }),
+
+  deleteOauthExcludedEntry: (provider: string) =>
+    apiClient.delete(`/oauth-excluded-models?provider=${encodeURIComponent(provider)}`)
+};
diff --git a/src/services/api/client.ts b/src/services/api/client.ts
new file mode 100644
index 0000000..b39c192
--- /dev/null
+++ b/src/services/api/client.ts
@@ -0,0 +1,215 @@
+/**
+ * Axios API 客户端
+ * 替代原项目 src/core/api-client.js
+ */
+
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import type { ApiClientConfig, ApiError } from '@/types';
+import {
+  BUILD_DATE_HEADER_KEYS,
+  MANAGEMENT_API_PREFIX,
+  REQUEST_TIMEOUT_MS,
+  VERSION_HEADER_KEYS
+} from '@/utils/constants';
+
+class ApiClient {
+  private instance: AxiosInstance;
+  private apiBase: string = '';
+  private managementKey: string = '';
+
+  constructor() {
+    this.instance = axios.create({
+      timeout: REQUEST_TIMEOUT_MS,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+
+    this.setupInterceptors();
+  }
+
+  /**
+   * 设置 API 配置
+   */
+  setConfig(config: ApiClientConfig): void {
+    this.apiBase = this.normalizeApiBase(config.apiBase);
+    this.managementKey = config.managementKey;
+
+    if (config.timeout) {
+      this.instance.defaults.timeout = config.timeout;
+    } else {
+      this.instance.defaults.timeout = REQUEST_TIMEOUT_MS;
+    }
+  }
+
+  /**
+   * 规范化 API Base URL
+   */
+  private normalizeApiBase(base: string): string {
+    let normalized = base.trim();
+
+    // 移除尾部的 /v0/management
+    normalized = normalized.replace(/\/?v0\/management\/?$/i, '');
+
+    // 移除尾部斜杠
+    normalized = normalized.replace(/\/+$/, '');
+
+    // 添加协议
+    if (!/^https?:\/\//i.test(normalized)) {
+      normalized = `http://${normalized}`;
+    }
+
+    return `${normalized}${MANAGEMENT_API_PREFIX}`;
+  }
+
+  private readHeader(headers: Record<string, any>, keys: string[]): string | null {
+    const normalized = Object.fromEntries(
+      Object.entries(headers || {}).map(([key, value]) => [key.toLowerCase(), value as string | undefined])
+    );
+    for (const key of keys) {
+      const match = normalized[key.toLowerCase()];
+      if (match) return match;
+    }
+    return null;
+  }
+
+  /**
+   * 设置请求/响应拦截器
+   */
+  private setupInterceptors(): void {
+    // 请求拦截器
+    this.instance.interceptors.request.use(
+      (config) => {
+        // 设置 baseURL
+        config.baseURL = this.apiBase;
+
+        // 添加认证头
+        if (this.managementKey) {
+          config.headers.Authorization = `Bearer ${this.managementKey}`;
+        }
+
+        return config;
+      },
+      (error) => Promise.reject(this.handleError(error))
+    );
+
+    // 响应拦截器
+    this.instance.interceptors.response.use(
+      (response) => {
+        const headers = response.headers as Record<string, string | undefined>;
+        const version = this.readHeader(headers, VERSION_HEADER_KEYS);
+        const buildDate = this.readHeader(headers, BUILD_DATE_HEADER_KEYS);
+
+        // 触发版本更新事件（后续通过 store 处理）
+        if (version || buildDate) {
+          window.dispatchEvent(
+            new CustomEvent('server-version-update', {
+              detail: { version: version || null, buildDate: buildDate || null }
+            })
+          );
+        }
+
+        return response;
+      },
+      (error) => Promise.reject(this.handleError(error))
+    );
+  }
+
+  /**
+   * 错误处理
+   */
+  private handleError(error: any): ApiError {
+    if (axios.isAxiosError(error)) {
+      const responseData = error.response?.data as any;
+      const message = responseData?.error || responseData?.message || error.message || 'Request failed';
+      const apiError = new Error(message) as ApiError;
+      apiError.name = 'ApiError';
+      apiError.status = error.response?.status;
+      apiError.code = error.code;
+      apiError.details = responseData;
+      apiError.data = responseData;
+
+      // 401 未授权 - 触发登出事件
+      if (error.response?.status === 401) {
+        window.dispatchEvent(new Event('unauthorized'));
+      }
+
+      return apiError;
+    }
+
+    const fallback = new Error(error?.message || 'Unknown error occurred') as ApiError;
+    fallback.name = 'ApiError';
+    return fallback;
+  }
+
+  /**
+   * GET 请求
+   */
+  async get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.get<T>(url, config);
+    return response.data;
+  }
+
+  /**
+   * POST 请求
+   */
+  async post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.post<T>(url, data, config);
+    return response.data;
+  }
+
+  /**
+   * PUT 请求
+   */
+  async put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.put<T>(url, data, config);
+    return response.data;
+  }
+
+  /**
+   * PATCH 请求
+   */
+  async patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.patch<T>(url, data, config);
+    return response.data;
+  }
+
+  /**
+   * DELETE 请求
+   */
+  async delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.delete<T>(url, config);
+    return response.data;
+  }
+
+  /**
+   * 获取原始响应（用于下载等场景）
+   */
+  async getRaw(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> {
+    return this.instance.get(url, config);
+  }
+
+  /**
+   * 发送 FormData
+   */
+  async postForm<T = any>(url: string, formData: FormData, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.post<T>(url, formData, {
+      ...config,
+      headers: {
+        ...(config?.headers || {}),
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+    return response.data;
+  }
+
+  /**
+   * 保留对 axios.request 的访问，便于下载等场景
+   */
+  async requestRaw(config: AxiosRequestConfig): Promise<AxiosResponse> {
+    return this.instance.request(config);
+  }
+}
+
+// 导出单例
+export const apiClient = new ApiClient();
diff --git a/src/services/api/config.ts b/src/services/api/config.ts
new file mode 100644
index 0000000..acc947f
--- /dev/null
+++ b/src/services/api/config.ts
@@ -0,0 +1,80 @@
+/**
+ * 配置相关 API
+ */
+
+import { apiClient } from './client';
+import type { Config } from '@/types';
+import { normalizeConfigResponse } from './transformers';
+
+export const configApi = {
+  /**
+   * 获取配置（会进行字段规范化）
+   */
+  async getConfig(): Promise<Config> {
+    const raw = await apiClient.get('/config');
+    return normalizeConfigResponse(raw);
+  },
+
+  /**
+   * 获取原始配置（不做转换）
+   */
+  getRawConfig: () => apiClient.get('/config'),
+
+  /**
+   * 更新 Debug 模式
+   */
+  updateDebug: (enabled: boolean) => apiClient.put('/debug', { value: enabled }),
+
+  /**
+   * 更新代理 URL
+   */
+  updateProxyUrl: (proxyUrl: string) => apiClient.put('/proxy-url', { value: proxyUrl }),
+
+  /**
+   * 清除代理 URL
+   */
+  clearProxyUrl: () => apiClient.delete('/proxy-url'),
+
+  /**
+   * 更新重试次数
+   */
+  updateRequestRetry: (retryCount: number) => apiClient.put('/request-retry', { value: retryCount }),
+
+  /**
+   * 配额回退：切换项目
+   */
+  updateSwitchProject: (enabled: boolean) =>
+    apiClient.put('/quota-exceeded/switch-project', { value: enabled }),
+
+  /**
+   * 配额回退：切换预览模型
+   */
+  updateSwitchPreviewModel: (enabled: boolean) =>
+    apiClient.put('/quota-exceeded/switch-preview-model', { value: enabled }),
+
+  /**
+   * 使用统计开关
+   */
+  updateUsageStatistics: (enabled: boolean) =>
+    apiClient.put('/usage-statistics-enabled', { value: enabled }),
+
+  /**
+   * 请求日志开关
+   */
+  updateRequestLog: (enabled: boolean) => apiClient.put('/request-log', { value: enabled }),
+
+  /**
+   * 写日志到文件开关
+   */
+  updateLoggingToFile: (enabled: boolean) => apiClient.put('/logging-to-file', { value: enabled }),
+
+  /**
+   * WebSocket 鉴权开关
+   */
+  updateWsAuth: (enabled: boolean) => apiClient.put('/ws-auth', { value: enabled }),
+
+  /**
+   * 重载配置
+   */
+  reloadConfig: () => apiClient.post('/config/reload')
+};
diff --git a/src/services/api/configFile.ts b/src/services/api/configFile.ts
new file mode 100644
index 0000000..d09e912
--- /dev/null
+++ b/src/services/api/configFile.ts
@@ -0,0 +1,27 @@
+/**
+ * 配置文件相关 API（/config.yaml）
+ */
+
+import { apiClient } from './client';
+
+export const configFileApi = {
+  async fetchConfigYaml(): Promise<string> {
+    const response = await apiClient.getRaw('/config.yaml', {
+      responseType: 'text',
+      headers: { Accept: 'application/yaml, text/yaml, text/plain' }
+    });
+    const data = response.data as any;
+    if (typeof data === 'string') return data;
+    if (data === undefined || data === null) return '';
+    return String(data);
+  },
+
+  async saveConfigYaml(content: string): Promise<void> {
+    await apiClient.put('/config.yaml', content, {
+      headers: {
+        'Content-Type': 'application/yaml',
+        Accept: 'application/json, text/plain, */*'
+      }
+    });
+  }
+};
diff --git a/src/services/api/index.ts b/src/services/api/index.ts
new file mode 100644
index 0000000..23b62c4
--- /dev/null
+++ b/src/services/api/index.ts
@@ -0,0 +1,12 @@
+export * from './client';
+export * from './config';
+export * from './configFile';
+export * from './apiKeys';
+export * from './providers';
+export * from './authFiles';
+export * from './oauth';
+export * from './usage';
+export * from './logs';
+export * from './version';
+export * from './models';
+export * from './transformers';
diff --git a/src/services/api/logs.ts b/src/services/api/logs.ts
new file mode 100644
index 0000000..aa02d5f
--- /dev/null
+++ b/src/services/api/logs.ts
@@ -0,0 +1,23 @@
+/**
+ * 日志相关 API
+ */
+
+import { apiClient } from './client';
+
+export interface LogsQuery {
+  after?: string | number;
+  limit?: number;
+}
+
+export const logsApi = {
+  fetchLogs: (params: LogsQuery = {}) => apiClient.get('/logs', { params }),
+
+  clearLogs: () => apiClient.delete('/logs'),
+
+  fetchErrorLogs: () => apiClient.get('/request-error-logs'),
+
+  downloadErrorLog: (filename: string) =>
+    apiClient.getRaw(`/request-error-logs/${encodeURIComponent(filename)}`, {
+      responseType: 'blob'
+    })
+};
diff --git a/src/services/api/models.ts b/src/services/api/models.ts
new file mode 100644
index 0000000..e9fe055
--- /dev/null
+++ b/src/services/api/models.ts
@@ -0,0 +1,31 @@
+/**
+ * 可用模型获取
+ */
+
+import axios from 'axios';
+import { normalizeModelList } from '@/utils/models';
+
+const buildModelsEndpoint = (baseUrl: string): string => {
+  if (!baseUrl) return '';
+  const trimmed = String(baseUrl).trim().replace(/\/+$/g, '');
+  if (!trimmed) return '';
+  if (trimmed.endsWith('/v1')) {
+    return `${trimmed}/models`;
+  }
+  return `${trimmed}/v1/models`;
+};
+
+export const modelsApi = {
+  async fetchModels(baseUrl: string, apiKey?: string) {
+    const endpoint = buildModelsEndpoint(baseUrl);
+    if (!endpoint) {
+      throw new Error('Invalid base url');
+    }
+
+    const response = await axios.get(endpoint, {
+      headers: apiKey ? { Authorization: `Bearer ${apiKey}` } : undefined
+    });
+    const payload = response.data?.data ?? response.data?.models ?? response.data;
+    return normalizeModelList(payload, { dedupe: true });
+  }
+};
diff --git a/src/services/api/oauth.ts b/src/services/api/oauth.ts
new file mode 100644
index 0000000..4f58156
--- /dev/null
+++ b/src/services/api/oauth.ts
@@ -0,0 +1,27 @@
+/**
+ * OAuth 与设备码登录相关 API
+ */
+
+import { apiClient } from './client';
+
+export type OAuthProvider =
+  | 'codex'
+  | 'anthropic'
+  | 'antigravity'
+  | 'gemini-cli'
+  | 'qwen'
+  | 'iflow';
+
+export interface OAuthStartResponse {
+  url: string;
+  state?: string;
+}
+
+export const oauthApi = {
+  startAuth: (provider: OAuthProvider) => apiClient.get<OAuthStartResponse>(`/${provider}-auth-url`, { params: { is_webui: 1 } }),
+
+  getAuthStatus: (state: string) =>
+    apiClient.get<{ status: 'ok' | 'wait' | 'error'; error?: string }>(`/get-auth-status`, {
+      params: { state }
+    })
+};
diff --git a/src/services/api/providers.ts b/src/services/api/providers.ts
new file mode 100644
index 0000000..4a66753
--- /dev/null
+++ b/src/services/api/providers.ts
@@ -0,0 +1,152 @@
+/**
+ * AI 提供商相关 API
+ */
+
+import { apiClient } from './client';
+import {
+  normalizeGeminiKeyConfig,
+  normalizeOpenAIProvider,
+  normalizeProviderKeyConfig
+} from './transformers';
+import type {
+  GeminiKeyConfig,
+  OpenAIProviderConfig,
+  ProviderKeyConfig,
+  ApiKeyEntry,
+  ModelAlias
+} from '@/types';
+
+const serializeHeaders = (headers?: Record<string, string>) => (headers && Object.keys(headers).length ? headers : undefined);
+
+const serializeModelAliases = (models?: ModelAlias[]) =>
+  Array.isArray(models)
+    ? models
+        .map((model) => {
+          if (!model?.name) return null;
+          const payload: Record<string, any> = { name: model.name };
+          if (model.alias && model.alias !== model.name) {
+            payload.alias = model.alias;
+          }
+          if (model.priority !== undefined) {
+            payload.priority = model.priority;
+          }
+          if (model.testModel) {
+            payload['test-model'] = model.testModel;
+          }
+          return payload;
+        })
+        .filter(Boolean)
+    : undefined;
+
+const serializeApiKeyEntry = (entry: ApiKeyEntry) => {
+  const payload: Record<string, any> = { 'api-key': entry.apiKey };
+  if (entry.proxyUrl) payload['proxy-url'] = entry.proxyUrl;
+  const headers = serializeHeaders(entry.headers);
+  if (headers) payload.headers = headers;
+  return payload;
+};
+
+const serializeProviderKey = (config: ProviderKeyConfig) => {
+  const payload: Record<string, any> = { 'api-key': config.apiKey };
+  if (config.baseUrl) payload['base-url'] = config.baseUrl;
+  if (config.proxyUrl) payload['proxy-url'] = config.proxyUrl;
+  const headers = serializeHeaders(config.headers);
+  if (headers) payload.headers = headers;
+  const models = serializeModelAliases(config.models);
+  if (models && models.length) payload.models = models;
+  return payload;
+};
+
+const serializeGeminiKey = (config: GeminiKeyConfig) => {
+  const payload: Record<string, any> = { 'api-key': config.apiKey };
+  if (config.baseUrl) payload['base-url'] = config.baseUrl;
+  const headers = serializeHeaders(config.headers);
+  if (headers) payload.headers = headers;
+  if (config.excludedModels && config.excludedModels.length) {
+    payload['excluded-models'] = config.excludedModels;
+  }
+  return payload;
+};
+
+const serializeOpenAIProvider = (provider: OpenAIProviderConfig) => {
+  const payload: Record<string, any> = {
+    name: provider.name,
+    'base-url': provider.baseUrl,
+    'api-key-entries': Array.isArray(provider.apiKeyEntries)
+      ? provider.apiKeyEntries.map((entry) => serializeApiKeyEntry(entry))
+      : []
+  };
+  const headers = serializeHeaders(provider.headers);
+  if (headers) payload.headers = headers;
+  const models = serializeModelAliases(provider.models);
+  if (models && models.length) payload.models = models;
+  if (provider.priority !== undefined) payload.priority = provider.priority;
+  if (provider.testModel) payload['test-model'] = provider.testModel;
+  return payload;
+};
+
+export const providersApi = {
+  async getGeminiKeys(): Promise<GeminiKeyConfig[]> {
+    const data = await apiClient.get('/gemini-api-key');
+    const list = (data && (data['gemini-api-key'] ?? data.items ?? data)) as any;
+    if (!Array.isArray(list)) return [];
+    return list.map((item) => normalizeGeminiKeyConfig(item)).filter(Boolean) as GeminiKeyConfig[];
+  },
+
+  saveGeminiKeys: (configs: GeminiKeyConfig[]) =>
+    apiClient.put('/gemini-api-key', configs.map((item) => serializeGeminiKey(item))),
+
+  updateGeminiKey: (index: number, value: GeminiKeyConfig) =>
+    apiClient.patch('/gemini-api-key', { index, value: serializeGeminiKey(value) }),
+
+  deleteGeminiKey: (apiKey: string) =>
+    apiClient.delete(`/gemini-api-key?api-key=${encodeURIComponent(apiKey)}`),
+
+  async getCodexConfigs(): Promise<ProviderKeyConfig[]> {
+    const data = await apiClient.get('/codex-api-key');
+    const list = (data && (data['codex-api-key'] ?? data.items ?? data)) as any;
+    if (!Array.isArray(list)) return [];
+    return list.map((item) => normalizeProviderKeyConfig(item)).filter(Boolean) as ProviderKeyConfig[];
+  },
+
+  saveCodexConfigs: (configs: ProviderKeyConfig[]) =>
+    apiClient.put('/codex-api-key', configs.map((item) => serializeProviderKey(item))),
+
+  updateCodexConfig: (index: number, value: ProviderKeyConfig) =>
+    apiClient.patch('/codex-api-key', { index, value: serializeProviderKey(value) }),
+
+  deleteCodexConfig: (apiKey: string) =>
+    apiClient.delete(`/codex-api-key?api-key=${encodeURIComponent(apiKey)}`),
+
+  async getClaudeConfigs(): Promise<ProviderKeyConfig[]> {
+    const data = await apiClient.get('/claude-api-key');
+    const list = (data && (data['claude-api-key'] ?? data.items ?? data)) as any;
+    if (!Array.isArray(list)) return [];
+    return list.map((item) => normalizeProviderKeyConfig(item)).filter(Boolean) as ProviderKeyConfig[];
+  },
+
+  saveClaudeConfigs: (configs: ProviderKeyConfig[]) =>
+    apiClient.put('/claude-api-key', configs.map((item) => serializeProviderKey(item))),
+
+  updateClaudeConfig: (index: number, value: ProviderKeyConfig) =>
+    apiClient.patch('/claude-api-key', { index, value: serializeProviderKey(value) }),
+
+  deleteClaudeConfig: (apiKey: string) =>
+    apiClient.delete(`/claude-api-key?api-key=${encodeURIComponent(apiKey)}`),
+
+  async getOpenAIProviders(): Promise<OpenAIProviderConfig[]> {
+    const data = await apiClient.get('/openai-compatibility');
+    const list = (data && (data['openai-compatibility'] ?? data.items ?? data)) as any;
+    if (!Array.isArray(list)) return [];
+    return list.map((item) => normalizeOpenAIProvider(item)).filter(Boolean) as OpenAIProviderConfig[];
+  },
+
+  saveOpenAIProviders: (providers: OpenAIProviderConfig[]) =>
+    apiClient.put('/openai-compatibility', providers.map((item) => serializeOpenAIProvider(item))),
+
+  updateOpenAIProvider: (index: number, value: OpenAIProviderConfig) =>
+    apiClient.patch('/openai-compatibility', { index, value: serializeOpenAIProvider(value) }),
+
+  deleteOpenAIProvider: (name: string) =>
+    apiClient.delete(`/openai-compatibility?name=${encodeURIComponent(name)}`)
+};
diff --git a/src/services/api/transformers.ts b/src/services/api/transformers.ts
new file mode 100644
index 0000000..2b20cff
--- /dev/null
+++ b/src/services/api/transformers.ts
@@ -0,0 +1,232 @@
+import type {
+  ApiKeyEntry,
+  GeminiKeyConfig,
+  ModelAlias,
+  OpenAIProviderConfig,
+  ProviderKeyConfig
+} from '@/types';
+import type { Config } from '@/types/config';
+import { buildHeaderObject } from '@/utils/headers';
+
+const normalizeModelAliases = (models: any): ModelAlias[] => {
+  if (!Array.isArray(models)) return [];
+  return models
+    .map((item) => {
+      if (!item) return null;
+      const name = item.name || item.id || item.model;
+      if (!name) return null;
+      const alias = item.alias || item.display_name || item.displayName;
+      const priority = item.priority ?? item['priority'];
+      const testModel = item['test-model'] ?? item.testModel;
+      const entry: ModelAlias = { name: String(name) };
+      if (alias && alias !== name) {
+        entry.alias = String(alias);
+      }
+      if (priority !== undefined) {
+        entry.priority = Number(priority);
+      }
+      if (testModel) {
+        entry.testModel = String(testModel);
+      }
+      return entry;
+    })
+    .filter(Boolean) as ModelAlias[];
+};
+
+const normalizeHeaders = (headers: any) => {
+  if (!headers || typeof headers !== 'object') return undefined;
+  const normalized = buildHeaderObject(headers as Record<string, string>);
+  return Object.keys(normalized).length ? normalized : undefined;
+};
+
+const normalizeExcludedModels = (input: any): string[] => {
+  const rawList = Array.isArray(input) ? input : typeof input === 'string' ? input.split(/[\n,]/) : [];
+  const seen = new Set<string>();
+  const normalized: string[] = [];
+
+  rawList.forEach((item) => {
+    const trimmed = String(item ?? '').trim();
+    if (!trimmed) return;
+    const key = trimmed.toLowerCase();
+    if (seen.has(key)) return;
+    seen.add(key);
+    normalized.push(trimmed);
+  });
+
+  return normalized;
+};
+
+const normalizeApiKeyEntry = (entry: any): ApiKeyEntry | null => {
+  if (!entry) return null;
+  const apiKey = entry['api-key'] ?? entry.apiKey ?? entry.key ?? (typeof entry === 'string' ? entry : '');
+  const trimmed = String(apiKey || '').trim();
+  if (!trimmed) return null;
+
+  const proxyUrl = entry['proxy-url'] ?? entry.proxyUrl;
+  const headers = normalizeHeaders(entry.headers);
+
+  return {
+    apiKey: trimmed,
+    proxyUrl: proxyUrl ? String(proxyUrl) : undefined,
+    headers
+  };
+};
+
+const normalizeProviderKeyConfig = (item: any): ProviderKeyConfig | null => {
+  if (!item) return null;
+  const apiKey = item['api-key'] ?? item.apiKey ?? (typeof item === 'string' ? item : '');
+  const trimmed = String(apiKey || '').trim();
+  if (!trimmed) return null;
+
+  const config: ProviderKeyConfig = { apiKey: trimmed };
+  const baseUrl = item['base-url'] ?? item.baseUrl;
+  const proxyUrl = item['proxy-url'] ?? item.proxyUrl;
+  if (baseUrl) config.baseUrl = String(baseUrl);
+  if (proxyUrl) config.proxyUrl = String(proxyUrl);
+  const headers = normalizeHeaders(item.headers);
+  if (headers) config.headers = headers;
+  const models = normalizeModelAliases(item.models);
+  if (models.length) config.models = models;
+  return config;
+};
+
+const normalizeGeminiKeyConfig = (item: any): GeminiKeyConfig | null => {
+  if (!item) return null;
+  let apiKey = item['api-key'] ?? item.apiKey;
+  if (!apiKey && typeof item === 'string') {
+    apiKey = item;
+  }
+  const trimmed = String(apiKey || '').trim();
+  if (!trimmed) return null;
+
+  const config: GeminiKeyConfig = { apiKey: trimmed };
+  const baseUrl = item['base-url'] ?? item.baseUrl ?? item['base_url'];
+  if (baseUrl) config.baseUrl = String(baseUrl);
+  const headers = normalizeHeaders(item.headers);
+  if (headers) config.headers = headers;
+  const excludedModels = normalizeExcludedModels(item['excluded-models'] ?? item.excludedModels);
+  if (excludedModels.length) config.excludedModels = excludedModels;
+  return config;
+};
+
+const normalizeOpenAIProvider = (provider: any): OpenAIProviderConfig | null => {
+  if (!provider || typeof provider !== 'object') return null;
+  const name = provider.name || provider.id;
+  const baseUrl = provider['base-url'] ?? provider.baseUrl;
+  if (!name || !baseUrl) return null;
+
+  let apiKeyEntries: ApiKeyEntry[] = [];
+  if (Array.isArray(provider['api-key-entries'])) {
+    apiKeyEntries = provider['api-key-entries']
+      .map((entry: any) => normalizeApiKeyEntry(entry))
+      .filter(Boolean) as ApiKeyEntry[];
+  } else if (Array.isArray(provider['api-keys'])) {
+    apiKeyEntries = provider['api-keys']
+      .map((key: any) => normalizeApiKeyEntry({ 'api-key': key }))
+      .filter(Boolean) as ApiKeyEntry[];
+  }
+
+  const headers = normalizeHeaders(provider.headers);
+  const models = normalizeModelAliases(provider.models);
+  const priority = provider.priority ?? provider['priority'];
+  const testModel = provider['test-model'] ?? provider.testModel;
+
+  const result: OpenAIProviderConfig = {
+    name: String(name),
+    baseUrl: String(baseUrl),
+    apiKeyEntries
+  };
+
+  if (headers) result.headers = headers;
+  if (models.length) result.models = models;
+  if (priority !== undefined) result.priority = Number(priority);
+  if (testModel) result.testModel = String(testModel);
+  return result;
+};
+
+const normalizeOauthExcluded = (payload: any): Record<string, string[]> | undefined => {
+  if (!payload || typeof payload !== 'object') return undefined;
+  const source = payload['oauth-excluded-models'] ?? payload.items ?? payload;
+  if (!source || typeof source !== 'object') return undefined;
+  const map: Record<string, string[]> = {};
+  Object.entries(source).forEach(([provider, models]) => {
+    const key = String(provider || '').trim();
+    if (!key) return;
+    const normalized = normalizeExcludedModels(models);
+    map[key.toLowerCase()] = normalized;
+  });
+  return map;
+};
+
+/**
+ * 规范化 /config 返回值
+ */
+export const normalizeConfigResponse = (raw: any): Config => {
+  const config: Config = { raw: raw || {} };
+  if (!raw || typeof raw !== 'object') {
+    return config;
+  }
+
+  config.debug = raw.debug;
+  config.proxyUrl = raw['proxy-url'] ?? raw.proxyUrl;
+  config.requestRetry = raw['request-retry'] ?? raw.requestRetry;
+
+  const quota = raw['quota-exceeded'] ?? raw.quotaExceeded;
+  if (quota && typeof quota === 'object') {
+    config.quotaExceeded = {
+      switchProject: quota['switch-project'] ?? quota.switchProject,
+      switchPreviewModel: quota['switch-preview-model'] ?? quota.switchPreviewModel
+    };
+  }
+
+  config.usageStatisticsEnabled = raw['usage-statistics-enabled'] ?? raw.usageStatisticsEnabled;
+  config.requestLog = raw['request-log'] ?? raw.requestLog;
+  config.loggingToFile = raw['logging-to-file'] ?? raw.loggingToFile;
+  config.wsAuth = raw['ws-auth'] ?? raw.wsAuth;
+  config.apiKeys = Array.isArray(raw['api-keys']) ? raw['api-keys'].slice() : raw.apiKeys;
+
+  const geminiList = raw['gemini-api-key'] ?? raw.geminiApiKey ?? raw.geminiApiKeys;
+  if (Array.isArray(geminiList)) {
+    config.geminiApiKeys = geminiList
+      .map((item: any) => normalizeGeminiKeyConfig(item))
+      .filter(Boolean) as GeminiKeyConfig[];
+  }
+
+  const codexList = raw['codex-api-key'] ?? raw.codexApiKey ?? raw.codexApiKeys;
+  if (Array.isArray(codexList)) {
+    config.codexApiKeys = codexList
+      .map((item: any) => normalizeProviderKeyConfig(item))
+      .filter(Boolean) as ProviderKeyConfig[];
+  }
+
+  const claudeList = raw['claude-api-key'] ?? raw.claudeApiKey ?? raw.claudeApiKeys;
+  if (Array.isArray(claudeList)) {
+    config.claudeApiKeys = claudeList
+      .map((item: any) => normalizeProviderKeyConfig(item))
+      .filter(Boolean) as ProviderKeyConfig[];
+  }
+
+  const openaiList = raw['openai-compatibility'] ?? raw.openaiCompatibility ?? raw.openAICompatibility;
+  if (Array.isArray(openaiList)) {
+    config.openaiCompatibility = openaiList
+      .map((item: any) => normalizeOpenAIProvider(item))
+      .filter(Boolean) as OpenAIProviderConfig[];
+  }
+
+  const oauthExcluded = normalizeOauthExcluded(raw['oauth-excluded-models'] ?? raw.oauthExcludedModels);
+  if (oauthExcluded) {
+    config.oauthExcludedModels = oauthExcluded;
+  }
+
+  return config;
+};
+
+export {
+  normalizeApiKeyEntry,
+  normalizeGeminiKeyConfig,
+  normalizeModelAliases,
+  normalizeOpenAIProvider,
+  normalizeProviderKeyConfig,
+  normalizeHeaders,
+  normalizeExcludedModels
+};
diff --git a/src/services/api/usage.ts b/src/services/api/usage.ts
new file mode 100644
index 0000000..b7a633f
--- /dev/null
+++ b/src/services/api/usage.ts
@@ -0,0 +1,25 @@
+/**
+ * 使用统计相关 API
+ */
+
+import { apiClient } from './client';
+import { computeKeyStats, KeyStats } from '@/utils/usage';
+
+export const usageApi = {
+  /**
+   * 获取使用统计原始数据
+   */
+  getUsage: () => apiClient.get('/usage'),
+
+  /**
+   * 计算密钥成功/失败统计，必要时会先获取 usage 数据
+   */
+  async getKeyStats(usageData?: any): Promise<KeyStats> {
+    let payload = usageData;
+    if (!payload) {
+      const response = await apiClient.get('/usage');
+      payload = response?.usage ?? response;
+    }
+    return computeKeyStats(payload);
+  }
+};
diff --git a/src/services/api/version.ts b/src/services/api/version.ts
new file mode 100644
index 0000000..feaa6ba
--- /dev/null
+++ b/src/services/api/version.ts
@@ -0,0 +1,9 @@
+/**
+ * 版本相关 API
+ */
+
+import { apiClient } from './client';
+
+export const versionApi = {
+  checkLatest: () => apiClient.get('/latest-version')
+};
diff --git a/src/services/storage/secureStorage.ts b/src/services/storage/secureStorage.ts
new file mode 100644
index 0000000..73852d3
--- /dev/null
+++ b/src/services/storage/secureStorage.ts
@@ -0,0 +1,111 @@
+/**
+ * 安全存储服务
+ * 基于原项目 src/utils/secure-storage.js
+ */
+
+import { encryptData, decryptData } from '@/utils/encryption';
+
+interface StorageOptions {
+  encrypt?: boolean;
+}
+
+class SecureStorageService {
+  /**
+   * 存储数据
+   */
+  setItem(key: string, value: any, options: StorageOptions = {}): void {
+    const { encrypt = true } = options;
+
+    if (value === null || value === undefined) {
+      this.removeItem(key);
+      return;
+    }
+
+    const stringValue = JSON.stringify(value);
+    const storedValue = encrypt ? encryptData(stringValue) : stringValue;
+
+    localStorage.setItem(key, storedValue);
+  }
+
+  /**
+   * 获取数据
+   */
+  getItem<T = any>(key: string, options: StorageOptions = {}): T | null {
+    const { encrypt = true } = options;
+
+    const raw = localStorage.getItem(key);
+    if (raw === null) return null;
+
+    try {
+      const decrypted = encrypt ? decryptData(raw) : raw;
+      return JSON.parse(decrypted) as T;
+    } catch {
+      // JSON解析失败,尝试兼容旧的纯字符串数据 (非JSON格式)
+      try {
+        // 如果是加密的,尝试解密后直接返回
+        if (encrypt && raw.startsWith('enc::v1::')) {
+          const decrypted = decryptData(raw);
+          // 解密后如果还不是JSON,返回原始字符串
+          return decrypted as T;
+        }
+        // 非加密的纯字符串,直接返回
+        return raw as T;
+      } catch {
+        // 完全失败,静默返回null (避免控制台污染)
+        return null;
+      }
+    }
+  }
+
+  /**
+   * 删除数据
+   */
+  removeItem(key: string): void {
+    localStorage.removeItem(key);
+  }
+
+  /**
+   * 清空所有数据
+   */
+  clear(): void {
+    localStorage.clear();
+  }
+
+  /**
+   * 迁移旧的明文缓存为加密格式
+   */
+  migratePlaintextKeys(keys: string[]): void {
+    keys.forEach((key) => {
+      const raw = localStorage.getItem(key);
+      if (!raw) return;
+
+      // 如果已经是加密格式，跳过
+      if (raw.startsWith('enc::v1::')) {
+        return;
+      }
+
+      let parsed: any = raw;
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        // 原值不是 JSON，直接使用字符串
+        parsed = raw;
+      }
+
+      try {
+        this.setItem(key, parsed);
+      } catch (error) {
+        console.warn(`Failed to migrate key "${key}":`, error);
+      }
+    });
+  }
+
+  /**
+   * 检查键是否存在
+   */
+  hasItem(key: string): boolean {
+    return localStorage.getItem(key) !== null;
+  }
+}
+
+export const secureStorage = new SecureStorageService();
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..be3bce0
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Zustand Stores 统一导出
+ */
+
+export { useNotificationStore } from './useNotificationStore';
+export { useThemeStore } from './useThemeStore';
+export { useLanguageStore } from './useLanguageStore';
+export { useAuthStore } from './useAuthStore';
+export { useConfigStore } from './useConfigStore';
diff --git a/src/stores/useAuthStore.ts b/src/stores/useAuthStore.ts
new file mode 100644
index 0000000..0e57d78
--- /dev/null
+++ b/src/stores/useAuthStore.ts
@@ -0,0 +1,201 @@
+/**
+ * 认证状态管理
+ * 从原项目 src/modules/login.js 和 src/core/connection.js 迁移
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import type { AuthState, LoginCredentials, ConnectionStatus } from '@/types';
+import { STORAGE_KEY_AUTH } from '@/utils/constants';
+import { secureStorage } from '@/services/storage/secureStorage';
+import { apiClient } from '@/services/api/client';
+import { configApi } from '@/services/api/config';
+import { useConfigStore } from './useConfigStore';
+import { detectApiBaseFromLocation, normalizeApiBase } from '@/utils/connection';
+
+interface AuthStoreState extends AuthState {
+  connectionStatus: ConnectionStatus;
+  connectionError: string | null;
+
+  // 操作
+  login: (credentials: LoginCredentials) => Promise<void>;
+  logout: () => void;
+  checkAuth: () => Promise<boolean>;
+  restoreSession: () => Promise<boolean>;
+  updateServerVersion: (version: string | null, buildDate?: string | null) => void;
+  updateConnectionStatus: (status: ConnectionStatus, error?: string | null) => void;
+}
+
+export const useAuthStore = create<AuthStoreState>()(
+  persist(
+    (set, get) => ({
+      // 初始状态
+      isAuthenticated: false,
+      apiBase: '',
+      managementKey: '',
+      serverVersion: null,
+      serverBuildDate: null,
+      connectionStatus: 'disconnected',
+      connectionError: null,
+
+      // 恢复会话并自动登录
+      restoreSession: async () => {
+        secureStorage.migratePlaintextKeys(['apiBase', 'apiUrl', 'managementKey']);
+
+        const wasLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
+        const legacyBase =
+          secureStorage.getItem<string>('apiBase') ||
+          secureStorage.getItem<string>('apiUrl', { encrypt: true });
+        const legacyKey = secureStorage.getItem<string>('managementKey');
+
+        const { apiBase, managementKey } = get();
+        const resolvedBase = normalizeApiBase(apiBase || legacyBase || detectApiBaseFromLocation());
+        const resolvedKey = managementKey || legacyKey || '';
+
+        set({ apiBase: resolvedBase, managementKey: resolvedKey });
+        apiClient.setConfig({ apiBase: resolvedBase, managementKey: resolvedKey });
+
+        if (wasLoggedIn && resolvedBase && resolvedKey) {
+          try {
+            await get().login({ apiBase: resolvedBase, managementKey: resolvedKey });
+            return true;
+          } catch (error) {
+            console.warn('Auto login failed:', error);
+            return false;
+          }
+        }
+
+        return false;
+      },
+
+      // 登录
+      login: async (credentials) => {
+        const apiBase = normalizeApiBase(credentials.apiBase);
+        const managementKey = credentials.managementKey.trim();
+
+        try {
+          set({ connectionStatus: 'connecting' });
+
+          // 配置 API 客户端
+          apiClient.setConfig({
+            apiBase,
+            managementKey
+          });
+
+          // 测试连接 - 获取配置
+          await configApi.getConfig();
+
+          // 登录成功
+          set({
+            isAuthenticated: true,
+            apiBase,
+            managementKey,
+            connectionStatus: 'connected',
+            connectionError: null
+          });
+          localStorage.setItem('isLoggedIn', 'true');
+        } catch (error: any) {
+          set({
+            connectionStatus: 'error',
+            connectionError: error.message || 'Connection failed'
+          });
+          throw error;
+        }
+      },
+
+      // 登出
+      logout: () => {
+        useConfigStore.getState().clearCache();
+        set({
+          isAuthenticated: false,
+          apiBase: '',
+          managementKey: '',
+          serverVersion: null,
+          serverBuildDate: null,
+          connectionStatus: 'disconnected',
+          connectionError: null
+        });
+        localStorage.removeItem('isLoggedIn');
+      },
+
+      // 检查认证状态
+      checkAuth: async () => {
+        const { managementKey, apiBase } = get();
+
+        if (!managementKey || !apiBase) {
+          return false;
+        }
+
+        try {
+          // 重新配置客户端
+          apiClient.setConfig({ apiBase, managementKey });
+
+          // 验证连接
+          await configApi.getConfig();
+
+          set({
+            isAuthenticated: true,
+            connectionStatus: 'connected'
+          });
+
+          return true;
+        } catch (error) {
+          set({
+            isAuthenticated: false,
+            connectionStatus: 'error'
+          });
+          return false;
+        }
+      },
+
+      // 更新服务器版本
+      updateServerVersion: (version, buildDate) => {
+        set({ serverVersion: version || null, serverBuildDate: buildDate || null });
+      },
+
+      // 更新连接状态
+      updateConnectionStatus: (status, error = null) => {
+        set({
+          connectionStatus: status,
+          connectionError: error
+        });
+      }
+    }),
+    {
+      name: STORAGE_KEY_AUTH,
+      storage: createJSONStorage(() => ({
+        getItem: (name) => {
+          const data = secureStorage.getItem<AuthStoreState>(name);
+          return data ? JSON.stringify(data) : null;
+        },
+        setItem: (name, value) => {
+          secureStorage.setItem(name, JSON.parse(value));
+        },
+        removeItem: (name) => {
+          secureStorage.removeItem(name);
+        }
+      })),
+      partialize: (state) => ({
+        apiBase: state.apiBase,
+        managementKey: state.managementKey,
+        serverVersion: state.serverVersion,
+        serverBuildDate: state.serverBuildDate
+      })
+    }
+  )
+);
+
+// 监听全局未授权事件
+if (typeof window !== 'undefined') {
+  window.addEventListener('unauthorized', () => {
+    useAuthStore.getState().logout();
+  });
+
+  window.addEventListener(
+    'server-version-update',
+    ((e: CustomEvent) => {
+      const detail = e.detail || {};
+      useAuthStore.getState().updateServerVersion(detail.version || null, detail.buildDate || null);
+    }) as EventListener
+  );
+}
diff --git a/src/stores/useConfigStore.ts b/src/stores/useConfigStore.ts
new file mode 100644
index 0000000..1d800e1
--- /dev/null
+++ b/src/stores/useConfigStore.ts
@@ -0,0 +1,219 @@
+/**
+ * 配置状态管理
+ * 从原项目 src/core/config-service.js 迁移
+ */
+
+import { create } from 'zustand';
+import type { Config } from '@/types';
+import type { RawConfigSection } from '@/types/config';
+import { configApi } from '@/services/api/config';
+import { CACHE_EXPIRY_MS } from '@/utils/constants';
+
+interface ConfigCache {
+  data: any;
+  timestamp: number;
+}
+
+interface ConfigState {
+  config: Config | null;
+  cache: Map<string, ConfigCache>;
+  loading: boolean;
+  error: string | null;
+
+  // 操作
+  fetchConfig: (section?: RawConfigSection, forceRefresh?: boolean) => Promise<Config | any>;
+  updateConfigValue: (section: RawConfigSection, value: any) => void;
+  clearCache: (section?: RawConfigSection) => void;
+  isCacheValid: (section?: RawConfigSection) => boolean;
+}
+
+const SECTION_KEYS: RawConfigSection[] = [
+  'debug',
+  'proxy-url',
+  'request-retry',
+  'quota-exceeded',
+  'usage-statistics-enabled',
+  'request-log',
+  'logging-to-file',
+  'ws-auth',
+  'api-keys',
+  'gemini-api-key',
+  'codex-api-key',
+  'claude-api-key',
+  'openai-compatibility',
+  'oauth-excluded-models'
+];
+
+const extractSectionValue = (config: Config | null, section?: RawConfigSection) => {
+  if (!config) return undefined;
+  switch (section) {
+    case 'debug':
+      return config.debug;
+    case 'proxy-url':
+      return config.proxyUrl;
+    case 'request-retry':
+      return config.requestRetry;
+    case 'quota-exceeded':
+      return config.quotaExceeded;
+    case 'usage-statistics-enabled':
+      return config.usageStatisticsEnabled;
+    case 'request-log':
+      return config.requestLog;
+    case 'logging-to-file':
+      return config.loggingToFile;
+    case 'ws-auth':
+      return config.wsAuth;
+    case 'api-keys':
+      return config.apiKeys;
+    case 'gemini-api-key':
+      return config.geminiApiKeys;
+    case 'codex-api-key':
+      return config.codexApiKeys;
+    case 'claude-api-key':
+      return config.claudeApiKeys;
+    case 'openai-compatibility':
+      return config.openaiCompatibility;
+    case 'oauth-excluded-models':
+      return config.oauthExcludedModels;
+    default:
+      if (!section) return undefined;
+      return config.raw?.[section];
+  }
+};
+
+export const useConfigStore = create<ConfigState>((set, get) => ({
+  config: null,
+  cache: new Map(),
+  loading: false,
+  error: null,
+
+  fetchConfig: async (section, forceRefresh = false) => {
+    const { cache, isCacheValid } = get();
+
+    // 检查缓存
+    const cacheKey = section || '__full__';
+    if (!forceRefresh && isCacheValid(section)) {
+      const cached = cache.get(cacheKey);
+      if (cached) {
+        return cached.data;
+      }
+    }
+
+    // 获取新数据
+    set({ loading: true, error: null });
+
+    try {
+      const data = await configApi.getConfig();
+      const now = Date.now();
+
+      // 更新缓存
+      const newCache = new Map(cache);
+      newCache.set('__full__', { data, timestamp: now });
+      SECTION_KEYS.forEach((key) => {
+        const value = extractSectionValue(data, key);
+        if (value !== undefined) {
+          newCache.set(key, { data: value, timestamp: now });
+        }
+      });
+
+      set({
+        config: data,
+        cache: newCache,
+        loading: false
+      });
+
+      return section ? extractSectionValue(data, section) : data;
+    } catch (error: any) {
+      set({
+        error: error.message || 'Failed to fetch config',
+        loading: false
+      });
+      throw error;
+    }
+  },
+
+  updateConfigValue: (section, value) => {
+    set((state) => {
+      const raw = { ...(state.config?.raw || {}) };
+      raw[section] = value;
+      const nextConfig: Config = { ...(state.config || {}), raw };
+
+      switch (section) {
+        case 'debug':
+          nextConfig.debug = value;
+          break;
+        case 'proxy-url':
+          nextConfig.proxyUrl = value;
+          break;
+        case 'request-retry':
+          nextConfig.requestRetry = value;
+          break;
+        case 'quota-exceeded':
+          nextConfig.quotaExceeded = value;
+          break;
+        case 'usage-statistics-enabled':
+          nextConfig.usageStatisticsEnabled = value;
+          break;
+        case 'request-log':
+          nextConfig.requestLog = value;
+          break;
+        case 'logging-to-file':
+          nextConfig.loggingToFile = value;
+          break;
+        case 'ws-auth':
+          nextConfig.wsAuth = value;
+          break;
+        case 'api-keys':
+          nextConfig.apiKeys = value;
+          break;
+        case 'gemini-api-key':
+          nextConfig.geminiApiKeys = value;
+          break;
+        case 'codex-api-key':
+          nextConfig.codexApiKeys = value;
+          break;
+        case 'claude-api-key':
+          nextConfig.claudeApiKeys = value;
+          break;
+        case 'openai-compatibility':
+          nextConfig.openaiCompatibility = value;
+          break;
+        case 'oauth-excluded-models':
+          nextConfig.oauthExcludedModels = value;
+          break;
+        default:
+          break;
+      }
+
+      return { config: nextConfig };
+    });
+
+    // 清除该 section 的缓存
+    get().clearCache(section);
+  },
+
+  clearCache: (section) => {
+    const { cache } = get();
+    const newCache = new Map(cache);
+
+    if (section) {
+      newCache.delete(section);
+      // 同时清除完整配置缓存
+      newCache.delete('__full__');
+    } else {
+      newCache.clear();
+    }
+
+    set({ cache: newCache });
+  },
+
+  isCacheValid: (section) => {
+    const { cache } = get();
+    const cacheKey = section || '__full__';
+    const cached = cache.get(cacheKey);
+
+    if (!cached) return false;
+
+    return Date.now() - cached.timestamp < CACHE_EXPIRY_MS;
+  }
+}));
diff --git a/src/stores/useLanguageStore.ts b/src/stores/useLanguageStore.ts
new file mode 100644
index 0000000..794a6a4
--- /dev/null
+++ b/src/stores/useLanguageStore.ts
@@ -0,0 +1,39 @@
+/**
+ * 语言状态管理
+ * 从原项目 src/modules/language.js 迁移
+ */
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Language } from '@/types';
+import { STORAGE_KEY_LANGUAGE } from '@/utils/constants';
+import i18n from '@/i18n';
+
+interface LanguageState {
+  language: Language;
+  setLanguage: (language: Language) => void;
+  toggleLanguage: () => void;
+}
+
+export const useLanguageStore = create<LanguageState>()(
+  persist(
+    (set, get) => ({
+      language: 'zh-CN',
+
+      setLanguage: (language) => {
+        // 切换 i18next 语言
+        i18n.changeLanguage(language);
+        set({ language });
+      },
+
+      toggleLanguage: () => {
+        const { language, setLanguage } = get();
+        const newLanguage: Language = language === 'zh-CN' ? 'en' : 'zh-CN';
+        setLanguage(newLanguage);
+      }
+    }),
+    {
+      name: STORAGE_KEY_LANGUAGE
+    }
+  )
+);
diff --git a/src/stores/useNotificationStore.ts b/src/stores/useNotificationStore.ts
new file mode 100644
index 0000000..d0ab70a
--- /dev/null
+++ b/src/stores/useNotificationStore.ts
@@ -0,0 +1,53 @@
+/**
+ * 通知状态管理
+ * 替代原项目中的 showNotification 方法
+ */
+
+import { create } from 'zustand';
+import type { Notification, NotificationType } from '@/types';
+import { generateId } from '@/utils/helpers';
+import { NOTIFICATION_DURATION_MS } from '@/utils/constants';
+
+interface NotificationState {
+  notifications: Notification[];
+  showNotification: (message: string, type?: NotificationType, duration?: number) => void;
+  removeNotification: (id: string) => void;
+  clearAll: () => void;
+}
+
+export const useNotificationStore = create<NotificationState>((set) => ({
+  notifications: [],
+
+  showNotification: (message, type = 'info', duration = NOTIFICATION_DURATION_MS) => {
+    const id = generateId();
+    const notification: Notification = {
+      id,
+      message,
+      type,
+      duration
+    };
+
+    set((state) => ({
+      notifications: [...state.notifications, notification]
+    }));
+
+    // 自动移除通知
+    if (duration > 0) {
+      setTimeout(() => {
+        set((state) => ({
+          notifications: state.notifications.filter((n) => n.id !== id)
+        }));
+      }, duration);
+    }
+  },
+
+  removeNotification: (id) => {
+    set((state) => ({
+      notifications: state.notifications.filter((n) => n.id !== id)
+    }));
+  },
+
+  clearAll: () => {
+    set({ notifications: [] });
+  }
+}));
diff --git a/src/stores/useThemeStore.ts b/src/stores/useThemeStore.ts
new file mode 100644
index 0000000..31a3849
--- /dev/null
+++ b/src/stores/useThemeStore.ts
@@ -0,0 +1,70 @@
+/**
+ * 主题状态管理
+ * 从原项目 src/modules/theme.js 迁移
+ */
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Theme } from '@/types';
+import { STORAGE_KEY_THEME } from '@/utils/constants';
+
+interface ThemeState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+  initializeTheme: () => void;
+}
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set, get) => ({
+      theme: 'light',
+
+      setTheme: (theme) => {
+        // 应用主题到 DOM
+        if (theme === 'dark') {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        } else {
+          document.documentElement.removeAttribute('data-theme');
+        }
+
+        set({ theme });
+      },
+
+      toggleTheme: () => {
+        const { theme, setTheme } = get();
+        const newTheme: Theme = theme === 'light' ? 'dark' : 'light';
+        setTheme(newTheme);
+      },
+
+      initializeTheme: () => {
+        const { theme, setTheme } = get();
+
+        // 检查系统偏好
+        if (
+          !localStorage.getItem(STORAGE_KEY_THEME) &&
+          window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches
+        ) {
+          setTheme('dark');
+          return;
+        }
+
+        // 应用已保存的主题
+        setTheme(theme);
+
+        // 监听系统主题变化（仅在用户未手动设置时）
+        if (window.matchMedia) {
+          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (!localStorage.getItem(STORAGE_KEY_THEME)) {
+              setTheme(e.matches ? 'dark' : 'light');
+            }
+          });
+        }
+      }
+    }),
+    {
+      name: STORAGE_KEY_THEME
+    }
+  )
+);
diff --git a/src/styles/components.scss b/src/styles/components.scss
new file mode 100644
index 0000000..5c9255c
--- /dev/null
+++ b/src/styles/components.scss
@@ -0,0 +1,546 @@
+@import './variables.scss';
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  border: 1px solid transparent;
+  border-radius: $radius-md;
+  padding: 10px 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all $transition-fast;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+
+  &.btn-primary {
+    background-color: var(--primary-color);
+    color: #fff;
+    border-color: var(--primary-color);
+
+    &:hover {
+      background-color: var(--primary-hover);
+      border-color: var(--primary-hover);
+    }
+  }
+
+  &.btn-secondary {
+    background-color: var(--bg-tertiary);
+    border-color: var(--border-color);
+    color: var(--text-primary);
+
+    &:hover {
+      border-color: var(--border-hover);
+    }
+  }
+
+  &.btn-ghost {
+    background: transparent;
+    border-color: transparent;
+    color: var(--text-secondary);
+
+    &:hover {
+      color: var(--text-primary);
+      background: var(--bg-secondary);
+    }
+  }
+
+  &.btn-danger {
+    background-color: $error-color;
+    border-color: $error-color;
+    color: #fff;
+
+    &:hover {
+      background-color: darken($error-color, 5%);
+    }
+  }
+
+  &.btn-full {
+    width: 100%;
+  }
+
+  &.btn-sm {
+    padding: 8px 10px;
+    font-size: 14px;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.input,
+textarea {
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: 10px 12px;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: border-color $transition-fast, box-shadow $transition-fast;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  }
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+  margin-bottom: $spacing-md;
+
+  label {
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .hint {
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+}
+
+.card {
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  box-shadow: var(--shadow);
+  padding: $spacing-lg;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $spacing-md;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: $radius-full;
+  font-size: 13px;
+  border: 1px solid var(--border-color);
+
+  &.success {
+    color: $success-color;
+    border-color: rgba(16, 185, 129, 0.35);
+    background: rgba(16, 185, 129, 0.08);
+  }
+
+  &.warning {
+    color: $warning-color;
+    border-color: rgba(245, 158, 11, 0.35);
+    background: rgba(245, 158, 11, 0.08);
+  }
+
+  &.error {
+    color: $error-color;
+    border-color: rgba(239, 68, 68, 0.35);
+    background: rgba(239, 68, 68, 0.08);
+  }
+
+  &.muted {
+    color: var(--text-secondary);
+  }
+}
+
+.notification-container {
+  position: fixed;
+  top: $spacing-lg;
+  right: $spacing-lg;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  z-index: $z-notification;
+  max-width: 360px;
+}
+
+.notification {
+  padding: $spacing-md;
+  border-radius: $radius-md;
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-sm;
+
+  &.success {
+    border-color: rgba(16, 185, 129, 0.4);
+  }
+  &.warning {
+    border-color: rgba(245, 158, 11, 0.4);
+  }
+  &.error {
+    border-color: rgba(239, 68, 68, 0.4);
+  }
+
+  .message {
+    flex: 1;
+    font-weight: 500;
+  }
+
+  .close-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+  }
+}
+
+.switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  cursor: pointer;
+
+  input {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    position: absolute;
+  }
+
+  .track {
+    width: 44px;
+    height: 24px;
+    background: var(--border-color);
+    border-radius: $radius-full;
+    position: relative;
+    transition: background $transition-fast;
+  }
+
+  .thumb {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    border-radius: $radius-full;
+    box-shadow: $shadow-sm;
+    transition: transform $transition-fast;
+  }
+
+  input:checked + .track {
+    background: var(--primary-color);
+  }
+
+  input:checked + .track .thumb {
+    transform: translateX(20px);
+  }
+
+  .label {
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+}
+
+.pill {
+  padding: 4px 10px;
+  border-radius: $radius-full;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+  font-size: 12px;
+}
+
+.loading-spinner {
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: #fff;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-modal;
+  padding: $spacing-lg;
+}
+
+.modal {
+  background: var(--bg-primary);
+  border-radius: $radius-lg;
+  border: 1px solid var(--border-color);
+  box-shadow: $shadow-lg;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $spacing-md $spacing-lg;
+  border-bottom: 1px solid var(--border-color);
+
+  .modal-title {
+    font-weight: 700;
+    font-size: 18px;
+    color: var(--text-primary);
+  }
+
+  .modal-close {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 20px;
+    cursor: pointer;
+    padding: 4px;
+  }
+}
+
+.modal-body {
+  padding: $spacing-lg;
+  overflow: auto;
+  max-height: 65vh;
+}
+
+.modal-footer {
+  padding: $spacing-md $spacing-lg;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-sm;
+  background: var(--bg-primary);
+}
+
+.empty-state {
+  border: 1px dashed var(--border-color);
+  border-radius: $radius-lg;
+  padding: $spacing-lg;
+  background: var(--bg-secondary);
+  display: flex;
+  justify-content: space-between;
+  gap: $spacing-md;
+  align-items: center;
+
+  .empty-content {
+    display: flex;
+    align-items: center;
+    gap: $spacing-md;
+  }
+
+  .empty-icon {
+    width: 42px;
+    height: 42px;
+    border-radius: $radius-full;
+    border: 2px solid var(--border-color);
+    display: grid;
+    place-items: center;
+    color: var(--text-secondary);
+  }
+
+  .empty-title {
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .empty-desc {
+    color: var(--text-secondary);
+    margin-top: 4px;
+  }
+}
+
+.header-input-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+
+  .header-input-row {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr auto;
+    align-items: center;
+    gap: $spacing-sm;
+  }
+
+  .header-separator {
+    color: var(--text-secondary);
+    text-align: center;
+  }
+
+  .align-start {
+    width: fit-content;
+  }
+}
+
+.item-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.item-row {
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  background: var(--bg-primary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+
+  .item-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .item-title {
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .item-subtitle {
+    color: var(--text-secondary);
+    font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+      monospace;
+    word-break: break-all;
+  }
+
+  .item-actions {
+    display: flex;
+    gap: $spacing-sm;
+  }
+}
+
+.error-box {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  border-radius: $radius-md;
+  padding: $spacing-sm $spacing-md;
+  color: $error-color;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.filters {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: $spacing-md;
+  margin-bottom: $spacing-md;
+
+  .filter-item {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xs;
+  }
+}
+
+.table {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  overflow: hidden;
+
+  .table-header,
+  .table-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: $spacing-sm;
+    padding: $spacing-sm $spacing-md;
+    align-items: center;
+  }
+
+  .table-header {
+    background: var(--bg-secondary);
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .table-row {
+    border-top: 1px solid var(--border-color);
+  }
+
+  .cell {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    flex-wrap: wrap;
+  }
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  margin-top: $spacing-md;
+}
+
+.stat-card {
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  background: var(--bg-primary);
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+
+  .stat-label {
+    color: var(--text-secondary);
+    font-size: 14px;
+  }
+
+  .stat-value {
+    font-weight: 800;
+    color: var(--text-primary);
+    font-size: 18px;
+  }
+}
+
+.log-viewer {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  max-height: 520px;
+  overflow: auto;
+  white-space: pre-wrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  color: var(--text-primary);
+}
+
+.hint {
+  color: var(--text-secondary);
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 0000000..c9729b6
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,70 @@
+/**
+ * 全局样式
+ */
+
+@import './variables.scss';
+@import './mixins.scss';
+@import './reset.scss';
+@import './themes.scss';
+@import './components.scss';
+@import './layout.scss';
+
+body {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  transition: background-color $transition-normal, color $transition-normal;
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: $radius-full;
+
+  &:hover {
+    background: var(--border-hover);
+  }
+}
+
+// 通用工具类
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 $spacing-md;
+}
+
+.flex-center {
+  @include flex-center;
+}
+
+.text-ellipsis {
+  @include text-ellipsis;
+}
+
+// 通用过渡
+.fade-enter {
+  opacity: 0;
+}
+
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity $transition-normal;
+}
+
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity $transition-normal;
+}
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
new file mode 100644
index 0000000..1ca53bc
--- /dev/null
+++ b/src/styles/layout.scss
@@ -0,0 +1,212 @@
+@import './variables.scss';
+
+.app-shell {
+  display: flex;
+  min-height: 100vh;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.sidebar {
+  width: 240px;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border-color);
+  padding: $spacing-lg $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  transition: transform $transition-normal;
+
+  .brand {
+    font-weight: 800;
+    font-size: 18px;
+    color: var(--text-primary);
+  }
+
+  .nav-section {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+  }
+
+  .nav-item {
+    padding: 10px 12px;
+    border-radius: $radius-md;
+    color: var(--text-primary);
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    cursor: pointer;
+    transition: background $transition-fast, color $transition-fast;
+
+    &:hover {
+      background: var(--bg-secondary);
+    }
+
+    &.active {
+      background: rgba(59, 130, 246, 0.12);
+      color: var(--primary-color);
+      border: 1px solid rgba(59, 130, 246, 0.3);
+    }
+  }
+
+  @media (max-width: $breakpoint-mobile) {
+    position: fixed;
+    z-index: $z-dropdown;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    transform: translateX(-100%);
+    box-shadow: $shadow-lg;
+
+    &.open {
+      transform: translateX(0);
+    }
+  }
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.main-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+  padding: $spacing-md $spacing-lg;
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+
+  .left {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+  }
+
+  .connection {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    color: var(--text-secondary);
+
+    .base {
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+  }
+}
+
+.main-content {
+  flex: 1;
+  padding: $spacing-lg;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.footer {
+  padding: $spacing-md $spacing-lg;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--text-secondary);
+  font-size: 14px;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+}
+
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-secondary);
+  padding: $spacing-lg;
+
+  .login-card {
+    width: 100%;
+    max-width: 520px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: $radius-lg;
+    box-shadow: var(--shadow-lg);
+    padding: $spacing-xl;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-lg;
+  }
+
+  .login-header {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+
+    .title {
+      font-size: 22px;
+      font-weight: 800;
+      color: var(--text-primary);
+    }
+
+    .subtitle {
+      color: var(--text-secondary);
+    }
+  }
+
+  .connection-box {
+    background: var(--bg-secondary);
+    border: 1px dashed var(--border-color);
+    border-radius: $radius-md;
+    padding: $spacing-md;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xs;
+
+    .label {
+      color: var(--text-secondary);
+      font-size: 14px;
+    }
+
+    .value {
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+  }
+
+  .toggle-advanced {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: $spacing-xs;
+    color: var(--text-secondary);
+    cursor: pointer;
+  }
+
+  .error-box {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.4);
+    border-radius: $radius-md;
+    padding: $spacing-sm $spacing-md;
+    color: $error-color;
+  }
+}
+
+.grid {
+  display: grid;
+  gap: $spacing-lg;
+}
+
+@media (min-width: $breakpoint-tablet) {
+  .grid.cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
new file mode 100644
index 0000000..ad1d535
--- /dev/null
+++ b/src/styles/mixins.scss
@@ -0,0 +1,61 @@
+/**
+ * SCSS 混入
+ */
+
+// 响应式断点
+@mixin mobile {
+  @media (max-width: #{$breakpoint-mobile}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$breakpoint-mobile + 1}) and (max-width: #{$breakpoint-tablet}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$breakpoint-tablet + 1}) {
+    @content;
+  }
+}
+
+// Flexbox 居中
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 文本截断
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 多行文本截断
+@mixin text-ellipsis-multiline($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// 按钮重置
+@mixin button-reset {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  outline: none;
+
+  &:focus {
+    outline: 2px solid $primary-color;
+    outline-offset: 2px;
+  }
+}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
new file mode 100644
index 0000000..ad7bfbe
--- /dev/null
+++ b/src/styles/reset.scss
@@ -0,0 +1,47 @@
+/**
+ * CSS Reset
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: $font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul,
+ol {
+  list-style: none;
+}
diff --git a/src/styles/themes.scss b/src/styles/themes.scss
new file mode 100644
index 0000000..70d4b38
--- /dev/null
+++ b/src/styles/themes.scss
@@ -0,0 +1,55 @@
+/**
+ * 主题样式
+ */
+
+// 浅色主题（默认）
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f3f4f6;
+  --bg-tertiary: #e5e7eb;
+
+  --text-primary: #1f2937;
+  --text-secondary: #6b7280;
+  --text-tertiary: #9ca3af;
+
+  --border-color: #e5e7eb;
+  --border-hover: #d1d5db;
+
+  --primary-color: #3b82f6;
+  --primary-hover: #2563eb;
+  --primary-active: #1d4ed8;
+
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --error-color: #ef4444;
+  --info-color: #3b82f6;
+
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+// 深色主题
+[data-theme='dark'] {
+  --bg-primary: #1f2937;
+  --bg-secondary: #111827;
+  --bg-tertiary: #374151;
+
+  --text-primary: #f9fafb;
+  --text-secondary: #d1d5db;
+  --text-tertiary: #9ca3af;
+
+  --border-color: #374151;
+  --border-hover: #4b5563;
+
+  --primary-color: #3b82f6;
+  --primary-hover: #60a5fa;
+  --primary-active: #93c5fd;
+
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --error-color: #ef4444;
+  --info-color: #3b82f6;
+
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..3de6bbb
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,62 @@
+/**
+ * SCSS 变量定义
+ */
+
+// 颜色
+$primary-color: #3b82f6;
+$success-color: #10b981;
+$warning-color: #f59e0b;
+$error-color: #ef4444;
+$info-color: #3b82f6;
+
+// 灰阶
+$gray-50: #f9fafb;
+$gray-100: #f3f4f6;
+$gray-200: #e5e7eb;
+$gray-300: #d1d5db;
+$gray-400: #9ca3af;
+$gray-500: #6b7280;
+$gray-600: #4b5563;
+$gray-700: #374151;
+$gray-800: #1f2937;
+$gray-900: #111827;
+
+// 间距
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+$spacing-2xl: 48px;
+
+// 圆角
+$radius-sm: 4px;
+$radius-md: 8px;
+$radius-lg: 12px;
+$radius-full: 9999px;
+
+// 阴影
+$shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+$shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+$shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+
+// 过渡
+$transition-fast: 150ms ease;
+$transition-normal: 300ms ease;
+$transition-slow: 500ms ease;
+
+// 断点
+$breakpoint-mobile: 768px;
+$breakpoint-tablet: 1024px;
+$breakpoint-desktop: 1280px;
+
+// Z-index
+$z-dropdown: 1000;
+$z-modal: 2000;
+$z-notification: 3000;
+
+// 字体
+$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+  'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+
+$font-mono: 'Courier New', Courier, monospace;
diff --git a/src/types/api.ts b/src/types/api.ts
new file mode 100644
index 0000000..d5b3d50
--- /dev/null
+++ b/src/types/api.ts
@@ -0,0 +1,36 @@
+/**
+ * API 相关类型定义
+ * 基于原项目 src/core/api-client.js 和各模块 API
+ */
+
+// HTTP 方法
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
+
+// API 客户端配置
+export interface ApiClientConfig {
+  apiBase: string;
+  managementKey: string;
+  timeout?: number;
+}
+
+// 请求选项
+export interface RequestOptions {
+  method?: HttpMethod;
+  headers?: Record<string, string>;
+  params?: Record<string, any>;
+  data?: any;
+}
+
+// 服务器版本信息
+export interface ServerVersion {
+  version: string;
+  buildDate?: string;
+}
+
+// API 错误
+export type ApiError = Error & {
+  status?: number;
+  code?: string;
+  details?: any;
+  data?: any;
+};
diff --git a/src/types/auth.ts b/src/types/auth.ts
new file mode 100644
index 0000000..8ac68bb
--- /dev/null
+++ b/src/types/auth.ts
@@ -0,0 +1,28 @@
+/**
+ * 认证相关类型定义
+ * 基于原项目 src/modules/login.js 和 src/core/connection.js
+ */
+
+// 登录凭据
+export interface LoginCredentials {
+  apiBase: string;
+  managementKey: string;
+}
+
+// 认证状态
+export interface AuthState {
+  isAuthenticated: boolean;
+  apiBase: string;
+  managementKey: string;
+  serverVersion: string | null;
+  serverBuildDate: string | null;
+}
+
+// 连接状态
+export type ConnectionStatus = 'connected' | 'disconnected' | 'connecting' | 'error';
+
+export interface ConnectionInfo {
+  status: ConnectionStatus;
+  lastCheck: Date | null;
+  error: string | null;
+}
diff --git a/src/types/authFile.ts b/src/types/authFile.ts
new file mode 100644
index 0000000..86b71f4
--- /dev/null
+++ b/src/types/authFile.ts
@@ -0,0 +1,34 @@
+/**
+ * 认证文件相关类型
+ * 基于原项目 src/modules/auth-files.js
+ */
+
+export type AuthFileType =
+  | 'qwen'
+  | 'gemini'
+  | 'gemini-cli'
+  | 'aistudio'
+  | 'claude'
+  | 'codex'
+  | 'antigravity'
+  | 'iflow'
+  | 'vertex'
+  | 'empty'
+  | 'unknown';
+
+export interface AuthFileItem {
+  name: string;
+  type?: AuthFileType | string;
+  provider?: string;
+  size?: number;
+  authIndex?: string | number | null;
+  runtimeOnly?: boolean | string;
+  disabled?: boolean;
+  modified?: number;
+  [key: string]: any;
+}
+
+export interface AuthFilesResponse {
+  files: AuthFileItem[];
+  total?: number;
+}
diff --git a/src/types/common.ts b/src/types/common.ts
new file mode 100644
index 0000000..fa3e7a3
--- /dev/null
+++ b/src/types/common.ts
@@ -0,0 +1,39 @@
+/**
+ * 通用类型定义
+ */
+
+export type Theme = 'light' | 'dark';
+
+export type Language = 'zh-CN' | 'en';
+
+export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+
+export interface Notification {
+  id: string;
+  message: string;
+  type: NotificationType;
+  duration?: number;
+}
+
+export interface ApiResponse<T = any> {
+  data?: T;
+  error?: string;
+  message?: string;
+}
+
+export interface PaginationState {
+  currentPage: number;
+  pageSize: number;
+  totalPages: number;
+  totalItems?: number;
+}
+
+export interface LoadingState {
+  isLoading: boolean;
+  error: Error | null;
+}
+
+// 泛型异步状态
+export interface AsyncState<T> extends LoadingState {
+  data: T | null;
+}
diff --git a/src/types/config.ts b/src/types/config.ts
new file mode 100644
index 0000000..2da8973
--- /dev/null
+++ b/src/types/config.ts
@@ -0,0 +1,50 @@
+/**
+ * 配置相关类型定义
+ * 与基线 /config 返回结构保持一致（内部使用驼峰形式）
+ */
+
+import type { GeminiKeyConfig, ProviderKeyConfig, OpenAIProviderConfig } from './provider';
+
+export interface QuotaExceededConfig {
+  switchProject?: boolean;
+  switchPreviewModel?: boolean;
+}
+
+export interface Config {
+  debug?: boolean;
+  proxyUrl?: string;
+  requestRetry?: number;
+  quotaExceeded?: QuotaExceededConfig;
+  usageStatisticsEnabled?: boolean;
+  requestLog?: boolean;
+  loggingToFile?: boolean;
+  wsAuth?: boolean;
+  apiKeys?: string[];
+  geminiApiKeys?: GeminiKeyConfig[];
+  codexApiKeys?: ProviderKeyConfig[];
+  claudeApiKeys?: ProviderKeyConfig[];
+  openaiCompatibility?: OpenAIProviderConfig[];
+  oauthExcludedModels?: Record<string, string[]>;
+  raw?: Record<string, any>;
+}
+
+export type RawConfigSection =
+  | 'debug'
+  | 'proxy-url'
+  | 'request-retry'
+  | 'quota-exceeded'
+  | 'usage-statistics-enabled'
+  | 'request-log'
+  | 'logging-to-file'
+  | 'ws-auth'
+  | 'api-keys'
+  | 'gemini-api-key'
+  | 'codex-api-key'
+  | 'claude-api-key'
+  | 'openai-compatibility'
+  | 'oauth-excluded-models';
+
+export interface ConfigCache {
+  data: Config;
+  timestamp: number;
+}
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..7a37c39
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,13 @@
+/**
+ * 类型定义统一导出
+ */
+
+export * from './common';
+export * from './api';
+export * from './config';
+export * from './auth';
+export * from './provider';
+export * from './authFile';
+export * from './oauth';
+export * from './usage';
+export * from './log';
diff --git a/src/types/log.ts b/src/types/log.ts
new file mode 100644
index 0000000..bba56f8
--- /dev/null
+++ b/src/types/log.ts
@@ -0,0 +1,23 @@
+/**
+ * 日志相关类型
+ * 基于原项目 src/modules/logs.js
+ */
+
+// 日志级别
+export type LogLevel = 'info' | 'warn' | 'error' | 'debug';
+
+// 日志条目
+export interface LogEntry {
+  timestamp: string;
+  level: LogLevel;
+  message: string;
+  details?: any;
+}
+
+// 日志筛选
+export interface LogFilter {
+  level?: LogLevel;
+  searchQuery: string;
+  startTime?: Date;
+  endTime?: Date;
+}
diff --git a/src/types/oauth.ts b/src/types/oauth.ts
new file mode 100644
index 0000000..35892b2
--- /dev/null
+++ b/src/types/oauth.ts
@@ -0,0 +1,36 @@
+/**
+ * OAuth 相关类型
+ * 基于原项目 src/modules/oauth.js
+ */
+
+// OAuth 提供商类型
+export type OAuthProvider =
+  | 'codex'
+  | 'anthropic'
+  | 'antigravity'
+  | 'gemini-cli'
+  | 'qwen'
+  | 'iflow';
+
+// OAuth 流程状态
+export interface OAuthFlow {
+  provider: OAuthProvider;
+  deviceCode: string;
+  userCode: string;
+  verificationUrl: string;
+  expiresAt: Date;
+  interval: number;
+  status: 'pending' | 'authorized' | 'expired' | 'error';
+}
+
+// OAuth 配置
+export interface OAuthConfig {
+  clientId?: string;
+  clientSecret?: string;
+  redirectUri?: string;
+}
+
+// OAuth 排除模型列表
+export interface OAuthExcludedModels {
+  models: string[];
+}
diff --git a/src/types/provider.ts b/src/types/provider.ts
new file mode 100644
index 0000000..e35aeba
--- /dev/null
+++ b/src/types/provider.ts
@@ -0,0 +1,43 @@
+/**
+ * AI 提供商相关类型
+ * 基于原项目 src/modules/ai-providers.js
+ */
+
+export interface ModelAlias {
+  name: string;
+  alias?: string;
+  priority?: number;
+  testModel?: string;
+}
+
+export interface ApiKeyEntry {
+  apiKey: string;
+  proxyUrl?: string;
+  headers?: Record<string, string>;
+}
+
+export interface GeminiKeyConfig {
+  apiKey: string;
+  baseUrl?: string;
+  headers?: Record<string, string>;
+  excludedModels?: string[];
+}
+
+export interface ProviderKeyConfig {
+  apiKey: string;
+  baseUrl?: string;
+  proxyUrl?: string;
+  headers?: Record<string, string>;
+  models?: ModelAlias[];
+}
+
+export interface OpenAIProviderConfig {
+  name: string;
+  baseUrl: string;
+  apiKeyEntries: ApiKeyEntry[];
+  headers?: Record<string, string>;
+  models?: ModelAlias[];
+  priority?: number;
+  testModel?: string;
+  [key: string]: any;
+}
diff --git a/src/types/usage.ts b/src/types/usage.ts
new file mode 100644
index 0000000..1487d42
--- /dev/null
+++ b/src/types/usage.ts
@@ -0,0 +1,52 @@
+/**
+ * 使用统计相关类型
+ * 基于原项目 src/modules/usage.js
+ */
+
+// 时间段类型
+export type TimePeriod = 'hour' | 'day';
+
+// 数据点
+export interface DataPoint {
+  timestamp: string;
+  value: number;
+}
+
+// 模型使用统计
+export interface ModelUsage {
+  modelName: string;
+  requests: number;
+  inputTokens: number;
+  outputTokens: number;
+  totalTokens: number;
+  cost: number;
+}
+
+// 使用统计数据
+export interface UsageStats {
+  overview: {
+    totalRequests: number;
+    totalTokens: number;
+    totalCost: number;
+  };
+  requestsData: {
+    hour: DataPoint[];
+    day: DataPoint[];
+  };
+  tokensData: {
+    hour: DataPoint[];
+    day: DataPoint[];
+  };
+  costData: {
+    hour: DataPoint[];
+    day: DataPoint[];
+  };
+  modelStats: ModelUsage[];
+}
+
+// 模型价格
+export interface ModelPrice {
+  modelName: string;
+  inputPricePer1M: number;
+  outputPricePer1M: number;
+}
diff --git a/src/utils/array.js b/src/utils/array.js
deleted file mode 100644
index 80b8d8d..0000000
--- a/src/utils/array.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * 数组工具函数模块
- * 提供数组处理、规范化、排序等功能
- */
-
-/**
- * 规范化 API 响应中的数组数据
- * 兼容多种服务端返回格式
- *
- * @param {*} data - API 响应数据
- * @param {string} [key] - 数组字段的键名
- * @returns {Array} 规范化后的数组
- *
- * @example
- * // 直接返回数组
- * normalizeArrayResponse([1, 2, 3])
- * // 返回: [1, 2, 3]
- *
- * // 从对象中提取数组
- * normalizeArrayResponse({ 'api-keys': ['key1', 'key2'] }, 'api-keys')
- * // 返回: ['key1', 'key2']
- *
- * // 从 items 字段提取
- * normalizeArrayResponse({ items: ['a', 'b'] })
- * // 返回: ['a', 'b']
- */
-export function normalizeArrayResponse(data, key) {
-    // 如果本身就是数组，直接返回
-    if (Array.isArray(data)) {
-        return data;
-    }
-    // 如果指定了 key，尝试从对象中提取
-    if (key && data && Array.isArray(data[key])) {
-        return data[key];
-    }
-    // 尝试从 items 字段提取（通用分页格式）
-    if (data && Array.isArray(data.items)) {
-        return data.items;
-    }
-    // 默认返回空数组
-    return [];
-}
-
-/**
- * 数组去重
- * @param {Array} arr - 原数组
- * @param {Function} [keyFn] - 提取键的函数，用于对象数组去重
- * @returns {Array} 去重后的数组
- *
- * @example
- * uniqueArray([1, 2, 2, 3])
- * // 返回: [1, 2, 3]
- *
- * uniqueArray([{id: 1}, {id: 2}, {id: 1}], item => item.id)
- * // 返回: [{id: 1}, {id: 2}]
- */
-export function uniqueArray(arr, keyFn) {
-    if (!Array.isArray(arr)) return [];
-
-    if (keyFn) {
-        const seen = new Set();
-        return arr.filter(item => {
-            const key = keyFn(item);
-            if (seen.has(key)) return false;
-            seen.add(key);
-            return true;
-        });
-    }
-
-    return [...new Set(arr)];
-}
-
-/**
- * 数组分组
- * @param {Array} arr - 原数组
- * @param {Function} keyFn - 提取分组键的函数
- * @returns {Object} 分组后的对象
- *
- * @example
- * groupBy([{type: 'a', val: 1}, {type: 'b', val: 2}, {type: 'a', val: 3}], item => item.type)
- * // 返回: { a: [{type: 'a', val: 1}, {type: 'a', val: 3}], b: [{type: 'b', val: 2}] }
- */
-export function groupBy(arr, keyFn) {
-    if (!Array.isArray(arr)) return {};
-
-    return arr.reduce((groups, item) => {
-        const key = keyFn(item);
-        if (!groups[key]) {
-            groups[key] = [];
-        }
-        groups[key].push(item);
-        return groups;
-    }, {});
-}
-
-/**
- * 数组分块
- * @param {Array} arr - 原数组
- * @param {number} size - 每块大小
- * @returns {Array<Array>} 分块后的二维数组
- *
- * @example
- * chunk([1, 2, 3, 4, 5], 2)
- * // 返回: [[1, 2], [3, 4], [5]]
- */
-export function chunk(arr, size) {
-    if (!Array.isArray(arr) || size < 1) return [];
-
-    const result = [];
-    for (let i = 0; i < arr.length; i += size) {
-        result.push(arr.slice(i, i + size));
-    }
-    return result;
-}
-
-/**
- * 数组排序（不改变原数组）
- * @param {Array} arr - 原数组
- * @param {Function} compareFn - 比较函数
- * @returns {Array} 排序后的新数组
- */
-export function sortArray(arr, compareFn) {
-    if (!Array.isArray(arr)) return [];
-    return [...arr].sort(compareFn);
-}
-
-/**
- * 按字段排序对象数组
- * @param {Array} arr - 对象数组
- * @param {string} key - 排序字段
- * @param {string} order - 排序顺序 'asc' 或 'desc'
- * @returns {Array} 排序后的新数组
- *
- * @example
- * sortByKey([{age: 25}, {age: 20}, {age: 30}], 'age', 'asc')
- * // 返回: [{age: 20}, {age: 25}, {age: 30}]
- */
-export function sortByKey(arr, key, order = 'asc') {
-    if (!Array.isArray(arr)) return [];
-
-    return [...arr].sort((a, b) => {
-        const aVal = a[key];
-        const bVal = b[key];
-
-        if (aVal < bVal) return order === 'asc' ? -1 : 1;
-        if (aVal > bVal) return order === 'asc' ? 1 : -1;
-        return 0;
-    });
-}
-
-/**
- * 安全地获取数组元素
- * @param {Array} arr - 数组
- * @param {number} index - 索引
- * @param {*} defaultValue - 默认值
- * @returns {*} 数组元素或默认值
- */
-export function safeGet(arr, index, defaultValue = undefined) {
-    if (!Array.isArray(arr) || index < 0 || index >= arr.length) {
-        return defaultValue;
-    }
-    return arr[index];
-}
-
-/**
- * 检查数组是否为空
- * @param {*} arr - 待检查的值
- * @returns {boolean} 是否为空数组
- */
-export function isEmptyArray(arr) {
-    return !Array.isArray(arr) || arr.length === 0;
-}
diff --git a/src/utils/connection.ts b/src/utils/connection.ts
new file mode 100644
index 0000000..7086651
--- /dev/null
+++ b/src/utils/connection.ts
@@ -0,0 +1,34 @@
+import { DEFAULT_API_PORT, MANAGEMENT_API_PREFIX } from './constants';
+
+export const normalizeApiBase = (input: string): string => {
+  let base = (input || '').trim();
+  if (!base) return '';
+  base = base.replace(/\/?v0\/management\/?$/i, '');
+  base = base.replace(/\/+$/i, '');
+  if (!/^https?:\/\//i.test(base)) {
+    base = `http://${base}`;
+  }
+  return base;
+};
+
+export const computeApiUrl = (base: string): string => {
+  const normalized = normalizeApiBase(base);
+  if (!normalized) return '';
+  return `${normalized}${MANAGEMENT_API_PREFIX}`;
+};
+
+export const detectApiBaseFromLocation = (): string => {
+  try {
+    const { protocol, hostname, port } = window.location;
+    const normalizedPort = port ? `:${port}` : '';
+    return normalizeApiBase(`${protocol}//${hostname}${normalizedPort}`);
+  } catch (error) {
+    console.warn('Failed to detect api base from location, fallback to default', error);
+    return normalizeApiBase(`http://localhost:${DEFAULT_API_PORT}`);
+  }
+};
+
+export const isLocalhost = (hostname: string): boolean => {
+  const value = (hostname || '').toLowerCase();
+  return value === 'localhost' || value === '127.0.0.1' || value === '[::1]';
+};
diff --git a/src/utils/constants.js b/src/utils/constants.js
deleted file mode 100644
index a7d4f94..0000000
--- a/src/utils/constants.js
+++ /dev/null
@@ -1,282 +0,0 @@
-/**
- * 常量配置文件
- * 集中管理应用中的所有常量，避免魔法数字和硬编码字符串
- */
-
-// ============================================================
-// 时间相关常量（毫秒）
-// ============================================================
-
-/**
- * 配置缓存过期时间（30秒）
- * 用于减少服务器压力，避免频繁请求配置数据
- */
-export const CACHE_EXPIRY_MS = 30 * 1000;
-
-/**
- * 通知显示持续时间（3秒）
- * 成功/错误/信息提示框的自动消失时间
- */
-export const NOTIFICATION_DURATION_MS = 3 * 1000;
-
-/**
- * 状态更新定时器间隔（1秒）
- * 连接状态和系统信息的更新频率
- */
-export const STATUS_UPDATE_INTERVAL_MS = 1 * 1000;
-
-/**
- * 日志刷新延迟（500毫秒）
- * 日志自动刷新的去抖延迟
- */
-export const LOG_REFRESH_DELAY_MS = 500;
-
-/**
- * OAuth 状态轮询间隔（2秒）
- * 检查 OAuth 认证完成状态的轮询频率
- */
-export const OAUTH_POLL_INTERVAL_MS = 2 * 1000;
-
-/**
- * OAuth 最大轮询时间（5分钟）
- * 超过此时间后停止轮询，认为授权超时
- */
-export const OAUTH_MAX_POLL_DURATION_MS = 5 * 60 * 1000;
-
-// ============================================================
-// 数据限制常量
-// ============================================================
-
-/**
- * 最大日志显示行数
- * 限制内存占用，避免大量日志导致页面卡顿
- */
-export const MAX_LOG_LINES = 2000;
-
-/**
- * 日志接口获取数量上限
- * 限制后端返回的日志行数，避免一次拉取过多数据
- */
-export const LOG_FETCH_LIMIT = 2500;
-
-/**
- * 认证文件列表默认每页显示数量
- */
-export const DEFAULT_AUTH_FILES_PAGE_SIZE = 9;
-
-/**
- * 认证文件每页最小显示数量
- */
-export const MIN_AUTH_FILES_PAGE_SIZE = 3;
-
-/**
- * 认证文件每页最大显示数量
- */
-export const MAX_AUTH_FILES_PAGE_SIZE = 60;
-
-/**
- * 使用统计图表最大数据点数
- * 超过此数量将进行聚合，提高渲染性能
- */
-export const MAX_CHART_DATA_POINTS = 100;
-
-// ============================================================
-// 网络相关常量
-// ============================================================
-
-/**
- * 默认 API 服务器端口
- */
-export const DEFAULT_API_PORT = 8317;
-
-/**
- * 默认 API 基础路径
- */
-export const DEFAULT_API_BASE = `http://localhost:${DEFAULT_API_PORT}`;
-
-/**
- * 管理 API 路径前缀
- */
-export const MANAGEMENT_API_PREFIX = '/v0/management';
-
-/**
- * 请求超时时间（30秒）
- */
-export const REQUEST_TIMEOUT_MS = 30 * 1000;
-
-// ============================================================
-// OAuth 相关常量
-// ============================================================
-
-/**
- * OAuth 卡片元素 ID 列表
- * 用于根据主机环境隐藏/显示不同的 OAuth 选项
- */
-export const OAUTH_CARD_IDS = [
-    'codex-oauth-card',
-    'anthropic-oauth-card',
-    'antigravity-oauth-card',
-    'gemini-cli-oauth-card',
-    'qwen-oauth-card',
-    'iflow-oauth-card'
-];
-
-/**
- * OAuth 提供商名称映射
- */
-export const OAUTH_PROVIDERS = {
-    CODEX: 'codex',
-    ANTHROPIC: 'anthropic',
-    ANTIGRAVITY: 'antigravity',
-    GEMINI_CLI: 'gemini-cli',
-    QWEN: 'qwen',
-    IFLOW: 'iflow'
-};
-
-// ============================================================
-// 本地存储键名
-// ============================================================
-
-/**
- * 本地存储键名前缀
- */
-export const STORAGE_PREFIX = 'cliProxyApi_';
-
-/**
- * 存储 API 基础地址的键名
- */
-export const STORAGE_KEY_API_BASE = `${STORAGE_PREFIX}apiBase`;
-
-/**
- * 存储管理密钥的键名
- */
-export const STORAGE_KEY_MANAGEMENT_KEY = `${STORAGE_PREFIX}managementKey`;
-
-/**
- * 存储主题偏好的键名
- */
-export const STORAGE_KEY_THEME = `${STORAGE_PREFIX}theme`;
-
-/**
- * 存储语言偏好的键名
- */
-export const STORAGE_KEY_LANGUAGE = `${STORAGE_PREFIX}language`;
-
-/**
- * 存储认证文件页大小的键名
- */
-export const STORAGE_KEY_AUTH_FILES_PAGE_SIZE = `${STORAGE_PREFIX}authFilesPageSize`;
-
-// ============================================================
-// UI 相关常量
-// ============================================================
-
-/**
- * 主题选项
- */
-export const THEMES = {
-    LIGHT: 'light',
-    DARK: 'dark'
-};
-
-/**
- * 支持的语言
- */
-export const LANGUAGES = {
-    ZH_CN: 'zh-CN',
-    EN_US: 'en-US'
-};
-
-/**
- * 通知类型
- */
-export const NOTIFICATION_TYPES = {
-    SUCCESS: 'success',
-    ERROR: 'error',
-    INFO: 'info',
-    WARNING: 'warning'
-};
-
-/**
- * 模态框尺寸
- */
-export const MODAL_SIZES = {
-    SMALL: 'small',
-    MEDIUM: 'medium',
-    LARGE: 'large'
-};
-
-// ============================================================
-// 正则表达式常量
-// ============================================================
-
-/**
- * URL 验证正则
- */
-export const URL_PATTERN = /^https?:\/\/.+/;
-
-/**
- * Email 验证正则
- */
-export const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-/**
- * 端口号验证正则（1-65535）
- */
-export const PORT_PATTERN = /^([1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
-
-// ============================================================
-// 文件类型常量
-// ============================================================
-
-/**
- * 支持的认证文件类型
- */
-export const AUTH_FILE_TYPES = {
-    JSON: 'application/json',
-    YAML: 'application/x-yaml'
-};
-
-/**
- * 认证文件最大大小（10MB）
- */
-export const MAX_AUTH_FILE_SIZE = 10 * 1024 * 1024;
-
-// ============================================================
-// API 端点常量
-// ============================================================
-
-/**
- * 常用 API 端点路径
- */
-export const API_ENDPOINTS = {
-    CONFIG: '/config',
-    DEBUG: '/debug',
-    API_KEYS: '/api-keys',
-    PROVIDERS: '/providers',
-    AUTH_FILES: '/auth-files',
-    LOGS: '/logs',
-    USAGE_STATS: '/usage-stats',
-    CONNECTION: '/connection',
-    CODEX_API_KEY: '/codex-api-key',
-    ANTHROPIC_API_KEY: '/anthropic-api-key',
-    GEMINI_API_KEY: '/gemini-api-key',
-    OPENAI_API_KEY: '/openai-api-key'
-};
-
-// ============================================================
-// 错误消息常量
-// ============================================================
-
-/**
- * 通用错误消息
- */
-export const ERROR_MESSAGES = {
-    NETWORK_ERROR: '网络连接失败，请检查服务器状态',
-    TIMEOUT: '请求超时，请稍后重试',
-    UNAUTHORIZED: '未授权，请检查管理密钥',
-    NOT_FOUND: '资源不存在',
-    SERVER_ERROR: '服务器错误，请联系管理员',
-    INVALID_INPUT: '输入数据无效',
-    OPERATION_FAILED: '操作失败，请稍后重试'
-};
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
new file mode 100644
index 0000000..c744a48
--- /dev/null
+++ b/src/utils/constants.ts
@@ -0,0 +1,66 @@
+/**
+ * 常量定义
+ * 从原项目 src/utils/constants.js 迁移
+ */
+
+// 缓存过期时间（毫秒）
+export const CACHE_EXPIRY_MS = 30 * 1000; // 与基线保持一致，减少管理端压力
+
+// 网络与版本信息
+export const DEFAULT_API_PORT = 8317;
+export const MANAGEMENT_API_PREFIX = '/v0/management';
+export const REQUEST_TIMEOUT_MS = 30 * 1000;
+export const VERSION_HEADER_KEYS = ['x-cpa-version', 'x-server-version'];
+export const BUILD_DATE_HEADER_KEYS = ['x-cpa-build-date', 'x-server-build-date'];
+export const STATUS_UPDATE_INTERVAL_MS = 1000;
+export const LOG_REFRESH_DELAY_MS = 500;
+
+// 日志相关
+export const MAX_LOG_LINES = 2000;
+export const LOG_FETCH_LIMIT = 2500;
+
+// 认证文件分页
+export const DEFAULT_AUTH_FILES_PAGE_SIZE = 20;
+export const MIN_AUTH_FILES_PAGE_SIZE = 10;
+export const MAX_AUTH_FILES_PAGE_SIZE = 100;
+export const MAX_AUTH_FILE_SIZE = 10 * 1024 * 1024;
+
+// 本地存储键名
+export const STORAGE_KEY_AUTH = 'cli-proxy-auth';
+export const STORAGE_KEY_THEME = 'cli-proxy-theme';
+export const STORAGE_KEY_LANGUAGE = 'cli-proxy-language';
+export const STORAGE_KEY_SIDEBAR = 'cli-proxy-sidebar-collapsed';
+export const STORAGE_KEY_AUTH_FILES_PAGE_SIZE = 'cli-proxy-auth-files-page-size';
+
+// 通知持续时间
+export const NOTIFICATION_DURATION_MS = 3000;
+
+// OAuth 卡片 ID 列表
+export const OAUTH_CARD_IDS = [
+  'codex-oauth-card',
+  'anthropic-oauth-card',
+  'antigravity-oauth-card',
+  'gemini-cli-oauth-card',
+  'qwen-oauth-card',
+  'iflow-oauth-card'
+];
+export const OAUTH_PROVIDERS = {
+  CODEX: 'codex',
+  ANTHROPIC: 'anthropic',
+  ANTIGRAVITY: 'antigravity',
+  GEMINI_CLI: 'gemini-cli',
+  QWEN: 'qwen',
+  IFLOW: 'iflow'
+} as const;
+
+// API 端点
+export const API_ENDPOINTS = {
+  CONFIG: '/config',
+  LOGIN: '/login',
+  API_KEYS: '/api-keys',
+  PROVIDERS: '/providers',
+  AUTH_FILES: '/auth-files',
+  OAUTH: '/oauth',
+  USAGE: '/usage',
+  LOGS: '/logs'
+} as const;
diff --git a/src/utils/dom.js b/src/utils/dom.js
deleted file mode 100644
index 3fb22b5..0000000
--- a/src/utils/dom.js
+++ /dev/null
@@ -1,279 +0,0 @@
-/**
- * DOM 操作工具函数模块
- * 提供高性能的 DOM 操作方法
- */
-
-/**
- * 批量渲染列表项，使用 DocumentFragment 减少重绘
- * @param {HTMLElement} container - 容器元素
- * @param {Array} items - 数据项数组
- * @param {Function} renderItemFn - 渲染单个项目的函数，返回 HTML 字符串或 Element
- * @param {boolean} append - 是否追加模式（默认 false，清空后渲染）
- *
- * @example
- * renderList(container, files, (file) => `
- *     <div class="file-item">${file.name}</div>
- * `);
- */
-export function renderList(container, items, renderItemFn, append = false) {
-    if (!container) return;
-
-    const fragment = document.createDocumentFragment();
-
-    items.forEach((item, index) => {
-        const rendered = renderItemFn(item, index);
-
-        if (typeof rendered === 'string') {
-            // HTML 字符串，创建临时容器
-            const temp = document.createElement('div');
-            temp.innerHTML = rendered;
-            // 将所有子元素添加到 fragment
-            while (temp.firstChild) {
-                fragment.appendChild(temp.firstChild);
-            }
-        } else if (rendered instanceof HTMLElement) {
-            // DOM 元素，直接添加
-            fragment.appendChild(rendered);
-        }
-    });
-
-    if (!append) {
-        container.innerHTML = '';
-    }
-    container.appendChild(fragment);
-}
-
-/**
- * 创建 DOM 元素的快捷方法
- * @param {string} tag - 标签名
- * @param {Object} attrs - 属性对象
- * @param {string|Array<HTMLElement>} content - 内容（文本或子元素数组）
- * @returns {HTMLElement}
- *
- * @example
- * const div = createElement('div', { class: 'item', 'data-id': '123' }, 'Hello');
- * const ul = createElement('ul', {}, [
- *     createElement('li', {}, 'Item 1'),
- *     createElement('li', {}, 'Item 2')
- * ]);
- */
-export function createElement(tag, attrs = {}, content = null) {
-    const element = document.createElement(tag);
-
-    // 设置属性
-    Object.keys(attrs).forEach(key => {
-        if (key === 'class') {
-            element.className = attrs[key];
-        } else if (key === 'style' && typeof attrs[key] === 'object') {
-            Object.assign(element.style, attrs[key]);
-        } else if (key.startsWith('on') && typeof attrs[key] === 'function') {
-            const eventName = key.substring(2).toLowerCase();
-            element.addEventListener(eventName, attrs[key]);
-        } else {
-            element.setAttribute(key, attrs[key]);
-        }
-    });
-
-    // 设置内容
-    if (content !== null && content !== undefined) {
-        if (typeof content === 'string') {
-            element.textContent = content;
-        } else if (Array.isArray(content)) {
-            content.forEach(child => {
-                if (child instanceof HTMLElement) {
-                    element.appendChild(child);
-                }
-            });
-        } else if (content instanceof HTMLElement) {
-            element.appendChild(content);
-        }
-    }
-
-    return element;
-}
-
-/**
- * 批量更新元素属性，减少重绘
- * @param {HTMLElement} element - 目标元素
- * @param {Object} updates - 更新对象
- *
- * @example
- * batchUpdate(element, {
- *     className: 'active',
- *     style: { color: 'red', fontSize: '16px' },
- *     textContent: 'Updated'
- * });
- */
-export function batchUpdate(element, updates) {
-    if (!element) return;
-
-    // 使用 requestAnimationFrame 批量更新
-    requestAnimationFrame(() => {
-        Object.keys(updates).forEach(key => {
-            if (key === 'style' && typeof updates[key] === 'object') {
-                Object.assign(element.style, updates[key]);
-            } else {
-                element[key] = updates[key];
-            }
-        });
-    });
-}
-
-/**
- * 延迟渲染大列表，避免阻塞 UI
- * @param {HTMLElement} container - 容器元素
- * @param {Array} items - 数据项数组
- * @param {Function} renderItemFn - 渲染函数
- * @param {number} batchSize - 每批渲染数量
- * @returns {Promise} 完成渲染的 Promise
- *
- * @example
- * await renderListAsync(container, largeArray, renderItem, 50);
- */
-export function renderListAsync(container, items, renderItemFn, batchSize = 50) {
-    return new Promise((resolve) => {
-        if (!container || !items.length) {
-            resolve();
-            return;
-        }
-
-        container.innerHTML = '';
-        let index = 0;
-
-        function renderBatch() {
-            const fragment = document.createDocumentFragment();
-            const end = Math.min(index + batchSize, items.length);
-
-            for (let i = index; i < end; i++) {
-                const rendered = renderItemFn(items[i], i);
-                if (typeof rendered === 'string') {
-                    const temp = document.createElement('div');
-                    temp.innerHTML = rendered;
-                    while (temp.firstChild) {
-                        fragment.appendChild(temp.firstChild);
-                    }
-                } else if (rendered instanceof HTMLElement) {
-                    fragment.appendChild(rendered);
-                }
-            }
-
-            container.appendChild(fragment);
-            index = end;
-
-            if (index < items.length) {
-                requestAnimationFrame(renderBatch);
-            } else {
-                resolve();
-            }
-        }
-
-        requestAnimationFrame(renderBatch);
-    });
-}
-
-/**
- * 虚拟滚动渲染（仅渲染可见区域）
- * @param {Object} config - 配置对象
- * @param {HTMLElement} config.container - 容器元素
- * @param {Array} config.items - 数据项数组
- * @param {Function} config.renderItemFn - 渲染函数
- * @param {number} config.itemHeight - 每项高度（像素）
- * @param {number} [config.overscan=5] - 额外渲染的项数（上下各）
- * @returns {Object} 包含 update 和 destroy 方法的对象
- */
-export function createVirtualScroll({ container, items, renderItemFn, itemHeight, overscan = 5 }) {
-    if (!container) return { update: () => {}, destroy: () => {} };
-
-    const totalHeight = items.length * itemHeight;
-    const viewportHeight = container.clientHeight;
-
-    // 创建占位容器
-    const placeholder = document.createElement('div');
-    placeholder.style.height = `${totalHeight}px`;
-    placeholder.style.position = 'relative';
-
-    const content = document.createElement('div');
-    content.style.position = 'absolute';
-    content.style.top = '0';
-    content.style.width = '100%';
-
-    placeholder.appendChild(content);
-    container.innerHTML = '';
-    container.appendChild(placeholder);
-
-    function render() {
-        const scrollTop = container.scrollTop;
-        const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-        const endIndex = Math.min(
-            items.length,
-            Math.ceil((scrollTop + viewportHeight) / itemHeight) + overscan
-        );
-
-        const fragment = document.createDocumentFragment();
-
-        for (let i = startIndex; i < endIndex; i++) {
-            const element = renderItemFn(items[i], i);
-            if (typeof element === 'string') {
-                const temp = document.createElement('div');
-                temp.innerHTML = element;
-                while (temp.firstChild) {
-                    fragment.appendChild(temp.firstChild);
-                }
-            } else if (element instanceof HTMLElement) {
-                fragment.appendChild(element);
-            }
-        }
-
-        content.style.top = `${startIndex * itemHeight}px`;
-        content.innerHTML = '';
-        content.appendChild(fragment);
-    }
-
-    const handleScroll = () => requestAnimationFrame(render);
-    container.addEventListener('scroll', handleScroll);
-
-    // 初始渲染
-    render();
-
-    return {
-        update: (newItems) => {
-            items = newItems;
-            placeholder.style.height = `${newItems.length * itemHeight}px`;
-            render();
-        },
-        destroy: () => {
-            container.removeEventListener('scroll', handleScroll);
-        }
-    };
-}
-
-/**
- * 防抖包装器（用于搜索、输入等）
- * @param {Function} fn - 要防抖的函数
- * @param {number} delay - 延迟时间（毫秒）
- * @returns {Function} 防抖后的函数
- */
-export function debounce(fn, delay = 300) {
-    let timer;
-    return function (...args) {
-        clearTimeout(timer);
-        timer = setTimeout(() => fn.apply(this, args), delay);
-    };
-}
-
-/**
- * 节流包装器（用于滚动、resize 等）
- * @param {Function} fn - 要节流的函数
- * @param {number} limit - 限制时间（毫秒）
- * @returns {Function} 节流后的函数
- */
-export function throttle(fn, limit = 100) {
-    let inThrottle;
-    return function (...args) {
-        if (!inThrottle) {
-            fn.apply(this, args);
-            inThrottle = true;
-            setTimeout(() => inThrottle = false, limit);
-        }
-    };
-}
diff --git a/src/utils/encryption.ts b/src/utils/encryption.ts
new file mode 100644
index 0000000..a61054a
--- /dev/null
+++ b/src/utils/encryption.ts
@@ -0,0 +1,101 @@
+/**
+ * 加密工具函数
+ * 从原项目 src/utils/secure-storage.js 迁移
+ */
+
+const ENC_PREFIX = 'enc::v1::';
+const SECRET_SALT = 'cli-proxy-api-webui::secure-storage';
+
+let cachedKeyBytes: Uint8Array | null = null;
+
+function encodeText(text: string): Uint8Array {
+  const encoder = new TextEncoder();
+  return encoder.encode(text);
+}
+
+function decodeText(bytes: Uint8Array): string {
+  const decoder = new TextDecoder();
+  return decoder.decode(bytes);
+}
+
+function getKeyBytes(): Uint8Array {
+  if (cachedKeyBytes) return cachedKeyBytes;
+
+  try {
+    const host = window.location.host;
+    const ua = navigator.userAgent;
+    cachedKeyBytes = encodeText(`${SECRET_SALT}|${host}|${ua}`);
+  } catch (error) {
+    console.warn('Encryption fallback to simple key:', error);
+    cachedKeyBytes = encodeText(SECRET_SALT);
+  }
+
+  return cachedKeyBytes;
+}
+
+function xorBytes(data: Uint8Array, keyBytes: Uint8Array): Uint8Array {
+  const result = new Uint8Array(data.length);
+  for (let i = 0; i < data.length; i++) {
+    result[i] = data[i] ^ keyBytes[i % keyBytes.length];
+  }
+  return result;
+}
+
+function toBase64(bytes: Uint8Array): string {
+  let binary = '';
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
+function fromBase64(base64: string): Uint8Array {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
+/**
+ * 加密数据
+ */
+export function encryptData(value: string): string {
+  if (!value) return value;
+
+  try {
+    const keyBytes = getKeyBytes();
+    const encrypted = xorBytes(encodeText(value), keyBytes);
+    return `${ENC_PREFIX}${toBase64(encrypted)}`;
+  } catch (error) {
+    console.warn('Encryption failed, fallback to plaintext:', error);
+    return value;
+  }
+}
+
+/**
+ * 解密数据
+ */
+export function decryptData(payload: string): string {
+  if (!payload || !payload.startsWith(ENC_PREFIX)) {
+    return payload;
+  }
+
+  try {
+    const encodedBody = payload.slice(ENC_PREFIX.length);
+    const encrypted = fromBase64(encodedBody);
+    const decrypted = xorBytes(encrypted, getKeyBytes());
+    return decodeText(decrypted);
+  } catch (error) {
+    console.warn('Decryption failed, return as-is:', error);
+    return payload;
+  }
+}
+
+/**
+ * 检查是否已加密
+ */
+export function isEncrypted(value: string): boolean {
+  return value?.startsWith(ENC_PREFIX) || false;
+}
diff --git a/src/utils/format.ts b/src/utils/format.ts
new file mode 100644
index 0000000..153a31e
--- /dev/null
+++ b/src/utils/format.ts
@@ -0,0 +1,70 @@
+/**
+ * 格式化工具函数
+ * 从原项目 src/utils/string.js 迁移
+ */
+
+/**
+ * 隐藏 API Key 中间部分
+ */
+export function maskApiKey(key: string, visibleChars: number = 4): string {
+  if (!key || key.length <= visibleChars * 2) {
+    return key;
+  }
+
+  const start = key.slice(0, visibleChars);
+  const end = key.slice(-visibleChars);
+  const maskedLength = Math.min(key.length - visibleChars * 2, 20);
+  const masked = '*'.repeat(maskedLength);
+
+  return `${start}${masked}${end}`;
+}
+
+/**
+ * 格式化文件大小
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const k = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${units[i]}`;
+}
+
+/**
+ * 格式化日期时间
+ */
+export function formatDateTime(date: string | Date): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+
+  if (isNaN(d.getTime())) {
+    return 'Invalid Date';
+  }
+
+  return d.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+}
+
+/**
+ * 格式化数字（添加千位分隔符）
+ */
+export function formatNumber(num: number): string {
+  return num.toLocaleString('zh-CN');
+}
+
+/**
+ * 截断长文本
+ */
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return text.slice(0, maxLength) + '...';
+}
diff --git a/src/utils/headers.ts b/src/utils/headers.ts
new file mode 100644
index 0000000..b93f83c
--- /dev/null
+++ b/src/utils/headers.ts
@@ -0,0 +1,39 @@
+/**
+ * 自定义请求头处理工具
+ */
+
+export interface HeaderEntry {
+  key: string;
+  value: string;
+}
+
+export function buildHeaderObject(input?: HeaderEntry[] | Record<string, string | undefined | null>): Record<string, string> {
+  if (!input) return {};
+
+  if (Array.isArray(input)) {
+    return input.reduce<Record<string, string>>((acc, item) => {
+      const key = item?.key?.trim();
+      const value = item?.value?.trim();
+      if (key && value !== undefined && value !== null && value !== '') {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+  }
+
+  return Object.entries(input).reduce<Record<string, string>>((acc, [rawKey, rawValue]) => {
+    const key = rawKey?.trim();
+    const value = typeof rawValue === 'string' ? rawValue.trim() : rawValue;
+    if (key && value !== undefined && value !== null && value !== '') {
+      acc[key] = String(value);
+    }
+    return acc;
+  }, {});
+}
+
+export function headersToEntries(headers?: Record<string, string | undefined | null>): HeaderEntry[] {
+  if (!headers || typeof headers !== 'object') return [];
+  return Object.entries(headers)
+    .filter(([, value]) => value !== undefined && value !== null && value !== '')
+    .map(([key, value]) => ({ key, value: String(value) }));
+}
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
new file mode 100644
index 0000000..298e938
--- /dev/null
+++ b/src/utils/helpers.ts
@@ -0,0 +1,87 @@
+/**
+ * 辅助工具函数
+ * 从原项目 src/utils/array.js, dom.js, html.js 迁移
+ */
+
+/**
+ * 规范化数组响应（处理后端可能返回非数组的情况）
+ */
+export function normalizeArrayResponse<T>(data: T | T[] | null | undefined): T[] {
+  if (!data) return [];
+  if (Array.isArray(data)) return data;
+  return [data];
+}
+
+/**
+ * 防抖函数
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout>;
+
+  return function (this: any, ...args: Parameters<T>) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(this, args), delay);
+  };
+}
+
+/**
+ * 节流函数
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean;
+
+  return function (this: any, ...args: Parameters<T>) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+/**
+ * HTML 转义（防 XSS）
+ */
+export function escapeHtml(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * 生成唯一 ID
+ */
+export function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * 深拷贝对象
+ */
+export function deepClone<T>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') return obj;
+
+  if (obj instanceof Date) return new Date(obj.getTime()) as any;
+  if (obj instanceof Array) return obj.map((item) => deepClone(item)) as any;
+
+  const clonedObj = {} as T;
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      clonedObj[key] = deepClone((obj as any)[key]);
+    }
+  }
+  return clonedObj;
+}
+
+/**
+ * 延迟函数
+ */
+export function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/src/utils/html.js b/src/utils/html.js
deleted file mode 100644
index 13c08f1..0000000
--- a/src/utils/html.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * HTML 工具函数模块
- * 提供 HTML 字符串处理、XSS 防护等功能
- */
-
-/**
- * HTML 转义，防止 XSS 攻击
- * @param {*} value - 需要转义的值
- * @returns {string} 转义后的字符串
- *
- * @example
- * escapeHtml('<script>alert("xss")</script>')
- * // 返回: '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;'
- */
-export function escapeHtml(value) {
-    if (value === null || value === undefined) return '';
-    return String(value)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-
-/**
- * HTML 反转义
- * @param {string} html - 需要反转义的 HTML 字符串
- * @returns {string} 反转义后的字符串
- */
-export function unescapeHtml(html) {
-    if (!html) return '';
-    const textarea = document.createElement('textarea');
-    textarea.innerHTML = html;
-    return textarea.value;
-}
-
-/**
- * 去除 HTML 标签，只保留文本内容
- * @param {string} html - HTML 字符串
- * @returns {string} 纯文本内容
- *
- * @example
- * stripHtmlTags('<p>Hello <strong>World</strong></p>')
- * // 返回: 'Hello World'
- */
-export function stripHtmlTags(html) {
-    if (!html) return '';
-    const div = document.createElement('div');
-    div.innerHTML = html;
-    return div.textContent || div.innerText || '';
-}
-
-/**
- * 安全地设置元素的 HTML 内容
- * @param {HTMLElement} element - 目标元素
- * @param {string} html - HTML 内容
- * @param {boolean} escape - 是否转义（默认 true）
- */
-export function setSafeHtml(element, html, escape = true) {
-    if (!element) return;
-    element.innerHTML = escape ? escapeHtml(html) : html;
-}
diff --git a/src/utils/models.js b/src/utils/models.js
deleted file mode 100644
index ef4559b..0000000
--- a/src/utils/models.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 模型工具函数
- * 提供模型列表的规范化与去重能力
- */
-export function normalizeModelList(payload, { dedupe = false } = {}) {
-    const toModel = (entry) => {
-        if (typeof entry === 'string') {
-            return { name: entry };
-        }
-        if (!entry || typeof entry !== 'object') {
-            return null;
-        }
-        const name = entry.id || entry.name || entry.model || entry.value;
-        if (!name) return null;
-
-        const alias = entry.alias || entry.display_name || entry.displayName;
-        const description = entry.description || entry.note || entry.comment;
-        const model = { name: String(name) };
-        if (alias && alias !== name) {
-            model.alias = String(alias);
-        }
-        if (description) {
-            model.description = String(description);
-        }
-        return model;
-    };
-
-    let models = [];
-
-    if (Array.isArray(payload)) {
-        models = payload.map(toModel).filter(Boolean);
-    } else if (payload && typeof payload === 'object') {
-        if (Array.isArray(payload.data)) {
-            models = payload.data.map(toModel).filter(Boolean);
-        } else if (Array.isArray(payload.models)) {
-            models = payload.models.map(toModel).filter(Boolean);
-        }
-    }
-
-    if (!dedupe) {
-        return models;
-    }
-
-    const seen = new Set();
-    return models.filter(model => {
-        const key = (model?.name || '').toLowerCase();
-        if (!key || seen.has(key)) {
-            return false;
-        }
-        seen.add(key);
-        return true;
-    });
-}
-
-const MODEL_CATEGORIES = [
-    { id: 'gpt', label: 'GPT', patterns: [/gpt/i, /\bo\d\b/i, /\bo\d+\.?/i, /\bchatgpt/i] },
-    { id: 'claude', label: 'Claude', patterns: [/claude/i] },
-    { id: 'gemini', label: 'Gemini', patterns: [/gemini/i, /\bgai\b/i] },
-    { id: 'kimi', label: 'Kimi', patterns: [/kimi/i] },
-    { id: 'qwen', label: 'Qwen', patterns: [/qwen/i] },
-    { id: 'glm', label: 'GLM', patterns: [/glm/i, /chatglm/i] },
-    { id: 'grok', label: 'Grok', patterns: [/grok/i] },
-    { id: 'deepseek', label: 'DeepSeek', patterns: [/deepseek/i] }
-];
-
-function matchCategory(text) {
-    for (const category of MODEL_CATEGORIES) {
-        if (category.patterns.some(pattern => pattern.test(text))) {
-            return category.id;
-        }
-    }
-    return null;
-}
-
-export function classifyModels(models = [], { otherLabel = 'Other' } = {}) {
-    const groups = MODEL_CATEGORIES.map(category => ({
-        id: category.id,
-        label: category.label,
-        items: []
-    }));
-
-    const otherGroup = { id: 'other', label: otherLabel, items: [] };
-
-    models.forEach(model => {
-        const name = (model?.name || '').toString();
-        const alias = (model?.alias || '').toString();
-        const haystack = `${name} ${alias}`.toLowerCase();
-        const matchedId = matchCategory(haystack);
-        const target = matchedId ? groups.find(group => group.id === matchedId) : null;
-
-        if (target) {
-            target.items.push(model);
-        } else {
-            otherGroup.items.push(model);
-        }
-    });
-
-    const populatedGroups = groups.filter(group => group.items.length > 0);
-    if (otherGroup.items.length) {
-        populatedGroups.push(otherGroup);
-    }
-
-    return populatedGroups;
-}
diff --git a/src/utils/models.ts b/src/utils/models.ts
new file mode 100644
index 0000000..3046dd3
--- /dev/null
+++ b/src/utils/models.ts
@@ -0,0 +1,118 @@
+/**
+ * 模型工具函数
+ * 迁移自基线 utils/models.js
+ */
+
+export interface ModelInfo {
+  name: string;
+  alias?: string;
+  description?: string;
+}
+
+const MODEL_CATEGORIES = [
+  { id: 'gpt', label: 'GPT', patterns: [/gpt/i, /\bo\d\b/i, /\bo\d+\.?/i, /\bchatgpt/i] },
+  { id: 'claude', label: 'Claude', patterns: [/claude/i] },
+  { id: 'gemini', label: 'Gemini', patterns: [/gemini/i, /\bgai\b/i] },
+  { id: 'kimi', label: 'Kimi', patterns: [/kimi/i] },
+  { id: 'qwen', label: 'Qwen', patterns: [/qwen/i] },
+  { id: 'glm', label: 'GLM', patterns: [/glm/i, /chatglm/i] },
+  { id: 'grok', label: 'Grok', patterns: [/grok/i] },
+  { id: 'deepseek', label: 'DeepSeek', patterns: [/deepseek/i] }
+];
+
+const matchCategory = (text: string) => {
+  for (const category of MODEL_CATEGORIES) {
+    if (category.patterns.some((pattern) => pattern.test(text))) {
+      return category.id;
+    }
+  }
+  return null;
+};
+
+export function normalizeModelList(payload: any, { dedupe = false } = {}): ModelInfo[] {
+  const toModel = (entry: any): ModelInfo | null => {
+    if (typeof entry === 'string') {
+      return { name: entry };
+    }
+    if (!entry || typeof entry !== 'object') {
+      return null;
+    }
+    const name = entry.id || entry.name || entry.model || entry.value;
+    if (!name) return null;
+
+    const alias = entry.alias || entry.display_name || entry.displayName;
+    const description = entry.description || entry.note || entry.comment;
+    const model: ModelInfo = { name: String(name) };
+    if (alias && alias !== name) {
+      model.alias = String(alias);
+    }
+    if (description) {
+      model.description = String(description);
+    }
+    return model;
+  };
+
+  let models: (ModelInfo | null)[] = [];
+
+  if (Array.isArray(payload)) {
+    models = payload.map(toModel);
+  } else if (payload && typeof payload === 'object') {
+    if (Array.isArray(payload.data)) {
+      models = payload.data.map(toModel);
+    } else if (Array.isArray(payload.models)) {
+      models = payload.models.map(toModel);
+    }
+  }
+
+  const normalized = models.filter(Boolean) as ModelInfo[];
+  if (!dedupe) {
+    return normalized;
+  }
+
+  const seen = new Set<string>();
+  return normalized.filter((model) => {
+    const key = (model?.name || '').toLowerCase();
+    if (!key || seen.has(key)) {
+      return false;
+    }
+    seen.add(key);
+    return true;
+  });
+}
+
+export interface ModelGroup {
+  id: string;
+  label: string;
+  items: ModelInfo[];
+}
+
+export function classifyModels(models: ModelInfo[] = [], { otherLabel = 'Other' } = {}): ModelGroup[] {
+  const groups: ModelGroup[] = MODEL_CATEGORIES.map((category) => ({
+    id: category.id,
+    label: category.label,
+    items: []
+  }));
+
+  const otherGroup: ModelGroup = { id: 'other', label: otherLabel, items: [] };
+
+  models.forEach((model) => {
+    const name = (model?.name || '').toString();
+    const alias = (model?.alias || '').toString();
+    const haystack = `${name} ${alias}`.toLowerCase();
+    const matchedId = matchCategory(haystack);
+    const target = matchedId ? groups.find((group) => group.id === matchedId) : null;
+
+    if (target) {
+      target.items.push(model);
+    } else {
+      otherGroup.items.push(model);
+    }
+  });
+
+  const populatedGroups = groups.filter((group) => group.items.length > 0);
+  if (otherGroup.items.length) {
+    populatedGroups.push(otherGroup);
+  }
+
+  return populatedGroups;
+}
diff --git a/src/utils/secure-storage.js b/src/utils/secure-storage.js
deleted file mode 100644
index a7c7fcf..0000000
--- a/src/utils/secure-storage.js
+++ /dev/null
@@ -1,128 +0,0 @@
-// 简单的浏览器端加密存储封装
-// 仅用于避免本地缓存中明文暴露敏感值，无法替代服务端安全控制
-
-const ENC_PREFIX = 'enc::v1::';
-const SECRET_SALT = 'cli-proxy-api-webui::secure-storage';
-
-const encoder = typeof TextEncoder !== 'undefined' ? new TextEncoder() : null;
-const decoder = typeof TextDecoder !== 'undefined' ? new TextDecoder() : null;
-
-let cachedKeyBytes = null;
-
-function encodeText(text) {
-    if (encoder) return encoder.encode(text);
-    const result = new Uint8Array(text.length);
-    for (let i = 0; i < text.length; i++) {
-        result[i] = text.charCodeAt(i) & 0xff;
-    }
-    return result;
-}
-
-function decodeText(bytes) {
-    if (decoder) return decoder.decode(bytes);
-    let result = '';
-    for (let i = 0; i < bytes.length; i++) {
-        result += String.fromCharCode(bytes[i]);
-    }
-    return result;
-}
-
-function getKeyBytes() {
-    if (cachedKeyBytes) return cachedKeyBytes;
-    try {
-        const host = typeof window !== 'undefined' ? window.location.host : 'unknown-host';
-        const ua = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown-ua';
-        cachedKeyBytes = encodeText(`${SECRET_SALT}|${host}|${ua}`);
-    } catch (error) {
-        console.warn('Secure storage fallback to plain text:', error);
-        cachedKeyBytes = encodeText(SECRET_SALT);
-    }
-    return cachedKeyBytes;
-}
-
-function xorBytes(data, keyBytes) {
-    const result = new Uint8Array(data.length);
-    for (let i = 0; i < data.length; i++) {
-        result[i] = data[i] ^ keyBytes[i % keyBytes.length];
-    }
-    return result;
-}
-
-function toBase64(bytes) {
-    let binary = '';
-    for (let i = 0; i < bytes.length; i++) {
-        binary += String.fromCharCode(bytes[i]);
-    }
-    return btoa(binary);
-}
-
-function fromBase64(base64) {
-    const binary = atob(base64);
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) {
-        bytes[i] = binary.charCodeAt(i);
-    }
-    return bytes;
-}
-
-function encode(value) {
-    if (value === null || value === undefined) return value;
-    try {
-        const keyBytes = getKeyBytes();
-        const encrypted = xorBytes(encodeText(String(value)), keyBytes);
-        return `${ENC_PREFIX}${toBase64(encrypted)}`;
-    } catch (error) {
-        console.warn('Secure storage encode fallback:', error);
-        return String(value);
-    }
-}
-
-function decode(payload) {
-    if (payload === null || payload === undefined) return payload;
-    if (!payload.startsWith(ENC_PREFIX)) {
-        return payload;
-    }
-    try {
-        const encodedBody = payload.slice(ENC_PREFIX.length);
-        const encrypted = fromBase64(encodedBody);
-        const decrypted = xorBytes(encrypted, getKeyBytes());
-        return decodeText(decrypted);
-    } catch (error) {
-        console.warn('Secure storage decode fallback:', error);
-        return payload;
-    }
-}
-
-export const secureStorage = {
-    setItem(key, value, { encrypt = true } = {}) {
-        if (typeof localStorage === 'undefined') return;
-        if (value === null || value === undefined) {
-            localStorage.removeItem(key);
-            return;
-        }
-        const storedValue = encrypt ? encode(value) : String(value);
-        localStorage.setItem(key, storedValue);
-    },
-
-    getItem(key, { decrypt = true } = {}) {
-        if (typeof localStorage === 'undefined') return null;
-        const raw = localStorage.getItem(key);
-        if (raw === null) return null;
-        return decrypt ? decode(raw) : raw;
-    },
-
-    removeItem(key) {
-        if (typeof localStorage === 'undefined') return;
-        localStorage.removeItem(key);
-    },
-
-    migratePlaintextKeys(keys = []) {
-        if (typeof localStorage === 'undefined') return;
-        keys.forEach((key) => {
-            const raw = localStorage.getItem(key);
-            if (raw && !String(raw).startsWith(ENC_PREFIX)) {
-                this.setItem(key, raw, { encrypt: true });
-            }
-        });
-    }
-};
diff --git a/src/utils/string.js b/src/utils/string.js
deleted file mode 100644
index a0f5e4f..0000000
--- a/src/utils/string.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * 字符串工具函数模块
- * 提供字符串处理、格式化、掩码等功能
- */
-
-/**
- * 遮蔽 API 密钥显示，保护敏感信息
- * @param {*} key - API 密钥
- * @returns {string} 遮蔽后的密钥字符串
- *
- * @example
- * maskApiKey('sk-1234567890abcdef')
- * // 返回: 'sk-1...cdef'
- */
-export function maskApiKey(key) {
-    if (key === null || key === undefined) {
-        return '';
-    }
-    const normalizedKey = typeof key === 'string' ? key : String(key);
-    if (normalizedKey.length > 8) {
-        return normalizedKey.substring(0, 4) + '...' + normalizedKey.substring(normalizedKey.length - 4);
-    } else if (normalizedKey.length > 4) {
-        return normalizedKey.substring(0, 2) + '...' + normalizedKey.substring(normalizedKey.length - 2);
-    } else if (normalizedKey.length > 2) {
-        return normalizedKey.substring(0, 1) + '...' + normalizedKey.substring(normalizedKey.length - 1);
-    }
-    return normalizedKey;
-}
-
-/**
- * 截断字符串到指定长度，超出部分用省略号代替
- * @param {string} str - 原字符串
- * @param {number} maxLength - 最大长度
- * @param {string} suffix - 后缀（默认 '...'）
- * @returns {string} 截断后的字符串
- *
- * @example
- * truncateString('This is a very long string', 10)
- * // 返回: 'This is...'
- */
-export function truncateString(str, maxLength, suffix = '...') {
-    if (!str || str.length <= maxLength) return str || '';
-    return str.substring(0, maxLength - suffix.length) + suffix;
-}
-
-/**
- * 格式化文件大小
- * @param {number} bytes - 字节数
- * @param {number} decimals - 小数位数（默认 2）
- * @returns {string} 格式化后的大小字符串
- *
- * @example
- * formatFileSize(1536)
- * // 返回: '1.50 KB'
- */
-export function formatFileSize(bytes, decimals = 2) {
-    if (bytes === 0) return '0 Bytes';
-    if (!bytes || isNaN(bytes)) return '';
-
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-}
-
-/**
- * 首字母大写
- * @param {string} str - 原字符串
- * @returns {string} 首字母大写后的字符串
- */
-export function capitalize(str) {
-    if (!str) return '';
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-/**
- * 生成随机字符串
- * @param {number} length - 字符串长度
- * @param {string} charset - 字符集（默认字母数字）
- * @returns {string} 随机字符串
- */
-export function randomString(length = 8, charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789') {
-    let result = '';
-    for (let i = 0; i < length; i++) {
-        result += charset.charAt(Math.floor(Math.random() * charset.length));
-    }
-    return result;
-}
-
-/**
- * 检查字符串是否为空或仅包含空白字符
- * @param {string} str - 待检查的字符串
- * @returns {boolean} 是否为空
- */
-export function isBlank(str) {
-    return !str || /^\s*$/.test(str);
-}
-
-/**
- * 将字符串转换为 kebab-case
- * @param {string} str - 原字符串
- * @returns {string} kebab-case 字符串
- *
- * @example
- * toKebabCase('helloWorld')
- * // 返回: 'hello-world'
- */
-export function toKebabCase(str) {
-    if (!str) return '';
-    return str
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        .replace(/[\s_]+/g, '-')
-        .toLowerCase();
-}
diff --git a/src/utils/usage.ts b/src/utils/usage.ts
new file mode 100644
index 0000000..35aa1b5
--- /dev/null
+++ b/src/utils/usage.ts
@@ -0,0 +1,128 @@
+/**
+ * 使用统计相关工具
+ * 迁移自基线 modules/usage.js 的纯逻辑部分
+ */
+
+import { maskApiKey } from './format';
+
+export interface KeyStatBucket {
+  success: number;
+  failure: number;
+}
+
+export interface KeyStats {
+  bySource: Record<string, KeyStatBucket>;
+  byAuthIndex: Record<string, KeyStatBucket>;
+}
+
+const normalizeAuthIndex = (value: any) => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value.toString();
+  }
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    return trimmed ? trimmed : null;
+  }
+  return null;
+};
+
+/**
+ * 对使用数据中的敏感字段进行遮罩
+ */
+export function maskUsageSensitiveValue(value: unknown, masker: (val: string) => string = maskApiKey): string {
+  if (value === null || value === undefined) {
+    return '';
+  }
+  const raw = typeof value === 'string' ? value : String(value);
+  if (!raw) {
+    return '';
+  }
+
+  let masked = raw;
+
+  const queryRegex = /([?&])(api[-_]?key|key|token|access_token|authorization)=([^&#\s]+)/gi;
+  masked = masked.replace(queryRegex, (_full, prefix, keyName, valuePart) => `${prefix}${keyName}=${masker(valuePart)}`);
+
+  const headerRegex = /(api[-_]?key|key|token|access[-_]?token|authorization)\s*([:=])\s*([A-Za-z0-9._-]+)/gi;
+  masked = masked.replace(headerRegex, (_full, keyName, separator, valuePart) => `${keyName}${separator}${masker(valuePart)}`);
+
+  const keyLikeRegex = /(sk-[A-Za-z0-9]{6,}|AI[a-zA-Z0-9_-]{6,}|AIza[0-9A-Za-z-_]{8,}|hf_[A-Za-z0-9]{6,}|pk_[A-Za-z0-9]{6,}|rk_[A-Za-z0-9]{6,})/g;
+  masked = masked.replace(keyLikeRegex, (match) => masker(match));
+
+  if (masked === raw) {
+    const trimmed = raw.trim();
+    if (trimmed && !/\s/.test(trimmed)) {
+      const looksLikeKey =
+        /^sk-/i.test(trimmed) ||
+        /^AI/i.test(trimmed) ||
+        /^AIza/i.test(trimmed) ||
+        /^hf_/i.test(trimmed) ||
+        /^pk_/i.test(trimmed) ||
+        /^rk_/i.test(trimmed) ||
+        (!/[\\/]/.test(trimmed) && (/\d/.test(trimmed) || trimmed.length >= 10)) ||
+        trimmed.length >= 24;
+      if (looksLikeKey) {
+        return masker(trimmed);
+      }
+    }
+  }
+
+  return masked;
+}
+
+/**
+ * 依据 usage 数据计算密钥使用统计
+ */
+export function computeKeyStats(usageData: any, masker: (val: string) => string = maskApiKey): KeyStats {
+  if (!usageData) {
+    return { bySource: {}, byAuthIndex: {} };
+  }
+
+  const sourceStats: Record<string, KeyStatBucket> = {};
+  const authIndexStats: Record<string, KeyStatBucket> = {};
+
+  const ensureBucket = (bucket: Record<string, KeyStatBucket>, key: string) => {
+    if (!bucket[key]) {
+      bucket[key] = { success: 0, failure: 0 };
+    }
+    return bucket[key];
+  };
+
+  const apis = usageData.apis || {};
+  Object.values(apis as any).forEach((apiEntry: any) => {
+    const models = apiEntry?.models || {};
+
+    Object.values(models as any).forEach((modelEntry: any) => {
+      const details = modelEntry?.details || [];
+
+      details.forEach((detail: any) => {
+        const source = maskUsageSensitiveValue(detail?.source, masker);
+        const authIndexKey = normalizeAuthIndex(detail?.auth_index);
+        const isFailed = detail?.failed === true;
+
+        if (source) {
+          const bucket = ensureBucket(sourceStats, source);
+          if (isFailed) {
+            bucket.failure += 1;
+          } else {
+            bucket.success += 1;
+          }
+        }
+
+        if (authIndexKey) {
+          const bucket = ensureBucket(authIndexStats, authIndexKey);
+          if (isFailed) {
+            bucket.failure += 1;
+          } else {
+            bucket.success += 1;
+          }
+        }
+      });
+    });
+  });
+
+  return {
+    bySource: sourceStats,
+    byAuthIndex: authIndexStats
+  };
+}
diff --git a/src/utils/validation.ts b/src/utils/validation.ts
new file mode 100644
index 0000000..a92ad16
--- /dev/null
+++ b/src/utils/validation.ts
@@ -0,0 +1,56 @@
+/**
+ * 验证工具函数
+ */
+
+/**
+ * 验证 URL 格式
+ */
+export function isValidUrl(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * 验证 API Base URL
+ */
+export function isValidApiBase(apiBase: string): boolean {
+  if (!apiBase) return false;
+
+  // 允许 http/https 协议
+  const urlPattern = /^https?:\/\/.+/i;
+  return urlPattern.test(apiBase);
+}
+
+/**
+ * 验证 API Key 格式
+ */
+export function isValidApiKey(key: string): boolean {
+  if (!key || key.length < 8) return false;
+
+  // 基础验证：不包含空格
+  return !/\s/.test(key);
+}
+
+/**
+ * 验证 JSON 格式
+ */
+export function isValidJson(str: string): boolean {
+  try {
+    JSON.parse(str);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * 验证 Email 格式
+ */
+export function isValidEmail(email: string): boolean {
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailPattern.test(email);
+}
diff --git a/styles.css b/styles.css
deleted file mode 100644
index be633e2..0000000
--- a/styles.css
+++ /dev/null
@@ -1,5067 +0,0 @@
-/* 全局样式 */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-/* CSS变量主题系统 */
-:root {
-    /* 布局尺寸 */
-    --navbar-height: 69px;
-
-    /* 亮色主题（默认） */
-    --bg-primary: #f5f7fa;
-    --bg-secondary: #ffffff;
-    --bg-tertiary: #f8f9fb;
-    --bg-quaternary: #f7fafc;
-    --bg-modal: rgba(0, 0, 0, 0.5);
-
-    /* 侧边栏颜色 */
-    --sidebar-bg: #ffffff;
-    --sidebar-hover: #f0f2f5;
-    --sidebar-active: #e8f4ff;
-    --sidebar-border: #e5e7eb;
-
-    --text-primary: #1f2937;
-    --text-secondary: #4b5563;
-    --text-tertiary: #6b7280;
-    --text-quaternary: #9ca3af;
-    --text-inverse: white;
-
-    --border-primary: #e5e7eb;
-    --border-secondary: #d1d5db;
-    --border-focus: #3b82f6;
-
-    --accent-primary: #3b82f6;
-    --accent-secondary: #e5e7eb;
-    --accent-tertiary: #f3f4f6;
-    --primary-color: #3b82f6;
-    --primary-hover: #2563eb;
-    --card-bg: #ffffff;
-    --border-color: #e5e7eb;
-
-    --success-bg: #d1fae5;
-    --success-text: #065f46;
-    --success-border: #6ee7b7;
-
-    --error-bg: #fee2e2;
-    --error-text: #991b1b;
-    --error-border: #fca5a5;
-
-    --warning-bg: #fef3c7;
-    --warning-text: #92400e;
-    --warning-border: #fbbf24;
-
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-primary: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    --shadow-secondary: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-
-    --glass-bg: rgba(255, 255, 255, 0.95);
-    --glass-border: rgba(229, 231, 235, 0.8);
-}
-
-/* 暗色主题 */
-[data-theme="dark"] {
-    --bg-primary: #111827;
-    --bg-secondary: #1f2937;
-    --bg-tertiary: #1a202c;
-    --bg-quaternary: #2d3748;
-    --bg-modal: rgba(0, 0, 0, 0.7);
-
-    /* 侧边栏颜色 */
-    --sidebar-bg: #1f2937;
-    --sidebar-hover: #374151;
-    --sidebar-active: #1e3a5f;
-    --sidebar-border: #374151;
-
-    --text-primary: #f9fafb;
-    --text-secondary: #e5e7eb;
-    --text-tertiary: #d1d5db;
-    --text-quaternary: #9ca3af;
-    --text-inverse: #ffffff;
-
-    --border-primary: #374151;
-    --border-secondary: #4b5563;
-    --border-focus: #60a5fa;
-
-    --accent-primary: #3b82f6;
-    --accent-secondary: #374151;
-    --accent-tertiary: #1f2937;
-    --primary-color: #60a5fa;
-    --primary-hover: #3b82f6;
-    --card-bg: #1f2937;
-    --border-color: #374151;
-
-    --success-bg: #064e3b;
-    --success-text: #6ee7b7;
-    --success-border: #059669;
-
-    --error-bg: #7f1d1d;
-    --error-text: #fca5a5;
-    --error-border: #dc2626;
-
-    --warning-bg: #78350f;
-    --warning-text: #fbbf24;
-    --warning-border: #f59e0b;
-
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-    --shadow-primary: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
-    --shadow-secondary: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
-    --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
-
-    --glass-bg: rgba(31, 41, 59, 0.95);
-    --glass-border: rgba(75, 85, 99, 0.8);
-}
-
-/* 登录页面样式 */
-.login-container {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg-primary);
-    padding: 20px;
-}
-
-/* 自动登录加载页面样式 */
-.auto-login-content {
-    text-align: center;
-    padding: 20px;
-}
-
-.loading-spinner {
-    margin: 0 auto 20px;
-    width: 60px;
-    height: 60px;
-}
-
-.spinner {
-    width: 100%;
-    height: 100%;
-    border: 4px solid #e5e7eb;
-    border-top: 4px solid #3b82f6;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.auto-login-content h2 {
-    color: var(--text-secondary);
-    margin-bottom: 10px;
-    font-size: 24px;
-    font-weight: 600;
-}
-
-.auto-login-content p {
-    color: var(--text-tertiary);
-    font-size: 16px;
-    line-height: 1.5;
-}
-
-/* 登录页面头部布局 */
-.login-header-top {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 30px;
-    position: relative;
-}
-
-.login-title {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 30px;
-}
-
-/* 头部控制按钮组 */
-.header-controls {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    height: 100%;
-}
-
-/* 登录页面的控制按钮组样式 */
-.login-header-top .header-controls {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 12px;
-    padding: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
-    margin-top: 8px;
-    /* 与标题拉开距离，避免遮挡 */
-    margin-bottom: 20px;
-}
-
-.login-header-top .header-controls:hover {
-    background: rgba(255, 255, 255, 0.15);
-    border-color: rgba(255, 255, 255, 0.3);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
-    transform: translateY(-1px);
-}
-
-[data-theme="dark"] .login-header-top .header-controls {
-    background: rgba(30, 41, 59, 0.8);
-    border: 1px solid rgba(100, 116, 139, 0.3);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-}
-
-[data-theme="dark"] .login-header-top .header-controls:hover {
-    background: rgba(30, 41, 59, 0.9);
-    border-color: rgba(100, 116, 139, 0.5);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-}
-
-.language-switcher,
-.theme-switcher {
-    position: relative;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    height: 100%;
-}
-
-.language-btn,
-.theme-btn {
-    padding: 8px 14px;
-    font-size: 14px;
-    font-weight: 500;
-    border-radius: 6px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    color: var(--text-tertiary);
-    transition: all 0.3s ease;
-    white-space: nowrap;
-    backdrop-filter: blur(5px);
-    min-height: 36px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-}
-
-.top-navbar .language-btn,
-.top-navbar .theme-btn {
-    padding: 6px 12px;
-    min-height: 36px;
-}
-
-.top-navbar-actions .btn,
-.top-navbar .language-btn,
-.top-navbar .theme-btn {
-    display: inline-flex;
-    align-items: center;
-    height: 36px;
-    min-width: 36px;
-    justify-content: center;
-}
-
-/* 登录页面的按钮样式优化 */
-.login-header-top .language-btn,
-.login-header-top .theme-btn {
-    padding: 8px 12px;
-    font-size: 13px;
-    height: 36px;
-    min-width: 36px;
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.9);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    color: #64748b;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.login-header-top .language-btn:hover,
-.login-header-top .theme-btn:hover {
-    background: rgba(255, 255, 255, 1);
-    border-color: rgba(100, 116, 139, 0.3);
-    color: #475569;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-[data-theme="dark"] .login-header-top .language-btn,
-[data-theme="dark"] .login-header-top .theme-btn {
-    background: rgba(30, 41, 59, 0.9);
-    border: 1px solid rgba(100, 116, 139, 0.3);
-    color: #94a3b8;
-}
-
-[data-theme="dark"] .login-header-top .language-btn:hover,
-[data-theme="dark"] .login-header-top .theme-btn:hover {
-    background: rgba(51, 65, 85, 0.95);
-    border-color: rgba(100, 116, 139, 0.5);
-    color: #cbd5e1;
-}
-
-.language-btn:hover,
-.theme-btn:hover {
-    background: var(--accent-secondary);
-    border-color: var(--border-secondary);
-    color: var(--text-secondary);
-}
-
-.language-btn i,
-.theme-btn i {
-    margin-right: 6px;
-}
-
-.theme-btn.active {
-    background: var(--accent-primary);
-    color: var(--text-inverse);
-}
-
-.login-card {
-    background: var(--glass-bg);
-    backdrop-filter: blur(10px);
-    border-radius: 20px;
-    padding: 40px;
-    width: 100%;
-    max-width: 500px;
-    box-shadow: var(--shadow-secondary);
-    border: 1px solid var(--glass-border);
-}
-
-.login-header {
-    text-align: center;
-    margin-bottom: 25px;
-}
-
-.login-title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 15px;
-    color: var(--text-secondary);
-    font-size: 1.8rem;
-    font-weight: 600;
-    margin-bottom: 0;
-    line-height: 1.2;
-}
-
-#login-logo {
-    height: 60px;
-    width: auto;
-    object-fit: contain;
-    border-radius: 6px;
-    padding: 2px;
-    background: #fff;
-    border: 1px solid rgba(15, 23, 42, 0.06);
-    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
-}
-
-.login-subtitle {
-    color: #64748b;
-    font-size: 1rem;
-    margin: 0;
-    text-align: center;
-}
-
-.login-body {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
-
-.login-connection-info {
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    border-radius: 16px;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-[data-theme="dark"] .login-connection-info {
-    background: rgba(30, 41, 59, 0.7);
-    border-color: rgba(100, 116, 139, 0.3);
-}
-
-.connection-summary {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    color: var(--text-secondary);
-}
-
-.connection-summary i {
-    font-size: 24px;
-    color: var(--primary-color);
-}
-
-.connection-url {
-    font-size: 16px;
-    color: var(--text-secondary);
-}
-
-.connection-url-separator {
-    margin: 0 8px;
-    color: var(--text-tertiary);
-}
-
-#login-connection-url {
-    font-family: "Fira Code", "Consolas", "Courier New", monospace;
-    color: var(--text-primary);
-    word-break: break-all;
-}
-
-[data-theme="dark"] #login-connection-url {
-    color: var(--text-secondary);
-}
-
-.login-form {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-.login-form .form-group {
-    margin-bottom: 25px;
-}
-
-.login-form .form-group label {
-    display: block;
-    margin-bottom: 8px;
-    color: var(--text-secondary);
-    font-weight: 600;
-    font-size: 0.95rem;
-}
-
-.login-form .form-hint {
-    margin-top: 6px;
-    color: #64748b;
-    font-size: 12px;
-}
-
-.login-form .input-group {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-}
-
-.login-form input[type="text"],
-.login-form input[type="password"] {
-    flex: 1;
-    padding: 14px 16px;
-    border: 2px solid var(--border-primary);
-    border-radius: 10px;
-    font-size: 15px;
-    transition: all 0.3s ease;
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-}
-
-.login-form input:focus {
-    outline: none;
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 3px var(--border-primary);
-}
-
-.login-form .btn-secondary {
-    padding: 14px 16px;
-    border: 2px solid #e2e8f0;
-    background: #f8fafc;
-    color: #64748b;
-    border-radius: 10px;
-    transition: all 0.3s ease;
-}
-
-.login-form .btn-secondary:hover {
-    background: #e2e8f0;
-    border-color: #cbd5e0;
-}
-
-.form-actions {
-    margin-top: 30px;
-    text-align: center;
-}
-
-.login-btn {
-    width: 100%;
-    padding: 16px 24px;
-    font-size: 16px;
-    font-weight: 600;
-    border-radius: 12px;
-    background: linear-gradient(135deg, #475569, #334155);
-    color: white;
-    border: none;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-}
-
-.login-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(51, 65, 85, 0.4);
-}
-
-.login-btn:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-    transform: none;
-}
-
-.login-error {
-    background: var(--error-bg);
-    border: 1px solid var(--error-border);
-    color: var(--error-text);
-    padding: 12px 16px;
-    border-radius: 8px;
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    font-weight: 500;
-}
-
-.login-error i {
-    color: var(--error-text);
-}
-
-/* 响应式设计 - 登录页面 */
-@media (max-width: 640px) {
-    .login-card {
-        padding: 30px 20px;
-        margin: 10px;
-        max-width: 100%;
-    }
-
-    .login-header-top {
-        flex-direction: column;
-        gap: 20px;
-        align-items: center;
-        margin-bottom: 30px;
-    }
-
-    .header-controls {
-        flex-direction: row;
-        justify-content: center;
-        gap: 8px;
-        margin-bottom: 10px;
-        /* 在小屏幕上给控制按钮组添加下边距 */
-    }
-
-    /* 登录页面小屏幕优化 */
-    .login-header-top .header-controls {
-        margin: 8px auto 0 auto;
-        /* 顶部留白，避免与标题拥挤 */
-        background: rgba(255, 255, 255, 0.08);
-        padding: 6px;
-        border-radius: 10px;
-    }
-
-    .login-header-top .language-btn,
-    .login-header-top .theme-btn {
-        padding: 6px 10px;
-        font-size: 12px;
-        height: 32px;
-        min-width: 32px;
-    }
-
-    .language-btn,
-    .theme-btn {
-        padding: 8px 16px;
-        font-size: 13px;
-        height: 36px;
-        /* 在小屏幕上稍微减小高度 */
-    }
-
-    .login-title {
-        font-size: 1.5rem;
-        flex-direction: column;
-        gap: 10px;
-        text-align: center;
-        justify-content: center;
-        margin-bottom: 25px;
-    }
-
-    #login-logo {
-        height: 50px;
-    }
-
-    .login-form .input-group {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .login-form .btn-secondary {
-        width: 100%;
-        margin-top: 10px;
-    }
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
-    background: var(--bg-primary);
-    min-height: 100vh;
-    color: var(--text-primary);
-    transition: background-color 0.3s ease, color 0.3s ease;
-    overflow-x: hidden;
-}
-
-/* 侧边栏样式 */
-.layout {
-    display: grid;
-    grid-template-columns: 240px 1fr;
-    min-height: calc(100vh - var(--navbar-height, 69px));
-    width: 100%;
-    transition: grid-template-columns 0.3s ease;
-}
-
-.layout.sidebar-collapsed {
-    grid-template-columns: 64px 1fr;
-}
-
-.sidebar {
-    width: 240px;
-    background: var(--sidebar-bg);
-    border-right: 1px solid var(--sidebar-border);
-    height: calc(100vh - var(--navbar-height, 69px));
-    position: sticky;
-    top: var(--navbar-height, 69px);
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-    z-index: 5;
-    box-shadow: var(--shadow-sm);
-    transition: all 0.3s ease;
-}
-
-.sidebar.collapsed {
-    width: 64px;
-}
-
-.sidebar.collapsed .nav-item span {
-    opacity: 0;
-    width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.sidebar.collapsed .nav-item {
-    justify-content: center;
-    padding: 10px 0;
-}
-
-.sidebar.collapsed .nav-item i {
-    margin-right: 0;
-}
-
-/* 侧边栏切换按钮（桌面端-在顶栏） */
-.sidebar-toggle-btn-desktop {
-    display: none;
-    width: 40px;
-    height: 40px;
-    border: none;
-    background: transparent;
-    color: var(--text-primary);
-    border-radius: 8px;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    transition: all 0.2s ease;
-    padding: 0;
-}
-
-.sidebar-toggle-btn-desktop:hover {
-    background: var(--bg-tertiary);
-    color: var(--primary-color);
-}
-
-.sidebar-toggle-btn-desktop i {
-    transition: transform 0.3s ease;
-}
-
-.layout.sidebar-collapsed .sidebar-toggle-btn-desktop i {
-    transform: rotate(90deg);
-}
-
-/* 在大屏幕上显示桌面端切换按钮 */
-@media (min-width: 1025px) {
-    .sidebar-toggle-btn-desktop {
-        display: flex;
-    }
-}
-
-/* 侧边栏品牌区域 */
-.sidebar-brand {
-    padding: 24px 20px;
-    border-bottom: 1px solid var(--sidebar-border);
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    background: var(--sidebar-bg);
-}
-
-.sidebar-brand-logo {
-    width: 36px;
-    height: 36px;
-    object-fit: contain;
-    border-radius: 8px;
-}
-
-.sidebar-brand-text {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--text-primary);
-    line-height: 1.2;
-}
-
-/* 侧边栏导航菜单 */
-.sidebar .nav-menu {
-    flex: 1;
-    padding: 16px 12px;
-    list-style: none;
-}
-
-.sidebar .nav-menu li {
-    margin-bottom: 4px;
-    position: relative;
-}
-
-.sidebar .nav-item {
-    display: flex;
-    align-items: center;
-    padding: 10px 14px;
-    color: var(--text-secondary);
-    text-decoration: none;
-    border-radius: 8px;
-    transition: all 0.2s ease;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    position: relative;
-}
-
-.sidebar .nav-item:hover {
-    background: var(--sidebar-hover);
-    color: var(--text-primary);
-}
-
-.sidebar .nav-item.active {
-    background: var(--sidebar-active);
-    color: var(--primary-color);
-}
-
-.sidebar .nav-item i {
-    margin-right: 12px;
-    width: 18px;
-    font-size: 16px;
-    text-align: center;
-    transition: margin 0.3s ease;
-}
-
-/* 收起状态时的工具提示 */
-.sidebar.collapsed .nav-menu li:hover::after {
-    content: attr(data-tooltip);
-    position: absolute;
-    left: 68px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    padding: 8px 12px;
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    white-space: nowrap;
-    box-shadow: var(--shadow-md);
-    border: 1px solid var(--border-primary);
-    z-index: 1000;
-    pointer-events: none;
-    opacity: 0;
-    animation: tooltipFadeIn 0.2s ease forwards;
-}
-
-@keyframes tooltipFadeIn {
-    to {
-        opacity: 1;
-    }
-}
-
-/* 主内容区域包装器 */
-.main-wrapper {
-    display: flex;
-    flex-direction: column;
-    background: var(--bg-primary);
-    min-height: calc(100vh - var(--navbar-height, 69px));
-}
-
-/* 顶部导航栏 */
-.top-navbar {
-    background: var(--bg-secondary);
-    border-bottom: 1px solid var(--border-primary);
-    padding: 16px 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: sticky;
-    top: 0;
-    z-index: 200;
-    box-shadow: var(--shadow-sm);
-    height: var(--navbar-height, 69px);
-    min-height: var(--navbar-height, 69px);
-    box-sizing: border-box;
-}
-
-.top-navbar-left {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex: 1;
-}
-
-.top-navbar-brand {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    max-width: max-content;
-    flex-shrink: 0;
-}
-
-.top-navbar-brand-logo {
-    width: 32px;
-    height: 32px;
-    object-fit: contain;
-    border-radius: 8px;
-}
-
-.top-navbar-brand-text {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--text-primary);
-    overflow: visible;
-    text-overflow: initial;
-    white-space: nowrap;
-    line-height: 1;
-}
-
-.top-navbar-brand-toggle {
-    display: inline-flex;
-    align-items: center;
-    background: transparent;
-    border: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    font: inherit;
-    color: var(--text-primary);
-    height: 32px;
-}
-
-.top-navbar-brand-toggle:focus-visible {
-    outline: 2px solid var(--primary-color);
-    outline-offset: 4px;
-    border-radius: 8px;
-}
-
-.brand-texts {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    overflow: hidden;
-    white-space: nowrap;
-    transition: width 0.45s ease;
-}
-
-.brand-text {
-    display: block;
-    white-space: nowrap;
-    transition: opacity 0.35s ease;
-    line-height: 1.2;
-}
-
-.brand-text-short {
-    position: absolute;
-    left: 0;
-    top: 0;
-    opacity: 0;
-}
-
-.top-navbar-brand-toggle.expanded .brand-text-full {
-    opacity: 1;
-}
-
-.top-navbar-brand-toggle.expanded .brand-text-short {
-    opacity: 0;
-}
-
-.top-navbar-brand-toggle.collapsed .brand-text-full {
-    opacity: 0;
-    position: absolute;
-}
-
-.top-navbar-brand-toggle.collapsed .brand-text-short {
-    opacity: 1;
-    position: relative;
-}
-
-@media (max-width: 768px) {
-    .top-navbar-brand-toggle {
-        pointer-events: none;
-        cursor: default;
-    }
-
-    .brand-texts {
-        transition: none;
-    }
-
-    .top-navbar-brand-toggle .brand-text-full {
-        display: none;
-    }
-
-    .top-navbar-brand-toggle .brand-text-short {
-        position: relative;
-        opacity: 1;
-    }
-}
-
-.top-navbar-actions {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-left: auto;
-}
-
-.top-navbar-actions>* {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 36px;
-    min-width: 44px;
-}
-
-.top-navbar .header-controls {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    height: auto;
-}
-
-.top-navbar .language-btn,
-.top-navbar .theme-btn {
-    height: 36px;
-    min-height: 36px;
-    min-width: 44px;
-    padding: 0 12px;
-    justify-content: center;
-    line-height: 1;
-}
-
-.top-navbar-actions .btn {
-    height: 36px;
-    min-height: 36px;
-    min-width: 44px;
-    padding: 0 12px;
-    justify-content: center;
-    line-height: 1;
-}
-
-@media (max-width: 768px) {
-    .top-navbar {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 8px;
-        height: auto;
-        min-height: var(--navbar-height, 69px);
-    }
-
-    .top-navbar-left {
-        width: 100%;
-        justify-content: flex-start;
-    }
-
-    .top-navbar-actions {
-        width: 100%;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        gap: 8px;
-        margin-left: 0;
-        align-items: center;
-    }
-
-    .top-navbar .header-controls {
-        width: auto;
-        order: 0;
-        justify-content: flex-end;
-        gap: 8px;
-        height: auto;
-        align-items: center;
-    }
-
-    .top-navbar-actions>* {
-        height: 36px;
-        min-height: 36px;
-        min-width: 44px;
-        justify-content: center;
-    }
-
-    .top-navbar .language-btn,
-    .top-navbar .theme-btn {
-        height: 36px;
-        min-height: 36px;
-        min-width: 44px;
-        padding: 0 12px;
-        justify-content: center;
-        line-height: 1;
-    }
-
-    .top-navbar-actions .btn {
-        height: 36px;
-        min-height: 36px;
-        min-width: 44px;
-        padding: 0 12px;
-        justify-content: center;
-        line-height: 1;
-    }
-
-    .top-navbar .language-btn i,
-    .top-navbar .theme-btn i,
-    .top-navbar-actions .btn i {
-        margin: 0;
-    }
-}
-
-.top-navbar .language-btn i,
-.top-navbar .theme-btn i {
-    margin: 0;
-}
-
-.header-actions {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-}
-
-.header-actions .btn {
-    white-space: nowrap;
-}
-
-@media (max-width: 768px) {
-    .header-actions .btn span {
-        display: none;
-    }
-
-    .header-actions .btn {
-        padding: 6px 10px;
-    }
-}
-
-/* 连接信息样式 */
-.connection-info {
-    display: grid;
-    gap: 16px;
-}
-
-.info-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 14px 0;
-    border-bottom: 1px solid var(--border-primary);
-}
-
-.info-item:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
-}
-
-.info-label {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    color: var(--text-primary);
-    font-weight: 500;
-    font-size: 14px;
-}
-
-.info-label i {
-    color: var(--text-tertiary);
-    width: 18px;
-    font-size: 16px;
-}
-
-.info-value {
-    color: var(--text-secondary);
-    font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;
-    font-size: 13px;
-    background: var(--bg-tertiary);
-    padding: 6px 12px;
-    border-radius: 6px;
-    border: 1px solid var(--border-primary);
-    max-width: 350px;
-    word-break: break-all;
-}
-
-.status-indicator {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 14px;
-    border-radius: 16px;
-    font-size: 13px;
-    font-weight: 500;
-}
-
-.status-indicator.connected {
-    background: var(--success-bg);
-    color: var(--success-text);
-}
-
-.status-indicator.disconnected {
-    background: var(--error-bg);
-    color: var(--error-text);
-}
-
-.status-indicator.connecting {
-    background: var(--warning-bg);
-    color: var(--warning-text);
-}
-
-/* 响应式设计 - 连接信息 */
-@media (max-width: 768px) {
-    .info-item {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 8px;
-    }
-
-    .info-value {
-        max-width: 100%;
-        width: 100%;
-    }
-}
-
-/* 主内容区域 */
-.main-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 24px 32px;
-    max-width: 1400px;
-    width: 100%;
-    margin: 0 auto;
-}
-
-/* 内容区域 */
-.content-area {
-    flex: 1;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.content-section {
-    display: none;
-    animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.content-section.active {
-    display: block;
-}
-
-.content-section h2 {
-    color: var(--text-primary);
-    margin-bottom: 24px;
-    font-size: 24px;
-    font-weight: 600;
-}
-
-/* 卡片样式 */
-.card {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-primary);
-    border-radius: 12px;
-    margin-bottom: 20px;
-    box-shadow: var(--shadow-sm);
-    overflow: hidden;
-    transition: box-shadow 0.2s ease;
-}
-
-.card:hover {
-    box-shadow: var(--shadow-md);
-}
-
-.card-header {
-    background: var(--bg-secondary);
-    padding: 18px 24px;
-    border-bottom: 1px solid var(--border-primary);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.card-header h3 {
-    color: var(--text-primary);
-    font-size: 16px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-}
-
-.card-header h3 i {
-    color: var(--text-tertiary);
-    margin-right: 10px;
-    font-size: 18px;
-}
-
-.card-content {
-    padding: 24px;
-}
-
-/* 按钮样式 */
-.btn {
-    padding: 8px 16px;
-    border: 1px solid transparent;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 0.2s ease;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    text-decoration: none;
-    min-height: 36px;
-    white-space: nowrap;
-    outline: none;
-}
-
-.btn-primary {
-    background: var(--primary-color);
-    color: white;
-    border-color: var(--primary-color);
-}
-
-.btn-primary:hover {
-    background: var(--primary-hover);
-    border-color: var(--primary-hover);
-    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
-}
-
-.btn-secondary {
-    background: var(--bg-secondary);
-    color: var(--text-secondary);
-    border-color: var(--border-primary);
-}
-
-.btn-secondary:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--border-secondary);
-    color: var(--text-primary);
-}
-
-.btn-danger {
-    background: #ef4444;
-    color: white;
-    border-color: #ef4444;
-}
-
-.btn-danger:hover {
-    background: #dc2626;
-    border-color: #dc2626;
-    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
-}
-
-.btn-success {
-    background: #10b981;
-    color: white;
-    border-color: #10b981;
-}
-
-.btn-success:hover {
-    background: #059669;
-    border-color: #059669;
-    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
-}
-
-.btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none !important;
-}
-
-.btn i {
-    font-size: 14px;
-}
-
-/* 小按钮样式 - 与stat-badge高度一致 */
-.btn-small {
-    padding: 4px 12px;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 13px;
-    font-weight: 500;
-    transition: all 0.2s ease;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 5px;
-    min-height: 28px;
-    white-space: nowrap;
-}
-
-.btn-small.btn-primary {
-    background: var(--primary-color);
-    color: white;
-    border-color: var(--primary-color);
-}
-
-.btn-small.btn-primary:hover {
-    background: var(--primary-hover);
-    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
-    transform: translateY(-1px);
-}
-
-.btn-small.btn-danger {
-    background: #ef4444;
-    color: white;
-    border-color: #ef4444;
-}
-
-.btn-small.btn-danger:hover {
-    background: #dc2626;
-    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
-    transform: translateY(-1px);
-}
-
-.btn-small.btn-info {
-    background: #06b6d4;
-    color: white;
-    border-color: #06b6d4;
-}
-
-.btn-small.btn-info:hover {
-    background: #0891b2;
-    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
-    transform: translateY(-1px);
-}
-
-.btn-small.btn-warning {
-    background: #ff9800;
-    color: #fff;
-    border-color: #ff9800;
-    cursor: default;
-}
-
-.btn-small.btn-warning:disabled,
-.btn-small.btn-warning[disabled] {
-    background: #fb8c00;
-    border-color: #fb8c00;
-    color: #fff;
-    opacity: 1;
-}
-
-.btn-small i {
-    font-size: 13px;
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-    .btn-small {
-        padding: 3px 10px;
-        font-size: 12px;
-        min-height: 26px;
-    }
-    
-    .btn-small i {
-        font-size: 12px;
-    }
-}
-
-/* 表单元素 */
-.form-group {
-    margin-bottom: 18px;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 8px;
-    color: var(--text-primary);
-    font-weight: 500;
-    font-size: 14px;
-}
-
-.form-hint {
-    font-size: 13px;
-    color: var(--text-tertiary);
-    margin: 6px 0 0 0;
-    line-height: 1.5;
-}
-
-.input-group {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-}
-
-input[type="text"],
-input[type="password"],
-input[type="number"],
-input[type="url"],
-textarea,
-select {
-    flex: 1;
-    padding: 10px 14px;
-    border: 1px solid var(--border-primary);
-    border-radius: 6px;
-    font-size: 14px;
-    transition: all 0.2s ease;
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    font-family: inherit;
-}
-
-input:hover,
-textarea:hover,
-select:hover {
-    border-color: var(--border-secondary);
-}
-
-input:focus,
-textarea:focus,
-select:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-input::placeholder,
-textarea::placeholder {
-    color: var(--text-quaternary);
-}
-
-/* 切换开关 */
-.toggle-group {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-}
-
-.toggle-switch {
-    position: relative;
-    display: inline-block;
-    width: 44px;
-    height: 24px;
-}
-
-.toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-/* 配置管理编辑器 */
-.editor-actions {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.editor-actions .btn {
-    white-space: nowrap;
-}
-
-.yaml-editor-container {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    min-height: 520px;
-}
-
-#config-management .card {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 12px;
-}
-
-#config-management .card-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-#config-management .yaml-editor-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 520px;
-}
-
-.yaml-editor {
-    width: 100%;
-    border: 1px solid var(--border-primary);
-    border-radius: 6px;
-    padding: 12px 14px;
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    overflow-y: auto;
-    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
-    line-height: 1.5;
-    resize: vertical;
-}
-
-#config-management .yaml-editor {
-    height: 520px;
-}
-
-#config-management .CodeMirror {
-    height: 520px;
-    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
-    font-size: 14px;
-    line-height: 1.5;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-primary);
-    border-radius: 6px;
-    overflow: hidden;
-}
-
-#config-management .CodeMirror-scroll {
-    min-height: 0;
-    height: 100%;
-    max-height: 100%;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-}
-
-#config-management .CodeMirror.cm-s-default {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-}
-
-#config-management .CodeMirror-gutters {
-    background: var(--bg-secondary);
-    border-right: 1px solid var(--border-primary);
-}
-
-#config-management .CodeMirror-linenumber {
-    color: var(--text-tertiary);
-}
-
-#config-management .CodeMirror .CodeMirror-lines {
-    padding: 12px;
-}
-
-#config-management .CodeMirror .cm-comment {
-    color: #6b7280;
-}
-
-[data-theme="dark"] #config-management .CodeMirror.cm-s-default {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-}
-
-[data-theme="dark"] #config-management .CodeMirror-gutters {
-    background: var(--bg-secondary);
-    border-right: 1px solid var(--border-secondary);
-}
-
-[data-theme="dark"] #config-management .CodeMirror .cm-comment {
-    color: #9ca3af;
-}
-
-#config-management .CodeMirror.cm-readonly {
-    opacity: 0.6;
-}
-
-@media (max-width: 768px) {
-    .yaml-editor-container,
-    #config-management .yaml-editor-container {
-        min-height: 360px;
-    }
-
-    #config-management .yaml-editor,
-    #config-management .CodeMirror {
-        height: 360px;
-    }
-}
-
-.editor-status {
-    font-size: 13px;
-    color: var(--text-quaternary);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-height: 18px;
-}
-
-.editor-status.success {
-    color: #059669;
-}
-
-.editor-status.error {
-    color: #dc2626;
-}
-
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #d1d5db;
-    transition: .3s;
-    border-radius: 24px;
-}
-
-.slider:before {
-    position: absolute;
-    content: "";
-    height: 18px;
-    width: 18px;
-    left: 3px;
-    bottom: 3px;
-    background-color: white;
-    transition: .3s;
-    border-radius: 50%;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-input:checked+.slider {
-    background: var(--primary-color);
-}
-
-input:checked+.slider:before {
-    transform: translateX(20px);
-}
-
-.toggle-label {
-    color: var(--text-primary);
-    font-weight: 500;
-    font-size: 14px;
-}
-
-/* 列表样式 */
-.key-list {
-    /* 便于一次展示 6 条密钥记录（约 6*80px 高度） */
-    max-height: 520px;
-    overflow-y: auto;
-}
-
-
-/* API 密钥列表压缩布局 */
-.key-table {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.key-table-row {
-    display: grid;
-    grid-template-columns: 72px 1fr auto;
-    column-gap: 14px;
-    align-items: center;
-    background: var(--bg-quaternary);
-    border: 1px solid var(--border-primary);
-    border-radius: 10px;
-    padding: 10px 12px;
-    transition: all 0.2s ease;
-}
-
-.key-table-row:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--border-secondary);
-    transform: translateY(-1px);
-}
-
-.key-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 32px;
-    min-width: 52px;
-    padding: 0 12px;
-    border-radius: 10px;
-    background: var(--bg-secondary);
-    color: var(--primary-color);
-    font-weight: 700;
-    font-size: 14px;
-    border: 1px solid var(--border-primary);
-    letter-spacing: 0.2px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.key-table-value {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-width: 0;
-    padding: 2px 0;
-}
-
-.key-table .item-title {
-    margin: 0;
-    font-size: 13px;
-    color: var(--text-secondary);
-}
-
-.key-value {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-primary);
-    border-radius: 8px;
-    padding: 8px 12px;
-    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
-    font-size: 13px;
-    color: var(--text-primary);
-    font-weight: 600;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 1.4;
-}
-
-.item-actions.compact {
-    position: static;
-    transform: none;
-    gap: 6px;
-    justify-content: flex-end;
-    justify-self: end;
-}
-
-.item-actions.compact .btn {
-    min-width: 34px;
-    height: 34px;
-    padding: 0;
-    border-radius: 6px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.item-actions.compact .btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
-}
-
-.item-actions.compact .btn i {
-    font-size: 14px;
-}
-
-@media (max-width: 768px) {
-    .key-table-row {
-        grid-template-columns: 1fr;
-        row-gap: 8px;
-    }
-
-    .item-actions.compact {
-        justify-content: flex-start;
-    }
-
-    .key-badge {
-        width: fit-content;
-    }
-
-    .key-value {
-        white-space: normal;
-        word-break: break-all;
-    }
-}
-
-.file-list {
-    /* 认证文件列表填满页面，保留版本信息空间 */
-    max-height: calc(100vh - 300px); /* 减去导航栏、padding和版本信息的高度 */
-    overflow-y: auto;
-    margin-right: -12px; /* 向右扩展 */
-    padding-right: 12px; /* 滚动条不贴着最右侧卡片，保持左右边距一致 */
-}
-
-/* 认证文件Grid布局 */
-.file-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 15px;
-}
-
-.pagination-controls {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    margin-top: 20px;
-    flex-wrap: wrap;
-}
-
-.pagination-btn {
-    gap: 6px;
-    min-width: 120px;
-    justify-content: center;
-    display: inline-flex;
-    align-items: center;
-}
-
-.pagination-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.pagination-info {
-    font-size: 0.95rem;
-    color: var(--text-secondary);
-}
-
-/* 响应式：中等屏幕2列 */
-@media (max-width: 1400px) {
-    .file-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-/* 响应式：小屏幕单列 */
-@media (max-width: 768px) {
-    .file-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-/* 带筛选器的卡片头部布局 */
-.card-header-with-filter {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 15px;
-}
-
-.card-header-with-filter .header-left {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    flex: 1;
-    flex-wrap: wrap;
-}
-
-.card-header-with-filter .header-left h3 {
-    margin: 0;
-    white-space: nowrap;
-}
-
-.oauth-excluded-form {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 14px;
-    margin-top: 8px;
-}
-
-.oauth-excluded-actions {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    gap: 10px;
-    margin-top: 12px;
-}
-
-.oauth-excluded-scope {
-    color: var(--text-secondary);
-    font-weight: 600;
-    margin: 0;
-}
-
-.oauth-excluded-list {
-    margin-top: 12px;
-}
-
-.oauth-excluded-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 12px;
-    align-items: stretch;
-}
-
-.oauth-excluded-card {
-    height: 100%;
-}
-
-.oauth-excluded-card .provider-models {
-    margin-top: 6px;
-}
-
-.oauth-excluded-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.oauth-excluded-card .item-actions {
-    top: 14px;
-    right: 14px;
-    transform: none;
-}
-
-.oauth-excluded-editor-card .item-content {
-    padding-right: 0;
-}
-
-.oauth-excluded-editor-card textarea {
-    min-height: 140px;
-}
-
-.oauth-excluded-empty {
-    color: var(--text-tertiary);
-    font-size: 0.95rem;
-}
-
-/* 认证文件工具栏 */
-.auth-file-toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 18px;
-    align-items: flex-end;
-    margin-bottom: 18px;
-}
-
-.auth-file-search-group {
-    flex: 1;
-    min-width: 240px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.auth-file-search-group label,
-.auth-file-page-size label {
-    font-weight: 600;
-    color: var(--text-secondary);
-}
-
-.auth-file-search {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--border-primary);
-    border-radius: 10px;
-    padding: 0 12px;
-    background: var(--bg-secondary);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
-}
-
-[data-theme="dark"] .auth-file-search {
-    background: var(--bg-tertiary);
-    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04);
-}
-
-.auth-file-search i {
-    color: var(--text-tertiary);
-    margin-right: 8px;
-}
-
-.auth-file-search input {
-    border: none;
-    background: transparent;
-    color: var(--text-primary);
-    width: 100%;
-    padding: 10px 0;
-    font-size: 0.95rem;
-}
-
-.auth-file-search input:focus {
-    outline: none;
-}
-
-.auth-file-page-size {
-    min-width: 180px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.page-size-input {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    border: 1px solid var(--border-primary);
-    border-radius: 10px;
-    padding: 8px 12px;
-    background: var(--bg-quaternary);
-}
-
-.page-size-input input {
-    width: 80px;
-    padding: 6px 8px;
-    border: 1px solid var(--border-secondary);
-    border-radius: 6px;
-    background: var(--bg-primary);
-    color: var(--text-primary);
-}
-
-.page-size-input span {
-    font-size: 0.9rem;
-    color: var(--text-tertiary);
-}
-
-/* 认证文件筛选按钮 */
-.auth-file-filter {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-}
-
-.filter-btn {
-    padding: 6px 16px;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-quaternary);
-    color: var(--text-secondary);
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    transition: all 0.2s ease;
-}
-
-.filter-btn:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--border-secondary);
-}
-
-.filter-btn.active {
-    background: var(--primary-color);
-    color: white;
-    border-color: var(--primary-color);
-}
-
-/* 文件类型标签 */
-.file-type-badge {
-    display: inline-block;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    margin-right: 8px;
-}
-
-.file-type-badge.qwen {
-    background: #e8f5e9;
-    color: #2e7d32;
-}
-
-[data-theme="dark"] .file-type-badge.qwen {
-    background: #1b5e20;
-    color: #81c784;
-}
-
-.file-type-badge.gemini {
-    background: #e3f2fd;
-    color: #1565c0;
-}
-
-[data-theme="dark"] .file-type-badge.gemini {
-    background: #0d47a1;
-    color: #64b5f6;
-}
-
-.file-type-badge.gemini-cli {
-    background: #e7efff;
-    color: #1e4fa3;
-}
-
-[data-theme="dark"] .file-type-badge.gemini-cli {
-    background: #1c3f73;
-    color: #a8c7ff;
-}
-
-.file-type-badge.aistudio {
-    background: #f0f2f5;
-    color: #2f343c;
-}
-
-[data-theme="dark"] .file-type-badge.aistudio {
-    background: #373c42;
-    color: #cfd3db;
-}
-
-.file-type-badge.claude {
-    background: #fce4ec;
-    color: #c2185b;
-}
-
-[data-theme="dark"] .file-type-badge.claude {
-    background: #880e4f;
-    color: #f48fb1;
-}
-
-.file-type-badge.codex {
-    background: #fff3e0;
-    color: #ef6c00;
-}
-
-[data-theme="dark"] .file-type-badge.codex {
-    background: #e65100;
-    color: #ffb74d;
-}
-
-.file-type-badge.antigravity {
-    background: #e0f7fa;
-    color: #006064;
-}
-
-[data-theme="dark"] .file-type-badge.antigravity {
-    background: #004d40;
-    color: #80deea;
-}
-
-.file-type-badge.iflow {
-    background: #f3e5f5;
-    color: #7b1fa2;
-}
-
-[data-theme="dark"] .file-type-badge.iflow {
-    background: #4a148c;
-    color: #ce93d8;
-}
-
-.file-type-badge.empty {
-    background: #f5f5f5;
-    color: #616161;
-}
-
-[data-theme="dark"] .file-type-badge.empty {
-    background: #424242;
-    color: #bdbdbd;
-}
-
-/* 未知类型通用样式 */
-.file-type-badge:not(.qwen):not(.gemini):not(.gemini-cli):not(.aistudio):not(.claude):not(.codex):not(.antigravity):not(.iflow):not(.empty) {
-    background: #f0f0f0;
-    color: #666666;
-    border: 1px dashed #999999;
-}
-
-[data-theme="dark"] .file-type-badge:not(.qwen):not(.gemini):not(.gemini-cli):not(.aistudio):not(.claude):not(.codex):not(.antigravity):not(.iflow):not(.empty) {
-    background: #3a3a3a;
-    color: #aaaaaa;
-    border: 1px dashed #666666;
-}
-
-/* 虚拟认证文件标记样式 */
-.virtual-auth-badge {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
-    color: white;
-    font-size: 13px;
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-weight: 500;
-    text-align: center;
-    display: inline-block;
-    width: 100%;
-    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
-    letter-spacing: 0.3px;
-}
-
-[data-theme="dark"] .virtual-auth-badge {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
-    box-shadow: 0 2px 4px rgba(96, 165, 250, 0.25);
-}
-
-
-.provider-list {
-    /* 默认不限制高度，动态设置 */
-    min-height: 0;
-}
-
-.key-item,
-.provider-item,
-.file-item {
-    background: var(--bg-quaternary);
-    border: 1px solid var(--border-primary);
-    border-radius: 8px;
-    padding: 15px;
-    margin-bottom: 10px;
-    display: flex;
-    flex-direction: column;
-    transition: all 0.3s ease;
-    position: relative;
-}
-
-.file-item.hidden {
-    display: none;
-}
-
-.key-item:hover,
-.provider-item:hover,
-.file-item:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--border-secondary);
-    transform: translateY(-1px);
-}
-
-.item-content {
-    flex: 1;
-    width: 100%;
-}
-
-/* 为 API Keys 和 AI Providers 的项优化按钮位置 */
-.key-item .item-content,
-.provider-item .item-content {
-    padding-right: 120px; /* 为按钮预留空间，防止内容重叠 */
-    min-width: 0; /* 确保内容可以正常换行 */
-}
-
-.item-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 12px;
-    flex-wrap: wrap;
-    gap: 10px;
-    align-items: flex-start;
-}
-
-.item-stats {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
-.item-actions {
-    display: flex;
-    gap: 8px;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-/* 认证文件项的底部布局优化 - 确保状态标签和操作按钮垂直对齐 */
-.file-item .item-footer {
-    align-items: center; /* 垂直居中对齐 */
-    gap: 12px; /* 增加状态标签和按钮之间的间距 */
-}
-
-.file-item .item-stats {
-    align-items: center; /* 状态徽章垂直居中 */
-    margin: 0; /* 移除默认外边距 */
-}
-
-.file-item .item-actions {
-    align-items: center; /* 操作按钮垂直居中 */
-    gap: 6px; /* 按钮之间适当间距 */
-}
-
-/* API Keys 和 AI Providers 的按钮组 - 绝对定位到右侧垂直居中 */
-.key-item .item-actions,
-.provider-item .item-actions {
-    position: absolute;
-    top: 50%;
-    right: 15px;
-    transform: translateY(-50%);
-    gap: 8px;
-}
-
-/* 按钮样式优化 */
-.key-item .item-actions .btn,
-.provider-item .item-actions .btn {
-    min-width: 40px;
-    height: 40px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.key-item .item-actions .btn:hover,
-.provider-item .item-actions .btn:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-
-.key-item .item-actions .btn i,
-.provider-item .item-actions .btn i {
-    font-size: 16px;
-    margin: 0;
-}
-
-.item-title {
-    font-weight: 600;
-    color: var(--text-secondary);
-    margin-bottom: 6px;
-}
-
-.item-meta {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-    margin-bottom: 4px;
-}
-
-.item-subtitle {
-    color: var(--text-tertiary);
-    font-size: 0.9rem;
-}
-
-.provider-base-url {
-    word-break: break-all;
-    overflow-wrap: anywhere;
-    white-space: normal;
-    display: block;
-}
-
-.provider-item .provider-models {
-    margin-top: 8px;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.provider-model-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    background: var(--bg-quinary);
-    color: var(--text-secondary);
-    border: 1px solid var(--border-secondary);
-    border-radius: 14px;
-    padding: 4px 10px;
-    margin-right: 6px;
-    margin-top: 6px;
-    font-size: 0.85rem;
-}
-
-.provider-item .excluded-models .provider-model-tag {
-    background: var(--warning-bg);
-    border-color: var(--warning-border);
-    color: var(--warning-text);
-}
-
-.provider-model-tag .model-name {
-    font-weight: 600;
-}
-
-.provider-model-tag .model-alias {
-    color: var(--text-tertiary);
-    font-style: italic;
-}
-
-.available-models-status {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--text-secondary);
-    font-size: 0.95rem;
-    margin-bottom: 10px;
-}
-
-.available-models-status.success {
-    color: #10b981;
-}
-
-.available-models-status.warning {
-    color: #d97706;
-}
-
-.available-models-status.error {
-    color: #dc2626;
-}
-
-.available-models-list {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.available-models-empty {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--text-tertiary);
-    padding: 6px 0;
-}
-
-.available-models-placeholder {
-    color: var(--text-tertiary);
-}
-
-.available-model-group {
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: 10px 12px;
-}
-
-.available-model-group-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-}
-
-.available-model-group-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
-.available-model-group-label {
-    font-size: 0.95rem;
-    letter-spacing: 0.3px;
-}
-
-.available-model-group-count {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: 999px;
-    padding: 2px 8px;
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-}
-
-.available-model-group-body {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.item-value {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    background: var(--bg-tertiary);
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    word-break: break-all;
-}
-
-/* 状态信息 */
-.status-info {
-    background: var(--bg-quaternary);
-    border-radius: 8px;
-    padding: 20px;
-}
-
-.status-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 15px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid var(--border-primary);
-}
-
-.status-item:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    border-bottom: none;
-}
-
-.status-label {
-    font-weight: 600;
-    color: var(--text-secondary);
-}
-
-.status-value {
-    color: var(--text-tertiary);
-}
-
-.version-check {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.version-check-rows {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 12px;
-}
-
-.version-check-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 14px;
-    border-radius: 8px;
-    background: var(--bg-quaternary);
-    border: 1px solid var(--border-primary);
-}
-
-.version-check-value {
-    font-weight: 600;
-    color: var(--text-tertiary);
-}
-
-.version-check-actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-
-.version-check-result {
-    font-weight: 600;
-    color: var(--text-secondary);
-}
-
-.version-check-result.success {
-    color: #10b981;
-}
-
-.version-check-result.warning {
-    color: #f59e0b;
-}
-
-.version-check-result.error {
-    color: #ef4444;
-}
-
-.version-check-result.info {
-    color: var(--text-secondary);
-}
-
-.version-check-result.muted {
-    color: var(--text-quaternary);
-}
-
-/* JSON模态框 */
-.json-modal {
-    position: fixed;
-    z-index: 2000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--bg-modal);
-    backdrop-filter: blur(5px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-.json-modal-content {
-    background-color: var(--bg-secondary);
-    border-radius: 12px;
-    width: 90%;
-    max-width: 800px;
-    max-height: 90vh;
-    box-shadow: var(--shadow-modal);
-    display: flex;
-    flex-direction: column;
-    animation: slideUp 0.3s ease;
-}
-
-@keyframes slideUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.json-modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 24px;
-    border-bottom: 1px solid var(--border-primary);
-}
-
-.json-modal-header h3 {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: 1.1rem;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.json-modal-close {
-    background: none;
-    border: none;
-    color: var(--text-tertiary);
-    font-size: 24px;
-    cursor: pointer;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    transition: all 0.2s ease;
-}
-
-.json-modal-close:hover {
-    background: var(--bg-tertiary);
-    color: var(--text-secondary);
-}
-
-.json-modal-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 20px 24px;
-    min-height: 200px;
-    max-height: calc(90vh - 160px);
-}
-
-.json-content {
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    border-radius: 8px;
-    padding: 16px;
-    margin: 0;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
-    font-size: 13px;
-    line-height: 1.6;
-    color: var(--text-secondary);
-    overflow-x: auto;
-    white-space: pre;
-}
-
-.json-modal-footer {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 10px;
-    padding: 16px 24px;
-    border-top: 1px solid var(--border-primary);
-}
-
-@media (max-width: 768px) {
-    .json-modal-content {
-        width: 95%;
-        max-height: 95vh;
-    }
-
-    .json-modal-header,
-    .json-modal-body,
-    .json-modal-footer {
-        padding: 16px;
-    }
-
-    .json-content {
-        font-size: 12px;
-        padding: 12px;
-    }
-
-    .json-modal-footer {
-        flex-wrap: wrap;
-    }
-
-    .json-modal-footer .btn {
-        flex: 1;
-        min-width: 80px;
-    }
-}
-
-/* 模态框 */
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--bg-modal);
-    backdrop-filter: blur(5px);
-}
-
-.modal-content {
-    background-color: var(--bg-secondary);
-    margin: 4% auto;
-    padding: 0;
-    border-radius: 15px;
-    width: 90%;
-    max-width: 550px;
-    max-height: 90vh;
-    box-shadow: var(--shadow-modal);
-    animation: modalSlideIn 0.3s ease;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.model-actions-inline {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-    margin-top: 10px;
-}
-
-.model-discovery-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.4);
-    display: none;
-    align-items: center;
-    justify-content: center;
-    z-index: 1100;
-    padding: 18px;
-}
-
-.model-discovery-overlay.active {
-    display: flex;
-}
-
-.model-discovery-card {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    width: 95%;
-    max-width: 760px;
-    max-height: 90vh;
-    border-radius: 14px;
-    box-shadow: var(--shadow-modal);
-    padding: 18px;
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    overflow: hidden;
-}
-
-.model-discovery-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-}
-
-.model-discovery-header h3 {
-    margin: 0 0 6px 0;
-}
-
-.model-discovery-status {
-    min-height: 22px;
-    font-size: 0.95rem;
-    color: var(--text-secondary);
-}
-
-.model-discovery-status.error {
-    color: #dc2626;
-}
-
-.model-discovery-status.warning {
-    color: #d97706;
-}
-
-.openai-test-status {
-    min-height: 22px;
-    font-size: 0.95rem;
-    color: var(--text-secondary);
-}
-
-.openai-test-status.success {
-    color: #16a34a;
-}
-
-.openai-test-status.error {
-    color: #dc2626;
-}
-
-.openai-test-status.warning {
-    color: #d97706;
-}
-
-.openai-test-group select {
-    min-width: 200px;
-    padding: 10px 12px;
-    border: 1px solid var(--border-primary);
-    border-radius: 10px;
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-}
-
-.openai-test-group select:disabled {
-    opacity: 0.6;
-}
-
-.openai-test-btn-success {
-    background: #16a34a !important;
-    border-color: #16a34a !important;
-    color: #ffffff !important;
-}
-
-.openai-test-btn-error {
-    background: #dc2626 !important;
-    border-color: #dc2626 !important;
-    color: #ffffff !important;
-}
-
-.model-discovery-list {
-    background: var(--bg-primary);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: 8px;
-    overflow-y: auto;
-    max-height: 46vh;
-}
-
-.model-discovery-row {
-    display: flex;
-    gap: 12px;
-    padding: 10px;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: background 0.15s ease;
-}
-
-.model-discovery-row:hover {
-    background: rgba(59, 130, 246, 0.08);
-}
-
-.model-discovery-checkbox {
-    margin-top: 4px;
-}
-
-.model-discovery-meta {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.model-discovery-name {
-    font-weight: 700;
-    color: var(--text-primary);
-}
-
-.model-discovery-alias {
-    margin-left: 6px;
-    padding: 2px 8px;
-    border-radius: 999px;
-    background: #eef2ff;
-    color: #4338ca;
-    font-size: 0.85rem;
-    font-weight: 600;
-}
-
-.model-discovery-desc {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-}
-
-.model-discovery-empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 18px 12px;
-    color: var(--text-secondary);
-}
-
-[data-theme="dark"] .model-discovery-card {
-    background: var(--bg-secondary);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
-}
-
-[data-theme="dark"] .model-discovery-list {
-    background: var(--bg-secondary);
-    border-color: var(--border-color);
-}
-
-[data-theme="dark"] .model-discovery-row:hover {
-    background: rgba(96, 165, 250, 0.18);
-}
-
-[data-theme="dark"] .model-discovery-alias {
-    background: #312e81;
-    color: #c7d2fe;
-}
-
-@keyframes modalSlideIn {
-    from {
-        opacity: 0;
-        transform: translateY(-30px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.close {
-    color: var(--text-tertiary);
-    position: absolute;
-    top: 15px;
-    right: 20px;
-    font-size: 28px;
-    font-weight: bold;
-    cursor: pointer;
-    z-index: 1001;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    transition: all 0.3s ease;
-}
-
-.close:hover,
-.close:focus {
-    color: var(--text-secondary);
-    background-color: var(--bg-tertiary);
-}
-
-#modal-body {
-    padding: 35px 30px 30px 30px;
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-}
-
-/* 模态框标题样式 */
-#modal-body h3 {
-    color: var(--text-secondary);
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin: 0 0 20px 0;
-    text-align: center;
-    border-bottom: 2px solid var(--border-primary);
-    padding-bottom: 12px;
-}
-
-/* 模态框表单组 */
-#modal-body .form-group {
-    margin-bottom: 16px;
-}
-
-#modal-body .form-group label {
-    display: block;
-    margin-bottom: 6px;
-    color: var(--text-secondary);
-    font-weight: 600;
-    font-size: 14px;
-}
-
-#modal-body .form-group input,
-#modal-body .form-group textarea {
-    width: 100%;
-    padding: 12px 16px;
-    border: 2px solid var(--border-primary);
-    border-radius: 8px;
-    font-size: 14px;
-    transition: all 0.3s ease;
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-    font-family: inherit;
-}
-
-#modal-body .form-group input:focus,
-#modal-body .form-group textarea:focus {
-    outline: none;
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 3px var(--border-primary);
-}
-
-#modal-body .form-group textarea {
-    resize: vertical;
-    min-height: 80px;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 13px;
-}
-
-/* 模态框按钮组 */
-#modal-body .modal-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-    margin-top: 24px;
-    padding-top: 18px;
-    border-top: 1px solid var(--border-primary);
-}
-
-#modal-body .modal-actions .btn {
-    min-width: 80px;
-    padding: 10px 20px;
-}
-
-/* 通知 */
-.notification {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    padding: 15px 20px;
-    border-radius: 8px;
-    color: white;
-    font-weight: 500;
-    z-index: 1001;
-    transform: translateX(400px);
-    transition: all 0.3s ease;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-}
-
-.notification.show {
-    transform: translateX(0);
-}
-
-.notification.success {
-    background: linear-gradient(135deg, #68d391, #38a169);
-}
-
-.notification.error {
-    background: linear-gradient(135deg, #fc8181, #e53e3e);
-}
-
-.notification.info {
-    background: linear-gradient(135deg, #63b3ed, #3182ce);
-}
-
-/* 响应式设计 */
-@media (max-width: 1024px) {
-    .layout {
-        position: relative;
-        grid-template-columns: 1fr;
-        min-height: calc(100vh - var(--navbar-height, 69px));
-    }
-
-    .sidebar {
-        position: fixed;
-        left: 0;
-        top: var(--navbar-height, 69px);
-        height: calc(100vh - var(--navbar-height, 69px));
-        transform: translateX(-100%);
-        z-index: 150;
-        box-shadow: var(--shadow-sm);
-        background: var(--sidebar-bg);
-        width: 240px !important;
-    }
-
-    .sidebar.mobile-open {
-        transform: translateX(0);
-        box-shadow: var(--shadow-secondary);
-    }
-
-    /* 移动端强制恢复侧栏展开状态 */
-    .sidebar.collapsed {
-        width: 240px !important;
-    }
-
-    .sidebar.collapsed .nav-item span {
-        opacity: 1 !important;
-        width: auto !important;
-        overflow: visible !important;
-    }
-
-    .sidebar.collapsed .nav-item {
-        justify-content: flex-start !important;
-        padding: 10px 14px !important;
-    }
-
-    .sidebar.collapsed .nav-item i {
-        margin-right: 12px !important;
-    }
-
-    .main-wrapper {
-        margin-left: 0;
-        width: 100%;
-        min-height: calc(100vh - var(--navbar-height, 69px));
-        overflow: hidden;
-    }
-
-    .main-content {
-        padding: 20px 16px;
-    }
-}
-
-@media (max-width: 768px) {
-    .top-navbar {
-        padding: 12px 16px;
-        flex-direction: column;
-        align-items: stretch;
-        gap: 8px;
-        height: auto;
-        min-height: var(--navbar-height, 69px);
-    }
-
-    .top-navbar-title {
-        font-size: 18px;
-    }
-
-    .top-navbar-left {
-        width: 100%;
-        justify-content: flex-start;
-    }
-
-    .top-navbar-actions {
-        gap: 6px;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        width: 100%;
-        margin-left: 0;
-    }
-
-    .top-navbar-actions>* {
-        height: 36px;
-        min-height: 36px;
-        min-width: 44px;
-    }
-
-    .top-navbar .header-controls {
-        height: 36px;
-        gap: 8px;
-        width: auto;
-        order: 0;
-        justify-content: flex-end;
-    }
-
-    .top-navbar-actions .btn,
-    .top-navbar .language-btn,
-    .top-navbar .theme-btn {
-        height: 36px;
-        min-height: 36px;
-        min-width: 44px;
-        padding: 8px 12px;
-    }
-
-    .btn {
-        padding: 6px 12px;
-        font-size: 13px;
-    }
-
-    .card {
-        border-radius: 8px;
-    }
-
-    .card-header {
-        padding: 16px 20px;
-    }
-
-    .card-content {
-        padding: 20px;
-    }
-
-    .input-group {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .card-header {
-        flex-direction: column;
-        gap: 12px;
-        align-items: flex-start;
-    }
-
-    .card-header .header-actions {
-        width: 100%;
-        justify-content: flex-start;
-    }
-
-    /* 模态框响应式 */
-    .modal-content {
-        margin: 5% auto;
-        width: 95%;
-        max-width: none;
-    }
-
-    #modal-body {
-        padding: 40px 20px 20px 20px;
-    }
-
-    #modal-body h3 {
-        font-size: 18px;
-        margin-bottom: 16px;
-    }
-
-    #modal-body .modal-actions {
-        flex-direction: column-reverse;
-        gap: 10px;
-    }
-
-    #modal-body .modal-actions .btn {
-        width: 100%;
-        margin: 0;
-    }
-
-    .content-section h2 {
-        font-size: 20px;
-        margin-bottom: 20px;
-    }
-}
-
-/* 移动端侧边栏遮罩 */
-.sidebar-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 120;
-}
-
-.sidebar-overlay.active {
-    display: block;
-}
-
-/* 移动端菜单按钮 */
-.mobile-menu-btn {
-    display: none;
-    width: 40px;
-    height: 40px;
-    background: transparent;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    color: var(--text-primary);
-    font-size: 20px;
-    border-radius: 8px;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease;
-}
-
-.mobile-menu-btn:hover {
-    background: var(--bg-tertiary);
-    color: var(--primary-color);
-}
-
-@media (max-width: 1024px) {
-    .mobile-menu-btn {
-        display: flex;
-    }
-}
-
-/* 加载动画 */
-.loading {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    border-top-color: #fff;
-    animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* 空状态 */
-.empty-state {
-    text-align: center;
-    padding: 40px 20px;
-    color: var(--text-tertiary);
-}
-
-.empty-state i {
-    font-size: 48px;
-    margin-bottom: 16px;
-    color: var(--border-secondary);
-}
-
-.empty-state h3 {
-    margin-bottom: 8px;
-    color: var(--text-secondary);
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--bg-tertiary);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--border-secondary);
-    border-radius: 4px;
-    transition: background 0.2s ease;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--text-quaternary);
-}
-
-/* 侧边栏滚动条 */
-.sidebar::-webkit-scrollbar {
-    width: 6px;
-}
-
-.sidebar::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.sidebar::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
-}
-
-.sidebar::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.2);
-}
-
-[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-
-/* 连接状态指示器 */
-.connection-indicator {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    margin-right: 8px;
-}
-
-.connection-indicator.connected {
-    background-color: #68d391;
-    box-shadow: 0 0 8px rgba(104, 211, 145, 0.6);
-}
-
-.connection-indicator.disconnected {
-    background-color: #fc8181;
-    box-shadow: 0 0 8px rgba(252, 129, 129, 0.6);
-}
-
-.connection-indicator.connecting {
-    background-color: #fbb040;
-    animation: pulse 1.5s infinite;
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.5;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-
-/* 使用统计样式 */
-.stats-overview {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 20px;
-    margin-bottom: 30px;
-}
-
-@media (max-width: 1200px) {
-    .stats-overview {
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    }
-}
-
-@media (max-width: 768px) {
-    .stats-overview {
-        grid-template-columns: 1fr;
-    }
-}
-
-.usage-filter-bar {
-    display: flex;
-    justify-content: flex-start;
-    gap: 16px;
-    flex-wrap: wrap;
-    margin-bottom: 20px;
-}
-
-.usage-filter-group {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    min-width: 220px;
-}
-
-.usage-filter-actions {
-    min-width: 260px;
-    flex: 1 0 100%;
-    order: 0;
-}
-
-.chart-line-group {
-    flex: 1 1 260px;
-    order: 1;
-}
-
-.usage-filter-group label {
-    font-weight: 600;
-    color: var(--text-secondary);
-    font-size: 14px;
-}
-
-.chart-line-actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.chart-line-count {
-    padding: 6px 10px;
-    border-radius: 20px;
-    background: var(--bg-tertiary);
-    color: var(--text-secondary);
-    font-size: 13px;
-    border: 1px solid var(--border-color);
-}
-
-.chart-line-hint {
-    color: var(--text-secondary);
-    font-size: 13px;
-}
-
-.chart-line-control {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.chart-line-control .model-filter-select {
-    flex: 1;
-}
-
-.chart-line-delete {
-    white-space: nowrap;
-}
-
-.chart-line-group.chart-line-hidden {
-    display: none;
-}
-
-.model-filter-select {
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: 10px 14px;
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    min-height: 40px;
-    font-size: 14px;
-}
-
-.model-filter-select:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-}
-
-.stat-card {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    padding: 18px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    min-height: 220px;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.stat-card:hover {
-    border-color: var(--border-primary);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    transform: translateY(-2px);
-}
-
-.stat-card-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
-    min-height: 110px;
-}
-
-.stat-meta {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    flex: 1;
-}
-
-.stat-icon {
-    width: 44px;
-    height: 44px;
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--primary-color);
-    color: white;
-    font-size: 18px;
-    flex-shrink: 0;
-}
-
-.stat-icon.success {
-    background: #10b981;
-}
-
-.stat-icon.error {
-    background: #ef4444;
-}
-
-.stat-number {
-    font-size: 30px;
-    font-weight: 700;
-    color: var(--text-primary);
-    line-height: 1.1;
-}
-
-.stat-label {
-    font-size: 13px;
-    letter-spacing: 0.2px;
-    color: var(--text-secondary);
-    text-transform: uppercase;
-    font-weight: 600;
-}
-
-.stat-subtext {
-    font-size: 12px;
-    color: var(--text-tertiary);
-    line-height: 1.5;
-}
-
-.stat-subtext-inline {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.dot-divider {
-    color: var(--text-tertiary);
-    font-weight: 700;
-}
-
-.stat-sparkline {
-    height: 90px;
-    margin-top: auto;
-}
-
-.stat-sparkline canvas {
-    width: 100% !important;
-    height: 100% !important;
-}
-
-.cost-summary-card .stat-icon {
-    background: #f59e0b;
-}
-
-.charts-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px;
-    margin-bottom: 30px;
-}
-
-@media (max-width: 1200px) {
-    .charts-container {
-        grid-template-columns: 1fr;
-    }
-}
-
-.chart-card {
-    min-height: 400px;
-}
-
-.chart-container {
-    position: relative;
-    height: 300px;
-    width: 100%;
-}
-
-.chart-controls {
-    display: flex;
-    gap: 8px;
-}
-
-.btn.btn-small {
-    padding: 6px 12px;
-    font-size: 12px;
-    border-radius: 6px;
-    border: 1px solid var(--border-color);
-    background: var(--card-bg);
-    color: var(--text-secondary);
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.btn.btn-small:hover {
-    border-color: var(--border-primary);
-    color: var(--text-primary);
-}
-
-.btn.btn-small.active {
-    background: var(--primary-color);
-    border-color: var(--primary-color);
-    color: white;
-}
-
-.api-stats-table {
-    overflow-x: auto;
-}
-
-.stats-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 16px;
-}
-
-.stats-table th,
-.stats-table td {
-    padding: 12px 16px;
-    text-align: left;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.stats-table th {
-    background: var(--bg-secondary);
-    font-weight: 600;
-    color: var(--text-primary);
-    font-size: 14px;
-}
-
-.stats-table td {
-    color: var(--text-secondary);
-    font-size: 14px;
-}
-
-.stats-table tr:hover {
-    background: var(--bg-secondary);
-}
-
-.model-details {
-    margin-top: 8px;
-    padding: 8px 12px;
-    background: var(--bg-tertiary);
-    border-radius: 6px;
-    font-size: 12px;
-}
-
-.cost-config-card .card-content {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.model-price-form {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.price-input-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-}
-
-@media (max-width: 768px) {
-    .price-input-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-.price-form-actions {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.model-price-list {
-    margin-top: 6px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.model-price-item {
-    cursor: pointer;
-}
-
-.model-price-item .item-meta {
-    margin-bottom: 0;
-    gap: 10px;
-}
-
-.chart-placeholder {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    color: var(--text-tertiary);
-    background: var(--bg-primary);
-    border: 1px dashed var(--border-color);
-    border-radius: 12px;
-}
-
-.cost-chart-card {
-    grid-column: 1 / -1;
-}
-
-.model-item {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 4px;
-    color: var(--text-tertiary);
-}
-
-.model-name {
-    font-weight: 500;
-    color: var(--text-secondary);
-}
-
-.loading-placeholder {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100px;
-    color: var(--text-tertiary);
-    font-size: 14px;
-}
-
-.no-data-message {
-    text-align: center;
-    color: var(--text-tertiary);
-    font-style: italic;
-    padding: 40px;
-}
-
-/* 暗色主题适配 */
-[data-theme="dark"] .stat-card {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-[data-theme="dark"] .stat-card:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-
-[data-theme="dark"] .btn.btn-small {
-    background: var(--bg-tertiary);
-}
-
-/* 版本信息样式 */
-.version-footer {
-    margin-top: 40px;
-    padding: 24px 0;
-    border-top: 1px solid var(--border-primary);
-    flex-shrink: 0;
-}
-
-.version-info {
-    text-align: center;
-    font-size: 13px;
-    color: var(--text-tertiary);
-}
-
-.version-info .separator {
-    margin: 0 12px;
-    color: var(--text-quaternary);
-}
-
-.connection-reset-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    white-space: nowrap;
-}
-
-.connection-reset-btn i {
-    margin: 0;
-}
-
-.connection-reset-btn span {
-    font-size: 13px;
-}
-
-[data-theme="dark"] .connection-reset-btn {
-    background: rgba(30, 41, 59, 0.9);
-    border-color: rgba(100, 116, 139, 0.4);
-    color: #cbd5e1;
-}
-
-[data-theme="dark"] .connection-reset-btn:hover {
-    background: rgba(51, 65, 85, 0.95);
-    border-color: rgba(100, 116, 139, 0.6);
-}
-
-.model-input-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 10px;
-}
-
-.model-input-row .input-group {
-    display: flex;
-    gap: 8px;
-}
-
-.model-input-row .model-name-input,
-.model-input-row .model-alias-input {
-    flex: 1;
-}
-
-.model-input-row .model-alias-input {
-    max-width: 220px;
-}
-
-.model-input-row .model-remove-btn {
-    align-self: center;
-}
-
-.api-key-input-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 10px;
-}
-
-.api-key-input-group {
-    display: flex;
-    gap: 8px;
-    width: 100%;
-}
-
-.api-key-input-group .api-key-value-input {
-    flex: 2;
-}
-
-.api-key-input-group .api-key-proxy-input {
-    flex: 1;
-    min-width: 180px;
-}
-
-.api-key-input-group .api-key-remove-btn {
-    align-self: center;
-}
-
-.api-key-input-list + .btn,
-.model-input-list + .btn,
-.header-input-list + .btn {
-    margin-top: 4px;
-    align-self: flex-start;
-}
-
-.header-input-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 10px;
-}
-
-.header-input-row .header-input-group {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.header-key-input {
-    flex: 1;
-}
-
-.header-value-input {
-    flex: 2;
-}
-
-.header-separator {
-    color: var(--text-tertiary);
-}
-
-.header-badges-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.header-badge-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-
-.header-badge {
-    background: var(--accent-tertiary);
-    border: 1px solid var(--border-primary);
-    border-radius: 12px;
-    padding: 4px 8px;
-    font-size: 12px;
-    color: var(--text-secondary);
-    display: inline-flex;
-    gap: 4px;
-}
-
-.header-badge strong {
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
-[data-theme="dark"] .header-badge {
-    background: rgba(59, 130, 246, 0.15);
-    border-color: rgba(59, 130, 246, 0.3);
-    color: var(--text-secondary);
-}
-
-[data-theme="dark"] .header-badge strong {
-    color: var(--text-secondary);
-}
-
-/* Codex OAuth 样式 */
-#codex-oauth-content {
-    transition: all 0.3s ease;
-}
-
-#codex-oauth-url {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 13px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#codex-oauth-url:focus {
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-#codex-oauth-status {
-    font-weight: 500;
-    padding: 8px 12px;
-    border-radius: 6px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    transition: all 0.3s ease;
-}
-
-#codex-oauth-status.success {
-    background: var(--success-bg);
-    border-color: var(--success-border);
-    color: var(--success-text);
-}
-
-#codex-oauth-status.error {
-    background: var(--error-bg);
-    border-color: var(--error-border);
-    color: var(--error-text);
-}
-
-#codex-oauth-status.warning {
-    background: var(--warning-bg);
-    border-color: var(--warning-border);
-    color: var(--warning-text);
-}
-
-/* Codex OAuth 按钮样式 */
-#codex-open-link,
-#codex-copy-link {
-    min-width: 100px;
-    white-space: nowrap;
-}
-
-#codex-open-link {
-    background: var(--primary-color);
-    border-color: var(--primary-color);
-}
-
-#codex-open-link:hover {
-    background: var(--primary-hover);
-    border-color: var(--primary-hover);
-}
-
-#codex-copy-link {
-    background: var(--bg-secondary);
-    border-color: var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#codex-copy-link:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--border-secondary);
-    color: var(--text-primary);
-}
-
-/* 响应式设计 - Codex OAuth */
-@media (max-width: 768px) {
-    #codex-oauth-content .input-group {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    #codex-open-link,
-    #codex-copy-link {
-        width: 100%;
-        margin-top: 8px;
-    }
-
-    #codex-oauth-url {
-        font-size: 12px;
-    }
-}
-
-/* Anthropic OAuth 样式 */
-#anthropic-oauth-content {
-    transition: all 0.3s ease;
-}
-
-#anthropic-oauth-url {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 13px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#anthropic-oauth-url:focus {
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-#anthropic-oauth-status {
-    font-weight: 500;
-    padding: 8px 12px;
-    border-radius: 6px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    transition: all 0.3s ease;
-}
-
-#anthropic-oauth-status.success {
-    background: var(--success-bg);
-    border-color: var(--success-border);
-    color: var(--success-text);
-}
-
-#anthropic-oauth-status.error {
-    background: var(--error-bg);
-    border-color: var(--error-border);
-    color: var(--error-text);
-}
-
-#anthropic-oauth-status.warning {
-    background: var(--warning-bg);
-    border-color: var(--warning-border);
-    color: var(--warning-text);
-}
-
-/* Anthropic OAuth 按钮样式 */
-#anthropic-open-link,
-#anthropic-copy-link {
-    min-width: 100px;
-    white-space: nowrap;
-}
-
-#anthropic-open-link {
-    background: var(--primary-color);
-    border-color: var(--primary-color);
-}
-
-#anthropic-open-link:hover {
-    background: var(--primary-hover);
-    border-color: var(--primary-hover);
-}
-
-#anthropic-copy-link {
-    background: var(--bg-secondary);
-    border-color: var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#anthropic-copy-link:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--border-secondary);
-    color: var(--text-primary);
-}
-
-/* 响应式设计 - Anthropic OAuth */
-@media (max-width: 768px) {
-    #anthropic-oauth-content .input-group {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    #anthropic-open-link,
-    #anthropic-copy-link {
-        width: 100%;
-        margin-top: 8px;
-    }
-
-    #anthropic-oauth-url {
-        font-size: 12px;
-    }
-}
-
-/* Gemini CLI OAuth 样式 */
-#gemini-cli-oauth-content {
-    transition: all 0.3s ease;
-}
-
-#gemini-cli-oauth-url {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 13px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#gemini-cli-oauth-url:focus {
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-#gemini-cli-oauth-status {
-    font-weight: 500;
-    padding: 8px 12px;
-    border-radius: 6px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    transition: all 0.3s ease;
-}
-
-#gemini-cli-oauth-status.success {
-    background: var(--success-bg);
-    border-color: var(--success-border);
-    color: var(--success-text);
-}
-
-#gemini-cli-oauth-status.error {
-    background: var(--error-bg);
-    border-color: var(--error-border);
-    color: var(--error-text);
-}
-
-#gemini-cli-oauth-status.warning {
-    background: var(--warning-bg);
-    border-color: var(--warning-border);
-    color: var(--warning-text);
-}
-
-/* Gemini CLI OAuth 按钮样式 */
-#gemini-cli-open-link,
-#gemini-cli-copy-link {
-    min-width: 100px;
-    white-space: nowrap;
-}
-
-#gemini-cli-open-link {
-    background: var(--primary-color);
-    border-color: var(--primary-color);
-}
-
-#gemini-cli-open-link:hover {
-    background: var(--primary-hover);
-    border-color: var(--primary-hover);
-}
-
-#gemini-cli-copy-link {
-    background: var(--bg-secondary);
-    border-color: var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#gemini-cli-copy-link:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--border-secondary);
-    color: var(--text-primary);
-}
-
-/* Gemini CLI 项目 ID 输入框样式 */
-#gemini-cli-project-id {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 13px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#gemini-cli-project-id:focus {
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-/* 响应式设计 - Gemini CLI OAuth */
-@media (max-width: 768px) {
-    #gemini-cli-oauth-content .input-group {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    #gemini-cli-open-link,
-    #gemini-cli-copy-link {
-        width: 100%;
-        margin-top: 8px;
-    }
-
-    #gemini-cli-oauth-url {
-        font-size: 12px;
-    }
-
-    #gemini-cli-project-id {
-        font-size: 12px;
-    }
-}
-
-/* Qwen OAuth 样式 */
-#qwen-oauth-content {
-    transition: all 0.3s ease;
-}
-
-#qwen-oauth-url {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 13px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#qwen-oauth-url:focus {
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-#qwen-oauth-status {
-    font-weight: 500;
-    padding: 8px 12px;
-    border-radius: 6px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    transition: all 0.3s ease;
-}
-
-#qwen-oauth-status.success {
-    background: var(--success-bg);
-    border-color: var(--success-border);
-    color: var(--success-text);
-}
-
-#qwen-oauth-status.error {
-    background: var(--error-bg);
-    border-color: var(--error-border);
-    color: var(--error-text);
-}
-
-#qwen-oauth-status.warning {
-    background: var(--warning-bg);
-    border-color: var(--warning-border);
-    color: var(--warning-text);
-}
-
-/* Qwen OAuth 按钮样式 */
-#qwen-open-link,
-#qwen-copy-link {
-    min-width: 100px;
-    white-space: nowrap;
-}
-
-#qwen-open-link {
-    background: var(--primary-color);
-    border-color: var(--primary-color);
-}
-
-#qwen-open-link:hover {
-    background: var(--primary-hover);
-    border-color: var(--primary-hover);
-}
-
-#qwen-copy-link {
-    background: var(--bg-secondary);
-    border-color: var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#qwen-copy-link:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--border-secondary);
-    color: var(--text-primary);
-}
-
-/* 响应式设计 - Qwen OAuth */
-@media (max-width: 768px) {
-    #qwen-oauth-content .input-group {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    #qwen-open-link,
-    #qwen-copy-link {
-        width: 100%;
-        margin-top: 8px;
-    }
-
-    #qwen-oauth-url {
-        font-size: 12px;
-    }
-}
-
-/* iFlow OAuth 样式 */
-#iflow-oauth-content {
-    transition: all 0.3s ease;
-}
-
-#iflow-oauth-url {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 13px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#iflow-oauth-url:focus {
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-#iflow-oauth-status {
-    font-weight: 500;
-    padding: 8px 12px;
-    border-radius: 6px;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-primary);
-    transition: all 0.3s ease;
-}
-
-#iflow-oauth-status.success {
-    background: var(--success-bg);
-    border-color: var(--success-border);
-    color: var(--success-text);
-}
-
-#iflow-oauth-status.error {
-    background: var(--error-bg);
-    border-color: var(--error-border);
-    color: var(--error-text);
-}
-
-#iflow-oauth-status.warning {
-    background: var(--warning-bg);
-    border-color: var(--warning-border);
-    color: var(--warning-text);
-}
-
-/* iFlow OAuth 按钮样式 */
-#iflow-open-link,
-#iflow-copy-link {
-    min-width: 100px;
-    white-space: nowrap;
-}
-
-#iflow-open-link {
-    background: var(--primary-color);
-    border-color: var(--primary-color);
-}
-
-#iflow-open-link:hover {
-    background: var(--primary-hover);
-    border-color: var(--primary-hover);
-}
-
-#iflow-copy-link {
-    background: var(--bg-secondary);
-    border-color: var(--border-primary);
-    color: var(--text-secondary);
-}
-
-#iflow-copy-link:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--border-secondary);
-    color: var(--text-primary);
-}
-
-/* 响应式设计 - iFlow OAuth */
-@media (max-width: 768px) {
-    #iflow-oauth-content .input-group {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    #iflow-open-link,
-    #iflow-copy-link {
-        width: 100%;
-        margin-top: 8px;
-    }
-
-    #iflow-oauth-url {
-        font-size: 12px;
-    }
-}
-/* 日志查看样式 */
-.logs-container {
-    background: var(--bg-tertiary);
-    border-radius: 8px;
-    padding: 16px;
-    min-height: 500px;
-    max-height: calc(100vh - 400px);
-    overflow-y: auto;
-    font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;
-}
-
-.logs-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--border-primary);
-    font-size: 13px;
-    color: var(--text-tertiary);
-}
-
-.logs-info span {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.logs-text {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-primary);
-    border-radius: 6px;
-    padding: 16px;
-    font-size: 13px;
-    line-height: 1.6;
-    color: var(--text-secondary);
-    font-weight: 600;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    max-height: calc(100vh - 480px);
-    min-height: 450px;
-    overflow-y: auto;
-    margin: 0;
-}
-
-.logs-text .log-line {
-    display: block;
-    padding: 2px 0;
-    margin: 0;
-    color: inherit;
-}
-
-.logs-text .log-line + .log-line {
-    margin-top: 2px;
-}
-
-.logs-text .log-status-tag {
-    display: inline-block;
-    padding: 0 8px;
-    margin-right: 6px;
-    border-radius: 6px;
-    font-weight: 700;
-    letter-spacing: 0.3px;
-}
-
-.logs-text .log-status-tag.log-status-2xx {
-    background: rgba(16, 185, 129, 0.18);
-    color: #047857;
-}
-
-.logs-text .log-status-tag.log-status-3xx {
-    background: rgba(6, 182, 212, 0.2);
-    color: #0f766e;
-}
-
-.logs-text .log-status-tag.log-status-4xx {
-    background: rgba(251, 191, 36, 0.26);
-    color: #92400e;
-}
-
-.logs-text .log-status-tag.log-status-5xx {
-    background: rgba(239, 68, 68, 0.22);
-    color: #b91c1c;
-}
-
-.logs-text .log-status-tag.log-status-1xx {
-    background: rgba(165, 180, 252, 0.22);
-    color: #4338ca;
-}
-
-/* 日志高亮样式 */
-
-/* 时间戳高亮 */
-.logs-text .log-timestamp {
-    color: #8b5cf6;
-    font-weight: 600;
-}
-
-/* 日志级别高亮 */
-.logs-text .log-level {
-    display: inline-block;
-    padding: 1px 6px;
-    border-radius: 4px;
-    font-weight: 700;
-    font-size: 0.95em;
-    letter-spacing: 0.5px;
-}
-
-.logs-text .log-level-error {
-    background: rgba(239, 68, 68, 0.20);
-    color: #dc2626;
-}
-
-.logs-text .log-level-warn {
-    background: rgba(251, 191, 36, 0.25);
-    color: #d97706;
-}
-
-.logs-text .log-level-info {
-    background: rgba(59, 130, 246, 0.20);
-    color: #2563eb;
-}
-
-.logs-text .log-level-debug {
-    background: rgba(107, 114, 128, 0.18);
-    color: #6b7280;
-}
-
-/* HTTP 方法高亮 */
-.logs-text .log-http-method {
-    color: #0891b2;
-    font-weight: 700;
-}
-
-/* 路径/URL 高亮 */
-.logs-text .log-path {
-    color: #059669;
-    text-decoration: underline;
-    text-decoration-style: dotted;
-    text-decoration-color: rgba(5, 150, 105, 0.3);
-}
-
-/* IP 地址高亮 */
-.logs-text .log-ip {
-    color: #7c3aed;
-    font-weight: 600;
-}
-
-/* 关键字高亮 - 成功 */
-.logs-text .log-keyword-success {
-    color: #059669;
-    font-weight: 600;
-}
-
-/* 关键字高亮 - 错误 */
-.logs-text .log-keyword-error {
-    color: #dc2626;
-    font-weight: 600;
-}
-
-/* 关键字高亮 - 警告 */
-.logs-text .log-keyword-warn {
-    color: #ea580c;
-    font-weight: 600;
-}
-
-/* 数字和单位高亮 */
-.logs-text .log-number-unit {
-    color: #db2777;
-    font-weight: 600;
-}
-
-.logs-text::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-.logs-text::-webkit-scrollbar-track {
-    background: var(--bg-tertiary);
-    border-radius: 4px;
-}
-
-.logs-text::-webkit-scrollbar-thumb {
-    background: var(--border-secondary);
-    border-radius: 4px;
-}
-
-.logs-text::-webkit-scrollbar-thumb:hover {
-    background: var(--text-quaternary);
-}
-
-/* 空状态和错误状态 */
-.logs-container .empty-state,
-.logs-container .error-state,
-.logs-container .upgrade-notice {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 300px;
-    text-align: center;
-    color: var(--text-tertiary);
-}
-
-.logs-container .empty-state i,
-.logs-container .error-state i,
-.logs-container .upgrade-notice i {
-    font-size: 48px;
-    margin-bottom: 16px;
-    color: var(--border-secondary);
-}
-
-.logs-container .error-state i {
-    color: var(--error-text);
-}
-
-.logs-container .upgrade-notice i {
-    color: var(--primary-color);
-}
-
-.logs-container .empty-state p,
-.logs-container .error-state p,
-.logs-container .upgrade-notice p {
-    margin: 4px 0;
-    font-size: 14px;
-}
-
-.logs-container .empty-state p:first-of-type,
-.logs-container .error-state p:first-of-type {
-    font-weight: 600;
-    color: var(--text-secondary);
-    font-size: 16px;
-}
-
-.logs-container .upgrade-notice h3 {
-    font-weight: 600;
-    color: var(--text-secondary);
-    font-size: 18px;
-    margin-bottom: 8px;
-}
-
-.logs-container .upgrade-notice p {
-    color: var(--text-tertiary);
-    max-width: 500px;
-    line-height: 1.6;
-}
-
-/* 日志页面头部布局 */
-#logs .card-header.logs-header {
-    flex-wrap: wrap;
-    gap: 12px;
-}
-
-.logs-header-main {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex: 1;
-    min-width: 280px;
-}
-
-.logs-header-main h3 {
-    margin: 0;
-}
-
-.logs-search {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--border-primary);
-    border-radius: 10px;
-    padding: 0 12px;
-    background: var(--bg-secondary);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
-    min-width: 240px;
-    max-width: 420px;
-    flex: 1;
-}
-
-[data-theme="dark"] .logs-search {
-    background: var(--bg-tertiary);
-    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04);
-}
-
-.logs-search i {
-    color: var(--text-tertiary);
-    margin-right: 8px;
-}
-
-.logs-search input {
-    border: none;
-    background: transparent;
-    color: var(--text-primary);
-    width: 100%;
-    padding: 10px 0;
-    font-size: 0.95rem;
-}
-
-.logs-search input:focus {
-    outline: none;
-}
-
-/* 日志页面头部操作区域 */
-#logs .card-header .header-actions {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-#logs .card-header .header-actions .toggle-group {
-    margin-bottom: 0;
-}
-
-/* 响应式设计 - 日志查看 */
-@media (max-width: 768px) {
-    .logs-container {
-        min-height: 300px;
-        max-height: calc(100vh - 350px);
-        padding: 12px;
-    }
-
-    .logs-text {
-        font-size: 11px;
-        padding: 12px;
-        max-height: calc(100vh - 430px);
-        min-height: 250px;
-    }
-
-    .logs-info {
-        font-size: 12px;
-    }
-
-    #logs .card-header.logs-header {
-        align-items: flex-start;
-    }
-
-    .logs-header-main {
-        width: 100%;
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .logs-search {
-        width: 100%;
-        max-width: none;
-    }
-
-    #logs .card-header .header-actions {
-        width: 100%;
-        justify-content: flex-start;
-    }
-
-    #logs .card-header .header-actions .btn {
-        flex: 1;
-        min-width: 0;
-    }
-
-    #logs .card-header .header-actions .btn span {
-        display: none;
-    }
-
-    #logs .card-header .header-actions .toggle-group {
-        width: 100%;
-        justify-content: space-between;
-    }
-}
-
-/* 暗色主题适配 */
-[data-theme="dark"] .logs-text {
-    background: rgba(15, 23, 42, 0.5);
-    border-color: var(--border-primary);
-    color: var(--text-tertiary);
-}
-
-[data-theme="dark"] .logs-text .log-status-tag.log-status-2xx {
-    background: rgba(16, 185, 129, 0.32);
-    color: #6ee7b7;
-}
-
-[data-theme="dark"] .logs-text .log-status-tag.log-status-3xx {
-    background: rgba(6, 182, 212, 0.34);
-    color: #5eead4;
-}
-
-[data-theme="dark"] .logs-text .log-status-tag.log-status-4xx {
-    background: rgba(251, 191, 36, 0.38);
-    color: #fcd34d;
-}
-
-[data-theme="dark"] .logs-text .log-status-tag.log-status-5xx {
-    background: rgba(239, 68, 68, 0.38);
-    color: #fca5a5;
-}
-
-[data-theme="dark"] .logs-text .log-status-tag.log-status-1xx {
-    background: rgba(165, 180, 252, 0.38);
-    color: #c7d2fe;
-}
-
-[data-theme="dark"] .logs-container {
-    background: rgba(15, 23, 42, 0.3);
-}
-
-/* 暗色主题 - 日志高亮样式 */
-[data-theme="dark"] .logs-text .log-timestamp {
-    color: #c4b5fd;
-}
-
-[data-theme="dark"] .logs-text .log-level-error {
-    background: rgba(239, 68, 68, 0.32);
-    color: #fca5a5;
-}
-
-[data-theme="dark"] .logs-text .log-level-warn {
-    background: rgba(251, 191, 36, 0.35);
-    color: #fbbf24;
-}
-
-[data-theme="dark"] .logs-text .log-level-info {
-    background: rgba(59, 130, 246, 0.32);
-    color: #93c5fd;
-}
-
-[data-theme="dark"] .logs-text .log-level-debug {
-    background: rgba(107, 114, 128, 0.28);
-    color: #9ca3af;
-}
-
-[data-theme="dark"] .logs-text .log-http-method {
-    color: #22d3ee;
-}
-
-[data-theme="dark"] .logs-text .log-path {
-    color: #34d399;
-    text-decoration-color: rgba(52, 211, 153, 0.3);
-}
-
-[data-theme="dark"] .logs-text .log-ip {
-    color: #a78bfa;
-}
-
-[data-theme="dark"] .logs-text .log-keyword-success {
-    color: #34d399;
-}
-
-[data-theme="dark"] .logs-text .log-keyword-error {
-    color: #f87171;
-}
-
-[data-theme="dark"] .logs-text .log-keyword-warn {
-    color: #fb923c;
-}
-
-[data-theme="dark"] .logs-text .log-number-unit {
-    color: #f472b6;
-}
-
-/* Vertex AI Credential Import */
-.vertex-import-actions {
-    text-align: left;
-    margin-top: 10px;
-}
-
-.vertex-import-result {
-    margin-top: 20px;
-    border: 1px dashed var(--border-primary);
-    border-radius: 12px;
-    padding: 16px;
-    background: var(--bg-quaternary);
-    color: var(--text-primary);
-}
-
-.vertex-import-result-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-weight: 600;
-    margin-bottom: 10px;
-    color: var(--success-text);
-}
-
-.vertex-import-result ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.vertex-import-result li {
-    margin-bottom: 6px;
-    font-size: 14px;
-    color: var(--text-secondary);
-}
-
-.vertex-import-result code {
-    background: var(--bg-secondary);
-    border-radius: 6px;
-    padding: 2px 6px;
-    font-size: 13px;
-    color: var(--text-primary);
-}
-
-[data-theme="dark"] .vertex-import-result {
-    border-color: rgba(96, 165, 250, 0.4);
-    background: rgba(15, 23, 42, 0.4);
-}
-
-[data-theme="dark"] .vertex-import-result code {
-    background: rgba(7, 11, 22, 0.8);
-    color: #f3f4f6;
-}
-
-/* ===== AI提供商统计徽章样式 ===== */
-
-/* 统计信息容器 */
-.item-stats {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    margin-top: 8px;
-}
-
-/* 统计徽章基础样式 */
-.stat-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 4px 10px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: 500;
-    transition: all 0.2s ease;
-}
-
-/* 成功统计徽章 */
-.stat-badge.stat-success {
-    background-color: var(--success-bg);
-    color: var(--success-text);
-    border: 1px solid var(--success-border);
-}
-
-.stat-badge.stat-neutral {
-    background-color: var(--bg-tertiary);
-    color: var(--text-secondary);
-    border: 1px solid var(--border-color);
-}
-
-.stat-badge.stat-success i {
-    font-size: 13px;
-}
-
-/* 失败统计徽章 */
-.stat-badge.stat-failure {
-    background-color: var(--error-bg);
-    color: var(--error-text);
-    border: 1px solid var(--error-border);
-}
-
-.stat-badge.stat-failure i {
-    font-size: 13px;
-}
-
-/* 悬停效果 */
-.stat-badge:hover {
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-sm);
-}
-
-/* 暗色主题适配 */
-[data-theme="dark"] .stat-badge.stat-success {
-    background-color: rgba(6, 78, 59, 0.3);
-    color: #6ee7b7;
-    border-color: rgba(5, 150, 105, 0.5);
-}
-
-[data-theme="dark"] .stat-badge.stat-failure {
-    background-color: rgba(153, 27, 27, 0.3);
-    color: #fca5a5;
-    border-color: rgba(220, 38, 38, 0.5);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-    .item-stats {
-        gap: 6px;
-        margin-top: 8px;
-    }
-    
-    .stat-badge {
-        padding: 3px 8px;
-        font-size: 11px;
-    }
-    
-    .stat-badge i {
-        font-size: 11px !important;
-    }
-}
-
-/* 响应式设计 - API Keys 和 AI Providers 按钮优化 */
-@media (max-width: 768px) {
-    /* 移动端按钮位置调整 */
-    .key-item .item-actions,
-    .provider-item .item-actions {
-        position: relative;
-        top: auto;
-        right: auto;
-        transform: none;
-        margin-top: 12px;
-        justify-content: flex-start;
-    }
-
-    /* 移动端移除内容右侧内边距 */
-    .key-item .item-content,
-    .provider-item .item-content {
-        padding-right: 0;
-    }
-
-    /* 移动端按钮尺寸调整 */
-    .key-item .item-actions .btn,
-    .provider-item .item-actions .btn {
-        min-width: 36px;
-        height: 36px;
-    }
-
-    .key-item .item-actions .btn:hover,
-    .provider-item .item-actions .btn:hover {
-        transform: scale(1.05);
-    }
-
-    .key-item .item-actions .btn i,
-    .provider-item .item-actions .btn i {
-        font-size: 14px;
-    }
-}
-
-#config-management .CodeMirror .CodeMirror-lines {
-    padding: 12px;
-}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..a9b5a59
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..f91e301
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..df0785b
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..ef02a1c
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,43 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { viteSingleFile } from 'vite-plugin-singlefile';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    viteSingleFile({
+      removeViteModuleLoader: true
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
+  css: {
+    modules: {
+      localsConvention: 'camelCase',
+      generateScopedName: '[name]__[local]___[hash:base64:5]'
+    },
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/styles/variables.scss";`
+      }
+    }
+  },
+  build: {
+    target: 'es2015',
+    outDir: 'dist',
+    assetsInlineLimit: 100000000,
+    chunkSizeWarningLimit: 100000000,
+    cssCodeSplit: false,
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true,
+        manualChunks: undefined
+      }
+    }
+  }
+});
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index 5bf7deb..0000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,64 +0,0 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
-const path = require('path');
-
-module.exports = {
-    mode: 'production',
-    entry: {
-        main: './bundle-entry.js'
-    },
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: '[name].bundle.js',
-        clean: true
-    },
-    module: {
-        rules: [
-            {
-                test: /\.css$/i,
-                use: ['style-loader', 'css-loader']
-            },
-            {
-                test: /\.(png|jpg|jpeg|gif|svg)$/i,
-                type: 'asset/inline'
-            },
-            {
-                test: /\.html$/i,
-                loader: 'html-loader',
-                options: {
-                    sources: {
-                        list: [
-                            {
-                                tag: 'img',
-                                attribute: 'src',
-                                type: 'src'
-                            }
-                        ]
-                    }
-                }
-            }
-        ]
-    },
-    plugins: [
-        new HtmlWebpackPlugin({
-            template: './index.build.html',
-            filename: 'index.html',
-            inject: 'body',
-            minify: {
-                collapseWhitespace: true,
-                removeComments: true,
-                removeRedundantAttributes: true,
-                removeScriptTypeAttributes: true,
-                removeStyleLinkTypeAttributes: true,
-                useShortDoctype: true
-            }
-        }),
-        new HtmlInlineScriptPlugin({
-            htmlMatchPattern: [/index.html$/],
-            scriptMatchPattern: [/.js$/]
-        })
-    ],
-    optimization: {
-        minimize: true
-    }
-};