feat: enhance file upload functionality to support multiple JSON file uploads with improved validation and notification handling

- Replaced the model filter dropdown with multiple chart line selectors for improved data visualization.
- Updated event handling to manage changes in chart line selections and refresh chart data accordingly.
- Enhanced internationalization strings for chart line labels in both English and Chinese.
- Adjusted the HTML structure to accommodate the new chart line selection UI.

.github/workflows/release.yml

@@ -27,6 +27,8 @@ jobs:
 
       - name: Build all-in-one HTML
         run: npm run build
+        env:
+          VERSION: ${{ github.ref_name }}
 
       - name: Prepare release assets
         run: |

.gitignore

@@ -20,3 +20,9 @@ package-lock.json
 # OS files
 .DS_Store
 Thumbs.db
+
+CLAUDE.md
+.claude
+AGENTS.md
+.codex
+.serena

README.md

@@ -1,150 +1,49 @@
 # Cli-Proxy-API-Management-Center
-This is a modern web interface for managing the CLI Proxy API.
+This is the modern WebUI for managing the CLI Proxy API.
 
 [中文文档](README_CN.md)
 
-Main Project:
-https://github.com/router-for-me/CLIProxyAPI
+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)
 
-Example URL:
-https://remote.router-for.me/
-
-Minimum required version: ≥ 6.0.0
-Recommended version: ≥ 6.1.3
-
-Since version 6.0.19, the WebUI has been rolled into the main program. You can access it by going to `/management.html` on the external port after firing up the main project.
+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.
 
 ## Features
 
-### Authentication Management
-- Supports management key authentication
-- Configurable API base address
-- Real-time connection status detection
-- Auto-login with saved credentials
-- Language and theme switching
-
-### Basic Settings
-- **Debug Mode**: Enable/disable debugging
-- **Proxy Settings**: Configure proxy server URL
-- **Request Retries**: Set the number of request retries
-- **Quota Management**: Configure behavior when the quota is exceeded
-  - Auto-switch project when quota exceeded
-  - Switch to preview models when quota exceeded
-
-### API Key Management
-- **Proxy Service Authentication Key**: Manage API keys for the proxy service
-- **Gemini API**: Manage Google Gemini generative language API keys
-- **Codex API**: Manage OpenAI Codex API configuration
-- **Claude API**: Manage Anthropic Claude API configuration
-- **OpenAI-Compatible Providers**: Manage OpenAI-compatible third-party providers
-
-### Authentication File Management
-- Upload authentication JSON files
-- Download existing authentication files
-- Delete single or all authentication files
-- Display file details
-
-### Usage Statistics
-- **Real-time Analytics**: Track API usage with interactive charts
-- **Request Trends**: Visualize request patterns by hour/day
-- **Token Usage**: Monitor token consumption over time
-- **API Details**: Detailed statistics for each API endpoint
-- **Success/Failure Rates**: Track API reliability metrics
-
-### System Information
-- **Connection Status**: Real-time connection monitoring
-- **Configuration Status**: Track configuration loading state
-- **Server Information**: Display server address and management key
-- **Last Update**: Show when data was last refreshed
-
+### 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. Using After CLI Proxy API Program Launch (Recommended)
-Once the CLI Proxy API program is up and running, you can access the WebUI at `http://your-server-IP:8317/management.html`.
+1) **After CLI Proxy API is running (recommended)**  
+   Visit `http://your-server:8317/management.html`.
 
-### 2. Direct Use
-Simply open the `index.html` file directly in your browser to use it.
+2) **Direct static use after build**  
+   The single file `dist/index.html` generated by `npm run build`
 
-### 3. Use a Local Server
-
-#### Option A: Using Node.js (npm)
+3) **Local server**
 ```bash
-# Install dependencies
 npm install
-
-# Start the server on the default port (3000)
-npm start
-```
-
-#### Option B: Using Python
-```bash
-# Python 3.x
+npm start        # http://localhost:3000
+npm run dev      # optional dev port: 3090
+# or
 python -m http.server 8000
-
 ```
+   Then open the corresponding localhost URL.
 
-Then open `http://localhost:8000` in your browser.
+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.
 
-### 3. Configure Connection
-1. Open the management interface.
-2. On the login screen, enter:
-   - **Remote Address**: The current version automatically picks up the remote address from where you're connecting. But you can also set your own address if you prefer.
-   - **Management Key**: Your management key
-3. Click the "Connect" button.
-4. Once connected successfully, all features will be available.
-
-## Interface Description
-
-### Navigation Menu
-- **Basic Settings**: Basic configurations like debugging, proxy, retries, etc.
-- **API Keys**: Management of keys for various API services.
-- **AI Providers**: Configuration for AI service providers.
-- **Auth Files**: Upload and download management for authentication files.
-- **Usage Stats**: Real-time analytics and usage statistics with interactive charts.
-- **System Info**: Connection status and system information.
-
-### Login Interface
-- **Auto-connection**: Automatically attempts to connect using saved credentials
-- **Custom Connection**: Manual configuration of API base address
-- **Current Address Detection**: Automatically detects and uses current access address
-- **Language Switching**: Support for multiple languages (English/Chinese)
-- **Theme Switching**: Light and dark theme support
-
-## Feature Highlights
-
-### Modern UI
-- Responsive design, supports all screen sizes
-- Beautiful gradient colors and shadow effects
-- Smooth animations and transition effects
-- Intuitive icons and status indicators
-- Dark/Light theme support with system preference detection
-- Mobile-friendly sidebar with overlay
-
-### Real-time Updates
-- Configuration changes take effect immediately
-- Real-time status feedback
-- Automatic data refresh
-- Live usage statistics with interactive charts
-- Real-time connection status monitoring
-
-### Security Features
-- Masked display for keys
-- Secure credential storage
-- Auto-login with encrypted local storage
-
-### Responsive Design
-- Perfectly adapts to desktop and mobile devices
-- Adaptive layout with collapsible sidebar
-- Touch-friendly interactions
-- Mobile menu with overlay
-
-### Analytics & Monitoring
-- Interactive charts powered by Chart.js
-- Real-time usage statistics
-- Request trend visualization
-- Token consumption tracking
-- API performance metrics
+Tip: The Logs navigation item appears after enabling "Logging to file" in Basic Settings.
 
 ## Tech Stack
 
@@ -152,11 +51,17 @@ Then open `http://localhost:8000` in your browser.
 - **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
-- **API**: RESTful API calls with automatic authentication
-- **Internationalization**: Custom i18n system with English/Chinese support
-- **Theme System**: CSS custom properties for dynamic theming
-- **Storage**: LocalStorage for user preferences and credentials
+- **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
 
@@ -171,38 +76,31 @@ Then open `http://localhost:8000` in your browser.
 2. Check your network connection.
 3. Check the browser's console for any error messages.
 
-## Development Information
+### 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.
 
-### File Structure
+### Usage Stats
+- Enable "Usage statistics" if charts stay empty; data resets on server restart.
+
+## Project Structure
 ```
-webui/
-├── index.html          # Main page with responsive layout
-├── styles.css          # Stylesheet with theme support
-├── app.js              # Application logic and API management
-├── i18n.js             # Internationalization support (EN/CN)
-├── package.json        # Project configuration
-├── build.js            # Build script for production
-├── bundle-entry.js     # Entry point for bundling
+├── 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 # HTML preparation script
-├── logo.jpg            # Application logo
-├── LICENSE             # MIT License
-├── README.md           # English documentation
-├── README_CN.md        # Chinese documentation
-└── BUILD_RELEASE.md    # Build and release notes
+│   └── prepare-html.js
+├── dist/               # Bundled single-file output
+├── BUILD_RELEASE.md
+├── LICENSE
+├── README.md
+└── README_CN.md
 ```
 
-### API Calls
-All API calls are handled through the `makeRequest` method of the `ManagerAPI` class, which includes:
-- Automatic addition of authentication headers
-- Error handling
-- JSON response parsing
-
-### State Management
-- API address and key are saved in local storage
-- Connection status is maintained in memory
-- Real-time data refresh mechanism
-
 ## Contributing
 We welcome Issues and Pull Requests to improve this project! We encourage more developers to contribute to the enhancement of this WebUI!
 

README_CN.md

@@ -1,149 +1,49 @@
 # Cli-Proxy-API-Management-Center
 这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
 
-主项目
-https://github.com/router-for-me/CLIProxyAPI
+[English](README.md)
 
-示例网站:
-https://remote.router-for.me/
+主项目: https://github.com/router-for-me/CLIProxyAPI  
+示例网站: https://remote.router-for.me/  
+最低版本 ≥ 6.3.0（推荐 ≥ 6.5.0）
 
-最低可用版本 ≥ 6.0.0
-
-推荐版本 ≥ 6.1.3
-
-自6.0.19起WebUI已经集成在主程序中 可以通过主项目开启的外部端口的`/management.html`访问
+自 6.0.19 起 WebUI 已集成到主程序中，启动后可通过 `/management.html` 访问。
 
 ## 功能特点
 
-### 认证管理
-- 支持管理密钥认证
-- 可配置 API 基础地址
-- 实时连接状态检测
-- 自动登录保存的凭据
-- 语言和主题切换
-
-### 基础设置
-- **调试模式**: 开启/关闭调试功能
-- **代理设置**: 配置代理服务器 URL
-- **请求重试**: 设置请求重试次数
-- **配额管理**: 配置超出配额时的行为
-  - 超出配额时自动切换项目
-  - 超出配额时切换到预览模型
-
-### API 密钥管理
-- **代理服务认证密钥**: 管理用于代理服务的 API 密钥
-- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥
-- **Codex API**: 管理 OpenAI Codex API 配置
-- **Claude API**: 管理 Anthropic Claude API 配置
-- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商
-
-### 认证文件管理
-- 上传认证 JSON 文件
-- 下载现有认证文件
-- 删除单个或所有认证文件
-- 显示文件详细信息
-
-### 使用统计
-- **实时分析**: 通过交互式图表跟踪 API 使用情况
-- **请求趋势**: 按小时/天可视化请求模式
-- **Token 使用**: 监控 Token 消耗随时间变化
-- **API 详情**: 每个 API 端点的详细统计
-- **成功率/失败率**: 跟踪 API 可靠性指标
-
-### 系统信息
-- **连接状态**: 实时连接监控
-- **配置状态**: 跟踪配置加载状态
-- **服务器信息**: 显示服务器地址和管理密钥
-- **最后更新**: 显示数据最后刷新时间
-
+### 主要能力
+- **登录与体验**: 自动检测当前地址（可自定义/重置），加密自动登录，语言/主题切换，响应式布局与移动端侧边栏。
+- **基础设置**: 调试、代理 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. 在CLI Proxy API程序启动后使用 （推荐）
-在启动了CLI Proxy API程序后 访问`http://您的服务器IP:8317/management.html`使用
+1) **主程序启动后使用（推荐）**  
+   访问 `http://您的服务器:8317/management.html`。
 
-### 2. 直接使用
-直接用浏览器打开 `index.html` 文件即可使用。
+2) **构建后直接静态打开**  
+   `npm run build` 生成的 `dist/index.html` 单文件
 
-### 3. 使用本地服务器
-
-#### 方法A：使用 Node.js (npm)
+3) **本地服务器**
 ```bash
-# 安装依赖
 npm install
-
-# 使用默认端口(3000）
-npm start
-```
-
-#### 方法B：使用 Python
-```bash
-# Python 3.x
+npm start        # 默认 http://localhost:3000
+npm run dev      # 可选开发端口 3090
+# 或
 python -m http.server 8000
-
 ```
+   然后在浏览器打开对应的 localhost 地址。
 
-然后在浏览器中打开 `http://localhost:8000`。
+4) **配置连接**  
+   登录页会显示自动检测的地址，可自行修改，填入管理密钥后点击连接。凭据将加密保存以便下次自动登录。
 
-### 3. 配置连接
-1. 打开管理界面
-2. 在登录界面上输入：
-   - **远程地址**: 现版本远程地址将会自动从您的访问地址中获取 当然您也可以自定义
-   - **管理密钥**: 您的管理密钥
-3. 点击"连接"按钮
-4. 连接成功后即可使用所有功能
-
-## 界面说明
-
-### 导航菜单
-- **基础设置**: 调试、代理、重试等基本配置
-- **API 密钥**: 各种 API 服务的密钥管理
-- **AI 提供商**: AI 服务提供商配置
-- **认证文件**: 认证文件的上传下载管理
-- **使用统计**: 实时分析和使用统计，包含交互式图表
-- **系统信息**: 连接状态和系统信息
-
-### 登录界面
-- **自动连接**: 使用保存的凭据自动尝试连接
-- **自定义连接**: 手动配置 API 基础地址
-- **当前地址检测**: 自动检测并使用当前访问地址
-- **语言切换**: 支持多种语言（英文/中文）
-- **主题切换**: 支持明暗主题
-
-## 特性亮点
-
-### 现代化 UI
-- 响应式设计，支持各种屏幕尺寸
-- 美观的渐变色彩和阴影效果
-- 流畅的动画和过渡效果
-- 直观的图标和状态指示
-- 明暗主题支持，自动检测系统偏好
-- 移动端友好的侧边栏和遮罩
-
-### 实时更新
-- 配置更改立即生效
-- 实时状态反馈
-- 自动数据刷新
-- 实时使用统计和交互式图表
-- 实时连接状态监控
-
-### 安全特性
-- 密钥遮蔽显示
-- 安全凭据存储
-- 加密本地存储自动登录
-
-### 响应式设计
-- 完美适配桌面和移动设备
-- 自适应布局，可折叠侧边栏
-- 触摸友好的交互
-- 移动端菜单和遮罩
-
-### 分析与监控
-- Chart.js 驱动的交互式图表
-- 实时使用统计
-- 请求趋势可视化
-- Token 消耗跟踪
-- API 性能指标
+提示: 开启“写入日志文件”后才会显示“日志查看”导航。
 
 ## 技术栈
 
@@ -151,11 +51,16 @@ python -m http.server 8000
 - **样式**: CSS3 + Flexbox/Grid，支持 CSS 变量
 - **图标**: Font Awesome 6.4.0
 - **图表**: Chart.js 交互式数据可视化
-- **字体**: Segoe UI 系统字体
-- **API**: RESTful API 调用，自动认证
-- **国际化**: 自定义 i18n 系统，支持中英文
-- **主题系统**: CSS 自定义属性动态主题
-- **存储**: LocalStorage 用户偏好和凭据存储
+- **编辑/解析**: 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` 静态托管。
 
 ## 故障排除
 
@@ -170,39 +75,32 @@ python -m http.server 8000
 2. 检查网络连接
 3. 查看浏览器控制台错误信息
 
-## 开发说明
+### 日志与配置编辑
+- 日志: 需要服务端开启写文件日志；返回 404 说明版本过旧或未启用。
+- 配置编辑: 依赖 `/config.yaml` 接口，保存前请确保 YAML 语法正确。
 
-### 文件结构
+### 使用统计
+- 若图表为空，请开启“使用统计”；数据在服务重启后会清空。
+
+## 项目结构
 ```
-webui/
-├── index.html          # 主页面，响应式布局
-├── styles.css          # 样式文件，支持主题
-├── app.js              # 应用逻辑和 API 管理
-├── i18n.js             # 国际化支持（中英文）
-├── package.json        # 项目配置
-├── build.js            # 生产环境构建脚本
-├── bundle-entry.js     # 打包入口文件
+├── index.html
+├── styles.css
+├── app.js
+├── i18n.js
+├── src/                # 核心/模块/工具源码
+├── build.cjs           # Webpack 构建脚本
+├── bundle-entry.js     # 打包入口
 ├── build-scripts/      # 构建工具
-│   └── prepare-html.js # HTML 准备脚本
-├── logo.jpg            # 应用图标
-├── LICENSE             # MIT 许可证
-├── README.md           # 英文文档
-├── README_CN.md        # 中文文档
-└── BUILD_RELEASE.md    # 构建和发布说明
+│   └── prepare-html.js
+├── dist/               # 打包输出单文件
+├── BUILD_RELEASE.md
+├── LICENSE
+├── README.md
+└── README_CN.md
 ```
 
-### API 调用
-所有 API 调用都通过 `ManagerAPI` 类的 `makeRequest` 方法处理，包含：
-- 自动添加认证头
-- 错误处理
-- JSON 响应解析
-
-### 状态管理
-- 本地存储保存 API 地址和密钥
-- 内存中维护连接状态
-- 实时数据刷新机制
-
 ## 贡献
 欢迎提交 Issue 和 Pull Request 来改进这个项目！我们欢迎更多的大佬来对这个 WebUI 进行更新！
 
-本项目采用MIT许可
+本项目采用 MIT 许可。

build.cjs

@@ -0,0 +1,225 @@
+'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);
+}
+
+

build.js

@@ -1,132 +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 ensureDistDir() {
-    if (fs.existsSync(distDir)) {
-        fs.rmSync(distDir, { recursive: true, force: true });
-    }
-    fs.mkdirSync(distDir);
-}
-
-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 app = escapeForScript(readFile(sourceFiles.app));
-
-    html = html.replace(
-        '<link rel="stylesheet" href="styles.css">',
-        `<style>
-${css}
-</style>`
-    );
-
-    html = html.replace(
-        '<script src="i18n.js"></script>',
-        `<script>
-${i18n}
-</script>`
-    );
-
-    html = html.replace(
-        '<script src="app.js"></script>',
-        `<script>
-${app}
-</script>`
-    );
-
-    const logoDataUrl = loadLogoDataUrl();
-    if (logoDataUrl) {
-        const logoScript = `<script>window.__INLINE_LOGO__ = "${logoDataUrl}";</script>`;
-        if (html.includes('</body>')) {
-            html = html.replace('</body>', `${logoScript}\n</body>`);
-        } 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);
-}
-
-

index.html

@@ -7,7 +7,13 @@
     <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>
 
@@ -71,8 +77,7 @@
                     <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="login.custom_connection_placeholder"
-                                placeholder="例如: https://example.com:8317">
+                            <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>
@@ -85,8 +90,7 @@
                     <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="login.management_key_placeholder" placeholder="请输入管理密钥" required>
+                            <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>
@@ -117,12 +121,17 @@
                 <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" title="收起/展开侧边栏">
+                <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" />
-                    <span class="top-navbar-brand-text" data-i18n="title.main">CLI Proxy API Management Center</span>
+                    <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">
@@ -155,24 +164,30 @@
             <nav class="sidebar" id="sidebar">
                 <!-- 导航菜单 -->
                 <ul class="nav-menu">
-                    <li data-tooltip="基础设置"><a href="#basic-settings" class="nav-item active"
+                    <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-tooltip="API 密钥"><a href="#api-keys" class="nav-item" data-section="api-keys">
+                    <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-tooltip="AI 提供商"><a href="#ai-providers" class="nav-item" data-section="ai-providers">
+                    <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-tooltip="认证文件"><a href="#auth-files" class="nav-item" data-section="auth-files">
+                    <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-tooltip="使用统计"><a href="#usage-stats" class="nav-item" data-section="usage-stats">
+                    <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-tooltip="系统信息"><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>
+                    <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>
@@ -218,9 +233,7 @@
                                         <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="basic_settings.proxy_url_placeholder"
-                                                placeholder="例如: socks5://user:pass@127.0.0.1:1080/">
+                                            <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"
@@ -275,6 +288,68 @@
                                 </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 密钥管理 -->
@@ -358,6 +433,51 @@
                                     <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>
 
                         <!-- 认证文件管理 -->
@@ -374,9 +494,25 @@
 
                             <!-- 认证文件 -->
                             <div class="card">
-                                <div class="card-header">
+                                <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
@@ -389,8 +525,65 @@
                                     </div>
                                 </div>
                                 <div class="card-content">
-                                    <div id="auth-files-list" class="file-list"></div>
-                                    <input type="file" id="auth-file-input" accept=".json" style="display: none;">
+                                    <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>
 
@@ -465,6 +658,42 @@
                                 </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">
@@ -485,8 +714,7 @@
                                             data-i18n="auth_login.gemini_cli_project_id_label">Google Cloud 项目 ID
                                             (可选):</label>
                                         <input type="text" id="gemini-cli-project-id"
-                                            data-i18n="auth_login.gemini_cli_project_id_placeholder"
-                                            placeholder="输入 Google Cloud 项目 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>
@@ -580,7 +808,79 @@
                                         <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>
 
                         <!-- 使用统计 -->
@@ -626,6 +926,168 @@
                                     <div class="stat-content">
                                         <div class="stat-number" id="total-tokens">0</div>
                                         <div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</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>
+
+                                <div class="stat-card">
+                                    <div class="stat-icon">
+                                        <i class="fas fa-gauge-high"></i>
+                                    </div>
+                                    <div class="stat-content">
+                                        <div class="stat-number" id="rpm-30m">0</div>
+                                        <div class="stat-label" data-i18n="usage_stats.rpm_30m">RPM（近30分钟）</div>
+                                    </div>
+                                </div>
+
+                                <div class="stat-card">
+                                    <div class="stat-icon">
+                                        <i class="fas fa-stopwatch"></i>
+                                    </div>
+                                    <div class="stat-content">
+                                        <div class="stat-number" id="tpm-30m">0</div>
+                                        <div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
+                                    </div>
+                                </div>
+
+                                <div class="stat-card cost-summary-card">
+                                    <div class="stat-icon">
+                                        <i class="fas fa-dollar-sign"></i>
+                                    </div>
+                                    <div class="stat-content">
+                                        <div class="stat-number" id="total-cost">--</div>
+                                        <div class="stat-label" data-i18n="usage_stats.total_cost">总花费</div>
+                                        <div class="stat-subtext" id="total-cost-hint" data-i18n="usage_stats.total_cost_hint">基于已设置的模型单价</div>
+                                    </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>
@@ -674,6 +1136,26 @@
                                         </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详细统计 -->
@@ -691,11 +1173,91 @@
                                     </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>
+                            <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">
@@ -712,13 +1274,6 @@
                                             </div>
                                             <div class="info-value" id="display-api-url">-</div>
                                         </div>
-                                        <div class="info-item">
-                                            <div class="info-label">
-                                                <i class="fas fa-key"></i>
-                                                <span data-i18n="connection.management_key">管理密钥:</span>
-                                            </div>
-                                            <div class="info-value" id="display-management-key">-</div>
-                                        </div>
                                         <div class="info-item">
                                             <div class="info-label">
                                                 <i class="fas fa-circle"></i>
@@ -760,6 +1315,31 @@
                                     </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>
                     <!-- /内容区域 -->
@@ -767,7 +1347,14 @@
                     <!-- 版本信息 -->
                     <footer class="version-footer">
                         <div class="version-info">
-                            <span data-i18n="footer.version">版本</span>: v0.1.3
+                            <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>
@@ -792,7 +1379,7 @@
 
     </div>
 
-    <script src="app.js"></script>
+    <script type="module" src="app.js"></script>
 </body>
 
 </html>

package.json

@@ -3,10 +3,11 @@
   "version": "1.0.0",
   "description": "CLI Proxy API 管理界面",
   "main": "index.html",
+  "type": "module",
   "scripts": {
     "start": "npx serve .",
-    "dev": "npx serve . --port 3000",
-    "build": "node build.js",
+    "dev": "npx serve . -l 3090",
+    "build": "node build.cjs",
     "lint": "echo '使用浏览器开发者工具检查代码'"
   },
   "keywords": [
@@ -26,6 +27,5 @@
   "repository": {
     "type": "git",
     "url": "local"
-  },
-  "dependencies": {}
+  }
 }

src/core/api-client.js

@@ -0,0 +1,87 @@
+// 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;
+    }
+}

src/core/config-service.js

@@ -0,0 +1,70 @@
+// 配置缓存服务：负责分段/全量读取配置与缓存控制，不涉及任何 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;
+    }
+}

src/core/connection.js

@@ -0,0 +1,746 @@
+// 连接与配置缓存核心模块
+// 提供 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}`);
+        }
+    }
+};

src/core/error-handler.js

@@ -0,0 +1,231 @@
+/**
+ * 错误处理器
+ * 统一管理应用中的错误处理逻辑
+ */
+
+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
+    });
+}

src/core/event-bus.js

@@ -0,0 +1,10 @@
+// 轻量事件总线，避免模块之间的直接耦合
+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 };
+}

src/modules/api-keys.js

@@ -0,0 +1,390 @@
+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;
+    }
+};

src/modules/config-editor.js

@@ -0,0 +1,272 @@
+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);
+            }
+        });
+    }
+};

src/modules/language.js

@@ -0,0 +1,37 @@
+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);
+    }
+};

src/modules/login.js

@@ -0,0 +1,281 @@
+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 || '';
+        }
+    }
+};

src/modules/logs.js

@@ -0,0 +1,657 @@
+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);
+            }
+        });
+    }
+};

src/modules/navigation.js

@@ -0,0 +1,103 @@
+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');
+                    }
+                }
+            }
+        }
+    }
+};

src/modules/oauth.js

@@ -0,0 +1,949 @@
+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';
+    }
+};

src/modules/settings.js

@@ -0,0 +1,411 @@
+// 设置与开关相关方法模块
+// 注意：这些函数依赖于在 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
+};

src/modules/theme.js

@@ -0,0 +1,73 @@
+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());
+        }
+    }
+};

src/utils/array.js

@@ -0,0 +1,172 @@
+/**
+ * 数组工具函数模块
+ * 提供数组处理、规范化、排序等功能
+ */
+
+/**
+ * 规范化 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;
+}

src/utils/constants.js

@@ -0,0 +1,282 @@
+/**
+ * 常量配置文件
+ * 集中管理应用中的所有常量，避免魔法数字和硬编码字符串
+ */
+
+// ============================================================
+// 时间相关常量（毫秒）
+// ============================================================
+
+/**
+ * 配置缓存过期时间（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: '操作失败，请稍后重试'
+};

src/utils/dom.js

@@ -0,0 +1,279 @@
+/**
+ * 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);
+        }
+    };
+}

src/utils/html.js

@@ -0,0 +1,62 @@
+/**
+ * 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;
+}

src/utils/models.js

@@ -0,0 +1,104 @@
+/**
+ * 模型工具函数
+ * 提供模型列表的规范化与去重能力
+ */
+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;
+}

src/utils/secure-storage.js

@@ -0,0 +1,128 @@
+// 简单的浏览器端加密存储封装
+// 仅用于避免本地缓存中明文暴露敏感值，无法替代服务端安全控制
+
+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 });
+            }
+        });
+    }
+};

src/utils/string.js

@@ -0,0 +1,116 @@
+/**
+ * 字符串工具函数模块
+ * 提供字符串处理、格式化、掩码等功能
+ */
+
+/**
+ * 遮蔽 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();
+}