fix(logs): improve responsive layout for logs page on mobile and small screens

perf(providers,auth-files): cache status bar data and add auto-refresh
feat(auth-files): add visual status bar for auth file health monitoring
2026-02-03 03:10:50 +08:00 · 2025-12-27 17:07:31 +08:00 · 2025-12-27 15:26:38 +08:00 · 2025-12-27 15:12:38 +08:00 · 2025-12-27 15:02:32 +08:00 · 2025-12-27 14:42:10 +08:00
163 changed files with 25196 additions and 21710 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+  },
+};
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -15,6 +15,9 @@ jobs:
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          fetch-tags: true

      - name: Setup Node.js
        uses: actions/setup-node@v4
@@ -36,27 +39,25 @@ jobs:
          mv index.html management.html
          ls -lh management.html

+      - name: Generate release notes
+        run: |
+          set -euo pipefail
+          current_tag="${GITHUB_REF_NAME}"
+          previous_tag="$(git tag --list 'v*' --sort=-v:refname | grep -v "^${current_tag}$" | head -n 1 || true)"
+          if [ -n "${previous_tag}" ]; then
+            range="${previous_tag}..${current_tag}"
+          else
+            range="${current_tag}"
+          fi
+
+          : > release-notes.md
+          git log --pretty=format:"- %h %s" "${range}" >> release-notes.md
+
      - name: Create Release
        uses: softprops/action-gh-release@v1
        with:
          files: dist/management.html
-          body: |
-            ## CLI Proxy API Management Center - ${{ github.ref_name }}
-
-            ### Download and Usage
-            1. Download the `management.html` file
-            2. Open it directly in your browser
-            3. All assets (CSS, JavaScript, images) are bundled into this single file
-
-            ### Features
-            - Single file, no external dependencies required
-            - Complete management interface for CLI Proxy API
-            - Support for local and remote connections
-            - Multi-language support (Chinese/English)
-            - Dark/Light theme support
-
-            ---
-            🤖 Generated with GitHub Actions
+          body_path: release-notes.md
          draft: false
          prerelease: false
        env:
--- a/.gitignore
+++ b/.gitignore
@@ -1,28 +1,29 @@
-# Node modules
-node_modules/
-
-# Build output
-dist/
-
-# Temporary build files
-index.build.html
-
-# npm lock files
-package-lock.json
-
-# IDE and editor files
-.vscode/
-.idea/
-*.swp
-*.swo
-*~
-
-# OS files
-.DS_Store
-Thumbs.db
-
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+api.md
+usage.json
 CLAUDE.md
-.claude
 AGENTS.md
-.codex
-.serena
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+settings.local.json
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "always"
+}
--- a/BUILD_RELEASE.md
+++ b/BUILD_RELEASE.md
@@ -1,69 +0,0 @@
-# Build and Release Instructions
-
-## Overview
-
-This project uses webpack to bundle all HTML, CSS, JavaScript, and images into a single all-in-one HTML file. The GitHub workflow automatically builds and releases this file when you create a new tag.
-
-## How to Create a Release
-
-1. Make sure all your changes are committed
-2. Create and push a new tag:
-   ```bash
-   git tag v1.0.0
-   git push origin v1.0.0
-   ```
-3. The GitHub workflow will automatically:
-   - Install dependencies
-   - Build the all-in-one HTML file using webpack
-   - Create a new release with the tag
-   - Upload the bundled HTML file to the release
-
-## Manual Build
-
-To build locally:
-
-```bash
-# Install dependencies
-npm install
-
-# Build the all-in-one HTML file
-npm run build
-```
-
-The output will be in the `dist/` directory as `index.html`.
-
-## How It Works
-
-1. **build-scripts/prepare-html.js**: Pre-build script
-   - Reads the original `index.html`
-   - Removes local CSS and JavaScript references
-   - Generates temporary `index.build.html` for webpack
-
-2. **webpack.config.js**: Configures webpack to bundle all assets
-   - Uses `style-loader` to inline CSS
-   - Uses `asset/inline` to embed images as base64
-   - Uses `html-inline-script-webpack-plugin` to inline JavaScript
-   - Uses `index.build.html` as template (generated dynamically)
-
-3. **bundle-entry.js**: Entry point that imports all resources
-   - Imports CSS files
-   - Imports JavaScript modules
-   - Imports and sets logo image
-
-4. **package.json scripts**:
-   - `prebuild`: Automatically runs before build to generate `index.build.html`
-   - `build`: Runs webpack to bundle everything
-   - `postbuild`: Cleans up temporary `index.build.html` file
-
-5. **.github/workflows/release.yml**: GitHub workflow
-   - Triggers on tag push
-   - Builds the project (prebuild → build → postbuild)
-   - Creates a release with the bundled HTML file
-
-## External Dependencies
-
-The bundled HTML file still relies on these CDN resources:
- Font Awesome (icons)
- Chart.js (charts and graphs)
-
-These are loaded from CDN to keep the file size reasonable and leverage browser caching.
--- a/21
+++ b/21
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Supra4E8C
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -1,107 +1,130 @@
-# Cli-Proxy-API-Management-Center
-This is the modern WebUI for managing the CLI Proxy API.
+# CLI Proxy API Management Center
+
+A single-file WebUI (React + TypeScript) for operating and troubleshooting the **CLI Proxy API** via its **Management API** (config, credentials, logs, and usage).

 [中文文档](README_CN.md)

-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)
+**Main Project**: https://github.com/router-for-me/CLIProxyAPI  
+**Example URL**: https://remote.router-for.me/  
+**Minimum Required Version**: ≥ 6.3.0 (recommended ≥ 6.5.0)

-Since 6.0.19 the WebUI ships with the main program; access it via `/management.html` on the API port once the service is running.
+Since version 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
+## What this is (and isn’t)

-### 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.
+- This repository is the WebUI only. It talks to the CLI Proxy API **Management API** (`/v0/management`) to read/update config, upload credentials, view logs, and inspect usage.
+- It is **not** a proxy and does not forward traffic.

-## How to Use
+## Quick start

-1) **After CLI Proxy API is running (recommended)**  
-   Visit `http://your-server:8317/management.html`.
+### Option A: Use the WebUI bundled in CLIProxyAPI (recommended)

-2) **Direct static use after build**  
-   The single file `dist/index.html` generated by `npm run build`
+1. Start your CLI Proxy API service.
+2. Open: `http://<host>:<api_port>/management.html`
+3. Enter your **management key** and connect.
+
+The address is auto-detected from the current page URL; manual override is supported.
+
+### Option B: Run the dev server

-3) **Local server**
 ```bash
 npm install
-npm start        # http://localhost:3000
-npm run dev      # optional dev port: 3090
-# or
-python -m http.server 8000
+npm run dev
 ```
-   Then open the corresponding localhost URL.

-4) **Configure connection**  
-   The login page shows the detected address; you can override it, enter the management key, and click Connect. Saved credentials use encrypted local storage for auto-login.
+Open `http://localhost:5173`, then connect to your CLI Proxy API instance.

-Tip: The Logs navigation item appears after enabling "Logging to file" in Basic Settings.
+### Option C: Build a single HTML file

-## Tech Stack
+```bash
+npm install
+npm run build
+```

- **Frontend**: Plain HTML, CSS, JavaScript (ES6+)
- **Styling**: CSS3 + Flexbox/Grid with CSS Variables
- **Icons**: Font Awesome 6.4.0
- **Charts**: Chart.js for interactive data visualization
- **Editor/Parsing**: CodeMirror + js-yaml
- **Fonts**: Segoe UI system font
- **Internationalization**: Custom i18n (EN/CN) and theme system (light/dark)
- **API**: RESTful management endpoints with automatic authentication
- **Storage**: LocalStorage with lightweight encryption for preferences/credentials
+- Output: `dist/index.html` (all assets are inlined).
+- For CLIProxyAPI bundling, the release workflow renames it to `management.html`.
+- To preview locally: `npm run preview`

-## Build & Development
+Tip: opening `dist/index.html` via `file://` may be blocked by browser CORS; serving it (preview/static server) is more reliable.

- `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.
+## Connecting to the server
+
+### API address
+
+You can enter any of the following; the UI will normalize it:
+
+- `localhost:8317`
+- `http://192.168.1.10:8317`
+- `https://example.com:8317`
+- `http://example.com:8317/v0/management` (also accepted; the suffix is removed internally)
+
+### Management key (not the same as API keys)
+
+The management key is sent with every request as:
+
+- `Authorization: Bearer <MANAGEMENT_KEY>` (default)
+
+This is different from the proxy `api-keys` you manage inside the UI (those are for client requests to the proxy endpoints).
+
+### Remote management
+
+If you connect from a non-localhost browser, the server must allow remote management (e.g. `allow-remote-management: true`).  
+See `api.md` for the full authentication rules, server-side limits, and edge cases.
+
+## What you can manage (mapped to the UI pages)
+
+- **Dashboard**: connection status, server version/build date, quick counts, model availability snapshot.
+- **Basic Settings**: debug, proxy URL, request retry, quota fallback (switch project/preview models), usage statistics, request logging, file logging, WebSocket auth.
+- **API Keys**: manage proxy `api-keys` (add/edit/delete).
+- **AI Providers**:
+  - Gemini/Codex/Claude key entries (base URL, headers, proxy, model aliases, excluded models, prefix).
+  - OpenAI-compatible providers (multiple API keys, custom headers, model alias import via `/v1/models`, optional browser-side “chat/completions” test).
+  - Ampcode integration (upstream URL/key, force mappings, model mapping table).
+- **Auth Files**: upload/download/delete JSON credentials, filter/search/pagination, runtime-only indicators, view supported models per credential (when the server supports it), manage OAuth excluded models (supports `*` wildcards).
+- **OAuth**: start OAuth/device flows for supported providers, poll status, optionally submit callback `redirect_url`; includes iFlow cookie import.
+- **Usage**: requests/tokens charts (hour/day), per-API & per-model breakdown, cached/reasoning token breakdown, RPM/TPM window, optional cost estimation with locally-saved model pricing.
+- **Config**: edit `/config.yaml` in-browser with YAML highlighting + search, then save/reload.
+- **Logs**: tail logs with incremental polling, auto-refresh, search, hide management traffic, clear logs; download request error log files.
+- **System**: quick links + fetch `/v1/models` (grouped view). Requires at least one proxy API key to query models.
+
+## Build & release notes
+
+- Vite produces a **single HTML** output (`dist/index.html`) with all assets inlined (via `vite-plugin-singlefile`).
+- Tagging `vX.Y.Z` triggers `.github/workflows/release.yml` to publish `dist/management.html`.
+- The UI version shown in the footer is injected at build time (env `VERSION`, git tag, or `package.json` fallback).
+
+## Security notes
+
+- The management key is stored in browser `localStorage` using a lightweight obfuscation format (`enc::v1::...`) to avoid plaintext storage; treat it as sensitive.
+- Use a dedicated browser profile/device for management. Be cautious when enabling remote management and evaluate its exposure surface.

 ## Troubleshooting

-### Connection Issues
-1. Confirm that the CLI Proxy API service is running.
-2. Check if the API address is correct.
-3. Verify that the management key is valid.
-4. Ensure your firewall settings allow the connection.
+- **Can’t connect / 401**: confirm the API address and management key; remote access may require enabling remote management in the server config.
+- **Repeated auth failures**: the server may temporarily block remote IPs.
+- **Logs page missing**: enable “Logging to file” in Basic Settings; the navigation item is shown only when file logging is enabled.
+- **Some features show “unsupported”**: the backend may be too old or the endpoint is disabled/absent (common for model lists per auth file, excluded models, logs).
+- **OpenAI provider test fails**: the test runs in the browser and depends on network/CORS of the provider endpoint; a failure here does not always mean the server cannot reach it.

-### Data Not Updating
-1. Click the "Refresh All" button.
-2. Check your network connection.
-3. Check the browser's console for any error messages.
+## Development

-### Logs & Config Editor
- Logs: Requires server-side logging-to-file; 404 indicates the server build is too old or logging is disabled.
- Config editor: Requires `/config.yaml` endpoint; keep YAML valid before saving.
-
-### Usage Stats
- Enable "Usage statistics" if charts stay empty; data resets on server restart.
-
-## Project Structure
-```
-├── index.html
-├── styles.css
-├── app.js
-├── i18n.js
-├── src/                # Core/modules/utils source code
-├── build.cjs           # Webpack build script
-├── bundle-entry.js     # Bundling entry
-├── build-scripts/      # Build utilities
-│   └── prepare-html.js
-├── dist/               # Bundled single-file output
-├── BUILD_RELEASE.md
-├── LICENSE
-├── README.md
-└── README_CN.md
+```bash
+npm run dev        # Vite dev server
+npm run build      # tsc + Vite build
+npm run preview    # serve dist locally
+npm run lint       # ESLint (fails on warnings)
+npm run format     # Prettier
+npm run type-check # tsc --noEmit
 ```

 ## Contributing
-We welcome Issues and Pull Requests to improve this project! We encourage more developers to contribute to the enhancement of this WebUI!

-This project is licensed under the MIT License.
+Issues and PRs are welcome. Please include:
+
+- Reproduction steps (server version + UI version)
+- Screenshots for UI changes
+- Verification notes (`npm run lint`, `npm run type-check`)
+
+## License
+
+MIT
--- a/README_CN.md
+++ b/README_CN.md
@@ -1,106 +1,130 @@
-# Cli-Proxy-API-Management-Center
-这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
+# CLI Proxy API 管理中心
+
+用于管理与排障 **CLI Proxy API** 的单文件 WebUI（React + TypeScript），通过 **Management API** 完成配置、凭据、日志与统计等运维工作。

 [English](README.md)

-主项目: https://github.com/router-for-me/CLIProxyAPI  
-示例网站: https://remote.router-for.me/  
-最低版本 ≥ 6.3.0（推荐 ≥ 6.5.0）
+**主项目**: https://github.com/router-for-me/CLIProxyAPI  
+**示例地址**: https://remote.router-for.me/  
+**最低版本要求**: ≥ 6.3.0（推荐 ≥ 6.5.0）

-自 6.0.19 起 WebUI 已集成到主程序中，启动后可通过 `/management.html` 访问。
+Since version 6.0.19, the WebUI ships with the main program; access it via `/management.html` on the API port once the service is running.

-## 功能特点
+## 这是什么（以及不是什么）

-### 主要能力
- **登录与体验**: 自动检测当前地址（可自定义/重置），加密自动登录，语言/主题切换，响应式布局与移动端侧边栏。
- **基础设置**: 调试、代理 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 版本。
- **安全与偏好**: 密钥遮蔽、加密本地存储，主题/语言/侧边栏状态持久化，实时状态反馈。
+- 本仓库只包含 Web 管理界面本身，通过 CLI Proxy API 的 **Management API**（`/v0/management`）读取/修改配置、上传凭据、查看日志与使用统计。
+- 它 **不是** 代理本体，不参与流量转发。

-## 使用方法
+## 快速开始

-1) **主程序启动后使用（推荐）**  
-   访问 `http://您的服务器:8317/management.html`。
+### 方式 A：使用 CLIProxyAPI 自带的 WebUI（推荐）

-2) **构建后直接静态打开**  
-   `npm run build` 生成的 `dist/index.html` 单文件
+1. 启动 CLI Proxy API 服务。
+2. 打开：`http://<host>:<api_port>/management.html`
+3. 输入 **管理密钥** 并连接。
+
+页面会根据当前地址自动推断 API 地址，也支持手动修改。
+
+### 方式 B：开发调试

-3) **本地服务器**
 ```bash
 npm install
-npm start        # 默认 http://localhost:3000
-npm run dev      # 可选开发端口 3090
-# 或
-python -m http.server 8000
+npm run dev
 ```
-   然后在浏览器打开对应的 localhost 地址。

-4) **配置连接**  
-   登录页会显示自动检测的地址，可自行修改，填入管理密钥后点击连接。凭据将加密保存以便下次自动登录。
+打开 `http://localhost:5173`，然后连接到你的 CLI Proxy API 实例。

-提示: 开启“写入日志文件”后才会显示“日志查看”导航。
+### 方式 C：构建单文件 HTML

-## 技术栈
-
- **前端**: 纯 HTML、CSS、JavaScript (ES6+)
- **样式**: CSS3 + Flexbox/Grid，支持 CSS 变量
- **图标**: Font Awesome 6.4.0
- **图表**: Chart.js 交互式数据可视化
- **编辑/解析**: CodeMirror + js-yaml
- **国际化**: 自定义 i18n（中/英）与主题系统（明/暗）
- **API**: RESTful 管理接口，自动附加认证
- **存储**: LocalStorage 轻量加密存储偏好与凭据
-
-## 构建与开发
-
- `npm run build` 通过 webpack（`build.cjs`、`bundle-entry.js`、`build-scripts/prepare-html.js`）打包为 `dist/index.html`。
- Font Awesome、Chart.js、CodeMirror 仍走 CDN，减小打包体积。
- 开发可用 `npm start` (3000) / `npm run dev` (3090) 或 `python -m http.server` 静态托管。
-
-## 故障排除
-
-### 连接问题
-1. 确认 CLI Proxy API 服务正在运行
-2. 检查 API 地址是否正确
-3. 验证管理密钥是否有效
-4. 确认防火墙设置允许连接
-
-### 数据不更新
-1. 点击"刷新全部"按钮
-2. 检查网络连接
-3. 查看浏览器控制台错误信息
-
-### 日志与配置编辑
- 日志: 需要服务端开启写文件日志；返回 404 说明版本过旧或未启用。
- 配置编辑: 依赖 `/config.yaml` 接口，保存前请确保 YAML 语法正确。
-
-### 使用统计
- 若图表为空，请开启“使用统计”；数据在服务重启后会清空。
-
-## 项目结构
+```bash
+npm install
+npm run build
 ```
-├── index.html
-├── styles.css
-├── app.js
-├── i18n.js
-├── src/                # 核心/模块/工具源码
-├── build.cjs           # Webpack 构建脚本
-├── bundle-entry.js     # 打包入口
-├── build-scripts/      # 构建工具
-│   └── prepare-html.js
-├── dist/               # 打包输出单文件
-├── BUILD_RELEASE.md
-├── LICENSE
-├── README.md
-└── README_CN.md
+
+- 构建产物：`dist/index.html`（资源已全部内联）。
+- 在 CLIProxyAPI 的发布流程里会重命名为 `management.html`。
+- 本地预览：`npm run preview`
+
+提示：直接用 `file://` 打开 `dist/index.html` 可能遇到浏览器 CORS 限制；更稳妥的方式是用预览/静态服务器打开。
+
+## 连接说明
+
+### API 地址怎么填
+
+以下格式均可，WebUI 会自动归一化：
+
+- `localhost:8317`
+- `http://192.168.1.10:8317`
+- `https://example.com:8317`
+- `http://example.com:8317/v0/management`（也可填写，后缀会被自动去除）
+
+### 管理密钥（注意：不是 API Keys）
+
+管理密钥会以如下方式随请求发送：
+
+- `Authorization: Bearer <MANAGEMENT_KEY>`（默认）
+
+这与 WebUI 中“API Keys”页面管理的 `api-keys` 不同：后者是代理对外接口（如 OpenAI 兼容接口）给客户端使用的鉴权 key。
+
+### 远程管理
+
+当你从非 localhost 的浏览器访问时，服务端通常需要开启远程管理（例如 `allow-remote-management: true`）。  
+完整鉴权规则、限制与边界情况请查看 `api.md`。
+
+## 功能一览（按页面对应）
+
+- **仪表盘**：连接状态、服务版本/构建时间、关键数量概览、可用模型概览。
+- **基础设置**：调试开关、代理 URL、请求重试、配额回退（切项目/切预览模型）、使用统计、请求日志、文件日志、WebSocket 鉴权。
+- **API Keys**：管理代理 `api-keys`（增/改/删）。
+- **AI 提供商**：
+  - Gemini/Codex/Claude 配置（Base URL、Headers、代理、模型别名、排除模型、Prefix）。
+  - OpenAI 兼容提供商（多 Key、Header、自助从 `/v1/models` 拉取并导入模型别名、可选浏览器侧 `chat/completions` 测试）。
+  - Ampcode 集成（上游地址/密钥、强制映射、模型映射表）。
+- **认证文件**：上传/下载/删除 JSON 凭据，筛选/搜索/分页，标记 runtime-only；查看单个凭据可用模型（依赖后端支持）；管理 OAuth 排除模型（支持 `*` 通配符）。
+- **OAuth**：对支持的提供商发起 OAuth/设备码流程，轮询状态；可选提交回调 `redirect_url`；包含 iFlow Cookie 导入。
+- **使用统计**：按小时/天图表、按 API 与按模型统计、缓存/推理 Token 拆分、RPM/TPM 时间窗、可选本地保存的模型价格用于费用估算。
+- **配置文件**：浏览器内编辑 `/config.yaml`（YAML 高亮 + 搜索），保存/重载。
+- **日志**：增量拉取日志、自动刷新、搜索、隐藏管理端流量、清空日志；下载请求错误日志文件。
+- **系统信息**：快捷链接 + 拉取 `/v1/models` 并分组展示（需要至少一个代理 API Key 才能查询模型）。
+
+## 构建与发布说明
+
+- 使用 Vite 输出 **单文件 HTML**（`dist/index.html`），资源全部内联（`vite-plugin-singlefile`）。
+- 打 `vX.Y.Z` 标签会触发 `.github/workflows/release.yml`，发布 `dist/management.html`。
+- 页脚显示的 UI 版本在构建期注入（优先使用环境变量 `VERSION`，否则使用 git tag / `package.json`）。
+
+## 安全提示
+
+- 管理密钥会存入浏览器 `localStorage`，并使用轻量混淆格式（`enc::v1::...`）避免明文；仍应视为敏感信息。
+- 建议使用独立浏览器配置/设备进行管理；开启远程管理时请谨慎评估暴露面。
+
+## 常见问题
+
+- **无法连接 / 401**：确认 API 地址与管理密钥；远程访问可能需要服务端开启远程管理。
+- **反复输错密钥**：服务端可能对远程 IP 进行临时封禁。
+- **日志页面不显示**：需要在“基础设置”里开启“写入日志文件”，导航项才会出现。
+- **功能提示不支持**：多为后端版本较旧或接口未启用/不存在（如：认证文件模型列表、排除模型、日志相关接口）。
+- **OpenAI 提供商测试失败**：测试在浏览器侧执行，会受网络与 CORS 影响；这里失败不一定代表服务端不可用。
+
+## 开发命令
+
+```bash
+npm run dev        # 启动开发服务器
+npm run build      # tsc + Vite 构建
+npm run preview    # 本地预览 dist
+npm run lint       # ESLint（warnings 视为失败）
+npm run format     # Prettier
+npm run type-check # tsc --noEmit
 ```

 ## 贡献
-欢迎提交 Issue 和 Pull Request 来改进这个项目！我们欢迎更多的大佬来对这个 WebUI 进行更新！

-本项目采用 MIT 许可。
+欢迎提 Issue 与 PR。建议附上：
+
+- 复现步骤（服务端版本 + UI 版本）
+- UI 改动截图
+- 验证记录（`npm run lint`、`npm run type-check`）
+
+## 许可证
+
+MIT
--- a/app.js
+++ b/app.js
--- a/build-scripts/prepare-html.js
+++ b/build-scripts/prepare-html.js
@@ -1,30 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-// Read the original index.html
-const indexPath = path.resolve(__dirname, '../index.html');
-const outputPath = path.resolve(__dirname, '../index.build.html');
-
-let htmlContent = fs.readFileSync(indexPath, 'utf8');
-
-// Remove local CSS reference
-htmlContent = htmlContent.replace(
-    /<link rel="stylesheet" href="styles\.css">\n?/g,
-    ''
-);
-
-// Remove local JavaScript references
-htmlContent = htmlContent.replace(
-    /<script src="i18n\.js"><\/script>\n?/g,
-    ''
-);
-
-htmlContent = htmlContent.replace(
-    /<script src="app\.js"><\/script>\n?/g,
-    ''
-);
-
-// Write the modified HTML to a temporary build file
-fs.writeFileSync(outputPath, htmlContent, 'utf8');
-
-console.log('✓ Generated index.build.html for webpack processing');
--- a/build.cjs
+++ b/build.cjs
@@ -1,225 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-
-const projectRoot = __dirname;
-const distDir = path.join(projectRoot, 'dist');
-
-const sourceFiles = {
-    html: path.join(projectRoot, 'index.html'),
-    css: path.join(projectRoot, 'styles.css'),
-    i18n: path.join(projectRoot, 'i18n.js'),
-    app: path.join(projectRoot, 'app.js')
-};
-
-const logoCandidates = ['logo.png', 'logo.jpg', 'logo.jpeg', 'logo.svg', 'logo.webp', 'logo.gif'];
-const logoMimeMap = {
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.svg': 'image/svg+xml',
-    '.webp': 'image/webp',
-    '.gif': 'image/gif'
-};
-
-function readFile(filePath) {
-    try {
-        return fs.readFileSync(filePath, 'utf8');
-    } catch (err) {
-        console.error(`读取文件失败: ${filePath}`);
-        throw err;
-    }
-}
-
-function readBinary(filePath) {
-    try {
-        return fs.readFileSync(filePath);
-    } catch (err) {
-        console.error(`读取文件失败: ${filePath}`);
-        throw err;
-    }
-}
-
-function escapeForScript(content) {
-    return content.replace(/<\/(script)/gi, '<\\/$1');
-}
-
-function escapeForStyle(content) {
-    return content.replace(/<\/(style)/gi, '<\\/$1');
-}
-
-function getVersion() {
-    // 1. 优先从环境变量获取（GitHub Actions 会设置）
-    if (process.env.VERSION) {
-        return process.env.VERSION;
-    }
-    
-    // 2. 尝试从 git tag 获取
-    try {
-        const { execSync } = require('child_process');
-        const gitTag = execSync('git describe --tags --exact-match 2>/dev/null || git describe --tags 2>/dev/null || echo ""', { encoding: 'utf8' }).trim();
-        if (gitTag) {
-            return gitTag;
-        }
-    } catch (err) {
-        console.warn('无法从 git 获取版本号');
-    }
-    
-    // 3. 回退到 package.json
-    try {
-        const packageJson = JSON.parse(fs.readFileSync(path.join(projectRoot, 'package.json'), 'utf8'));
-        return 'v' + packageJson.version;
-    } catch (err) {
-        console.warn('无法从 package.json 读取版本号');
-    }
-    
-    // 4. 最后使用默认值
-    return 'v0.0.0-dev';
-}
-
-function ensureDistDir() {
-    if (fs.existsSync(distDir)) {
-        fs.rmSync(distDir, { recursive: true, force: true });
-    }
-    fs.mkdirSync(distDir);
-}
-
-// 匹配各种 import 语句
-const importRegex = /import\s+(?:{[^}]*}|[\w*\s,{}]+)\s+from\s+['"]([^'"]+)['"];?/gm;
-// 匹配 export 关键字（包括 export const, export function, export class, export async function 等）
-const exportRegex = /^export\s+(?=const|let|var|function|class|default|async)/gm;
-// 匹配单独的 export {} 或 export { ... } from '...'
-const exportBraceRegex = /^export\s*{[^}]*}\s*(?:from\s+['"][^'"]+['"];?)?$/gm;
-
-function bundleApp(entryPath) {
-    const visited = new Set();
-    const modules = [];
-
-    function inlineFile(filePath) {
-        let content = readFile(filePath);
-        const dir = path.dirname(filePath);
-
-        // 收集所有 import 语句
-        const imports = [];
-        content = content.replace(importRegex, (match, specifier) => {
-            const targetPath = path.resolve(dir, specifier);
-            const normalized = path.normalize(targetPath);
-            if (!fs.existsSync(normalized)) {
-                throw new Error(`无法解析模块: ${specifier} (from ${filePath})`);
-            }
-            if (!visited.has(normalized)) {
-                visited.add(normalized);
-                imports.push(normalized);
-            }
-            return ''; // 移除 import 语句
-        });
-
-        // 移除 export 关键字
-        content = content.replace(exportRegex, '');
-        content = content.replace(exportBraceRegex, '');
-
-        // 处理依赖的模块
-        for (const importPath of imports) {
-            const moduleContent = inlineFile(importPath);
-            const relativePath = path.relative(projectRoot, importPath);
-            modules.push(`\n// ============ ${relativePath} ============\n${moduleContent}\n`);
-        }
-
-        return content;
-    }
-
-    const mainContent = inlineFile(entryPath);
-
-    // 将所有模块内容组合在一起，模块在前，主文件在后
-    return modules.join('\n') + '\n// ============ Main ============\n' + mainContent;
-}
-
-
-function loadLogoDataUrl() {
-    for (const candidate of logoCandidates) {
-        const filePath = path.join(projectRoot, candidate);
-        if (!fs.existsSync(filePath)) continue;
-
-        const ext = path.extname(candidate).toLowerCase();
-        const mime = logoMimeMap[ext];
-        if (!mime) {
-            console.warn(`未知 Logo 文件类型，跳过内联: ${candidate}`);
-            continue;
-        }
-
-        const buffer = readBinary(filePath);
-        const base64 = buffer.toString('base64');
-        return `data:${mime};base64,${base64}`;
-    }
-    return null;
-}
-
-function build() {
-    ensureDistDir();
-
-    let html = readFile(sourceFiles.html);
-    const css = escapeForStyle(readFile(sourceFiles.css));
-    const i18n = escapeForScript(readFile(sourceFiles.i18n));
-    const bundledApp = bundleApp(sourceFiles.app);
-    const app = escapeForScript(bundledApp);
-    
-    // 获取版本号并替换
-    const version = getVersion();
-    console.log(`使用版本号: ${version}`);
-    html = html.replace(/__VERSION__/g, version);
-
-    html = html.replace(
-        '<link rel="stylesheet" href="styles.css">',
-        () => `<style>
-${css}
-</style>`
-    );
-
-    html = html.replace(
-        '<script src="i18n.js"></script>',
-        () => `<script>
-${i18n}
-</script>`
-    );
-
-    const scriptTagRegex = /<script[^>]*src="app\.js"[^>]*><\/script>/i;
-    if (scriptTagRegex.test(html)) {
-        html = html.replace(
-            scriptTagRegex,
-            () => `<script>
-${app}
-</script>`
-        );
-    } else {
-        console.warn('未找到 app.js 脚本标签，未内联应用代码。');
-    }
-
-    const logoDataUrl = loadLogoDataUrl();
-    if (logoDataUrl) {
-        const logoScript = `<script>window.__INLINE_LOGO__ = "${logoDataUrl}";</script>`;
-        const closingBodyTag = '</body>';
-        const closingBodyIndex = html.lastIndexOf(closingBodyTag);
-        if (closingBodyIndex !== -1) {
-            html = `${html.slice(0, closingBodyIndex)}${logoScript}\n${closingBodyTag}${html.slice(closingBodyIndex + closingBodyTag.length)}`;
-        } else {
-            html += `\n${logoScript}`;
-        }
-    } else {
-        console.warn('未找到可内联的 Logo 文件，将保持运行时加载。');
-    }
-
-    const outputPath = path.join(distDir, 'index.html');
-    fs.writeFileSync(outputPath, html, 'utf8');
-
-    console.log('构建完成: dist/index.html');
-}
-
-try {
-    build();
-} catch (error) {
-    console.error('构建失败:', error);
-    process.exit(1);
-}
-
-
--- a/bundle-entry.js
+++ b/bundle-entry.js
@@ -1,25 +0,0 @@
-// Import CSS
-import './styles.css';
-
-// Import JavaScript modules
-import './i18n.js';
-import './app.js';
-
-// Import logo image
-import logoImg from './logo.jpg';
-
-// Set logo after DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-    const loginLogo = document.getElementById('login-logo');
-    const siteLogo = document.getElementById('site-logo');
-
-    if (loginLogo) {
-        loginLogo.src = logoImg;
-        loginLogo.style.display = 'block';
-    }
-
-    if (siteLogo) {
-        siteLogo.src = logoImg;
-        siteLogo.style.display = 'block';
-    }
-});
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,30 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    },
+  },
+);
--- a/i18n.js
+++ b/i18n.js
--- a/index.html
+++ b/index.html
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,31 +1,45 @@
-{
-  "name": "cli-proxy-api-webui",
-  "version": "1.0.0",
-  "description": "CLI Proxy API 管理界面",
-  "main": "index.html",
-  "type": "module",
-  "scripts": {
-    "start": "npx serve .",
-    "dev": "npx serve . -l 3090",
-    "build": "node build.cjs",
-    "lint": "echo '使用浏览器开发者工具检查代码'"
-  },
-  "keywords": [
-    "cli-proxy-api",
-    "webui",
-    "management",
-    "api"
-  ],
-  "author": "CLI Proxy API WebUI",
-  "license": "MIT",
-  "devDependencies": {
-    "serve": "^14.2.1"
-  },
-  "engines": {
-    "node": ">=14.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "local"
-  }
-}
+{
+  "name": "cli-proxy-webui-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,scss}\"",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@uiw/react-codemirror": "^4.25.3",
+    "axios": "^1.13.2",
+    "chart.js": "^4.5.1",
+    "i18next": "^25.7.1",
+    "react": "^19.2.1",
+    "react-chartjs-2": "^5.3.1",
+    "react-dom": "^19.2.1",
+    "react-i18next": "^16.4.0",
+    "react-router-dom": "^7.10.1",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "prettier": "^3.7.4",
+    "sass": "^1.94.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vite-plugin-singlefile": "^2.3.0"
+  }
+}
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useState } from 'react';
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { LoginPage } from '@/pages/LoginPage';
+import { DashboardPage } from '@/pages/DashboardPage';
+import { SettingsPage } from '@/pages/SettingsPage';
+import { ApiKeysPage } from '@/pages/ApiKeysPage';
+import { AiProvidersPage } from '@/pages/AiProvidersPage';
+import { AuthFilesPage } from '@/pages/AuthFilesPage';
+import { OAuthPage } from '@/pages/OAuthPage';
+import { UsagePage } from '@/pages/UsagePage';
+import { ConfigPage } from '@/pages/ConfigPage';
+import { LogsPage } from '@/pages/LogsPage';
+import { SystemPage } from '@/pages/SystemPage';
+import { NotificationContainer } from '@/components/common/NotificationContainer';
+import { SplashScreen } from '@/components/common/SplashScreen';
+import { MainLayout } from '@/components/layout/MainLayout';
+import { ProtectedRoute } from '@/router/ProtectedRoute';
+import { useAuthStore, useLanguageStore, useThemeStore } from '@/stores';
+
+const SPLASH_DURATION = 1500;
+const SPLASH_FADE_DURATION = 400;
+
+function App() {
+  const initializeTheme = useThemeStore((state) => state.initializeTheme);
+  const language = useLanguageStore((state) => state.language);
+  const setLanguage = useLanguageStore((state) => state.setLanguage);
+  const restoreSession = useAuthStore((state) => state.restoreSession);
+
+  const [splashReadyToFade, setSplashReadyToFade] = useState(false);
+  const [showSplash, setShowSplash] = useState(true);
+  const [authReady, setAuthReady] = useState(false);
+
+  useEffect(() => {
+    const cleanupTheme = initializeTheme();
+    void restoreSession().finally(() => {
+      setAuthReady(true);
+    });
+    return cleanupTheme;
+  }, [initializeTheme, restoreSession]);
+
+  useEffect(() => {
+    setLanguage(language);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // 仅用于首屏同步 i18n 语言
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSplashReadyToFade(true);
+    }, SPLASH_DURATION - SPLASH_FADE_DURATION);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleSplashFinish = useCallback(() => {
+    setShowSplash(false);
+  }, []);
+
+  if (showSplash) {
+    return (
+      <SplashScreen
+        fadeOut={splashReadyToFade && authReady}
+        onFinish={handleSplashFinish}
+      />
+    );
+  }
+
+  return (
+    <HashRouter>
+      <NotificationContainer />
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route
+          path="/"
+          element={
+            <ProtectedRoute>
+              <MainLayout />
+            </ProtectedRoute>
+          }
+        >
+          <Route index element={<DashboardPage />} />
+          <Route path="dashboard" element={<DashboardPage />} />
+          <Route path="settings" element={<SettingsPage />} />
+          <Route path="api-keys" element={<ApiKeysPage />} />
+          <Route path="ai-providers" element={<AiProvidersPage />} />
+          <Route path="auth-files" element={<AuthFilesPage />} />
+          <Route path="oauth" element={<OAuthPage />} />
+          <Route path="usage" element={<UsagePage />} />
+          <Route path="config" element={<ConfigPage />} />
+          <Route path="logs" element={<LogsPage />} />
+          <Route path="system" element={<SystemPage />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Route>
+      </Routes>
+    </HashRouter>
+  );
+}
+
+export default App;
--- a/src/assets/icons/amp.svg
+++ b/src/assets/icons/amp.svg
@@ -0,0 +1,6 @@
+<svg width="400" height="400" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9197 13.61L17.3816 26.566L14.242 27.4049L11.2645 16.2643L0.119926 13.2906L0.957817 10.15L13.9197 13.61Z" fill="#F34E3F"/>
+<path d="M13.7391 16.0892L4.88169 24.9056L2.58872 22.6019L11.4461 13.7865L13.7391 16.0892Z" fill="#F34E3F"/>
+<path d="M18.9386 8.58315L22.4005 21.5392L19.2609 22.3781L16.2833 11.2374L5.13879 8.26381L5.97668 5.12318L18.9386 8.58315Z" fill="#F34E3F"/>
+<path d="M23.9803 3.55632L27.4422 16.5124L24.3025 17.3512L21.325 6.21062L10.1805 3.23698L11.0183 0.0963593L23.9803 3.55632Z" fill="#F34E3F"/>
+</svg>
--- a/src/assets/icons/antigravity.svg
+++ b/src/assets/icons/antigravity.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: visioncortex VTracer 0.6.4 -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="64" height="59">
+<path d="M0,0 L8,0 L14,4 L19,14 L27,40 L32,50 L36,54 L35,59 L30,59 L22,52 L11,35 L6,33 L-1,34 L-6,39 L-14,52 L-22,59 L-28,59 L-27,53 L-22,47 L-17,34 L-10,12 L-5,3 Z " fill="#3789F9" transform="translate(28,0)"/>
+<path d="M0,0 L8,0 L14,4 L19,14 L25,35 L21,34 L16,29 L11,26 L7,20 L7,18 L2,16 L-3,15 L-8,18 L-12,19 L-9,9 L-4,2 Z " fill="#6D80D8" transform="translate(28,0)"/>
+<path d="M0,0 L8,0 L14,4 L19,14 L20,19 L13,15 L10,12 L3,10 L-1,8 L-7,7 L-4,2 Z " fill="#D78240" transform="translate(28,0)"/>
+<path d="M0,0 L5,1 L10,4 L12,9 L1,8 L-5,13 L-10,21 L-13,26 L-16,26 L-9,5 L-4,2 Z M6,7 Z " fill="#3294CC" transform="translate(25,14)"/>
+<path d="M0,0 L5,2 L10,10 L12,18 L5,14 L1,10 L0,4 L-3,3 L0,2 Z " fill="#E45C49" transform="translate(36,1)"/>
+<path d="M0,0 L9,1 L12,3 L12,5 L7,6 L4,8 L-1,11 L-5,12 L-2,2 Z " fill="#90AE64" transform="translate(21,7)"/>
+<path d="M0,0 L5,1 L5,4 L-2,7 L-7,11 L-11,10 L-9,5 L-4,2 Z " fill="#53A89A" transform="translate(25,14)"/>
+<path d="M0,0 L5,0 L16,9 L17,13 L12,12 L8,9 L8,7 L4,5 L0,2 Z " fill="#B5677D" transform="translate(33,11)"/>
+<path d="M0,0 L6,0 L14,6 L19,11 L23,12 L22,15 L15,12 L10,8 L10,6 L4,5 Z " fill="#778998" transform="translate(27,12)"/>
+<path d="M0,0 L4,2 L-11,17 L-12,14 L-5,4 Z " fill="#3390DF" transform="translate(26,21)"/>
+<path d="M0,0 L2,1 L-4,5 L-9,9 L-13,13 L-14,10 L-13,7 L-6,4 L-3,1 Z " fill="#3FA1B7" transform="translate(27,18)"/>
+<path d="M0,0 L4,0 L9,5 L13,6 L12,9 L5,6 L0,2 Z " fill="#8277BB" transform="translate(37,18)"/>
+<path d="M0,0 L5,1 L7,6 L-2,5 Z M1,4 Z " fill="#4989CF" transform="translate(30,17)"/>
+<path d="M0,0 L5,1 L2,3 L-3,6 L-7,7 L-6,3 Z " fill="#71B774" transform="translate(23,12)"/>
+<path d="M0,0 L7,1 L9,7 L5,6 L0,1 Z " fill="#6687E9" transform="translate(44,28)"/>
+<path d="M0,0 L7,0 L5,1 L5,3 L8,4 L4,5 L-2,4 Z " fill="#C7AF38" transform="translate(23,3)"/>
+<path d="M0,0 L8,0 L8,3 L4,4 L-4,3 Z " fill="#EF842A" transform="translate(28,0)"/>
+<path d="M0,0 L7,4 L7,6 L10,6 L11,10 L4,6 L0,2 Z " fill="#CD5D67" transform="translate(37,9)"/>
+<path d="M0,0 L5,2 L9,8 L8,11 L2,3 L0,2 Z " fill="#F35241" transform="translate(36,1)"/>
+<path d="M0,0 L8,2 L9,6 L4,5 L0,2 Z " fill="#A667A2" transform="translate(41,18)"/>
+<path d="M0,0 L9,1 L8,3 L-2,3 Z " fill="#A4B34C" transform="translate(21,7)"/>
+<path d="M0,0 L2,0 L7,5 L8,7 L3,6 L0,2 Z " fill="#617FCF" transform="translate(35,18)"/>
+<path d="M0,0 L5,2 L8,7 L4,5 L0,2 Z " fill="#9D7784" transform="translate(33,11)"/>
+<path d="M0,0 L6,2 L6,4 L0,3 Z " fill="#BC7F59" transform="translate(31,7)"/>
+</svg>
--- a/src/assets/icons/claude.svg
+++ b/src/assets/icons/claude.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"></path></svg>
--- a/src/assets/icons/gemini.svg
+++ b/src/assets/icons/gemini.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Gemini</title><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="#3186FF"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-0)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-1)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-2)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-0" x1="7" x2="11" y1="15.5" y2="12"><stop stop-color="#08B962"></stop><stop offset="1" stop-color="#08B962" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-1" x1="8" x2="11.5" y1="5.5" y2="11"><stop stop-color="#F94543"></stop><stop offset="1" stop-color="#F94543" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-2" x1="3.5" x2="17.5" y1="13.5" y2="12"><stop stop-color="#FABC12"></stop><stop offset=".46" stop-color="#FABC12" stop-opacity="0"></stop></linearGradient></defs></svg>
--- a/src/assets/icons/iflow.svg
+++ b/src/assets/icons/iflow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="32" height="32" viewBox="0 0 32 32"><defs><filter id="master_svg0_278_51503" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1" height="1"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="1.3333334922790527"/><feComposite in2="SourceAlpha" operator="in" result="effect1_foregroundBlur"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_foregroundBlur" result="shape"/></filter><linearGradient x1="0.07353696972131729" y1="0.12899449467658997" x2="0.9907095821060244" y2="0.9383787344260006" id="master_svg1_93_40276"><stop offset="0%" stop-color="#5C5CFF" stop-opacity="1"/><stop offset="100%" stop-color="#AE5CFF" stop-opacity="1"/></linearGradient></defs><g><g filter="url(#master_svg0_278_51503)"><rect x="0" y="0" width="32" height="32" rx="16" fill="#F0F2F5" fill-opacity="0"/></g><g><g><path d="M31.843111328125,14.751C31.315411328125,7.18121,25.497411328125,1.04691,17.966011328125,0.119698C10.434711328125,-0.807512,3.302541328125,3.73244,0.954596328125,10.9482C0.345662328125,12.8248,1.732821328125,14.751,3.705641328125,14.751C4.950051328125,14.7517,6.055631328125,13.9569,6.451401328125,12.7772C7.497331328125,9.65101,10.504411328125,3.91401,18.482011328125,3.91401Q29.445911328125,3.91401,31.843111328125,14.751ZM9.127681328125,17.3314L9.127681328125,13.0862Q9.127681328125,13.0022,9.144081328125,12.9198Q9.160481328125,12.8373,9.192641328125,12.7597Q9.224801328125,12.682,9.271501328125,12.6122Q9.318191328125,12.5423,9.377621328125,12.4828Q9.437051328125,12.4234,9.506931328125,12.3767Q9.576811328125,12.33,9.654461328125,12.2979Q9.732111328125,12.2657,9.814541328125,12.2493Q9.896971328125,12.2329,9.981021328125,12.2329L11.049211328125,12.2329Q11.133211328125,12.2329,11.215711328125,12.2493Q11.298111328125,12.2657,11.375811328125,12.2979Q11.453411328125,12.33,11.523311328125,12.3767Q11.593211328125,12.4234,11.652611328125,12.4828Q11.712011328125,12.5423,11.758711328125,12.6122Q11.805411328125,12.682,11.837611328125,12.7597Q11.869711328125,12.8373,11.886111328125,12.9198Q11.902511328125,13.0022,11.902511328125,13.0862L11.902511328125,17.3314Q11.902511328125,17.4154,11.886111328125,17.4978Q11.869711328125,17.5803,11.837611328125,17.6579Q11.805411328125,17.7356,11.758711328125,17.8055Q11.712011328125,17.8753,11.652611328125,17.9348Q11.593211328125,17.9942,11.523311328125,18.0409Q11.453411328125,18.0876,11.375811328125,18.1197Q11.298111328125,18.1519,11.215711328125,18.1683Q11.133211328125,18.1847,11.049211328125,18.1847L9.981021328125,18.1847Q9.896971328125,18.1847,9.814541328125,18.1683Q9.732111328125,18.1519,9.654461328125,18.1197Q9.576811328125,18.0876,9.506931328125,18.0409Q9.437051328125,17.9942,9.377621328125,17.9348Q9.318191328125,17.8753,9.271501328125,17.8055Q9.224801328125,17.7356,9.192641328125,17.6579Q9.160481328125,17.5803,9.144081328125,17.4978Q9.127681328125,17.4154,9.127681328125,17.3314ZM17.273611328125,17.3295C17.272611328125,17.8015,17.654911328125,18.1847,18.126911328125,18.1847L19.408411328125,18.1847C19.879011328125,18.1847,20.260711328125,17.8038,20.261811328125,17.3332L20.266411328125,15.2107L20.266411328125,15.2069L20.261811328125,13.0844C20.260711328125,12.6138,19.879011328125,12.2329,19.408411328125,12.2329L18.126911328125,12.2329C17.654911328125,12.2329,17.272611328125,12.6161,17.273611328125,13.0881L17.278211328125,15.2069L17.278211328125,15.2107L17.273611328125,17.3295ZM13.574711328125,28.0523C21.552211328125,28.0523,24.559311328125,22.3153,25.605811328125,19.1897C26.001411328125,18.0098,27.107111328125,17.215,28.351511328125,17.2158C30.323811328125,17.2158,31.711511328125,19.1416,31.102611328125,21.0181C30.552411328125,22.7189,29.716211328125,24.3134,28.629811328125,25.733L30.137611328125,30.2235L24.775211328125,29.3432C14.645911328125,36.0484,1.048779328125,29.3346,0.214111328125,17.2158Q2.611231328125,28.0523,13.574711328125,28.0523Z" fill-rule="evenodd" fill="url(#master_svg1_93_40276)" fill-opacity="1"/></g></g></g></svg>
--- a/src/assets/icons/openai-dark.svg
+++ b/src/assets/icons/openai-dark.svg
@@ -0,0 +1 @@
+<svg fill="#ffffff" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path></svg>
--- a/src/assets/icons/openai-light.svg
+++ b/src/assets/icons/openai-light.svg
@@ -0,0 +1 @@
+<svg fill="#000000" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path></svg>
--- a/src/assets/icons/qwen.svg
+++ b/src/assets/icons/qwen.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Qwen</title><path d="M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z" fill="url(#lobe-icons-qwen-fill)" fill-rule="nonzero"></path><defs><linearGradient id="lobe-icons-qwen-fill" x1="0%" x2="100%" y1="0%" y2="0%"><stop offset="0%" stop-color="#6336E7" stop-opacity=".84"></stop><stop offset="100%" stop-color="#6F69F7" stop-opacity=".84"></stop></linearGradient></defs></svg>
--- a/src/assets/icons/vertex.svg
+++ b/src/assets/icons/vertex.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M20,13.89A.77.77,0,0,0,19,13.73l-7,5.14v.22a.72.72,0,1,1,0,1.43v0a.74.74,0,0,0,.45-.15l7.41-5.47A.76.76,0,0,0,20,13.89Z" style="fill:#669df6"/><path d="M12,20.52a.72.72,0,0,1,0-1.43h0v-.22L5,13.73a.76.76,0,0,0-1,.16.74.74,0,0,0,.16,1l7.41,5.47a.73.73,0,0,0,.44.15v0Z" style="fill:#aecbfa"/><path d="M12,18.34a1.47,1.47,0,1,0,1.47,1.47A1.47,1.47,0,0,0,12,18.34Zm0,2.18a.72.72,0,1,1,.72-.71A.71.71,0,0,1,12,20.52Z" style="fill:#4285f4"/><path d="M6,6.11a.76.76,0,0,1-.75-.75V3.48a.76.76,0,1,1,1.51,0V5.36A.76.76,0,0,1,6,6.11Z" style="fill:#aecbfa"/><circle cx="5.98" cy="12" r="0.76" style="fill:#aecbfa"/><circle cx="5.98" cy="9.79" r="0.76" style="fill:#aecbfa"/><circle cx="5.98" cy="7.57" r="0.76" style="fill:#aecbfa"/><path d="M18,8.31a.76.76,0,0,1-.75-.76V5.67a.75.75,0,1,1,1.5,0V7.55A.75.75,0,0,1,18,8.31Z" style="fill:#4285f4"/><circle cx="18.02" cy="12.01" r="0.76" style="fill:#4285f4"/><circle cx="18.02" cy="9.76" r="0.76" style="fill:#4285f4"/><circle cx="18.02" cy="3.48" r="0.76" style="fill:#4285f4"/><path d="M12,15a.76.76,0,0,1-.75-.75V12.34a.76.76,0,0,1,1.51,0v1.89A.76.76,0,0,1,12,15Z" style="fill:#669df6"/><circle cx="12" cy="16.45" r="0.76" style="fill:#669df6"/><circle cx="12" cy="10.14" r="0.76" style="fill:#669df6"/><circle cx="12" cy="7.92" r="0.76" style="fill:#669df6"/><path d="M15,10.54a.76.76,0,0,1-.75-.75V7.91a.76.76,0,1,1,1.51,0V9.79A.76.76,0,0,1,15,10.54Z" style="fill:#4285f4"/><circle cx="15.01" cy="5.69" r="0.76" style="fill:#4285f4"/><circle cx="15.01" cy="14.19" r="0.76" style="fill:#4285f4"/><circle cx="15.01" cy="11.97" r="0.76" style="fill:#4285f4"/><circle cx="8.99" cy="14.19" r="0.76" style="fill:#aecbfa"/><circle cx="8.99" cy="7.92" r="0.76" style="fill:#aecbfa"/><circle cx="8.99" cy="5.69" r="0.76" style="fill:#aecbfa"/><path d="M9,12.73A.76.76,0,0,1,8.24,12V10.1a.75.75,0,1,1,1.5,0V12A.75.75,0,0,1,9,12.73Z" style="fill:#aecbfa"/></svg>
--- a/src/assets/logoInline.ts
+++ b/src/assets/logoInline.ts
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/common/NotificationContainer.tsx
+++ b/src/components/common/NotificationContainer.tsx
@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNotificationStore } from '@/stores';
+import { IconX } from '@/components/ui/icons';
+import type { Notification } from '@/types';
+
+interface AnimatedNotification extends Notification {
+  isExiting?: boolean;
+}
+
+const ANIMATION_DURATION = 300; // ms
+
+export function NotificationContainer() {
+  const { notifications, removeNotification } = useNotificationStore();
+  const [animatedNotifications, setAnimatedNotifications] = useState<AnimatedNotification[]>([]);
+  const prevNotificationsRef = useRef<Notification[]>([]);
+
+  // Track notifications and manage animation states
+  useEffect(() => {
+    const prevNotifications = prevNotificationsRef.current;
+    const prevIds = new Set(prevNotifications.map((n) => n.id));
+    const currentIds = new Set(notifications.map((n) => n.id));
+
+    // Find new notifications (for enter animation)
+    const newNotifications = notifications.filter((n) => !prevIds.has(n.id));
+
+    // Find removed notifications (for exit animation)
+    const removedIds = new Set(
+      prevNotifications.filter((n) => !currentIds.has(n.id)).map((n) => n.id)
+    );
+
+    setAnimatedNotifications((prev) => {
+      // Mark removed notifications as exiting
+      let updated = prev.map((n) =>
+        removedIds.has(n.id) ? { ...n, isExiting: true } : n
+      );
+
+      // Add new notifications
+      newNotifications.forEach((n) => {
+        if (!updated.find((an) => an.id === n.id)) {
+          updated.push({ ...n, isExiting: false });
+        }
+      });
+
+      // Remove notifications that are not in current and not exiting
+      // (they've already completed their exit animation)
+      updated = updated.filter(
+        (n) => currentIds.has(n.id) || n.isExiting
+      );
+
+      return updated;
+    });
+
+    // Clean up exited notifications after animation
+    if (removedIds.size > 0) {
+      setTimeout(() => {
+        setAnimatedNotifications((prev) =>
+          prev.filter((n) => !removedIds.has(n.id))
+        );
+      }, ANIMATION_DURATION);
+    }
+
+    prevNotificationsRef.current = notifications;
+  }, [notifications]);
+
+  const handleClose = (id: string) => {
+    // Start exit animation
+    setAnimatedNotifications((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, isExiting: true } : n))
+    );
+
+    // Actually remove after animation
+    setTimeout(() => {
+      removeNotification(id);
+    }, ANIMATION_DURATION);
+  };
+
+  if (!animatedNotifications.length) return null;
+
+  return (
+    <div className="notification-container">
+      {animatedNotifications.map((notification) => (
+        <div
+          key={notification.id}
+          className={`notification ${notification.type} ${notification.isExiting ? 'exiting' : 'entering'}`}
+        >
+          <div className="message">{notification.message}</div>
+          <button className="close-btn" onClick={() => handleClose(notification.id)} aria-label="Close">
+            <IconX size={16} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/src/components/common/SplashScreen.scss
+++ b/src/components/common/SplashScreen.scss
@@ -0,0 +1,106 @@
+@use 'sass:color';
+@use '../../styles/variables.scss' as *;
+
+.splash-screen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-primary);
+  opacity: 1;
+  transition: opacity 0.4s ease-out;
+
+  &.fade-out {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.splash-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-md;
+  animation: splash-enter 0.6s ease-out;
+}
+
+@keyframes splash-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.splash-logo {
+  height: 80px;
+  width: auto;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-lg;
+  animation: splash-logo-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes splash-logo-pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.splash-title {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin: 0;
+  letter-spacing: -0.5px;
+}
+
+.splash-subtitle {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin: 0;
+  margin-top: -8px;
+}
+
+.splash-loader {
+  width: 120px;
+  height: 3px;
+  background: var(--border-color);
+  border-radius: $radius-full;
+  overflow: hidden;
+  margin-top: $spacing-md;
+}
+
+.splash-loader-bar {
+  width: 100%;
+  height: 100%;
+  background: var(--primary-color);
+  border-radius: $radius-full;
+  animation: splash-loading 1.2s ease-in-out infinite;
+  transform-origin: left;
+}
+
+@keyframes splash-loading {
+  0% {
+    transform: scaleX(0);
+  }
+  50% {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  50.01% {
+    transform-origin: right;
+  }
+  100% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+}
--- a/src/components/common/SplashScreen.tsx
+++ b/src/components/common/SplashScreen.tsx
@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
+import './SplashScreen.scss';
+
+interface SplashScreenProps {
+  onFinish: () => void;
+  fadeOut?: boolean;
+}
+
+const FADE_OUT_DURATION = 400;
+
+export function SplashScreen({ onFinish, fadeOut = false }: SplashScreenProps) {
+  useEffect(() => {
+    if (!fadeOut) return;
+    const finishTimer = setTimeout(() => {
+      onFinish();
+    }, FADE_OUT_DURATION);
+
+    return () => {
+      clearTimeout(finishTimer);
+    };
+  }, [fadeOut, onFinish]);
+
+  return (
+    <div className={`splash-screen ${fadeOut ? 'fade-out' : ''}`}>
+      <div className="splash-content">
+        <img src={INLINE_LOGO_JPEG} alt="CPAMC" className="splash-logo" />
+        <h1 className="splash-title">CLI Proxy API</h1>
+        <p className="splash-subtitle">Management Center</p>
+        <div className="splash-loader">
+          <div className="splash-loader-bar" />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -0,0 +1,565 @@
+import {
+  ReactNode,
+  SVGProps,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { NavLink, Outlet, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Modal } from '@/components/ui/Modal';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import {
+  IconBot,
+  IconChartLine,
+  IconFileText,
+  IconInfo,
+  IconKey,
+  IconLayoutDashboard,
+  IconScrollText,
+  IconSettings,
+  IconShield,
+  IconSlidersHorizontal,
+} from '@/components/ui/icons';
+import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
+import {
+  useAuthStore,
+  useConfigStore,
+  useLanguageStore,
+  useNotificationStore,
+  useThemeStore,
+} from '@/stores';
+import { configApi, versionApi } from '@/services/api';
+
+const sidebarIcons: Record<string, ReactNode> = {
+  dashboard: <IconLayoutDashboard size={18} />,
+  settings: <IconSlidersHorizontal size={18} />,
+  apiKeys: <IconKey size={18} />,
+  aiProviders: <IconBot size={18} />,
+  authFiles: <IconFileText size={18} />,
+  oauth: <IconShield size={18} />,
+  usage: <IconChartLine size={18} />,
+  config: <IconSettings size={18} />,
+  logs: <IconScrollText size={18} />,
+  system: <IconInfo size={18} />,
+};
+
+// Header action icons - smaller size for header buttons
+const headerIconProps: SVGProps<SVGSVGElement> = {
+  width: 16,
+  height: 16,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  'aria-hidden': 'true',
+  focusable: 'false',
+};
+
+const headerIcons = {
+  refresh: (
+    <svg {...headerIconProps}>
+      <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+      <path d="M21 3v5h-5" />
+    </svg>
+  ),
+  update: (
+    <svg {...headerIconProps}>
+      <path d="M12 19V5" />
+      <path d="m5 12 7-7 7 7" />
+    </svg>
+  ),
+  menu: (
+    <svg {...headerIconProps}>
+      <path d="M4 7h16" />
+      <path d="M4 12h16" />
+      <path d="M4 17h16" />
+    </svg>
+  ),
+  chevronLeft: (
+    <svg {...headerIconProps}>
+      <path d="m14 18-6-6 6-6" />
+    </svg>
+  ),
+  chevronRight: (
+    <svg {...headerIconProps}>
+      <path d="m10 6 6 6-6 6" />
+    </svg>
+  ),
+  language: (
+    <svg {...headerIconProps}>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M2 12h20" />
+      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+    </svg>
+  ),
+  sun: (
+    <svg {...headerIconProps}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+  ),
+  moon: (
+    <svg {...headerIconProps}>
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z" />
+    </svg>
+  ),
+  autoTheme: (
+    <svg {...headerIconProps}>
+      <defs>
+        <clipPath id="mainLayoutAutoThemeSunLeftHalf">
+          <rect x="0" y="0" width="12" height="24" />
+        </clipPath>
+      </defs>
+      <circle cx="12" cy="12" r="4" />
+      <circle cx="12" cy="12" r="4" clipPath="url(#mainLayoutAutoThemeSunLeftHalf)" fill="currentColor" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="M4.93 4.93l1.41 1.41" />
+      <path d="M17.66 17.66l1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="M6.34 17.66l-1.41 1.41" />
+      <path d="M19.07 4.93l-1.41 1.41" />
+    </svg>
+  ),
+  logout: (
+    <svg {...headerIconProps}>
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <path d="m16 17 5-5-5-5" />
+      <path d="M21 12H9" />
+    </svg>
+  ),
+};
+
+const parseVersionSegments = (version?: string | null) => {
+  if (!version) return null;
+  const cleaned = version.trim().replace(/^v/i, '');
+  if (!cleaned) return null;
+  const parts = cleaned
+    .split(/[^0-9]+/)
+    .filter(Boolean)
+    .map((segment) => Number.parseInt(segment, 10))
+    .filter(Number.isFinite);
+  return parts.length ? parts : null;
+};
+
+const compareVersions = (latest?: string | null, current?: string | null) => {
+  const latestParts = parseVersionSegments(latest);
+  const currentParts = parseVersionSegments(current);
+  if (!latestParts || !currentParts) return null;
+  const length = Math.max(latestParts.length, currentParts.length);
+  for (let i = 0; i < length; i++) {
+    const l = latestParts[i] || 0;
+    const c = currentParts[i] || 0;
+    if (l > c) return 1;
+    if (l < c) return -1;
+  }
+  return 0;
+};
+
+export function MainLayout() {
+  const { t, i18n } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const location = useLocation();
+
+  const apiBase = useAuthStore((state) => state.apiBase);
+  const serverVersion = useAuthStore((state) => state.serverVersion);
+  const serverBuildDate = useAuthStore((state) => state.serverBuildDate);
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const logout = useAuthStore((state) => state.logout);
+
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const clearCache = useConfigStore((state) => state.clearCache);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+
+  const theme = useThemeStore((state) => state.theme);
+  const cycleTheme = useThemeStore((state) => state.cycleTheme);
+  const toggleLanguage = useLanguageStore((state) => state.toggleLanguage);
+
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [checkingVersion, setCheckingVersion] = useState(false);
+  const [brandExpanded, setBrandExpanded] = useState(true);
+  const [requestLogModalOpen, setRequestLogModalOpen] = useState(false);
+  const [requestLogDraft, setRequestLogDraft] = useState(false);
+  const [requestLogTouched, setRequestLogTouched] = useState(false);
+  const [requestLogSaving, setRequestLogSaving] = useState(false);
+  const brandCollapseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const headerRef = useRef<HTMLElement | null>(null);
+  const versionTapCount = useRef(0);
+  const versionTapTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const fullBrandName = 'CLI Proxy API Management Center';
+  const abbrBrandName = t('title.abbr');
+  const requestLogEnabled = config?.requestLog ?? false;
+  const requestLogDirty = requestLogDraft !== requestLogEnabled;
+  const canEditRequestLog = connectionStatus === 'connected' && Boolean(config);
+  const isLogsPage = location.pathname.startsWith('/logs');
+
+  // 将顶栏高度写入 CSS 变量，确保侧栏/内容区计算一致，防止滚动时抖动
+  useLayoutEffect(() => {
+    const updateHeaderHeight = () => {
+      const height = headerRef.current?.offsetHeight;
+      if (height) {
+        document.documentElement.style.setProperty('--header-height', `${height}px`);
+      }
+    };
+
+    updateHeaderHeight();
+
+    const resizeObserver =
+      typeof ResizeObserver !== 'undefined' && headerRef.current
+        ? new ResizeObserver(updateHeaderHeight)
+        : null;
+    if (resizeObserver && headerRef.current) {
+      resizeObserver.observe(headerRef.current);
+    }
+
+    window.addEventListener('resize', updateHeaderHeight);
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      window.removeEventListener('resize', updateHeaderHeight);
+    };
+  }, []);
+
+  // 5秒后自动收起品牌名称
+  useEffect(() => {
+    brandCollapseTimer.current = setTimeout(() => {
+      setBrandExpanded(false);
+    }, 5000);
+
+    return () => {
+      if (brandCollapseTimer.current) {
+        clearTimeout(brandCollapseTimer.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (requestLogModalOpen && !requestLogTouched) {
+      setRequestLogDraft(requestLogEnabled);
+    }
+  }, [requestLogModalOpen, requestLogTouched, requestLogEnabled]);
+
+  useEffect(() => {
+    return () => {
+      if (versionTapTimer.current) {
+        clearTimeout(versionTapTimer.current);
+      }
+    };
+  }, []);
+
+  const handleBrandClick = useCallback(() => {
+    if (!brandExpanded) {
+      setBrandExpanded(true);
+      // 点击展开后，5秒后再次收起
+      if (brandCollapseTimer.current) {
+        clearTimeout(brandCollapseTimer.current);
+      }
+      brandCollapseTimer.current = setTimeout(() => {
+        setBrandExpanded(false);
+      }, 5000);
+    }
+  }, [brandExpanded]);
+
+  const openRequestLogModal = useCallback(() => {
+    setRequestLogTouched(false);
+    setRequestLogDraft(requestLogEnabled);
+    setRequestLogModalOpen(true);
+  }, [requestLogEnabled]);
+
+  const handleRequestLogClose = useCallback(() => {
+    setRequestLogModalOpen(false);
+    setRequestLogTouched(false);
+  }, []);
+
+  const handleVersionTap = useCallback(() => {
+    versionTapCount.current += 1;
+    if (versionTapTimer.current) {
+      clearTimeout(versionTapTimer.current);
+    }
+    versionTapTimer.current = setTimeout(() => {
+      versionTapCount.current = 0;
+    }, 1500);
+
+    if (versionTapCount.current >= 7) {
+      versionTapCount.current = 0;
+      if (versionTapTimer.current) {
+        clearTimeout(versionTapTimer.current);
+        versionTapTimer.current = null;
+      }
+      openRequestLogModal();
+    }
+  }, [openRequestLogModal]);
+
+  const handleRequestLogSave = async () => {
+    if (!canEditRequestLog) return;
+    if (!requestLogDirty) {
+      setRequestLogModalOpen(false);
+      return;
+    }
+
+    const previous = requestLogEnabled;
+    setRequestLogSaving(true);
+    updateConfigValue('request-log', requestLogDraft);
+
+    try {
+      await configApi.updateRequestLog(requestLogDraft);
+      clearCache('request-log');
+      showNotification(t('notification.request_log_updated'), 'success');
+      setRequestLogModalOpen(false);
+    } catch (error: any) {
+      updateConfigValue('request-log', previous);
+      showNotification(`${t('notification.update_failed')}: ${error?.message || ''}`, 'error');
+    } finally {
+      setRequestLogSaving(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchConfig().catch(() => {
+      // ignore initial failure; login flow会提示
+    });
+  }, [fetchConfig]);
+
+  const statusClass =
+    connectionStatus === 'connected'
+      ? 'success'
+      : connectionStatus === 'connecting'
+        ? 'warning'
+        : connectionStatus === 'error'
+          ? 'error'
+          : 'muted';
+
+  const navItems = [
+    { path: '/', label: t('nav.dashboard'), icon: sidebarIcons.dashboard },
+    { path: '/settings', label: t('nav.basic_settings'), icon: sidebarIcons.settings },
+    { path: '/api-keys', label: t('nav.api_keys'), icon: sidebarIcons.apiKeys },
+    { path: '/ai-providers', label: t('nav.ai_providers'), icon: sidebarIcons.aiProviders },
+    { path: '/auth-files', label: t('nav.auth_files'), icon: sidebarIcons.authFiles },
+    { path: '/oauth', label: t('nav.oauth', { defaultValue: 'OAuth' }), icon: sidebarIcons.oauth },
+    { path: '/usage', label: t('nav.usage_stats'), icon: sidebarIcons.usage },
+    { path: '/config', label: t('nav.config_management'), icon: sidebarIcons.config },
+    ...(config?.loggingToFile
+      ? [{ path: '/logs', label: t('nav.logs'), icon: sidebarIcons.logs }]
+      : []),
+    { path: '/system', label: t('nav.system_info'), icon: sidebarIcons.system },
+  ];
+
+  const handleRefreshAll = async () => {
+    clearCache();
+    try {
+      await fetchConfig(undefined, true);
+      showNotification(t('notification.data_refreshed'), 'success');
+    } catch (error: any) {
+      showNotification(`${t('notification.refresh_failed')}: ${error?.message || ''}`, 'error');
+    }
+  };
+
+  const handleVersionCheck = async () => {
+    setCheckingVersion(true);
+    try {
+      const data = await versionApi.checkLatest();
+      const latest = data?.['latest-version'] ?? data?.latest_version ?? data?.latest ?? '';
+      const comparison = compareVersions(latest, serverVersion);
+
+      if (!latest) {
+        showNotification(t('system_info.version_check_error'), 'error');
+        return;
+      }
+
+      if (comparison === null) {
+        showNotification(t('system_info.version_current_missing'), 'warning');
+        return;
+      }
+
+      if (comparison > 0) {
+        showNotification(t('system_info.version_update_available', { version: latest }), 'warning');
+      } else {
+        showNotification(t('system_info.version_is_latest'), 'success');
+      }
+    } catch (error: any) {
+      showNotification(`${t('system_info.version_check_error')}: ${error?.message || ''}`, 'error');
+    } finally {
+      setCheckingVersion(false);
+    }
+  };
+
+  return (
+    <div className="app-shell">
+      <header className="main-header" ref={headerRef}>
+        <div className="left">
+          <button
+            className="sidebar-toggle-header"
+            onClick={() => setSidebarCollapsed((prev) => !prev)}
+            title={
+              sidebarCollapsed
+                ? t('sidebar.expand', { defaultValue: '展开' })
+                : t('sidebar.collapse', { defaultValue: '收起' })
+            }
+          >
+            {sidebarCollapsed ? headerIcons.chevronRight : headerIcons.chevronLeft}
+          </button>
+          <img src={INLINE_LOGO_JPEG} alt="CPAMC logo" className="brand-logo" />
+          <div
+            className={`brand-header ${brandExpanded ? 'expanded' : 'collapsed'}`}
+            onClick={handleBrandClick}
+            title={brandExpanded ? undefined : fullBrandName}
+          >
+            <span className="brand-full">{fullBrandName}</span>
+            <span className="brand-abbr">{abbrBrandName}</span>
+          </div>
+        </div>
+
+        <div className="right">
+          <div className="connection">
+            <span className={`status-badge ${statusClass}`}>
+              {t(
+                connectionStatus === 'connected'
+                  ? 'common.connected_status'
+                  : connectionStatus === 'connecting'
+                    ? 'common.connecting_status'
+                    : 'common.disconnected_status'
+              )}
+            </span>
+            <span className="base">{apiBase || '-'}</span>
+          </div>
+
+          <div className="header-actions">
+            <Button
+              className="mobile-menu-btn"
+              variant="ghost"
+              size="sm"
+              onClick={() => setSidebarOpen((prev) => !prev)}
+            >
+              {headerIcons.menu}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleRefreshAll}
+              title={t('header.refresh_all')}
+            >
+              {headerIcons.refresh}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleVersionCheck}
+              loading={checkingVersion}
+              title={t('system_info.version_check_button')}
+            >
+              {headerIcons.update}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={toggleLanguage} title={t('language.switch')}>
+              {headerIcons.language}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={cycleTheme} title={t('theme.switch')}>
+              {theme === 'auto'
+                ? headerIcons.autoTheme
+                : theme === 'dark'
+                  ? headerIcons.moon
+                  : headerIcons.sun}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={logout} title={t('header.logout')}>
+              {headerIcons.logout}
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <div className="main-body">
+        <aside
+          className={`sidebar ${sidebarOpen ? 'open' : ''} ${sidebarCollapsed ? 'collapsed' : ''}`}
+        >
+          <div className="nav-section">
+            {navItems.map((item) => (
+              <NavLink
+                key={item.path}
+                to={item.path}
+                className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
+                onClick={() => setSidebarOpen(false)}
+                title={sidebarCollapsed ? item.label : undefined}
+              >
+                <span className="nav-icon">{item.icon}</span>
+                {!sidebarCollapsed && <span className="nav-label">{item.label}</span>}
+              </NavLink>
+            ))}
+          </div>
+        </aside>
+
+        <div className={`content${isLogsPage ? ' content-logs' : ''}`}>
+          <main className={`main-content${isLogsPage ? ' main-content-logs' : ''}`}>
+            <Outlet />
+          </main>
+
+          <footer className="footer">
+            <span>
+              {t('footer.api_version')}: {serverVersion || t('system_info.version_unknown')}
+            </span>
+            <span onClick={handleVersionTap}>
+              {t('footer.version')}: {__APP_VERSION__ || t('system_info.version_unknown')}
+            </span>
+            <span>
+              {t('footer.build_date')}:{' '}
+              {serverBuildDate
+                ? new Date(serverBuildDate).toLocaleString(i18n.language)
+                : t('system_info.version_unknown')}
+            </span>
+          </footer>
+        </div>
+      </div>
+
+      <Modal
+        open={requestLogModalOpen}
+        onClose={handleRequestLogClose}
+        title={t('basic_settings.request_log_title')}
+        footer={
+          <>
+            <Button variant="secondary" onClick={handleRequestLogClose} disabled={requestLogSaving}>
+              {t('common.cancel')}
+            </Button>
+            <Button
+              onClick={handleRequestLogSave}
+              loading={requestLogSaving}
+              disabled={!canEditRequestLog || !requestLogDirty}
+            >
+              {t('common.save')}
+            </Button>
+          </>
+        }
+      >
+        <div className="request-log-modal">
+          <div className="status-badge warning">{t('basic_settings.request_log_warning')}</div>
+          <ToggleSwitch
+            label={t('basic_settings.request_log_enable')}
+            labelPosition="left"
+            checked={requestLogDraft}
+            disabled={!canEditRequestLog || requestLogSaving}
+            onChange={(value) => {
+              setRequestLogDraft(value);
+              setRequestLogTouched(true);
+            }}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+}
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'md' | 'sm';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  fullWidth?: boolean;
+  loading?: boolean;
+}
+
+export function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  fullWidth = false,
+  loading = false,
+  className = '',
+  disabled,
+  ...rest
+}: PropsWithChildren<ButtonProps>) {
+  const classes = [
+    'btn',
+    `btn-${variant}`,
+    size === 'sm' ? 'btn-sm' : '',
+    fullWidth ? 'btn-full' : '',
+    className
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button className={classes} disabled={disabled || loading} {...rest}>
+      {loading && <span className="loading-spinner" aria-hidden="true" />}
+      <span>{children}</span>
+    </button>
+  );
+}
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,21 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+
+interface CardProps {
+  title?: ReactNode;
+  extra?: ReactNode;
+  className?: string;
+}
+
+export function Card({ title, extra, children, className }: PropsWithChildren<CardProps>) {
+  return (
+    <div className={className ? `card ${className}` : 'card'}>
+      {(title || extra) && (
+        <div className="card-header">
+          <div className="title">{title}</div>
+          {extra}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
--- a/src/components/ui/EmptyState.tsx
+++ b/src/components/ui/EmptyState.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { IconInbox } from './icons';
+
+interface EmptyStateProps {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export function EmptyState({ title, description, action }: EmptyStateProps) {
+  return (
+    <div className="empty-state">
+      <div className="empty-content">
+        <div className="empty-icon" aria-hidden="true">
+          <IconInbox size={20} />
+        </div>
+        <div>
+          <div className="empty-title">{title}</div>
+          {description && <div className="empty-desc">{description}</div>}
+        </div>
+      </div>
+      {action && <div className="empty-action">{action}</div>}
+    </div>
+  );
+}
--- a/src/components/ui/HeaderInputList.tsx
+++ b/src/components/ui/HeaderInputList.tsx
@@ -0,0 +1,77 @@
+import { Fragment } from 'react';
+import { Button } from './Button';
+import { IconX } from './icons';
+import type { HeaderEntry } from '@/utils/headers';
+
+interface HeaderInputListProps {
+  entries: HeaderEntry[];
+  onChange: (entries: HeaderEntry[]) => void;
+  addLabel: string;
+  disabled?: boolean;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+}
+
+export function HeaderInputList({
+  entries,
+  onChange,
+  addLabel,
+  disabled = false,
+  keyPlaceholder = 'X-Custom-Header',
+  valuePlaceholder = 'value'
+}: HeaderInputListProps) {
+  const currentEntries = entries.length ? entries : [{ key: '', value: '' }];
+
+  const updateEntry = (index: number, field: 'key' | 'value', value: string) => {
+    const next = currentEntries.map((entry, idx) => (idx === index ? { ...entry, [field]: value } : entry));
+    onChange(next);
+  };
+
+  const addEntry = () => {
+    onChange([...currentEntries, { key: '', value: '' }]);
+  };
+
+  const removeEntry = (index: number) => {
+    const next = currentEntries.filter((_, idx) => idx !== index);
+    onChange(next.length ? next : [{ key: '', value: '' }]);
+  };
+
+  return (
+    <div className="header-input-list">
+      {currentEntries.map((entry, index) => (
+        <Fragment key={index}>
+          <div className="header-input-row">
+            <input
+              className="input"
+              placeholder={keyPlaceholder}
+              value={entry.key}
+              onChange={(e) => updateEntry(index, 'key', e.target.value)}
+              disabled={disabled}
+            />
+            <span className="header-separator">:</span>
+            <input
+              className="input"
+              placeholder={valuePlaceholder}
+              value={entry.value}
+              onChange={(e) => updateEntry(index, 'value', e.target.value)}
+              disabled={disabled}
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => removeEntry(index)}
+              disabled={disabled || currentEntries.length <= 1}
+              title="Remove"
+              aria-label="Remove"
+            >
+              <IconX size={14} />
+            </Button>
+          </div>
+        </Fragment>
+      ))}
+      <Button variant="secondary" size="sm" onClick={addEntry} disabled={disabled} className="align-start">
+        {addLabel}
+      </Button>
+    </div>
+  );
+}
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,26 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  rightElement?: ReactNode;
+}
+
+export function Input({ label, hint, error, rightElement, className = '', ...rest }: InputProps) {
+  return (
+    <div className="form-group">
+      {label && <label>{label}</label>}
+      <div style={{ position: 'relative' }}>
+        <input className={`input ${className}`.trim()} {...rest} />
+        {rightElement && (
+          <div style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)' }}>
+            {rightElement}
+          </div>
+        )}
+      </div>
+      {hint && <div className="hint">{hint}</div>}
+      {error && <div className="error-box">{error}</div>}
+    </div>
+  );
+}
--- a/src/components/ui/LoadingSpinner.tsx
+++ b/src/components/ui/LoadingSpinner.tsx
@@ -0,0 +1,16 @@
+export function LoadingSpinner({
+  size = 20,
+  className = ''
+}: {
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`loading-spinner${className ? ` ${className}` : ''}`}
+      style={{ width: size, height: size, borderWidth: size / 7 }}
+      role="status"
+      aria-live="polite"
+    />
+  );
+}
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -0,0 +1,35 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import { IconX } from './icons';
+
+interface ModalProps {
+  open: boolean;
+  title?: ReactNode;
+  onClose: () => void;
+  footer?: ReactNode;
+  width?: number | string;
+}
+
+export function Modal({ open, title, onClose, footer, width = 520, children }: PropsWithChildren<ModalProps>) {
+  if (!open) return null;
+
+  const handleMaskClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={handleMaskClick}>
+      <div className="modal" style={{ width }} role="dialog" aria-modal="true">
+        <div className="modal-header">
+          <div className="modal-title">{title}</div>
+          <button className="modal-close" onClick={onClose} aria-label="Close">
+            <IconX size={18} />
+          </button>
+        </div>
+        <div className="modal-body">{children}</div>
+        {footer && <div className="modal-footer">{footer}</div>}
+      </div>
+    </div>
+  );
+}
--- a/src/components/ui/ModelInputList.tsx
+++ b/src/components/ui/ModelInputList.tsx
@@ -0,0 +1,105 @@
+import { Fragment } from 'react';
+import { Button } from './Button';
+import { IconX } from './icons';
+import type { ModelAlias } from '@/types';
+
+interface ModelEntry {
+  name: string;
+  alias: string;
+}
+
+interface ModelInputListProps {
+  entries: ModelEntry[];
+  onChange: (entries: ModelEntry[]) => void;
+  addLabel: string;
+  disabled?: boolean;
+  namePlaceholder?: string;
+  aliasPlaceholder?: string;
+}
+
+export const modelsToEntries = (models?: ModelAlias[]): ModelEntry[] => {
+  if (!Array.isArray(models) || models.length === 0) {
+    return [{ name: '', alias: '' }];
+  }
+  return models.map((m) => ({
+    name: m.name || '',
+    alias: m.alias || ''
+  }));
+};
+
+export const entriesToModels = (entries: ModelEntry[]): ModelAlias[] => {
+  return entries
+    .filter((entry) => entry.name.trim())
+    .map((entry) => {
+      const model: ModelAlias = { name: entry.name.trim() };
+      const alias = entry.alias.trim();
+      if (alias && alias !== model.name) {
+        model.alias = alias;
+      }
+      return model;
+    });
+};
+
+export function ModelInputList({
+  entries,
+  onChange,
+  addLabel,
+  disabled = false,
+  namePlaceholder = 'model-name',
+  aliasPlaceholder = 'alias (optional)'
+}: ModelInputListProps) {
+  const currentEntries = entries.length ? entries : [{ name: '', alias: '' }];
+
+  const updateEntry = (index: number, field: 'name' | 'alias', value: string) => {
+    const next = currentEntries.map((entry, idx) => (idx === index ? { ...entry, [field]: value } : entry));
+    onChange(next);
+  };
+
+  const addEntry = () => {
+    onChange([...currentEntries, { name: '', alias: '' }]);
+  };
+
+  const removeEntry = (index: number) => {
+    const next = currentEntries.filter((_, idx) => idx !== index);
+    onChange(next.length ? next : [{ name: '', alias: '' }]);
+  };
+
+  return (
+    <div className="header-input-list">
+      {currentEntries.map((entry, index) => (
+        <Fragment key={index}>
+          <div className="header-input-row">
+            <input
+              className="input"
+              placeholder={namePlaceholder}
+              value={entry.name}
+              onChange={(e) => updateEntry(index, 'name', e.target.value)}
+              disabled={disabled}
+            />
+            <span className="header-separator">→</span>
+            <input
+              className="input"
+              placeholder={aliasPlaceholder}
+              value={entry.alias}
+              onChange={(e) => updateEntry(index, 'alias', e.target.value)}
+              disabled={disabled}
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => removeEntry(index)}
+              disabled={disabled || currentEntries.length <= 1}
+              title="Remove"
+              aria-label="Remove"
+            >
+              <IconX size={14} />
+            </Button>
+          </div>
+        </Fragment>
+      ))}
+      <Button variant="secondary" size="sm" onClick={addEntry} disabled={disabled} className="align-start">
+        {addLabel}
+      </Button>
+    </div>
+  );
+}
--- a/src/components/ui/ToggleSwitch.tsx
+++ b/src/components/ui/ToggleSwitch.tsx
@@ -0,0 +1,35 @@
+import type { ChangeEvent, ReactNode } from 'react';
+
+interface ToggleSwitchProps {
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  label?: ReactNode;
+  disabled?: boolean;
+  labelPosition?: 'left' | 'right';
+}
+
+export function ToggleSwitch({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  labelPosition = 'right'
+}: ToggleSwitchProps) {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked);
+  };
+
+  const className = ['switch', labelPosition === 'left' ? 'switch-label-left' : '']
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <label className={className}>
+      <input type="checkbox" checked={checked} onChange={handleChange} disabled={disabled} />
+      <span className="track">
+        <span className="thumb" />
+      </span>
+      {label && <span className="label">{label}</span>}
+    </label>
+  );
+}
--- a/src/components/ui/icons.tsx
+++ b/src/components/ui/icons.tsx
@@ -0,0 +1,316 @@
+import type { SVGProps } from 'react';
+
+// Inline SVG icons (Lucide, ISC). We embed paths to keep the WebUI single-file/offline friendly.
+// Source: https://github.com/lucide-icons/lucide (via lucide-static).
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+const baseSvgProps: SVGProps<SVGSVGElement> = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  'aria-hidden': 'true',
+  focusable: 'false'
+};
+
+export function IconSlidersHorizontal({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <line x1="21" x2="14" y1="4" y2="4" />
+      <line x1="10" x2="3" y1="4" y2="4" />
+      <line x1="21" x2="12" y1="12" y2="12" />
+      <line x1="8" x2="3" y1="12" y2="12" />
+      <line x1="21" x2="16" y1="20" y2="20" />
+      <line x1="12" x2="3" y1="20" y2="20" />
+      <line x1="14" x2="14" y1="2" y2="6" />
+      <line x1="8" x2="8" y1="10" y2="14" />
+      <line x1="16" x2="16" y1="18" y2="22" />
+    </svg>
+  );
+}
+
+export function IconKey({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" />
+      <path d="m21 2-9.6 9.6" />
+      <circle cx="7.5" cy="15.5" r="5.5" />
+    </svg>
+  );
+}
+
+export function IconBot({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M12 8V4H8" />
+      <rect width="16" height="12" x="4" y="8" rx="2" />
+      <path d="M2 14h2" />
+      <path d="M20 14h2" />
+      <path d="M15 13v2" />
+      <path d="M9 13v2" />
+    </svg>
+  );
+}
+
+export function IconFileText({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+      <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+      <path d="M10 9H8" />
+      <path d="M16 13H8" />
+      <path d="M16 17H8" />
+    </svg>
+  );
+}
+
+export function IconShield({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+    </svg>
+  );
+}
+
+export function IconChartLine({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+      <path d="m19 9-5 5-4-4-3 3" />
+    </svg>
+  );
+}
+
+export function IconSettings({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export function IconScrollText({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 12h-5" />
+      <path d="M15 8h-5" />
+      <path d="M19 17V5a2 2 0 0 0-2-2H4" />
+      <path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3" />
+    </svg>
+  );
+}
+
+export function IconInfo({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16v-4" />
+      <path d="M12 8h.01" />
+    </svg>
+  );
+}
+
+export function IconRefreshCw({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+      <path d="M21 3v5h-5" />
+    </svg>
+  );
+}
+
+export function IconDownload({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M12 15V3" />
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <path d="m7 10 5 5 5-5" />
+    </svg>
+  );
+}
+
+export function IconTrash2({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M3 6h18" />
+      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+      <line x1="10" x2="10" y1="11" y2="17" />
+      <line x1="14" x2="14" y1="11" y2="17" />
+    </svg>
+  );
+}
+
+export function IconChevronUp({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m18 15-6-6-6 6" />
+    </svg>
+  );
+}
+
+export function IconChevronDown({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+export function IconSearch({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m21 21-4.34-4.34" />
+      <circle cx="11" cy="11" r="8" />
+    </svg>
+  );
+}
+
+export function IconX({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
+
+export function IconCheck({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+export function IconEye({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export function IconEyeOff({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
+      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+      <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+      <path d="m2 2 20 20" />
+    </svg>
+  );
+}
+
+export function IconInbox({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+    </svg>
+  );
+}
+
+export function IconSatellite({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m13.5 6.5-3.148-3.148a1.205 1.205 0 0 0-1.704 0L6.352 5.648a1.205 1.205 0 0 0 0 1.704L9.5 10.5" />
+      <path d="M16.5 7.5 19 5" />
+      <path d="m17.5 10.5 3.148 3.148a1.205 1.205 0 0 1 0 1.704l-2.296 2.296a1.205 1.205 0 0 1-1.704 0L13.5 14.5" />
+      <path d="M9 21a6 6 0 0 0-6-6" />
+      <path d="M9.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l4.296-4.296a1.205 1.205 0 0 0 0-1.704l-2.296-2.296a1.205 1.205 0 0 0-1.704 0z" />
+    </svg>
+  );
+}
+
+export function IconDiamond({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z" />
+    </svg>
+  );
+}
+
+export function IconTimer({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <line x1="10" x2="14" y1="2" y2="2" />
+      <line x1="12" x2="15" y1="14" y2="11" />
+      <circle cx="12" cy="14" r="8" />
+    </svg>
+  );
+}
+
+export function IconTrendingUp({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M16 7h6v6" />
+      <path d="m22 7-8.5 8.5-5-5L2 17" />
+    </svg>
+  );
+}
+
+export function IconDollarSign({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <line x1="12" x2="12" y1="2" y2="22" />
+      <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+    </svg>
+  );
+}
+
+export function IconGithub({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+      <path d="M9 18c-4.51 2-5-2-7-2" />
+    </svg>
+  );
+}
+
+export function IconExternalLink({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </svg>
+  );
+}
+
+export function IconBookOpen({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M12 7v14" />
+      <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+    </svg>
+  );
+}
+
+export function IconCode({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </svg>
+  );
+}
+
+export function IconLayoutDashboard({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <rect width="7" height="9" x="3" y="3" rx="1" />
+      <rect width="7" height="5" x="14" y="3" rx="1" />
+      <rect width="7" height="9" x="14" y="12" rx="1" />
+      <rect width="7" height="5" x="3" y="16" rx="1" />
+    </svg>
+  );
+}
--- a/src/core/api-client.js
+++ b/src/core/api-client.js
@@ -1,87 +0,0 @@
-// API 客户端：负责规范化基础地址、构造完整 URL、发送请求并回传版本信息
-export class ApiClient {
-    constructor({ apiBase = '', managementKey = '', onVersionUpdate = null } = {}) {
-        this.apiBase = '';
-        this.apiUrl = '';
-        this.managementKey = managementKey || '';
-        this.onVersionUpdate = onVersionUpdate;
-        this.setApiBase(apiBase);
-    }
-
-    buildHeaders(options = {}) {
-        const customHeaders = options.headers || {};
-        const headers = {
-            'Authorization': `Bearer ${this.managementKey}`,
-            ...customHeaders
-        };
-        const hasContentType = Object.keys(headers).some(key => key.toLowerCase() === 'content-type');
-        const body = options.body;
-        const isFormData = typeof FormData !== 'undefined' && body instanceof FormData;
-        if (!hasContentType && !isFormData) {
-            headers['Content-Type'] = 'application/json';
-        }
-        return headers;
-    }
-
-    normalizeBase(input) {
-        let base = (input || '').trim();
-        if (!base) return '';
-        base = base.replace(/\/?v0\/management\/?$/i, '');
-        base = base.replace(/\/+$/i, '');
-        if (!/^https?:\/\//i.test(base)) {
-            base = 'http://' + base;
-        }
-        return base;
-    }
-
-    computeApiUrl(base) {
-        const normalized = this.normalizeBase(base);
-        if (!normalized) return '';
-        return normalized.replace(/\/$/, '') + '/v0/management';
-    }
-
-    setApiBase(newBase) {
-        this.apiBase = this.normalizeBase(newBase);
-        this.apiUrl = this.computeApiUrl(this.apiBase);
-        return this.apiUrl;
-    }
-
-    setManagementKey(key) {
-        this.managementKey = key || '';
-    }
-
-    async request(endpoint, options = {}) {
-        const url = `${this.apiUrl}${endpoint}`;
-        const headers = this.buildHeaders(options);
-
-        const response = await fetch(url, {
-            ...options,
-            headers
-        });
-
-        if (typeof this.onVersionUpdate === 'function') {
-            this.onVersionUpdate(response.headers);
-        }
-
-        if (!response.ok) {
-            const errorData = await response.json().catch(() => ({}));
-            throw new Error(errorData.error || `HTTP ${response.status}`);
-        }
-
-        return await response.json();
-    }
-
-    // 返回原始 Response，供下载/自定义解析使用
-    async requestRaw(endpoint, options = {}) {
-        const url = `${this.apiUrl}${endpoint}`;
-        const headers = this.buildHeaders(options);
-        const response = await fetch(url, {
-            ...options,
-            headers
-        });
-        if (typeof this.onVersionUpdate === 'function') {
-            this.onVersionUpdate(response.headers);
-        }
-        return response;
-    }
-}
--- a/src/core/config-service.js
+++ b/src/core/config-service.js
@@ -1,70 +0,0 @@
-// 配置缓存服务：负责分段/全量读取配置与缓存控制，不涉及任何 DOM
-export class ConfigService {
-    constructor({ apiClient, cacheExpiry }) {
-        this.apiClient = apiClient;
-        this.cacheExpiry = cacheExpiry;
-        this.cache = {};
-        this.cacheTimestamps = {};
-    }
-
-    isCacheValid(section = null) {
-        if (section) {
-            if (!(section in this.cache) || !(section in this.cacheTimestamps)) {
-                return false;
-            }
-            return (Date.now() - this.cacheTimestamps[section]) < this.cacheExpiry;
-        }
-        if (!this.cache['__full__'] || !this.cacheTimestamps['__full__']) {
-            return false;
-        }
-        return (Date.now() - this.cacheTimestamps['__full__']) < this.cacheExpiry;
-    }
-
-    clearCache(section = null) {
-        if (section) {
-            delete this.cache[section];
-            delete this.cacheTimestamps[section];
-            if (this.cache['__full__']) {
-                delete this.cache['__full__'][section];
-            }
-            return;
-        }
-        Object.keys(this.cache).forEach(key => delete this.cache[key]);
-        Object.keys(this.cacheTimestamps).forEach(key => delete this.cacheTimestamps[key]);
-    }
-
-    async getConfig(section = null, forceRefresh = false) {
-        const now = Date.now();
-
-        if (section && !forceRefresh && this.isCacheValid(section)) {
-            return this.cache[section];
-        }
-
-        if (!section && !forceRefresh && this.isCacheValid()) {
-            return this.cache['__full__'];
-        }
-
-        const config = await this.apiClient.request('/config');
-
-        if (section) {
-            this.cache[section] = config[section];
-            this.cacheTimestamps[section] = now;
-            if (this.cache['__full__']) {
-                this.cache['__full__'][section] = config[section];
-            } else {
-                this.cache['__full__'] = config;
-                this.cacheTimestamps['__full__'] = now;
-            }
-            return config[section];
-        }
-
-        this.cache['__full__'] = config;
-        this.cacheTimestamps['__full__'] = now;
-        Object.keys(config).forEach(key => {
-            this.cache[key] = config[key];
-            this.cacheTimestamps[key] = now;
-        });
-
-        return config;
-    }
-}
--- a/src/core/connection.js
+++ b/src/core/connection.js
@@ -1,746 +0,0 @@
-// 连接与配置缓存核心模块
-// 提供 API 基础地址规范化、请求封装、配置缓存以及统一数据加载能力
-
-import { STATUS_UPDATE_INTERVAL_MS, DEFAULT_API_PORT } from '../utils/constants.js';
-import { secureStorage } from '../utils/secure-storage.js';
-import { normalizeModelList, classifyModels } from '../utils/models.js';
-
-const buildModelsEndpoint = (baseUrl) => {
-    if (!baseUrl) return '';
-    const trimmed = String(baseUrl).trim().replace(/\/+$/g, '');
-    if (!trimmed) return '';
-    return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
-};
-
-const normalizeApiKeyList = (input) => {
-    if (!Array.isArray(input)) return [];
-    const seen = new Set();
-    const keys = [];
-
-    input.forEach(item => {
-        const value = typeof item === 'string'
-            ? item
-            : (item && item['api-key'] ? item['api-key'] : '');
-        const trimmed = String(value || '').trim();
-        if (!trimmed || seen.has(trimmed)) {
-            return;
-        }
-        seen.add(trimmed);
-        keys.push(trimmed);
-    });
-
-    return keys;
-};
-
-export const connectionModule = {
-    // 规范化基础地址，移除尾部斜杠与 /v0/management
-    normalizeBase(input) {
-        return this.apiClient.normalizeBase(input);
-    },
-
-    // 由基础地址生成完整管理 API 地址
-    computeApiUrl(base) {
-        return this.apiClient.computeApiUrl(base);
-    },
-
-    setApiBase(newBase) {
-        this.apiClient.setApiBase(newBase);
-        this.apiBase = this.apiClient.apiBase;
-        this.apiUrl = this.apiClient.apiUrl;
-        secureStorage.setItem('apiBase', this.apiBase);
-        secureStorage.setItem('apiUrl', this.apiUrl); // 兼容旧字段
-        this.updateLoginConnectionInfo();
-    },
-
-    setManagementKey(key, { persist = true } = {}) {
-        this.managementKey = key || '';
-        this.apiClient.setManagementKey(this.managementKey);
-        if (persist) {
-            secureStorage.setItem('managementKey', this.managementKey);
-        }
-    },
-
-    // 加载设置（简化版，仅加载内部状态）
-    loadSettings() {
-        secureStorage.migratePlaintextKeys(['apiBase', 'apiUrl', 'managementKey']);
-
-        const savedBase = secureStorage.getItem('apiBase');
-        const savedUrl = secureStorage.getItem('apiUrl');
-        const savedKey = secureStorage.getItem('managementKey');
-
-        if (savedBase) {
-            this.setApiBase(savedBase);
-        } else if (savedUrl) {
-            const base = (savedUrl || '').replace(/\/?v0\/management\/?$/i, '');
-            this.setApiBase(base);
-        } else {
-            this.setApiBase(this.detectApiBaseFromLocation());
-        }
-
-        this.setManagementKey(savedKey || '', { persist: false });
-
-        this.updateLoginConnectionInfo();
-    },
-
-    // 读取并填充管理中心版本号（可能来自构建时注入或占位符）
-    initUiVersion() {
-        const uiVersion = this.readUiVersionFromDom();
-        this.uiVersion = uiVersion;
-        this.renderVersionInfo();
-    },
-
-    // 从 DOM 获取版本占位符，并处理空值、引号或未替换的占位符
-    readUiVersionFromDom() {
-        const el = document.getElementById('ui-version');
-        if (!el) return null;
-
-        const raw = (el.dataset && el.dataset.uiVersion) ? el.dataset.uiVersion : el.textContent;
-        if (typeof raw !== 'string') return null;
-
-        const cleaned = raw.replace(/^"+|"+$/g, '').trim();
-        if (!cleaned || cleaned === '__VERSION__') {
-            return null;
-        }
-        return cleaned;
-    },
-
-    // 根据响应头更新版本与构建时间
-    updateVersionFromHeaders(headers) {
-        if (!headers || typeof headers.get !== 'function') {
-            return;
-        }
-
-        const version = headers.get('X-CPA-VERSION');
-        const buildDate = headers.get('X-CPA-BUILD-DATE');
-        let updated = false;
-
-        if (version && version !== this.serverVersion) {
-            this.serverVersion = version;
-            updated = true;
-        }
-
-        if (buildDate && buildDate !== this.serverBuildDate) {
-            this.serverBuildDate = buildDate;
-            updated = true;
-        }
-
-        if (updated) {
-            this.renderVersionInfo();
-        }
-    },
-
-    renderVersionCheckStatus({
-        currentVersion,
-        latestVersion,
-        message,
-        status
-    } = {}) {
-        const resolvedCurrent = (typeof currentVersion === 'undefined' || currentVersion === null)
-            ? this.serverVersion
-            : currentVersion;
-        const resolvedLatest = (typeof latestVersion === 'undefined' || latestVersion === null)
-            ? this.latestVersion
-            : latestVersion;
-        const resolvedMessage = (typeof message === 'undefined' || message === null)
-            ? (this.versionCheckMessage || i18n.t('system_info.version_check_idle'))
-            : message;
-        const resolvedStatus = status || this.versionCheckStatus || 'muted';
-
-        this.latestVersion = resolvedLatest || null;
-        this.versionCheckMessage = resolvedMessage;
-        this.versionCheckStatus = resolvedStatus;
-
-        const currentEl = document.getElementById('version-check-current');
-        if (currentEl) {
-            currentEl.textContent = resolvedCurrent || i18n.t('system_info.version_unknown');
-        }
-
-        const latestEl = document.getElementById('version-check-latest');
-        if (latestEl) {
-            latestEl.textContent = resolvedLatest || '-';
-        }
-
-        const resultEl = document.getElementById('version-check-result');
-        if (resultEl) {
-            resultEl.textContent = resolvedMessage;
-            resultEl.className = `version-check-result ${resolvedStatus}`.trim();
-        }
-    },
-
-    resetVersionCheckStatus() {
-        this.latestVersion = null;
-        this.versionCheckMessage = i18n.t('system_info.version_check_idle');
-        this.versionCheckStatus = 'muted';
-        this.renderVersionCheckStatus({
-            currentVersion: this.serverVersion,
-            latestVersion: this.latestVersion,
-            message: this.versionCheckMessage,
-            status: this.versionCheckStatus
-        });
-    },
-
-    // 渲染底栏的版本与构建时间
-    renderVersionInfo() {
-        const versionEl = document.getElementById('api-version');
-        const buildDateEl = document.getElementById('api-build-date');
-        const uiVersionEl = document.getElementById('ui-version');
-
-        if (versionEl) {
-            versionEl.textContent = this.serverVersion || '-';
-        }
-
-        if (buildDateEl) {
-            buildDateEl.textContent = this.serverBuildDate
-                ? this.formatBuildDate(this.serverBuildDate)
-                : '-';
-        }
-
-        if (uiVersionEl) {
-            const domVersion = this.readUiVersionFromDom();
-            uiVersionEl.textContent = this.uiVersion || domVersion || 'v0.0.0-dev';
-        }
-
-        this.renderVersionCheckStatus({
-            currentVersion: this.serverVersion,
-            latestVersion: this.latestVersion,
-            message: this.versionCheckMessage,
-            status: this.versionCheckStatus
-        });
-    },
-
-    // 清空版本信息（例如登出时）
-    resetVersionInfo() {
-        this.serverVersion = null;
-        this.serverBuildDate = null;
-        this.resetVersionCheckStatus();
-        this.renderVersionInfo();
-    },
-
-    // 格式化构建时间，优先使用界面语言对应的本地格式
-    formatBuildDate(buildDate) {
-        if (!buildDate) return '-';
-
-        const parsed = Date.parse(buildDate);
-        if (!Number.isNaN(parsed)) {
-            const locale = i18n?.currentLanguage || undefined;
-            return new Date(parsed).toLocaleString(locale);
-        }
-
-        return buildDate;
-    },
-
-    parseVersionSegments(version) {
-        if (!version || typeof version !== 'string') return null;
-        const cleaned = version.trim().replace(/^v/i, '');
-        if (!cleaned) return null;
-        const parts = cleaned.split(/[^0-9]+/).filter(Boolean).map(segment => {
-            const parsed = parseInt(segment, 10);
-            return Number.isFinite(parsed) ? parsed : 0;
-        });
-        return parts.length ? parts : null;
-    },
-
-    compareVersions(latestVersion, currentVersion) {
-        const latestParts = this.parseVersionSegments(latestVersion);
-        const currentParts = this.parseVersionSegments(currentVersion);
-        if (!latestParts || !currentParts) {
-            return null;
-        }
-
-        const length = Math.max(latestParts.length, currentParts.length);
-        for (let i = 0; i < length; i++) {
-            const latest = latestParts[i] || 0;
-            const current = currentParts[i] || 0;
-            if (latest > current) return 1;
-            if (latest < current) return -1;
-        }
-
-        return 0;
-    },
-
-    async checkLatestVersion() {
-        if (!this.isConnected) {
-            const message = i18n.t('notification.connection_required');
-            this.renderVersionCheckStatus({
-                currentVersion: this.serverVersion,
-                latestVersion: this.latestVersion,
-                message,
-                status: 'warning'
-            });
-            this.showNotification(message, 'error');
-            return;
-        }
-
-        const button = document.getElementById('version-check-btn');
-        const originalLabel = button ? button.innerHTML : '';
-
-        if (button) {
-            button.disabled = true;
-            button.innerHTML = `<div class="loading"></div> ${i18n.t('system_info.version_checking')}`;
-        }
-
-        this.renderVersionCheckStatus({
-            currentVersion: this.serverVersion,
-            latestVersion: this.latestVersion,
-            message: i18n.t('system_info.version_checking'),
-            status: 'info'
-        });
-
-        try {
-            const data = await this.makeRequest('/latest-version');
-            const latestVersion = data?.['latest-version'] || data?.latest_version || '';
-            const latestParts = this.parseVersionSegments(latestVersion);
-            const currentParts = this.parseVersionSegments(this.serverVersion);
-            const comparison = (latestParts && currentParts)
-                ? this.compareVersions(latestVersion, this.serverVersion)
-                : null;
-            let messageKey = 'system_info.version_check_error';
-            let statusClass = 'error';
-
-            if (!latestParts) {
-                messageKey = 'system_info.version_check_error';
-            } else if (!currentParts) {
-                messageKey = 'system_info.version_current_missing';
-                statusClass = 'warning';
-            } else if (comparison > 0) {
-                messageKey = 'system_info.version_update_available';
-                statusClass = 'warning';
-            } else {
-                messageKey = 'system_info.version_is_latest';
-                statusClass = 'success';
-            }
-
-            const message = i18n.t(messageKey, latestVersion ? { version: latestVersion } : undefined);
-            this.renderVersionCheckStatus({
-                currentVersion: this.serverVersion,
-                latestVersion,
-                message,
-                status: statusClass
-            });
-
-            if (latestVersion && comparison !== null) {
-                const notifyKey = comparison > 0
-                    ? 'system_info.version_update_available'
-                    : 'system_info.version_is_latest';
-                const notifyType = comparison > 0 ? 'warning' : 'success';
-                this.showNotification(i18n.t(notifyKey, { version: latestVersion }), notifyType);
-            }
-        } catch (error) {
-            const message = `${i18n.t('system_info.version_check_error')}: ${error.message}`;
-            this.renderVersionCheckStatus({
-                currentVersion: this.serverVersion,
-                latestVersion: this.latestVersion,
-                message,
-                status: 'error'
-            });
-            this.showNotification(message, 'error');
-        } finally {
-            if (button) {
-                button.disabled = false;
-                button.innerHTML = originalLabel;
-            }
-        }
-    },
-
-    // API 请求方法
-    async makeRequest(endpoint, options = {}) {
-        try {
-            return await this.apiClient.request(endpoint, options);
-        } catch (error) {
-            console.error('API请求失败:', error);
-            throw error;
-        }
-    },
-
-    buildAvailableModelsEndpoint() {
-        return buildModelsEndpoint(this.apiBase || this.apiClient?.apiBase || '');
-    },
-
-    setAvailableModelsStatus(message = '', type = 'info') {
-        const statusEl = document.getElementById('available-models-status');
-        if (!statusEl) return;
-        statusEl.textContent = message || '';
-        statusEl.className = `available-models-status ${type}`;
-    },
-
-    renderAvailableModels(models = []) {
-        const listEl = document.getElementById('available-models-list');
-        if (!listEl) return;
-
-        if (!models.length) {
-            listEl.innerHTML = `
-                <div class="available-models-empty">
-                    <i class="fas fa-inbox"></i>
-                    <span>${i18n.t('system_info.models_empty')}</span>
-                </div>
-            `;
-            return;
-        }
-
-        const language = (i18n?.currentLanguage || '').toLowerCase();
-        const otherLabel = language.startsWith('zh') ? '其他' : 'Other';
-        const groups = classifyModels(models, { otherLabel });
-
-        const groupHtml = groups.map(group => {
-            const pills = group.items.map(model => {
-                const name = this.escapeHtml(model.name || '');
-                const alias = model.alias ? `<span class="model-alias">${this.escapeHtml(model.alias)}</span>` : '';
-                const description = model.description ? this.escapeHtml(model.description) : '';
-                const titleAttr = description ? ` title="${description}"` : '';
-                return `
-                    <span class="provider-model-tag available-model-tag"${titleAttr}>
-                        <span class="model-name">${name}</span>
-                        ${alias}
-                    </span>
-                `;
-            }).join('');
-
-            const label = this.escapeHtml(group.label || group.id || '');
-            return `
-                <div class="available-model-group">
-                    <div class="available-model-group-header">
-                        <div class="available-model-group-title">
-                            <span class="available-model-group-label">${label}</span>
-                            <span class="available-model-group-count">${group.items.length}</span>
-                        </div>
-                    </div>
-                    <div class="available-model-group-body">
-                        ${pills}
-                    </div>
-                </div>
-            `;
-        }).join('');
-
-        listEl.innerHTML = groupHtml;
-    },
-
-    clearAvailableModels(messageKey = 'system_info.models_empty') {
-        this.availableModels = [];
-        this.availableModelApiKeysCache = null;
-        const listEl = document.getElementById('available-models-list');
-        if (listEl) {
-            listEl.innerHTML = '';
-        }
-        this.setAvailableModelsStatus(i18n.t(messageKey), 'warning');
-    },
-
-    async resolveApiKeysForModels({ config = null, forceRefresh = false } = {}) {
-        if (!forceRefresh && Array.isArray(this.availableModelApiKeysCache) && this.availableModelApiKeysCache.length) {
-            return this.availableModelApiKeysCache;
-        }
-
-        const configKeys = normalizeApiKeyList(config?.['api-keys'] || this.configCache?.['api-keys']);
-        if (configKeys.length) {
-            this.availableModelApiKeysCache = configKeys;
-            return configKeys;
-        }
-
-        try {
-            const data = await this.makeRequest('/api-keys');
-            const keys = normalizeApiKeyList(data?.['api-keys']);
-            if (keys.length) {
-                this.availableModelApiKeysCache = keys;
-            }
-            return keys;
-        } catch (error) {
-            console.warn('自动获取 API Key 失败:', error);
-            return [];
-        }
-    },
-
-    async loadAvailableModels({ config = null, forceRefresh = false } = {}) {
-        const listEl = document.getElementById('available-models-list');
-        const statusEl = document.getElementById('available-models-status');
-
-        if (!listEl || !statusEl) {
-            return;
-        }
-
-        if (!this.isConnected) {
-            this.setAvailableModelsStatus(i18n.t('common.disconnected'), 'warning');
-            listEl.innerHTML = '';
-            return;
-        }
-
-        const endpoint = this.buildAvailableModelsEndpoint();
-        if (!endpoint) {
-            this.setAvailableModelsStatus(i18n.t('system_info.models_error'), 'error');
-            listEl.innerHTML = `
-                <div class="available-models-empty">
-                    <i class="fas fa-exclamation-circle"></i>
-                    <span>${i18n.t('login.error_invalid')}</span>
-                </div>
-            `;
-            return;
-        }
-
-        this.availableModelsLoading = true;
-        this.setAvailableModelsStatus(i18n.t('system_info.models_loading'), 'info');
-        listEl.innerHTML = '<div class="available-models-placeholder"><i class="fas fa-spinner fa-spin"></i></div>';
-
-        try {
-            const headers = {};
-            const keys = await this.resolveApiKeysForModels({ config, forceRefresh });
-            if (keys.length) {
-                headers.Authorization = `Bearer ${keys[0]}`;
-            }
-
-            const response = await fetch(endpoint, { headers });
-            if (!response.ok) {
-                throw new Error(`${response.status} ${response.statusText}`);
-            }
-
-            let data;
-            try {
-                data = await response.json();
-            } catch (err) {
-                const text = await response.text();
-                throw new Error(text || err.message || 'Invalid JSON');
-            }
-
-            const models = normalizeModelList(data, { dedupe: true });
-            this.availableModels = models;
-
-            if (!models.length) {
-                this.setAvailableModelsStatus(i18n.t('system_info.models_empty'), 'warning');
-                this.renderAvailableModels([]);
-                return;
-            }
-
-            this.setAvailableModelsStatus(i18n.t('system_info.models_count', { count: models.length }), 'success');
-            this.renderAvailableModels(models);
-        } catch (error) {
-            console.error('加载可用模型失败:', error);
-            this.availableModels = [];
-            this.setAvailableModelsStatus(`${i18n.t('system_info.models_error')}: ${error.message}`, 'error');
-            listEl.innerHTML = `
-                <div class="available-models-empty">
-                    <i class="fas fa-exclamation-circle"></i>
-                    <span>${this.escapeHtml(error.message || '')}</span>
-                </div>
-            `;
-        } finally {
-            this.availableModelsLoading = false;
-        }
-    },
-
-    // 测试连接（简化版，用于内部调用）
-    async testConnection() {
-        try {
-            await this.makeRequest('/debug');
-            this.isConnected = true;
-            this.updateConnectionStatus();
-            this.startStatusUpdateTimer();
-            await this.loadAllData();
-            return true;
-        } catch (error) {
-            this.isConnected = false;
-            this.updateConnectionStatus();
-            this.stopStatusUpdateTimer();
-            throw error;
-        }
-    },
-
-    // 更新连接状态
-    updateConnectionStatus() {
-        const statusButton = document.getElementById('connection-status');
-        const apiStatus = document.getElementById('api-status');
-        const configStatus = document.getElementById('config-status');
-        const lastUpdate = document.getElementById('last-update');
-
-        if (this.isConnected) {
-            statusButton.innerHTML = `<i class="fas fa-circle connection-indicator connected"></i> ${i18n.t('common.connected')}`;
-            statusButton.className = 'btn btn-success';
-            apiStatus.textContent = i18n.t('common.connected');
-
-            // 更新配置状态
-            if (this.isCacheValid()) {
-                const fullTimestamp = this.cacheTimestamps && this.cacheTimestamps['__full__'];
-                const cacheAge = fullTimestamp
-                    ? Math.floor((Date.now() - fullTimestamp) / 1000)
-                    : 0;
-                configStatus.textContent = `${i18n.t('system_info.cache_data')} (${cacheAge}${i18n.t('system_info.seconds_ago')})`;
-                configStatus.style.color = '#f59e0b'; // 橙色表示缓存
-            } else if (this.configCache && this.configCache['__full__']) {
-                configStatus.textContent = i18n.t('system_info.real_time_data');
-                configStatus.style.color = '#10b981'; // 绿色表示实时
-            } else {
-                configStatus.textContent = i18n.t('system_info.not_loaded');
-                configStatus.style.color = '#6b7280'; // 灰色表示未加载
-            }
-        } else {
-            statusButton.innerHTML = `<i class="fas fa-circle connection-indicator disconnected"></i> ${i18n.t('common.disconnected')}`;
-            statusButton.className = 'btn btn-danger';
-            apiStatus.textContent = i18n.t('common.disconnected');
-            configStatus.textContent = i18n.t('system_info.not_loaded');
-            configStatus.style.color = '#6b7280';
-            this.setAvailableModelsStatus(i18n.t('common.disconnected'), 'warning');
-            const modelsList = document.getElementById('available-models-list');
-            if (modelsList) {
-                modelsList.innerHTML = '';
-            }
-        }
-
-        lastUpdate.textContent = new Date().toLocaleString('zh-CN');
-
-        if (this.lastEditorConnectionState !== this.isConnected) {
-            this.updateConfigEditorAvailability();
-        }
-
-        // 更新连接信息显示
-        this.updateConnectionInfo();
-
-        if (this.events && typeof this.events.emit === 'function') {
-            const shouldEmit = this.lastConnectionStatusEmitted !== this.isConnected;
-            if (shouldEmit) {
-                this.events.emit('connection:status-changed', {
-                    isConnected: this.isConnected,
-                    apiBase: this.apiBase
-                });
-                this.lastConnectionStatusEmitted = this.isConnected;
-            }
-        }
-    },
-
-    // 检查连接状态
-    async checkConnectionStatus() {
-        await this.testConnection();
-    },
-
-    // 刷新所有数据
-    async refreshAllData() {
-        if (!this.isConnected) {
-            this.showNotification(i18n.t('notification.connection_required'), 'error');
-            return;
-        }
-
-        const button = document.getElementById('refresh-all');
-        const originalText = button.innerHTML;
-
-        button.innerHTML = `<div class="loading"></div> ${i18n.t('common.loading')}`;
-        button.disabled = true;
-
-        try {
-            // 强制刷新，清除缓存
-            await this.loadAllData(true);
-            this.showNotification(i18n.t('notification.data_refreshed'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.refresh_failed')}: ${error.message}`, 'error');
-        } finally {
-            button.innerHTML = originalText;
-            button.disabled = false;
-        }
-    },
-
-    // 检查缓存是否有效
-    isCacheValid(section = null) {
-        return this.configService.isCacheValid(section);
-    },
-
-    // 获取配置（优先使用缓存，支持按段获取）
-    async getConfig(section = null, forceRefresh = false) {
-        try {
-            const config = await this.configService.getConfig(section, forceRefresh);
-            this.configCache = this.configService.cache;
-            this.cacheTimestamps = this.configService.cacheTimestamps;
-            this.updateConnectionStatus();
-            return config;
-        } catch (error) {
-            console.error('获取配置失败:', error);
-            throw error;
-        }
-    },
-
-    // 清除缓存（支持清除特定配置段）
-    clearCache(section = null) {
-        this.configService.clearCache(section);
-        this.configCache = this.configService.cache;
-        this.cacheTimestamps = this.configService.cacheTimestamps;
-        if (!section || section === 'api-keys') {
-            this.availableModelApiKeysCache = null;
-        }
-        if (!section) {
-            this.configYamlCache = '';
-            this.availableModels = [];
-        }
-    },
-
-    // 启动状态更新定时器
-    startStatusUpdateTimer() {
-        if (this.statusUpdateTimer) {
-            clearInterval(this.statusUpdateTimer);
-        }
-        this.statusUpdateTimer = setInterval(() => {
-            if (this.isConnected) {
-                this.updateConnectionStatus();
-            }
-        }, STATUS_UPDATE_INTERVAL_MS);
-    },
-
-    // 停止状态更新定时器
-    stopStatusUpdateTimer() {
-        if (this.statusUpdateTimer) {
-            clearInterval(this.statusUpdateTimer);
-            this.statusUpdateTimer = null;
-        }
-    },
-
-    // 加载所有数据 - 使用新的 /config 端点一次性获取所有配置
-    async loadAllData(forceRefresh = false) {
-        try {
-            console.log(i18n.t('system_info.real_time_data'));
-            // 使用新的 /config 端点一次性获取所有配置
-            // 注意：getConfig(section, forceRefresh)，不传 section 表示获取全部
-            const config = await this.getConfig(null, forceRefresh);
-
-            // 获取一次usage统计数据，供渲染函数和loadUsageStats复用
-            let usageData = null;
-            let keyStats = null;
-            try {
-                const response = await this.makeRequest('/usage');
-                usageData = response?.usage || null;
-                if (usageData) {
-                    keyStats = await this.getKeyStats(usageData);
-                }
-            } catch (error) {
-                console.warn('获取usage统计失败:', error);
-            }
-
-            // 从配置中提取并设置各个设置项（现在传递keyStats）
-            await this.updateSettingsFromConfig(config, keyStats);
-
-            await this.loadAvailableModels({ config, forceRefresh });
-
-            if (this.events && typeof this.events.emit === 'function') {
-                this.events.emit('data:config-loaded', {
-                    config,
-                    usageData,
-                    keyStats,
-                    forceRefresh
-                });
-            }
-
-            console.log('配置加载完成，使用缓存:', !forceRefresh && this.isCacheValid());
-        } catch (error) {
-            console.error('加载配置失败:', error);
-        }
-    },
-
-    // 从配置对象更新所有设置 —— 委派给 settings 模块，保持兼容旧调用
-    async updateSettingsFromConfig(config, keyStats = null) {
-        if (typeof this.applySettingsFromConfig === 'function') {
-            return this.applySettingsFromConfig(config, keyStats);
-        }
-    },
-
-    detectApiBaseFromLocation() {
-        try {
-            const { protocol, hostname, port } = window.location;
-            const normalizedPort = port ? `:${port}` : '';
-            return this.normalizeBase(`${protocol}//${hostname}${normalizedPort}`);
-        } catch (error) {
-            console.warn('无法从当前地址检测 API 基础地址，使用默认设置', error);
-            return this.normalizeBase(this.apiBase || `http://localhost:${DEFAULT_API_PORT}`);
-        }
-    }
-};
--- a/src/core/error-handler.js
+++ b/src/core/error-handler.js
@@ -1,231 +0,0 @@
-/**
- * 错误处理器
- * 统一管理应用中的错误处理逻辑
- */
-
-import { ERROR_MESSAGES } from '../utils/constants.js';
-
-/**
- * 错误处理器类
- * 提供统一的错误处理接口，确保错误处理的一致性
- */
-export class ErrorHandler {
-    /**
-     * 构造错误处理器
-     * @param {Object} notificationService - 通知服务对象
-     * @param {Function} notificationService.show - 显示通知的方法
-     */
-    constructor(notificationService) {
-        this.notificationService = notificationService;
-    }
-
-    /**
-     * 处理更新操作失败
-     * 包括显示错误通知和执行UI回滚操作
-     *
-     * @param {Error} error - 错误对象
-     * @param {string} context - 操作上下文（如"调试模式"、"代理设置"）
-     * @param {Function} [rollbackFn] - UI回滚函数
-     *
-     * @example
-     * try {
-     *     await this.makeRequest('/debug', { method: 'PATCH', body: JSON.stringify({ enabled: true }) });
-     * } catch (error) {
-     *     this.errorHandler.handleUpdateError(
-     *         error,
-     *         '调试模式',
-     *         () => document.getElementById('debug-toggle').checked = false
-     *     );
-     * }
-     */
-    handleUpdateError(error, context, rollbackFn) {
-        console.error(`更新${context}失败:`, error);
-        const message = `更新${context}失败: ${error.message || ERROR_MESSAGES.OPERATION_FAILED}`;
-        this.notificationService.show(message, 'error');
-
-        // 执行回滚操作
-        if (typeof rollbackFn === 'function') {
-            try {
-                rollbackFn();
-            } catch (rollbackError) {
-                console.error('UI回滚操作失败:', rollbackError);
-            }
-        }
-    }
-
-    /**
-     * 处理加载操作失败
-     *
-     * @param {Error} error - 错误对象
-     * @param {string} context - 加载内容的上下文（如"API密钥"、"使用统计"）
-     *
-     * @example
-     * try {
-     *     const data = await this.makeRequest('/api-keys');
-     *     this.renderApiKeys(data);
-     * } catch (error) {
-     *     this.errorHandler.handleLoadError(error, 'API密钥');
-     * }
-     */
-    handleLoadError(error, context) {
-        console.error(`加载${context}失败:`, error);
-        const message = `加载${context}失败，请检查连接`;
-        this.notificationService.show(message, 'error');
-    }
-
-    /**
-     * 处理删除操作失败
-     *
-     * @param {Error} error - 错误对象
-     * @param {string} context - 删除内容的上下文
-     */
-    handleDeleteError(error, context) {
-        console.error(`删除${context}失败:`, error);
-        const message = `删除${context}失败: ${error.message || ERROR_MESSAGES.OPERATION_FAILED}`;
-        this.notificationService.show(message, 'error');
-    }
-
-    /**
-     * 处理添加操作失败
-     *
-     * @param {Error} error - 错误对象
-     * @param {string} context - 添加内容的上下文
-     */
-    handleAddError(error, context) {
-        console.error(`添加${context}失败:`, error);
-        const message = `添加${context}失败: ${error.message || ERROR_MESSAGES.OPERATION_FAILED}`;
-        this.notificationService.show(message, 'error');
-    }
-
-    /**
-     * 处理网络错误
-     * 检测常见的网络问题并提供友好的错误提示
-     *
-     * @param {Error} error - 错误对象
-     */
-    handleNetworkError(error) {
-        console.error('网络请求失败:', error);
-
-        let message = ERROR_MESSAGES.NETWORK_ERROR;
-
-        // 检测特定错误类型
-        if (error.name === 'TypeError' && error.message.includes('fetch')) {
-            message = ERROR_MESSAGES.NETWORK_ERROR;
-        } else if (error.message && error.message.includes('timeout')) {
-            message = ERROR_MESSAGES.TIMEOUT;
-        } else if (error.message && error.message.includes('401')) {
-            message = ERROR_MESSAGES.UNAUTHORIZED;
-        } else if (error.message && error.message.includes('404')) {
-            message = ERROR_MESSAGES.NOT_FOUND;
-        } else if (error.message && error.message.includes('500')) {
-            message = ERROR_MESSAGES.SERVER_ERROR;
-        } else if (error.message) {
-            message = `网络错误: ${error.message}`;
-        }
-
-        this.notificationService.show(message, 'error');
-    }
-
-    /**
-     * 处理验证错误
-     *
-     * @param {string} fieldName - 字段名称
-     * @param {string} [message] - 自定义错误消息
-     */
-    handleValidationError(fieldName, message) {
-        const errorMessage = message || `请输入有效的${fieldName}`;
-        this.notificationService.show(errorMessage, 'error');
-    }
-
-    /**
-     * 处理通用错误
-     * 当错误类型不明确时使用
-     *
-     * @param {Error} error - 错误对象
-     * @param {string} [defaultMessage] - 默认错误消息
-     */
-    handleGenericError(error, defaultMessage) {
-        console.error('操作失败:', error);
-        const message = error.message || defaultMessage || ERROR_MESSAGES.OPERATION_FAILED;
-        this.notificationService.show(message, 'error');
-    }
-
-    /**
-     * 创建带错误处理的异步函数包装器
-     * 自动捕获并处理错误
-     *
-     * @param {Function} asyncFn - 异步函数
-     * @param {string} context - 操作上下文
-     * @param {Function} [rollbackFn] - 回滚函数
-     * @returns {Function} 包装后的函数
-     *
-     * @example
-     * const safeUpdate = this.errorHandler.withErrorHandling(
-     *     () => this.makeRequest('/debug', { method: 'PATCH', body: '...' }),
-     *     '调试模式',
-     *     () => document.getElementById('debug-toggle').checked = false
-     * );
-     * await safeUpdate();
-     */
-    withErrorHandling(asyncFn, context, rollbackFn) {
-        return async (...args) => {
-            try {
-                return await asyncFn(...args);
-            } catch (error) {
-                this.handleUpdateError(error, context, rollbackFn);
-                throw error; // 重新抛出以便调用者处理
-            }
-        };
-    }
-
-    /**
-     * 创建带重试机制的错误处理包装器
-     *
-     * @param {Function} asyncFn - 异步函数
-     * @param {number} [maxRetries=3] - 最大重试次数
-     * @param {number} [retryDelay=1000] - 重试延迟（毫秒）
-     * @returns {Function} 包装后的函数
-     *
-     * @example
-     * const retryableFetch = this.errorHandler.withRetry(
-     *     () => this.makeRequest('/config'),
-     *     3,
-     *     2000
-     * );
-     * const config = await retryableFetch();
-     */
-    withRetry(asyncFn, maxRetries = 3, retryDelay = 1000) {
-        return async (...args) => {
-            let lastError;
-            for (let attempt = 0; attempt < maxRetries; attempt++) {
-                try {
-                    return await asyncFn(...args);
-                } catch (error) {
-                    lastError = error;
-                    console.warn(`尝试 ${attempt + 1}/${maxRetries} 失败:`, error);
-
-                    if (attempt < maxRetries - 1) {
-                        // 等待后重试
-                        await new Promise(resolve => setTimeout(resolve, retryDelay));
-                    }
-                }
-            }
-
-            // 所有尝试都失败
-            throw lastError;
-        };
-    }
-}
-
-/**
- * 创建错误处理器工厂函数
- * 便于在不同模块中创建错误处理器实例
- *
- * @param {Function} showNotification - 显示通知的函数
- * @returns {ErrorHandler} 错误处理器实例
- */
-export function createErrorHandler(showNotification) {
-    return new ErrorHandler({
-        show: showNotification
-    });
-}
--- a/src/core/event-bus.js
+++ b/src/core/event-bus.js
@@ -1,10 +0,0 @@
-// 轻量事件总线，避免模块之间的直接耦合
-export function createEventBus() {
-    const target = new EventTarget();
-
-    const on = (type, listener) => target.addEventListener(type, listener);
-    const off = (type, listener) => target.removeEventListener(type, listener);
-    const emit = (type, detail = {}) => target.dispatchEvent(new CustomEvent(type, { detail }));
-
-    return { on, off, emit };
-}
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Hooks 统一导出
+ */
+
+export { useApi } from './useApi';
+export { useDebounce } from './useDebounce';
+export { useLocalStorage } from './useLocalStorage';
+export { useInterval } from './useInterval';
+export { useMediaQuery } from './useMediaQuery';
+export { usePagination } from './usePagination';
--- a/src/hooks/useApi.ts
+++ b/src/hooks/useApi.ts
@@ -0,0 +1,65 @@
+/**
+ * 通用 API 调用 Hook
+ */
+
+import { useState, useCallback } from 'react';
+import { useNotificationStore } from '@/stores';
+
+interface UseApiOptions<T> {
+  onSuccess?: (data: T) => void;
+  onError?: (error: Error) => void;
+  showSuccessNotification?: boolean;
+  showErrorNotification?: boolean;
+  successMessage?: string;
+}
+
+export function useApi<T = any, Args extends any[] = any[]>(
+  apiFunction: (...args: Args) => Promise<T>,
+  options: UseApiOptions<T> = {}
+) {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const { showNotification } = useNotificationStore();
+
+  const execute = useCallback(
+    async (...args: Args) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await apiFunction(...args);
+        setData(result);
+
+        if (options.showSuccessNotification && options.successMessage) {
+          showNotification(options.successMessage, 'success');
+        }
+
+        options.onSuccess?.(result);
+        return result;
+      } catch (err) {
+        const errorObj = err as Error;
+        setError(errorObj);
+
+        if (options.showErrorNotification !== false) {
+          showNotification(errorObj.message, 'error');
+        }
+
+        options.onError?.(errorObj);
+        throw errorObj;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiFunction, options, showNotification]
+  );
+
+  const reset = useCallback(() => {
+    setData(null);
+    setError(null);
+    setLoading(false);
+  }, []);
+
+  return { data, loading, error, execute, reset };
+}
--- a/src/hooks/useDebounce.ts
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,21 @@
+/**
+ * 防抖 Hook
+ */
+
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
--- a/src/hooks/useInterval.ts
+++ b/src/hooks/useInterval.ts
@@ -0,0 +1,24 @@
+/**
+ * 定时器 Hook
+ */
+
+import { useEffect, useRef } from 'react';
+
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (delay === null) return;
+
+    const tick = () => {
+      savedCallback.current?.();
+    };
+
+    const id = setInterval(tick, delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -0,0 +1,32 @@
+/**
+ * LocalStorage Hook
+ */
+
+import { useState } from 'react';
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: T | ((val: T) => T)) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue];
+}
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,27 @@
+/**
+ * 媒体查询 Hook
+ */
+
+import { useState, useEffect } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+
+    const listener = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    // Set initial value via listener to avoid direct setState in effect
+    listener({ matches: media.matches } as MediaQueryListEvent);
+
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [query]);
+
+  return matches;
+}
--- a/src/hooks/usePagination.ts
+++ b/src/hooks/usePagination.ts
@@ -0,0 +1,59 @@
+/**
+ * 分页 Hook
+ */
+
+import { useState, useMemo } from 'react';
+import type { PaginationState } from '@/types';
+
+export function usePagination<T>(
+  items: T[],
+  initialPageSize: number = 20
+): PaginationState & {
+  currentItems: T[];
+  goToPage: (page: number) => void;
+  nextPage: () => void;
+  prevPage: () => void;
+  setPageSize: (size: number) => void;
+} {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+
+  const totalItems = items.length;
+  const totalPages = Math.ceil(totalItems / pageSize) || 1;
+
+  const currentItems = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return items.slice(start, end);
+  }, [items, currentPage, pageSize]);
+
+  const goToPage = (page: number) => {
+    const validPage = Math.max(1, Math.min(page, totalPages));
+    setCurrentPage(validPage);
+  };
+
+  const nextPage = () => {
+    goToPage(currentPage + 1);
+  };
+
+  const prevPage = () => {
+    goToPage(currentPage - 1);
+  };
+
+  const handleSetPageSize = (size: number) => {
+    setPageSize(size);
+    setCurrentPage(1); // 重置到第一页
+  };
+
+  return {
+    currentPage,
+    pageSize,
+    totalPages,
+    totalItems,
+    currentItems,
+    goToPage,
+    nextPage,
+    prevPage,
+    setPageSize: handleSetPageSize
+  };
+}
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -0,0 +1,26 @@
+/**
+ * i18next 国际化配置
+ */
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import zhCN from './locales/zh-CN.json';
+import en from './locales/en.json';
+import { STORAGE_KEY_LANGUAGE } from '@/utils/constants';
+
+i18n.use(initReactI18next).init({
+  resources: {
+    'zh-CN': { translation: zhCN },
+    en: { translation: en }
+  },
+  lng: localStorage.getItem(STORAGE_KEY_LANGUAGE) || 'zh-CN',
+  fallbackLng: 'zh-CN',
+  interpolation: {
+    escapeValue: false // React 已经转义
+  },
+  react: {
+    useSuspense: false
+  }
+});
+
+export default i18n;
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -0,0 +1,778 @@
+{
+  "common": {
+    "login": "Login",
+    "logout": "Logout",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "add": "Add",
+    "update": "Update",
+    "refresh": "Refresh",
+    "close": "Close",
+    "success": "Success",
+    "error": "Error",
+    "info": "Info",
+    "warning": "Warning",
+    "loading": "Loading...",
+    "connecting": "Connecting...",
+    "connected": "Connected",
+    "disconnected": "Disconnected",
+    "connecting_status": "Connecting",
+    "connected_status": "Connected",
+    "disconnected_status": "Disconnected",
+    "yes": "Yes",
+    "no": "No",
+    "not_set": "Not set",
+    "optional": "Optional",
+    "required": "Required",
+    "api_key": "Key",
+    "base_url": "Address",
+    "prefix": "Prefix",
+    "proxy_url": "Proxy",
+    "alias": "Alias",
+    "failure": "Failure",
+    "unknown_error": "Unknown error",
+    "copy": "Copy",
+    "custom_headers_label": "Custom Headers",
+    "custom_headers_hint": "Optional HTTP headers to send with the request. Leave blank to remove.",
+    "custom_headers_add": "Add Header",
+    "custom_headers_key_placeholder": "Header name, e.g. X-Custom-Header",
+    "custom_headers_value_placeholder": "Header value",
+    "model_name_placeholder": "Model name, e.g. claude-3-5-sonnet-20241022",
+    "model_alias_placeholder": "Model alias (optional)"
+  },
+  "title": {
+    "main": "CLI Proxy API Management Center",
+    "login": "CLI Proxy API Management Center",
+    "abbr": "CPAMC"
+  },
+  "auto_login": {
+    "title": "Auto Login in Progress...",
+    "message": "Attempting to connect to server using locally saved connection information"
+  },
+  "login": {
+    "subtitle": "Please enter connection information to access the management interface",
+    "connection_title": "Connection Address",
+    "connection_current": "Current URL",
+    "connection_auto_hint": "The system will automatically use the current URL for connection",
+    "custom_connection_label": "Custom Connection URL:",
+    "custom_connection_placeholder": "Eg: https://example.com:8317",
+    "custom_connection_hint": "By default the current URL is used. Override it here if needed.",
+    "use_current_address": "Use Current URL",
+    "management_key_label": "Management Key:",
+    "management_key_placeholder": "Enter the management key",
+    "connect_button": "Connect",
+    "submit_button": "Login",
+    "submitting": "Connecting...",
+    "error_title": "Login Failed",
+    "error_required": "Please fill in complete connection information",
+    "error_invalid": "Connection failed, please check address and key"
+  },
+  "header": {
+    "check_connection": "Check Connection",
+    "refresh_all": "Refresh All",
+    "logout": "Logout"
+  },
+  "connection": {
+    "title": "Connection Information",
+    "server_address": "Server Address:",
+    "management_key": "Management Key:",
+    "status": "Connection Status:"
+  },
+  "nav": {
+    "dashboard": "Dashboard",
+    "basic_settings": "Basic Settings",
+    "api_keys": "API Keys",
+    "ai_providers": "AI Providers",
+    "auth_files": "Auth Files",
+    "oauth": "OAuth Login",
+    "usage_stats": "Usage Statistics",
+    "config_management": "Config Management",
+    "logs": "Logs Viewer",
+    "system_info": "Management Center Info"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "subtitle": "Welcome to CLI Proxy API Management Center",
+    "openai_providers": "OpenAI Providers",
+    "quick_actions": "Quick Actions",
+    "current_config": "Current Configuration",
+    "management_keys": "Management Keys",
+    "provider_keys_detail": "G:{{gemini}} C:{{codex}} Cl:{{claude}} O:{{openai}}",
+    "oauth_credentials": "OAuth Credentials",
+    "usage_overview": "Usage Overview",
+    "total_requests": "Total Requests",
+    "total_tokens": "Total Tokens",
+    "rpm_30min": "RPM (30min)",
+    "tpm_30min": "TPM (30min)",
+    "models_used": "Models Used",
+    "no_usage_data": "No usage data available",
+    "view_detailed_usage": "View Detailed Stats",
+    "edit_settings": "Edit Settings",
+    "available_models": "Available Models",
+    "available_models_desc": "Total models from all providers"
+  },
+  "basic_settings": {
+    "title": "Basic Settings",
+    "debug_title": "Debug Mode",
+    "debug_enable": "Enable Debug Mode",
+    "proxy_title": "Proxy Settings",
+    "proxy_url_label": "Proxy URL:",
+    "proxy_url_placeholder": "e.g.: socks5://user:pass@127.0.0.1:1080/",
+    "proxy_update": "Update",
+    "proxy_clear": "Clear",
+    "retry_title": "Request Retry",
+    "retry_count_label": "Retry Count:",
+    "retry_update": "Update",
+    "quota_title": "Quota Exceeded Behavior",
+    "quota_switch_project": "Auto Switch Project",
+    "quota_switch_preview": "Switch to Preview Model",
+    "usage_statistics_title": "Usage Statistics",
+    "usage_statistics_enable": "Enable usage statistics",
+    "logging_title": "Logging",
+    "logging_to_file_enable": "Enable logging to file",
+    "request_log_title": "Request Logging",
+    "request_log_enable": "Enable request logging",
+    "request_log_warning": "Keep this off unless you need detailed troubleshooting.",
+    "ws_auth_title": "WebSocket Authentication",
+    "ws_auth_enable": "Require auth for /ws/*"
+  },
+  "api_keys": {
+    "title": "API Keys Management",
+    "proxy_auth_title": "Proxy Service Authentication Keys",
+    "add_button": "Add Key",
+    "empty_title": "No API Keys",
+    "empty_desc": "Click the button above to add the first key",
+    "item_title": "API Key",
+    "add_modal_title": "Add API Key",
+    "add_modal_key_label": "API Key:",
+    "add_modal_key_placeholder": "Please enter API key",
+    "edit_modal_title": "Edit API Key",
+    "edit_modal_key_label": "API Key:",
+    "delete_confirm": "Are you sure you want to delete this API key?"
+  },
+  "ai_providers": {
+    "title": "AI Providers Configuration",
+    "gemini_title": "Gemini API Keys",
+    "gemini_add_button": "Add Key",
+    "gemini_empty_title": "No Gemini Keys",
+    "gemini_empty_desc": "Click the button above to add the first key",
+    "gemini_item_title": "Gemini Key",
+    "gemini_add_modal_title": "Add Gemini API Key",
+    "gemini_add_modal_key_label": "API Keys:",
+    "gemini_add_modal_key_placeholder": "Enter Gemini API key",
+    "gemini_add_modal_key_hint": "Add keys one by one and optionally specify a Base URL.",
+    "gemini_keys_add_btn": "Add Key",
+    "gemini_base_url_label": "Base URL (Optional):",
+    "gemini_base_url_placeholder": "e.g.: https://generativelanguage.googleapis.com",
+    "gemini_edit_modal_title": "Edit Gemini API Key",
+    "gemini_edit_modal_key_label": "API Key:",
+    "gemini_delete_confirm": "Are you sure you want to delete this Gemini key?",
+    "excluded_models_label": "Excluded models (optional):",
+    "excluded_models_placeholder": "Comma or newline separated, e.g. gemini-1.5-pro, gemini-1.5-flash",
+    "excluded_models_hint": "Leave empty to allow all models; values are trimmed and deduplicated automatically.",
+    "excluded_models_count": "Excluding {{count}} models",
+    "prefix_label": "Prefix (Optional):",
+    "prefix_placeholder": "e.g.: team-a",
+    "prefix_hint": "When set, call models as prefix/<model> to target this entry.",
+    "config_toggle_label": "Enabled",
+    "config_disabled_badge": "Disabled",
+    "codex_title": "Codex API Configuration",
+    "codex_add_button": "Add Configuration",
+    "codex_empty_title": "No Codex Configuration",
+    "codex_empty_desc": "Click the button above to add the first configuration",
+    "codex_item_title": "Codex Configuration",
+    "codex_add_modal_title": "Add Codex API Configuration",
+    "codex_add_modal_key_label": "API Key:",
+    "codex_add_modal_key_placeholder": "Please enter Codex API key",
+    "codex_add_modal_url_label": "Base URL (Required):",
+    "codex_add_modal_url_placeholder": "e.g.: https://api.example.com",
+    "codex_add_modal_proxy_label": "Proxy URL (Optional):",
+    "codex_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
+    "codex_edit_modal_title": "Edit Codex API Configuration",
+    "codex_edit_modal_key_label": "API Key:",
+    "codex_edit_modal_url_label": "Base URL (Required):",
+    "codex_edit_modal_proxy_label": "Proxy URL (Optional):",
+    "codex_delete_confirm": "Are you sure you want to delete this Codex configuration?",
+    "claude_title": "Claude API Configuration",
+    "claude_add_button": "Add Configuration",
+    "claude_empty_title": "No Claude Configuration",
+    "claude_empty_desc": "Click the button above to add the first configuration",
+    "claude_item_title": "Claude Configuration",
+    "claude_add_modal_title": "Add Claude API Configuration",
+    "claude_add_modal_key_label": "API Key:",
+    "claude_add_modal_key_placeholder": "Please enter Claude API key",
+    "claude_add_modal_url_label": "Base URL (Optional):",
+    "claude_add_modal_url_placeholder": "e.g.: https://api.anthropic.com",
+    "claude_add_modal_proxy_label": "Proxy URL (Optional):",
+    "claude_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
+    "claude_edit_modal_title": "Edit Claude API Configuration",
+    "claude_edit_modal_key_label": "API Key:",
+    "claude_edit_modal_url_label": "Base URL (Optional):",
+    "claude_edit_modal_proxy_label": "Proxy URL (Optional):",
+    "claude_delete_confirm": "Are you sure you want to delete this Claude configuration?",
+    "claude_models_label": "Custom Models (Optional):",
+    "claude_models_hint": "Leave empty to allow all models, or add name[, alias] entries to limit/alias them.",
+    "claude_models_add_btn": "Add Model",
+    "claude_models_count": "Models Count",
+    "ampcode_title": "Amp CLI Integration (ampcode)",
+    "ampcode_modal_title": "Configure Ampcode",
+    "ampcode_upstream_url_label": "Upstream URL",
+    "ampcode_upstream_url_placeholder": "e.g. https://ampcode.com",
+    "ampcode_upstream_url_hint": "Optional. Leave empty to use the default/auto-discovered control plane URL.",
+    "ampcode_upstream_api_key_label": "Upstream API Key (Amp Official)",
+    "ampcode_upstream_api_key_placeholder": "Enter sk-amp... (leave empty to keep current)",
+    "ampcode_upstream_api_key_hint": "Optional. Leaving it empty will not change the current Amp official key. Use the button below to clear it.",
+    "ampcode_upstream_api_key_current": "Current Amp official key: {{key}}",
+    "ampcode_clear_upstream_api_key": "Clear official key",
+    "ampcode_clear_upstream_api_key_confirm": "Are you sure you want to clear the Ampcode upstream API key (Amp official)?",
+    "ampcode_force_model_mappings_label": "Force model mappings",
+    "ampcode_force_model_mappings_hint": "When enabled, mappings override local API-key availability checks.",
+    "ampcode_model_mappings_label": "Model mappings (from → to)",
+    "ampcode_model_mappings_hint": "Rewrites model names in Amp requests. Leave empty to disable mappings.",
+    "ampcode_model_mappings_add_btn": "Add mapping",
+    "ampcode_model_mappings_from_placeholder": "from model (source)",
+    "ampcode_model_mappings_to_placeholder": "to model (target)",
+    "ampcode_model_mappings_count": "Mappings Count",
+    "ampcode_mappings_overwrite_confirm": "Existing mappings could not be loaded. Continuing may overwrite or clear them. Continue?",
+    "openai_title": "OpenAI Compatible Providers",
+    "openai_add_button": "Add Provider",
+    "openai_empty_title": "No OpenAI Compatible Providers",
+    "openai_empty_desc": "Click the button above to add the first provider",
+    "openai_add_modal_title": "Add OpenAI Compatible Provider",
+    "openai_add_modal_name_label": "Provider Name:",
+    "openai_add_modal_name_placeholder": "e.g.: openrouter",
+    "openai_add_modal_url_label": "Base URL:",
+    "openai_add_modal_url_placeholder": "e.g.: https://openrouter.ai/api/v1",
+    "openai_add_modal_keys_label": "API Keys",
+    "openai_edit_modal_keys_label": "API Keys",
+    "openai_keys_hint": "Add each key separately with an optional proxy URL to keep things organized.",
+    "openai_keys_add_btn": "Add Key",
+    "openai_key_placeholder": "sk-... key",
+    "openai_proxy_placeholder": "Optional proxy URL (e.g. socks5://...)",
+    "openai_add_modal_models_label": "Model List (name[, alias] one per line):",
+    "openai_models_hint": "Example: gpt-4o-mini or moonshotai/kimi-k2:free, kimi-k2",
+    "openai_model_name_placeholder": "Model name, e.g. moonshotai/kimi-k2:free",
+    "openai_model_alias_placeholder": "Model alias (optional)",
+    "openai_models_add_btn": "Add Model",
+    "openai_models_fetch_button": "Fetch via /v1/models",
+    "openai_models_fetch_title": "Pick Models from /v1/models",
+    "openai_models_fetch_hint": "Call the /v1/models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.",
+    "openai_models_fetch_url_label": "Request URL",
+    "openai_models_fetch_refresh": "Refresh",
+    "openai_models_fetch_loading": "Fetching models from /v1/models...",
+    "openai_models_fetch_empty": "No models returned. Please check the endpoint or auth.",
+    "openai_models_fetch_error": "Failed to fetch models",
+    "openai_models_fetch_back": "Back to edit",
+    "openai_models_fetch_apply": "Add selected models",
+    "openai_models_search_label": "Search models",
+    "openai_models_search_placeholder": "Filter by name, alias, or description",
+    "openai_models_search_empty": "No models match your search. Try a different keyword.",
+    "openai_models_fetch_invalid_url": "Please enter a valid Base URL first",
+    "openai_models_fetch_added": "{{count}} new models added",
+    "openai_edit_modal_title": "Edit OpenAI Compatible Provider",
+    "openai_edit_modal_name_label": "Provider Name:",
+    "openai_edit_modal_url_label": "Base URL:",
+    "openai_edit_modal_models_label": "Model List (name[, alias] one per line):",
+    "openai_delete_confirm": "Are you sure you want to delete this OpenAI provider?",
+    "openai_keys_count": "Keys Count",
+    "openai_models_count": "Models Count",
+    "openai_test_title": "Connection Test",
+    "openai_test_hint": "Send a /v1/chat/completions request with the current settings to verify availability.",
+    "openai_test_model_placeholder": "Model to test",
+    "openai_test_action": "Run Test",
+    "openai_test_running": "Sending test request...",
+    "openai_test_timeout": "Test request timed out after {{seconds}} seconds.",
+    "openai_test_success": "Test succeeded. The model responded.",
+    "openai_test_failed": "Test failed",
+    "openai_test_select_placeholder": "Choose from current models",
+    "openai_test_select_empty": "No models configured. Add models first"
+  },
+  "auth_files": {
+    "title": "Auth Files Management",
+    "title_section": "Auth Files",
+    "description": "Manage all CLI Proxy JSON auth files here (e.g. Qwen, Gemini, Vertex). Uploading a credential immediately enables the corresponding AI integration.",
+    "upload_button": "Upload File",
+    "delete_all_button": "Delete All",
+    "empty_title": "No Auth Files",
+    "empty_desc": "Click the button above to upload the first file",
+    "search_empty_title": "No matching files",
+    "search_empty_desc": "Try changing the filters or clearing the search box.",
+    "file_size": "Size",
+    "file_modified": "Modified",
+    "download_button": "Download",
+    "delete_button": "Delete",
+    "delete_confirm": "Are you sure you want to delete file",
+    "delete_all_confirm": "Are you sure you want to delete all auth files? This operation cannot be undone!",
+    "delete_filtered_confirm": "Are you sure you want to delete all {{type}} auth files? This operation cannot be undone!",
+    "upload_error_json": "Only JSON files are allowed",
+    "upload_success": "File uploaded successfully",
+    "download_success": "File downloaded successfully",
+    "delete_success": "File deleted successfully",
+    "delete_all_success": "Successfully deleted",
+    "delete_filtered_success": "Deleted {{count}} {{type}} auth files successfully",
+    "delete_filtered_partial": "{{type}} auth files deletion finished: {{success}} succeeded, {{failed}} failed",
+    "delete_filtered_none": "No deletable auth files under the current filter ({{type}})",
+    "files_count": "files",
+    "pagination_prev": "Previous",
+    "pagination_next": "Next",
+    "pagination_info": "Page {{current}} / {{total}} · {{count}} files",
+    "search_label": "Search configs",
+    "search_placeholder": "Filter by name, type, or provider",
+    "page_size_label": "Per page",
+    "page_size_unit": "items",
+    "filter_all": "All",
+    "filter_qwen": "Qwen",
+    "filter_gemini": "Gemini",
+    "filter_gemini-cli": "GeminiCLI",
+    "filter_aistudio": "AIStudio",
+    "filter_claude": "Claude",
+    "filter_codex": "Codex",
+    "filter_antigravity": "Antigravity",
+    "filter_iflow": "iFlow",
+    "filter_vertex": "Vertex",
+    "filter_empty": "Empty",
+    "filter_unknown": "Other",
+    "type_qwen": "Qwen",
+    "type_gemini": "Gemini",
+    "type_gemini-cli": "GeminiCLI",
+    "type_aistudio": "AIStudio",
+    "type_claude": "Claude",
+    "type_codex": "Codex",
+    "type_antigravity": "Antigravity",
+    "type_iflow": "iFlow",
+    "type_vertex": "Vertex",
+    "type_empty": "Empty",
+    "type_unknown": "Other",
+    "type_virtual": "Virtual auth file",
+    "models_button": "Models",
+    "models_title": "Supported models",
+    "models_loading": "Loading model list...",
+    "models_empty": "No available models for this credential",
+    "models_empty_desc": "This credential may not be loaded by the server yet, or no models are bound to it.",
+    "models_unsupported": "This feature is not supported in the current version",
+    "models_unsupported_desc": "Please update CLI Proxy API to the latest version and try again",
+    "models_excluded_badge": "Excluded",
+    "models_excluded_hint": "This model is excluded by OAuth"
+  },
+  "vertex_import": {
+    "title": "Vertex JSON Login",
+    "description": "Upload a Google service account JSON to store it as auth-dir/vertex-<project>.json using the same rules as the CLI vertex-import helper.",
+    "location_label": "Region (optional)",
+    "location_placeholder": "us-central1",
+    "location_hint": "Leave empty to use the default region us-central1.",
+    "file_label": "Service account key JSON",
+    "file_hint": "Only Google Cloud service account key JSON files are accepted.",
+    "file_placeholder": "No file selected",
+    "choose_file": "Choose File",
+    "import_button": "Import Vertex Credential",
+    "file_required": "Select a .json credential file first",
+    "success": "Vertex credential imported successfully",
+    "result_title": "Credential saved",
+    "result_project": "Project ID",
+    "result_email": "Service account",
+    "result_location": "Region",
+    "result_file": "Persisted file"
+  },
+  "oauth_excluded": {
+    "title": "OAuth Excluded Models",
+    "description": "Per-provider exclusions are shown as cards; click edit to adjust. Wildcards * are supported and the scope follows the auth file filter.",
+    "add": "Add Exclusion",
+    "add_title": "Add provider exclusion",
+    "edit_title": "Edit exclusions for {{provider}}",
+    "refresh": "Refresh",
+    "refreshing": "Refreshing...",
+    "provider_label": "Provider",
+    "provider_auto": "Follow current filter",
+    "provider_placeholder": "e.g. gemini-cli",
+    "provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
+    "models_label": "Models to exclude",
+    "models_placeholder": "gpt-4.1-mini\n*-preview",
+    "models_hint": "Separate by commas or new lines; saving an empty list removes that provider. * wildcards are supported.",
+    "save": "Save/Update",
+    "saving": "Saving...",
+    "save_success": "Excluded models updated",
+    "save_failed": "Failed to update excluded models",
+    "delete": "Delete Provider",
+    "delete_confirm": "Delete the exclusion list for {{provider}}?",
+    "delete_success": "Exclusion list removed",
+    "delete_failed": "Failed to delete exclusion list",
+    "deleting": "Deleting...",
+    "no_models": "No excluded models",
+    "model_count": "{{count}} models excluded",
+    "list_empty_all": "No exclusions yet—use “Add Exclusion” to create one.",
+    "list_empty_filtered": "No exclusions in this scope; click “Add Exclusion” to add.",
+    "disconnected": "Connect to the server to view exclusions",
+    "load_failed": "Failed to load exclusion list",
+    "provider_required": "Please enter a provider first",
+    "scope_all": "Scope: All providers",
+    "scope_provider": "Scope: {{provider}}",
+    "upgrade_required": "This feature requires a newer CLI Proxy API (CPA) version. Please upgrade.",
+    "upgrade_required_title": "Please upgrade CLI Proxy API",
+    "upgrade_required_desc": "The current server does not support the OAuth excluded models API. Please upgrade to the latest CLI Proxy API (CPA) version."
+  },
+  "auth_login": {
+    "codex_oauth_title": "Codex OAuth",
+    "codex_oauth_button": "Start Codex Login",
+    "codex_oauth_hint": "Login to Codex service through OAuth flow, automatically obtain and save authentication files.",
+    "codex_oauth_url_label": "Authorization URL:",
+    "codex_open_link": "Open Link",
+    "codex_copy_link": "Copy Link",
+    "codex_oauth_status_waiting": "Waiting for authentication...",
+    "codex_oauth_status_success": "Authentication successful!",
+    "codex_oauth_status_error": "Authentication failed:",
+    "codex_oauth_start_error": "Failed to start Codex OAuth:",
+    "codex_oauth_polling_error": "Failed to check authentication status:",
+    "anthropic_oauth_title": "Anthropic OAuth",
+    "anthropic_oauth_button": "Start Anthropic Login",
+    "anthropic_oauth_hint": "Login to Anthropic (Claude) service through OAuth flow, automatically obtain and save authentication files.",
+    "anthropic_oauth_url_label": "Authorization URL:",
+    "anthropic_open_link": "Open Link",
+    "anthropic_copy_link": "Copy Link",
+    "anthropic_oauth_status_waiting": "Waiting for authentication...",
+    "anthropic_oauth_status_success": "Authentication successful!",
+    "anthropic_oauth_status_error": "Authentication failed:",
+    "anthropic_oauth_start_error": "Failed to start Anthropic OAuth:",
+    "anthropic_oauth_polling_error": "Failed to check authentication status:",
+    "antigravity_oauth_title": "Antigravity OAuth",
+    "antigravity_oauth_button": "Start Antigravity Login",
+    "antigravity_oauth_hint": "Login to Antigravity service (Google account) through OAuth flow, automatically obtain and save authentication files.",
+    "antigravity_oauth_url_label": "Authorization URL:",
+    "antigravity_open_link": "Open Link",
+    "antigravity_copy_link": "Copy Link",
+    "antigravity_oauth_status_waiting": "Waiting for authentication...",
+    "antigravity_oauth_status_success": "Authentication successful!",
+    "antigravity_oauth_status_error": "Authentication failed:",
+    "antigravity_oauth_start_error": "Failed to start Antigravity OAuth:",
+    "antigravity_oauth_polling_error": "Failed to check authentication status:",
+    "gemini_cli_oauth_title": "Gemini CLI OAuth",
+    "gemini_cli_oauth_button": "Start Gemini CLI Login",
+    "gemini_cli_oauth_hint": "Login to Google Gemini CLI service through OAuth flow, automatically obtain and save authentication files.",
+    "gemini_cli_project_id_label": "Google Cloud Project ID:",
+    "gemini_cli_project_id_placeholder": "Enter Google Cloud Project ID",
+    "gemini_cli_project_id_hint": "Project ID is required for Gemini CLI OAuth.",
+    "gemini_cli_project_id_required": "Please enter a Google Cloud project ID.",
+    "gemini_cli_oauth_url_label": "Authorization URL:",
+    "gemini_cli_open_link": "Open Link",
+    "gemini_cli_copy_link": "Copy Link",
+    "gemini_cli_oauth_status_waiting": "Waiting for authentication...",
+    "gemini_cli_oauth_status_success": "Authentication successful!",
+    "gemini_cli_oauth_status_error": "Authentication failed:",
+    "gemini_cli_oauth_start_error": "Failed to start Gemini CLI OAuth:",
+    "gemini_cli_oauth_polling_error": "Failed to check authentication status:",
+    "qwen_oauth_title": "Qwen OAuth",
+    "qwen_oauth_button": "Start Qwen Login",
+    "qwen_oauth_hint": "Login to Qwen service through device authorization flow, automatically obtain and save authentication files.",
+    "qwen_oauth_url_label": "Authorization URL:",
+    "qwen_open_link": "Open Link",
+    "qwen_copy_link": "Copy Link",
+    "qwen_oauth_status_waiting": "Waiting for authentication...",
+    "qwen_oauth_status_success": "Authentication successful!",
+    "qwen_oauth_status_error": "Authentication failed:",
+    "qwen_oauth_start_error": "Failed to start Qwen OAuth:",
+    "qwen_oauth_polling_error": "Failed to check authentication status:",
+    "oauth_callback_label": "Callback URL",
+    "oauth_callback_placeholder": "http://localhost:1455/auth/callback?code=...&state=...",
+    "oauth_callback_hint": "Remote browser mode: after the provider redirects to http://localhost:..., copy the full URL and submit it here.",
+    "oauth_callback_button": "Submit Callback URL",
+    "oauth_callback_required": "Please paste the full redirect URL first.",
+    "oauth_callback_success": "Callback URL submitted. Continue waiting for authentication.",
+    "oauth_callback_error": "Failed to submit callback URL:",
+    "oauth_callback_upgrade_hint": "Please update CLI Proxy API or check the connection.",
+    "oauth_callback_status_success": "Callback URL submitted, waiting for authentication...",
+    "oauth_callback_status_error": "Callback URL submission failed:",
+    "missing_state": "Unable to retrieve authentication state parameter",
+    "iflow_oauth_title": "iFlow OAuth",
+    "iflow_oauth_button": "Start iFlow Login",
+    "iflow_oauth_hint": "Login to iFlow service through OAuth flow, automatically obtain and save authentication files.",
+    "iflow_oauth_url_label": "Authorization URL:",
+    "iflow_open_link": "Open Link",
+    "iflow_copy_link": "Copy Link",
+    "iflow_oauth_status_waiting": "Waiting for authentication...",
+    "iflow_oauth_status_success": "Authentication successful!",
+    "iflow_oauth_status_error": "Authentication failed:",
+    "iflow_oauth_start_error": "Failed to start iFlow OAuth:",
+    "iflow_oauth_polling_error": "Failed to check authentication status:",
+    "iflow_cookie_title": "iFlow Cookie Login",
+    "iflow_cookie_label": "Cookie Value:",
+    "iflow_cookie_placeholder": "Paste browser cookie, e.g. sessionid=...;",
+    "iflow_cookie_hint": "Submit an existing cookie to finish login without opening the authorization link; the credential file will be saved automatically.",
+    "iflow_cookie_key_hint": "Note: Create a key on the platform first.",
+    "iflow_cookie_button": "Submit Cookie Login",
+    "iflow_cookie_status_success": "Cookie login succeeded and credentials are saved.",
+    "iflow_cookie_status_error": "Cookie login failed:",
+    "iflow_cookie_status_duplicate": "Duplicate config:",
+    "iflow_cookie_start_error": "Failed to submit cookie login:",
+    "iflow_cookie_config_duplicate": "A config file already exists (duplicate). Remove the existing file and try again if you want to re-save it.",
+    "iflow_cookie_required": "Please provide the Cookie value first.",
+    "iflow_cookie_result_title": "Cookie Login Result",
+    "iflow_cookie_result_email": "Account",
+    "iflow_cookie_result_expired": "Expires At",
+    "iflow_cookie_result_path": "Saved Path",
+    "iflow_cookie_result_type": "Type",
+    "remote_access_disabled": "This login method is not available for remote access. Please access from localhost."
+  },
+  "usage_stats": {
+    "title": "Usage Statistics",
+    "total_requests": "Total Requests",
+    "success_requests": "Success Requests",
+    "failed_requests": "Failed Requests",
+    "total_tokens": "Total Tokens",
+    "cached_tokens": "Cached Tokens",
+    "reasoning_tokens": "Reasoning Tokens",
+    "rpm_30m": "RPM",
+    "tpm_30m": "TPM",
+    "rate_30m": "Rate (last 30 min)",
+    "model_name": "Model Name",
+    "model_price_settings": "Model Pricing Settings",
+    "saved_prices": "Saved Prices",
+    "requests_trend": "Request Trends",
+    "tokens_trend": "Token Usage Trends",
+    "api_details": "API Details",
+    "by_hour": "By Hour",
+    "by_day": "By Day",
+    "refresh": "Refresh",
+    "export": "Export",
+    "import": "Import",
+    "export_success": "Usage export downloaded",
+    "import_success": "Import complete: added {{added}}, skipped {{skipped}}, total {{total}}, failed {{failed}}",
+    "import_invalid": "Invalid usage export file",
+    "chart_line_label_1": "Line 1",
+    "chart_line_label_2": "Line 2",
+    "chart_line_label_3": "Line 3",
+    "chart_line_label_4": "Line 4",
+    "chart_line_label_5": "Line 5",
+    "chart_line_label_6": "Line 6",
+    "chart_line_label_7": "Line 7",
+    "chart_line_label_8": "Line 8",
+    "chart_line_label_9": "Line 9",
+    "chart_line_hidden": "Hide",
+    "chart_line_actions_label": "Lines to display",
+    "chart_line_add": "Add line",
+    "chart_line_all": "All",
+    "chart_line_delete": "Delete line",
+    "chart_line_hint": "Show up to 9 model lines at once",
+    "no_data": "No Data Available",
+    "loading_error": "Loading Failed",
+    "api_endpoint": "API Endpoint",
+    "requests_count": "Request Count",
+    "tokens_count": "Token Count",
+    "models": "Model Statistics",
+    "success_rate": "Success Rate",
+    "total_cost": "Total Cost",
+    "total_cost_hint": "Based on configured model pricing",
+    "model_price_title": "Model Pricing",
+    "model_price_reset": "Clear Prices",
+    "model_price_model_label": "Model",
+    "model_price_select_placeholder": "Choose a model",
+    "model_price_select_hint": "Models come from usage details",
+    "model_price_prompt": "Prompt price",
+    "model_price_completion": "Completion price",
+    "model_price_cache": "Cache price",
+    "model_price_save": "Save Price",
+    "model_price_empty": "No model prices set",
+    "model_price_model": "Model",
+    "model_price_saved": "Model price saved",
+    "model_price_model_required": "Please choose a model to set pricing",
+    "cost_trend": "Cost Overview",
+    "cost_axis_label": "Cost ($)",
+    "cost_need_price": "Set a model price to view cost stats",
+    "cost_need_usage": "No usage data available to calculate cost",
+    "cost_no_data": "No cost data yet"
+  },
+  "stats": {
+    "success": "Success",
+    "failure": "Failure"
+  },
+  "logs": {
+    "title": "Logs Viewer",
+    "refresh_button": "Refresh Logs",
+    "clear_button": "Clear Logs",
+    "download_button": "Download Logs",
+    "error_log_button": "Select Error Log",
+    "error_logs_modal_title": "Error Request Logs",
+    "error_logs_description": "Pick an error request log file to download (only generated when request logging is off).",
+    "error_logs_request_log_enabled": "Request logging is enabled, so this list will always be empty. Disable request logging and refresh to view error logs.",
+    "error_logs_empty": "No error request log files found",
+    "error_logs_load_error": "Failed to load error log list",
+    "error_logs_size": "Size",
+    "error_logs_modified": "Last modified",
+    "error_logs_download": "Download",
+    "error_log_download_success": "Error log downloaded successfully",
+    "request_log_download_title": "Download Request Log",
+    "request_log_download_confirm": "Download request log for ID {{id}}?",
+    "request_log_download_success": "Request log downloaded successfully",
+    "action_hint": "Double-click a log line to copy the raw text. Long-press a line with a request ID to download the request log.",
+    "action_hint_disabled": "Double-click a log line to copy the raw text. Enable request logging to long-press a line with a request ID and download the request log.",
+    "empty_title": "No Logs Available",
+    "empty_desc": "When \"Enable logging to file\" is enabled, logs will be displayed here",
+    "log_content": "Log Content",
+    "loading": "Loading logs...",
+    "load_error": "Failed to load logs",
+    "clear_confirm": "Are you sure you want to clear all logs? This action cannot be undone!",
+    "clear_success": "Logs cleared successfully",
+    "download_success": "Logs downloaded successfully",
+    "auto_refresh": "Auto Refresh",
+    "auto_refresh_enabled": "Auto refresh enabled",
+    "auto_refresh_disabled": "Auto refresh disabled",
+    "load_more_hint": "Scroll up to load more",
+    "hidden_lines": "Hidden: {{count}} lines",
+    "loaded_lines": "Loaded: {{count}} lines",
+    "filtered_lines": "Filtered: {{count}} lines",
+    "hide_management_logs": "Hide {{prefix}} logs",
+    "search_placeholder": "Search logs by content or keyword",
+    "search_empty_title": "No matching logs found",
+    "search_empty_desc": "Try a different keyword or clear the filters.",
+    "double_click_copy_hint": "Double-click to copy raw log line",
+    "copy_success": "Log copied to clipboard",
+    "copy_failed": "Copy failed",
+    "lines": "lines",
+    "removed": "Filtered",
+    "upgrade_required_title": "Please Upgrade CLI Proxy API",
+    "upgrade_required_desc": "The current server version does not support the logs viewing feature. Please upgrade to the latest version of CLI Proxy API to use this feature."
+  },
+  "config_management": {
+    "title": "Config Management",
+    "editor_title": "Configuration File",
+    "reload": "Reload",
+    "save": "Save",
+    "description": "View and edit the server-side config.yaml file. Validate the syntax before saving.",
+    "status_idle": "Waiting for action",
+    "status_loading": "Loading configuration...",
+    "status_loaded": "Configuration loaded",
+    "status_dirty": "Unsaved changes",
+    "status_disconnected": "Connect to the server to load the configuration",
+    "status_load_failed": "Load failed",
+    "status_saving": "Saving configuration...",
+    "status_saved": "Configuration saved",
+    "status_save_failed": "Save failed",
+    "save_success": "Configuration saved successfully",
+    "error_yaml_not_supported": "Server did not return YAML. Verify the /config.yaml endpoint is available.",
+    "editor_placeholder": "key: value",
+    "search_placeholder": "Search config...",
+    "search_button": "Search",
+    "search_no_results": "No results",
+    "search_prev": "Previous",
+    "search_next": "Next"
+  },
+  "system_info": {
+    "title": "Management Center Info",
+    "connection_status_title": "Connection Status",
+    "api_status_label": "API Status:",
+    "config_status_label": "Config Status:",
+    "last_update_label": "Last Update:",
+    "cache_data": "Cache Data",
+    "real_time_data": "Real-time Data",
+    "not_loaded": "Not Loaded",
+    "seconds_ago": "seconds ago",
+    "models_title": "Available Models",
+    "models_desc": "Shows the /v1/models response and uses saved API keys for auth automatically.",
+    "models_loading": "Loading available models...",
+    "models_empty": "No models returned by /v1/models",
+    "models_error": "Failed to load model list",
+    "models_count": "{{count}} available models",
+    "version_check_title": "Update Check",
+    "version_check_desc": "Call the /latest-version endpoint to compare with the server version and see if an update is available.",
+    "version_current_label": "Current version",
+    "version_latest_label": "Latest version",
+    "version_check_button": "Check for updates",
+    "version_check_idle": "Click to check for updates",
+    "version_checking": "Checking for the latest version...",
+    "version_update_available": "An update is available: {{version}}",
+    "version_is_latest": "You are on the latest version",
+    "version_check_error": "Update check failed",
+    "version_current_missing": "Server version is unavailable; cannot compare",
+    "version_unknown": "Unknown",
+    "quick_links_title": "Quick Links",
+    "quick_links_desc": "Access project repositories and documentation for help and updates.",
+    "link_main_repo": "Main Repository",
+    "link_main_repo_desc": "CLI Proxy API core program source code",
+    "link_webui_repo": "WebUI Repository",
+    "link_webui_repo_desc": "Management Center frontend source code",
+    "link_docs": "Documentation",
+    "link_docs_desc": "Usage tutorials and configuration guides"
+  },
+  "notification": {
+    "debug_updated": "Debug settings updated",
+    "proxy_updated": "Proxy settings updated",
+    "proxy_cleared": "Proxy settings cleared",
+    "retry_updated": "Retry settings updated",
+    "quota_switch_project_updated": "Project switch settings updated",
+    "quota_switch_preview_updated": "Preview model switch settings updated",
+    "usage_statistics_updated": "Usage statistics settings updated",
+    "logging_to_file_updated": "Logging settings updated",
+    "request_log_updated": "Request logging setting updated",
+    "ws_auth_updated": "WebSocket authentication setting updated",
+    "api_key_added": "API key added successfully",
+    "api_key_updated": "API key updated successfully",
+    "api_key_deleted": "API key deleted successfully",
+    "gemini_key_added": "Gemini key added successfully",
+    "gemini_key_updated": "Gemini key updated successfully",
+    "gemini_key_deleted": "Gemini key deleted successfully",
+    "gemini_multi_input_required": "Please enter at least one Gemini key",
+    "gemini_multi_failed": "Gemini bulk add failed",
+    "gemini_multi_summary": "Gemini bulk add finished: {{success}} added, {{skipped}} skipped, {{failed}} failed",
+    "codex_config_added": "Codex configuration added successfully",
+    "codex_config_updated": "Codex configuration updated successfully",
+    "codex_config_deleted": "Codex configuration deleted successfully",
+    "codex_base_url_required": "Please enter the Codex Base URL",
+    "claude_config_added": "Claude configuration added successfully",
+    "claude_config_updated": "Claude configuration updated successfully",
+    "claude_config_deleted": "Claude configuration deleted successfully",
+    "config_enabled": "Configuration enabled",
+    "config_disabled": "Configuration disabled",
+    "field_required": "Required fields cannot be empty",
+    "openai_provider_required": "Please fill in provider name and Base URL",
+    "openai_provider_added": "OpenAI provider added successfully",
+    "openai_provider_updated": "OpenAI provider updated successfully",
+    "openai_provider_deleted": "OpenAI provider deleted successfully",
+    "ampcode_updated": "Ampcode configuration updated",
+    "ampcode_upstream_api_key_cleared": "Ampcode upstream API key override cleared",
+    "openai_model_name_required": "Model name is required",
+    "openai_test_url_required": "Please provide a valid Base URL before testing",
+    "openai_test_key_required": "Please add at least one API key before testing",
+    "openai_test_model_required": "Please select a model to test",
+    "data_refreshed": "Data refreshed successfully",
+    "connection_required": "Please establish connection first",
+    "refresh_failed": "Refresh failed",
+    "update_failed": "Update failed",
+    "add_failed": "Add failed",
+    "delete_failed": "Delete failed",
+    "upload_failed": "Upload failed",
+    "download_failed": "Download failed",
+    "login_failed": "Login failed",
+    "please_enter": "Please enter",
+    "please_fill": "Please fill",
+    "provider_name_url": "provider name and Base URL",
+    "api_key": "API key",
+    "gemini_api_key": "Gemini API key",
+    "codex_api_key": "Codex API key",
+    "claude_api_key": "Claude API key",
+    "link_copied": "Link copied to clipboard"
+  },
+  "language": {
+    "switch": "Language",
+    "chinese": "中文",
+    "english": "English"
+  },
+  "theme": {
+    "switch": "Theme",
+    "light": "Light",
+    "dark": "Dark",
+    "switch_to_light": "Switch to light mode",
+    "switch_to_dark": "Switch to dark mode",
+    "auto": "Follow system"
+  },
+  "sidebar": {
+    "toggle_expand": "Expand sidebar",
+    "toggle_collapse": "Collapse sidebar"
+  },
+  "footer": {
+    "api_version": "CLI Proxy API Version",
+    "build_date": "Build Time",
+    "version": "Management UI Version",
+    "author": "Author"
+  }
+}
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -0,0 +1,778 @@
+{
+  "common": {
+    "login": "登录",
+    "logout": "登出",
+    "cancel": "取消",
+    "confirm": "确认",
+    "save": "保存",
+    "delete": "删除",
+    "edit": "编辑",
+    "add": "添加",
+    "update": "更新",
+    "refresh": "刷新",
+    "close": "关闭",
+    "success": "成功",
+    "error": "错误",
+    "info": "信息",
+    "warning": "警告",
+    "loading": "加载中...",
+    "connecting": "连接中...",
+    "connected": "已连接",
+    "disconnected": "未连接",
+    "connecting_status": "连接中",
+    "connected_status": "已连接",
+    "disconnected_status": "未连接",
+    "yes": "是",
+    "no": "否",
+    "not_set": "未设置",
+    "optional": "可选",
+    "required": "必填",
+    "api_key": "密钥",
+    "base_url": "地址",
+    "prefix": "前缀",
+    "proxy_url": "代理",
+    "alias": "别名",
+    "failure": "失败",
+    "unknown_error": "未知错误",
+    "copy": "复制",
+    "custom_headers_label": "自定义请求头",
+    "custom_headers_hint": "可选，设置需要附带到请求中的 HTTP 头，名称和值均不能为空。",
+    "custom_headers_add": "添加请求头",
+    "custom_headers_key_placeholder": "Header 名称，例如 X-Custom-Header",
+    "custom_headers_value_placeholder": "Header 值",
+    "model_name_placeholder": "模型名称，例如 claude-3-5-sonnet-20241022",
+    "model_alias_placeholder": "模型别名 (可选)"
+  },
+  "title": {
+    "main": "CLI Proxy API Management Center",
+    "login": "CLI Proxy API Management Center",
+    "abbr": "CPAMC"
+  },
+  "auto_login": {
+    "title": "正在自动登录...",
+    "message": "正在使用本地保存的连接信息尝试连接服务器"
+  },
+  "login": {
+    "subtitle": "请输入连接信息以访问管理界面",
+    "connection_title": "连接地址",
+    "connection_current": "当前地址",
+    "connection_auto_hint": "系统将自动使用当前访问地址进行连接",
+    "custom_connection_label": "自定义连接地址:",
+    "custom_connection_placeholder": "例如: https://example.com:8317",
+    "custom_connection_hint": "默认使用当前访问地址，若需要可手动输入其他地址。",
+    "use_current_address": "使用当前地址",
+    "management_key_label": "管理密钥:",
+    "management_key_placeholder": "请输入管理密钥",
+    "connect_button": "连接",
+    "submit_button": "登录",
+    "submitting": "连接中...",
+    "error_title": "登录失败",
+    "error_required": "请填写完整的连接信息",
+    "error_invalid": "连接失败，请检查地址和密钥"
+  },
+  "header": {
+    "check_connection": "检查连接",
+    "refresh_all": "刷新全部",
+    "logout": "登出"
+  },
+  "connection": {
+    "title": "连接信息",
+    "server_address": "服务器地址:",
+    "management_key": "管理密钥:",
+    "status": "连接状态:"
+  },
+  "nav": {
+    "dashboard": "仪表盘",
+    "basic_settings": "基础设置",
+    "api_keys": "API 密钥",
+    "ai_providers": "AI 提供商",
+    "auth_files": "认证文件",
+    "oauth": "OAuth 登录",
+    "usage_stats": "使用统计",
+    "config_management": "配置管理",
+    "logs": "日志查看",
+    "system_info": "中心信息"
+  },
+  "dashboard": {
+    "title": "仪表盘",
+    "subtitle": "欢迎使用 CLI Proxy API 管理中心",
+    "openai_providers": "OpenAI 提供商",
+    "quick_actions": "快捷操作",
+    "current_config": "当前配置",
+    "management_keys": "管理密钥",
+    "provider_keys_detail": "G:{{gemini}} C:{{codex}} Cl:{{claude}} O:{{openai}}",
+    "oauth_credentials": "OAuth 凭证",
+    "usage_overview": "使用概览",
+    "total_requests": "总请求数",
+    "total_tokens": "总 Token 数",
+    "rpm_30min": "RPM (30分钟)",
+    "tpm_30min": "TPM (30分钟)",
+    "models_used": "使用模型数",
+    "no_usage_data": "暂无使用数据",
+    "view_detailed_usage": "查看详细统计",
+    "edit_settings": "编辑设置",
+    "available_models": "可用模型",
+    "available_models_desc": "所有提供商的模型总数"
+  },
+  "basic_settings": {
+    "title": "基础设置",
+    "debug_title": "调试模式",
+    "debug_enable": "启用调试模式",
+    "proxy_title": "代理设置",
+    "proxy_url_label": "代理 URL:",
+    "proxy_url_placeholder": "例如: socks5://user:pass@127.0.0.1:1080/",
+    "proxy_update": "更新",
+    "proxy_clear": "清空",
+    "retry_title": "请求重试",
+    "retry_count_label": "重试次数:",
+    "retry_update": "更新",
+    "quota_title": "配额超出行为",
+    "quota_switch_project": "自动切换项目",
+    "quota_switch_preview": "切换到预览模型",
+    "usage_statistics_title": "使用统计",
+    "usage_statistics_enable": "启用使用统计",
+    "logging_title": "日志记录",
+    "logging_to_file_enable": "启用日志记录到文件",
+    "request_log_title": "请求日志",
+    "request_log_enable": "启用请求日志",
+    "request_log_warning": "仅在需要排查问题时开启，日常请保持关闭。",
+    "ws_auth_title": "WebSocket 鉴权",
+    "ws_auth_enable": "启用 /ws/* 鉴权"
+  },
+  "api_keys": {
+    "title": "API 密钥管理",
+    "proxy_auth_title": "代理服务认证密钥",
+    "add_button": "添加密钥",
+    "empty_title": "暂无API密钥",
+    "empty_desc": "点击上方按钮添加第一个密钥",
+    "item_title": "API密钥",
+    "add_modal_title": "添加API密钥",
+    "add_modal_key_label": "API密钥:",
+    "add_modal_key_placeholder": "请输入API密钥",
+    "edit_modal_title": "编辑API密钥",
+    "edit_modal_key_label": "API密钥:",
+    "delete_confirm": "确定要删除这个API密钥吗？"
+  },
+  "ai_providers": {
+    "title": "AI 提供商配置",
+    "gemini_title": "Gemini API 密钥",
+    "gemini_add_button": "添加密钥",
+    "gemini_empty_title": "暂无Gemini密钥",
+    "gemini_empty_desc": "点击上方按钮添加第一个密钥",
+    "gemini_item_title": "Gemini密钥",
+    "gemini_add_modal_title": "添加Gemini API密钥",
+    "gemini_add_modal_key_label": "API密钥",
+    "gemini_add_modal_key_placeholder": "输入 Gemini API 密钥",
+    "gemini_add_modal_key_hint": "逐条输入密钥，可同时指定可选 Base URL。",
+    "gemini_keys_add_btn": "添加密钥",
+    "gemini_base_url_label": "Base URL (可选)",
+    "gemini_base_url_placeholder": "例如: https://generativelanguage.googleapis.com",
+    "gemini_edit_modal_title": "编辑Gemini API密钥",
+    "gemini_edit_modal_key_label": "API密钥:",
+    "gemini_delete_confirm": "确定要删除这个Gemini密钥吗？",
+    "excluded_models_label": "排除的模型 (可选):",
+    "excluded_models_placeholder": "用逗号或换行分隔，例如: gemini-1.5-pro, gemini-1.5-flash",
+    "excluded_models_hint": "留空表示不过滤；保存时会自动去重并忽略空白。",
+    "excluded_models_count": "排除 {{count}} 个模型",
+    "prefix_label": "前缀 (可选):",
+    "prefix_placeholder": "例如: team-a",
+    "prefix_hint": "设置后可用 prefix/<model> 选择该条目。",
+    "config_toggle_label": "启用",
+    "config_disabled_badge": "已停用",
+    "codex_title": "Codex API 配置",
+    "codex_add_button": "添加配置",
+    "codex_empty_title": "暂无Codex配置",
+    "codex_empty_desc": "点击上方按钮添加第一个配置",
+    "codex_item_title": "Codex配置",
+    "codex_add_modal_title": "添加Codex API配置",
+    "codex_add_modal_key_label": "API密钥:",
+    "codex_add_modal_key_placeholder": "请输入Codex API密钥",
+    "codex_add_modal_url_label": "Base URL (必填):",
+    "codex_add_modal_url_placeholder": "例如: https://api.example.com",
+    "codex_add_modal_proxy_label": "代理 URL (可选):",
+    "codex_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
+    "codex_edit_modal_title": "编辑Codex API配置",
+    "codex_edit_modal_key_label": "API密钥:",
+    "codex_edit_modal_url_label": "Base URL (必填):",
+    "codex_edit_modal_proxy_label": "代理 URL (可选):",
+    "codex_delete_confirm": "确定要删除这个Codex配置吗？",
+    "claude_title": "Claude API 配置",
+    "claude_add_button": "添加配置",
+    "claude_empty_title": "暂无Claude配置",
+    "claude_empty_desc": "点击上方按钮添加第一个配置",
+    "claude_item_title": "Claude配置",
+    "claude_add_modal_title": "添加Claude API配置",
+    "claude_add_modal_key_label": "API密钥:",
+    "claude_add_modal_key_placeholder": "请输入Claude API密钥",
+    "claude_add_modal_url_label": "Base URL (可选):",
+    "claude_add_modal_url_placeholder": "例如: https://api.anthropic.com",
+    "claude_add_modal_proxy_label": "代理 URL (可选):",
+    "claude_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
+    "claude_edit_modal_title": "编辑Claude API配置",
+    "claude_edit_modal_key_label": "API密钥:",
+    "claude_edit_modal_url_label": "Base URL (可选):",
+    "claude_edit_modal_proxy_label": "代理 URL (可选):",
+    "claude_delete_confirm": "确定要删除这个Claude配置吗？",
+    "claude_models_label": "自定义模型 (可选):",
+    "claude_models_hint": "为空表示使用全部模型；可填写 name[, alias] 以限制或重命名模型。",
+    "claude_models_add_btn": "添加模型",
+    "claude_models_count": "模型数量",
+    "ampcode_title": "Amp CLI 集成 (ampcode)",
+    "ampcode_modal_title": "配置 Ampcode",
+    "ampcode_upstream_url_label": "Upstream URL",
+    "ampcode_upstream_url_placeholder": "例如: https://ampcode.com",
+    "ampcode_upstream_url_hint": "可选；留空表示使用默认/自动发现的控制平面地址。",
+    "ampcode_upstream_api_key_label": "Upstream API Key (Amp官方)",
+    "ampcode_upstream_api_key_placeholder": "输入 sk-amp...（留空不修改）",
+    "ampcode_upstream_api_key_hint": "可选；留空不会修改当前Amp官方密钥，需清除请点击下方按钮。",
+    "ampcode_upstream_api_key_current": "当前Amp官方密钥: {{key}}",
+    "ampcode_clear_upstream_api_key": "清除官方密钥",
+    "ampcode_clear_upstream_api_key_confirm": "确定要清除 Ampcode 的 upstream API key（Amp官方）吗？",
+    "ampcode_force_model_mappings_label": "强制应用模型映射",
+    "ampcode_force_model_mappings_hint": "开启后，模型映射将覆盖本地 API Key 可用性判断。",
+    "ampcode_model_mappings_label": "模型映射 (from → to)",
+    "ampcode_model_mappings_hint": "用于重写 Amp 请求中的模型名称；留空表示不做映射。",
+    "ampcode_model_mappings_add_btn": "添加映射",
+    "ampcode_model_mappings_from_placeholder": "from 模型（原始）",
+    "ampcode_model_mappings_to_placeholder": "to 模型（目标）",
+    "ampcode_model_mappings_count": "映射数量",
+    "ampcode_mappings_overwrite_confirm": "当前未成功加载服务器已有映射，继续保存可能覆盖或清空已有映射，是否继续？",
+    "openai_title": "OpenAI 兼容提供商",
+    "openai_add_button": "添加提供商",
+    "openai_empty_title": "暂无OpenAI兼容提供商",
+    "openai_empty_desc": "点击上方按钮添加第一个提供商",
+    "openai_add_modal_title": "添加OpenAI兼容提供商",
+    "openai_add_modal_name_label": "提供商名称:",
+    "openai_add_modal_name_placeholder": "例如: openrouter",
+    "openai_add_modal_url_label": "Base URL:",
+    "openai_add_modal_url_placeholder": "例如: https://openrouter.ai/api/v1",
+    "openai_add_modal_keys_label": "API密钥",
+    "openai_edit_modal_keys_label": "API密钥",
+    "openai_keys_hint": "每个密钥可搭配一个可选代理地址，更便于管理。",
+    "openai_keys_add_btn": "添加密钥",
+    "openai_key_placeholder": "输入 sk- 开头的密钥",
+    "openai_proxy_placeholder": "可选代理 URL (如 socks5://...)",
+    "openai_add_modal_models_label": "模型列表 (name[, alias] 每行一个):",
+    "openai_models_hint": "示例：gpt-4o-mini 或 moonshotai/kimi-k2:free, kimi-k2",
+    "openai_model_name_placeholder": "模型名称，如 moonshotai/kimi-k2:free",
+    "openai_model_alias_placeholder": "模型别名 (可选)",
+    "openai_models_add_btn": "添加模型",
+    "openai_models_fetch_button": "从 /v1/models 获取",
+    "openai_models_fetch_title": "从 /v1/models 选择模型",
+    "openai_models_fetch_hint": "使用上方 Base URL 调用 /v1/models 端点，附带首个 API Key（Bearer）与自定义请求头。",
+    "openai_models_fetch_url_label": "请求地址",
+    "openai_models_fetch_refresh": "重新获取",
+    "openai_models_fetch_loading": "正在从 /v1/models 获取模型列表...",
+    "openai_models_fetch_empty": "未获取到模型，请检查端点或鉴权信息。",
+    "openai_models_fetch_error": "获取模型失败",
+    "openai_models_fetch_back": "返回编辑",
+    "openai_models_fetch_apply": "添加所选模型",
+    "openai_models_search_label": "搜索模型",
+    "openai_models_search_placeholder": "按名称、别名或描述筛选",
+    "openai_models_search_empty": "没有匹配的模型，请更换关键字试试。",
+    "openai_models_fetch_invalid_url": "请先填写有效的 Base URL",
+    "openai_models_fetch_added": "已添加 {{count}} 个新模型",
+    "openai_edit_modal_title": "编辑OpenAI兼容提供商",
+    "openai_edit_modal_name_label": "提供商名称:",
+    "openai_edit_modal_url_label": "Base URL:",
+    "openai_edit_modal_models_label": "模型列表 (name[, alias] 每行一个):",
+    "openai_delete_confirm": "确定要删除这个OpenAI提供商吗？",
+    "openai_keys_count": "密钥数量",
+    "openai_models_count": "模型数量",
+    "openai_test_title": "连通性测试",
+    "openai_test_hint": "使用当前配置向 /v1/chat/completions 请求，验证是否可用。",
+    "openai_test_model_placeholder": "选择或输入要测试的模型",
+    "openai_test_action": "发送测试",
+    "openai_test_running": "正在发送测试请求...",
+    "openai_test_timeout": "测试请求超时（{{seconds}}秒）。",
+    "openai_test_success": "测试成功，模型可用。",
+    "openai_test_failed": "测试失败",
+    "openai_test_select_placeholder": "从当前模型列表选择",
+    "openai_test_select_empty": "当前未配置模型，请先添加模型"
+  },
+  "auth_files": {
+    "title": "认证文件管理",
+    "title_section": "认证文件",
+    "description": "这里集中管理 CLI Proxy 支持的所有 JSON 认证文件（如 Qwen、Gemini、Vertex 等），上传后即可在运行时启用相应的 AI 服务。",
+    "upload_button": "上传文件",
+    "delete_all_button": "删除全部",
+    "empty_title": "暂无认证文件",
+    "empty_desc": "点击上方按钮上传第一个文件",
+    "search_empty_title": "没有匹配的配置文件",
+    "search_empty_desc": "请调整筛选条件或清空搜索关键字再试一次。",
+    "file_size": "大小",
+    "file_modified": "修改时间",
+    "download_button": "下载",
+    "delete_button": "删除",
+    "delete_confirm": "确定要删除文件",
+    "delete_all_confirm": "确定要删除所有认证文件吗？此操作不可恢复！",
+    "delete_filtered_confirm": "确定要删除筛选出的 {{type}} 认证文件吗？此操作不可恢复！",
+    "upload_error_json": "只能上传JSON文件",
+    "upload_success": "文件上传成功",
+    "download_success": "文件下载成功",
+    "delete_success": "文件删除成功",
+    "delete_all_success": "成功删除",
+    "delete_filtered_success": "成功删除 {{count}} 个 {{type}} 认证文件",
+    "delete_filtered_partial": "{{type}} 认证文件删除完成，成功 {{success}} 个，失败 {{failed}} 个",
+    "delete_filtered_none": "当前筛选类型 ({{type}}) 下没有可删除的认证文件",
+    "files_count": "个文件",
+    "pagination_prev": "上一页",
+    "pagination_next": "下一页",
+    "pagination_info": "第 {{current}} / {{total}} 页 · 共 {{count}} 个文件",
+    "search_label": "搜索配置文件",
+    "search_placeholder": "输入名称、类型或提供方关键字",
+    "page_size_label": "单页数量",
+    "page_size_unit": "个/页",
+    "filter_all": "全部",
+    "filter_qwen": "Qwen",
+    "filter_gemini": "Gemini",
+    "filter_gemini-cli": "GeminiCLI",
+    "filter_aistudio": "AIStudio",
+    "filter_claude": "Claude",
+    "filter_codex": "Codex",
+    "filter_antigravity": "Antigravity",
+    "filter_iflow": "iFlow",
+    "filter_vertex": "Vertex",
+    "filter_empty": "空文件",
+    "filter_unknown": "其他",
+    "type_qwen": "Qwen",
+    "type_gemini": "Gemini",
+    "type_gemini-cli": "GeminiCLI",
+    "type_aistudio": "AIStudio",
+    "type_claude": "Claude",
+    "type_codex": "Codex",
+    "type_antigravity": "Antigravity",
+    "type_iflow": "iFlow",
+    "type_vertex": "Vertex",
+    "type_empty": "空文件",
+    "type_unknown": "其他",
+    "type_virtual": "虚拟认证文件",
+    "models_button": "模型",
+    "models_title": "支持的模型",
+    "models_loading": "正在加载模型列表...",
+    "models_empty": "该凭证暂无可用模型",
+    "models_empty_desc": "该认证凭证可能尚未被服务器加载或没有绑定任何模型",
+    "models_unsupported": "当前版本不支持此功能",
+    "models_unsupported_desc": "请更新 CLI Proxy API 到最新版本后重试",
+    "models_excluded_badge": "已排除",
+    "models_excluded_hint": "此模型已被 OAuth 排除"
+  },
+  "vertex_import": {
+    "title": "Vertex JSON 登录",
+    "description": "上传 Google 服务账号 JSON，使用 CLI vertex-import 同步规则写入 auth-dir/vertex-<project>.json。",
+    "location_label": "目标区域 (可选)",
+    "location_placeholder": "us-central1",
+    "location_hint": "留空表示使用默认区域 us-central1。",
+    "file_label": "服务账号密钥 JSON",
+    "file_hint": "仅支持 Google Cloud service account key JSON 文件，私钥会自动规范化。",
+    "file_placeholder": "尚未选择文件",
+    "choose_file": "选择文件",
+    "import_button": "导入 Vertex 凭证",
+    "file_required": "请先选择 .json 凭证文件",
+    "success": "Vertex 凭证导入成功",
+    "result_title": "凭证已保存",
+    "result_project": "项目 ID",
+    "result_email": "服务账号",
+    "result_location": "区域",
+    "result_file": "存储文件"
+  },
+  "oauth_excluded": {
+    "title": "OAuth 排除列表",
+    "description": "按提供商分列展示，点击卡片编辑或删除；支持 * 通配符，范围跟随上方的配置文件过滤标签。",
+    "add": "新增排除",
+    "add_title": "新增提供商排除列表",
+    "edit_title": "编辑 {{provider}} 的排除列表",
+    "refresh": "刷新",
+    "refreshing": "刷新中...",
+    "provider_label": "提供商",
+    "provider_auto": "跟随当前过滤",
+    "provider_placeholder": "例如 gemini-cli / openai",
+    "provider_hint": "默认选中当前筛选的提供商，也可直接输入或选择其他名称。",
+    "models_label": "排除的模型",
+    "models_placeholder": "gpt-4.1-mini\n*-preview",
+    "models_hint": "逗号或换行分隔；留空保存将删除该提供商记录；支持 * 通配符。",
+    "save": "保存/更新",
+    "saving": "正在保存...",
+    "save_success": "排除列表已更新",
+    "save_failed": "更新排除列表失败",
+    "delete": "删除提供商",
+    "delete_confirm": "确定要删除 {{provider}} 的排除列表吗？",
+    "delete_success": "已删除该提供商的排除列表",
+    "delete_failed": "删除排除列表失败",
+    "deleting": "正在删除...",
+    "no_models": "未配置排除模型",
+    "model_count": "排除 {{count}} 个模型",
+    "list_empty_all": "暂无任何提供商的排除列表，点击“新增排除”创建。",
+    "list_empty_filtered": "当前筛选下没有排除项，点击“新增排除”添加。",
+    "disconnected": "请先连接服务器以查看排除列表",
+    "load_failed": "加载排除列表失败",
+    "provider_required": "请先填写提供商名称",
+    "scope_all": "当前范围：全局（显示所有提供商）",
+    "scope_provider": "当前范围：{{provider}}",
+    "upgrade_required": "当前 CPA 版本不支持模型排除列表，请升级 CPA 版本",
+    "upgrade_required_title": "需要升级 CPA 版本",
+    "upgrade_required_desc": "当前服务器版本不支持获取模型排除列表功能，请升级到最新版本的 CPA（CLI Proxy API）后重试。"
+  },
+  "auth_login": {
+    "codex_oauth_title": "Codex OAuth",
+    "codex_oauth_button": "开始 Codex 登录",
+    "codex_oauth_hint": "通过 OAuth 流程登录 Codex 服务，自动获取并保存认证文件。",
+    "codex_oauth_url_label": "授权链接:",
+    "codex_open_link": "打开链接",
+    "codex_copy_link": "复制链接",
+    "codex_oauth_status_waiting": "等待认证中...",
+    "codex_oauth_status_success": "认证成功！",
+    "codex_oauth_status_error": "认证失败:",
+    "codex_oauth_start_error": "启动 Codex OAuth 失败:",
+    "codex_oauth_polling_error": "检查认证状态失败:",
+    "anthropic_oauth_title": "Anthropic OAuth",
+    "anthropic_oauth_button": "开始 Anthropic 登录",
+    "anthropic_oauth_hint": "通过 OAuth 流程登录 Anthropic (Claude) 服务，自动获取并保存认证文件。",
+    "anthropic_oauth_url_label": "授权链接:",
+    "anthropic_open_link": "打开链接",
+    "anthropic_copy_link": "复制链接",
+    "anthropic_oauth_status_waiting": "等待认证中...",
+    "anthropic_oauth_status_success": "认证成功！",
+    "anthropic_oauth_status_error": "认证失败:",
+    "anthropic_oauth_start_error": "启动 Anthropic OAuth 失败:",
+    "anthropic_oauth_polling_error": "检查认证状态失败:",
+    "antigravity_oauth_title": "Antigravity OAuth",
+    "antigravity_oauth_button": "开始 Antigravity 登录",
+    "antigravity_oauth_hint": "通过 OAuth 流程登录 Antigravity（Google 账号）服务，自动获取并保存认证文件。",
+    "antigravity_oauth_url_label": "授权链接:",
+    "antigravity_open_link": "打开链接",
+    "antigravity_copy_link": "复制链接",
+    "antigravity_oauth_status_waiting": "等待认证中...",
+    "antigravity_oauth_status_success": "认证成功！",
+    "antigravity_oauth_status_error": "认证失败:",
+    "antigravity_oauth_start_error": "启动 Antigravity OAuth 失败:",
+    "antigravity_oauth_polling_error": "检查认证状态失败:",
+    "gemini_cli_oauth_title": "Gemini CLI OAuth",
+    "gemini_cli_oauth_button": "开始 Gemini CLI 登录",
+    "gemini_cli_oauth_hint": "通过 OAuth 流程登录 Google Gemini CLI 服务，自动获取并保存认证文件。",
+    "gemini_cli_project_id_label": "Google Cloud 项目 ID:",
+    "gemini_cli_project_id_placeholder": "输入 Google Cloud 项目 ID",
+    "gemini_cli_project_id_hint": "请填写项目 ID，用于 Gemini CLI OAuth 登录。",
+    "gemini_cli_project_id_required": "请填写 Google Cloud 项目 ID。",
+    "gemini_cli_oauth_url_label": "授权链接:",
+    "gemini_cli_open_link": "打开链接",
+    "gemini_cli_copy_link": "复制链接",
+    "gemini_cli_oauth_status_waiting": "等待认证中...",
+    "gemini_cli_oauth_status_success": "认证成功！",
+    "gemini_cli_oauth_status_error": "认证失败:",
+    "gemini_cli_oauth_start_error": "启动 Gemini CLI OAuth 失败:",
+    "gemini_cli_oauth_polling_error": "检查认证状态失败:",
+    "qwen_oauth_title": "Qwen OAuth",
+    "qwen_oauth_button": "开始 Qwen 登录",
+    "qwen_oauth_hint": "通过设备授权流程登录 Qwen 服务，自动获取并保存认证文件。",
+    "qwen_oauth_url_label": "授权链接:",
+    "qwen_open_link": "打开链接",
+    "qwen_copy_link": "复制链接",
+    "qwen_oauth_status_waiting": "等待认证中...",
+    "qwen_oauth_status_success": "认证成功！",
+    "qwen_oauth_status_error": "认证失败:",
+    "qwen_oauth_start_error": "启动 Qwen OAuth 失败:",
+    "qwen_oauth_polling_error": "检查认证状态失败:",
+    "oauth_callback_label": "回调 URL",
+    "oauth_callback_placeholder": "http://localhost:1455/auth/callback?code=...&state=...",
+    "oauth_callback_hint": "远程浏览器模式：当授权跳转到 http://localhost:... 后，复制完整 URL 并提交到这里。",
+    "oauth_callback_button": "提交回调 URL",
+    "oauth_callback_required": "请先粘贴完整的回调 URL。",
+    "oauth_callback_success": "回调 URL 已提交，请继续等待认证。",
+    "oauth_callback_error": "提交回调 URL 失败:",
+    "oauth_callback_upgrade_hint": "请更新CLI Proxy API或检查连接",
+    "oauth_callback_status_success": "回调 URL 已提交，等待认证中...",
+    "oauth_callback_status_error": "回调 URL 提交失败:",
+    "missing_state": "无法获取认证状态参数",
+    "iflow_oauth_title": "iFlow OAuth",
+    "iflow_oauth_button": "开始 iFlow 登录",
+    "iflow_oauth_hint": "通过 OAuth 流程登录 iFlow 服务，自动获取并保存认证文件。",
+    "iflow_oauth_url_label": "授权链接:",
+    "iflow_open_link": "打开链接",
+    "iflow_copy_link": "复制链接",
+    "iflow_oauth_status_waiting": "等待认证中...",
+    "iflow_oauth_status_success": "认证成功！",
+    "iflow_oauth_status_error": "认证失败:",
+    "iflow_oauth_start_error": "启动 iFlow OAuth 失败:",
+    "iflow_oauth_polling_error": "检查认证状态失败:",
+    "iflow_cookie_title": "iFlow Cookie 登录",
+    "iflow_cookie_label": "Cookie 内容:",
+    "iflow_cookie_placeholder": "粘贴浏览器中的 Cookie，例如 sessionid=...;",
+    "iflow_cookie_hint": "直接提交 Cookie 以完成登录（无需打开授权链接），服务端将自动保存凭据。",
+    "iflow_cookie_key_hint": "提示：需在平台上先创建 Key。",
+    "iflow_cookie_button": "提交 Cookie 登录",
+    "iflow_cookie_status_success": "Cookie 登录成功，凭据已保存。",
+    "iflow_cookie_status_error": "Cookie 登录失败:",
+    "iflow_cookie_status_duplicate": "配置文件重复:",
+    "iflow_cookie_start_error": "提交 Cookie 登录失败:",
+    "iflow_cookie_config_duplicate": "检测到配置文件已存在（重复），如需重新保存请先删除原文件后重试。",
+    "iflow_cookie_required": "请先填写 Cookie 内容",
+    "iflow_cookie_result_title": "Cookie 登录结果",
+    "iflow_cookie_result_email": "账号",
+    "iflow_cookie_result_expired": "过期时间",
+    "iflow_cookie_result_path": "保存路径",
+    "iflow_cookie_result_type": "类型",
+    "remote_access_disabled": "远程访问不支持此登录方式，请从本地 (localhost) 访问"
+  },
+  "usage_stats": {
+    "title": "使用统计",
+    "total_requests": "总请求数",
+    "success_requests": "成功请求",
+    "failed_requests": "失败请求",
+    "total_tokens": "总Token数",
+    "cached_tokens": "缓存 Tokens",
+    "reasoning_tokens": "思考 Tokens",
+    "rpm_30m": "RPM",
+    "tpm_30m": "TPM",
+    "rate_30m": "近30分钟速率",
+    "model_name": "模型名称",
+    "model_price_settings": "模型价格设置",
+    "saved_prices": "已保存的价格",
+    "requests_trend": "请求趋势",
+    "tokens_trend": "Token 使用趋势",
+    "api_details": "API 详细统计",
+    "by_hour": "按小时",
+    "by_day": "按天",
+    "refresh": "刷新",
+    "export": "导出数据",
+    "import": "导入数据",
+    "export_success": "使用统计已导出",
+    "import_success": "导入完成：新增 {{added}}，跳过 {{skipped}}，总请求 {{total}}，失败 {{failed}}",
+    "import_invalid": "导入文件格式不正确",
+    "chart_line_label_1": "曲线 1",
+    "chart_line_label_2": "曲线 2",
+    "chart_line_label_3": "曲线 3",
+    "chart_line_label_4": "曲线 4",
+    "chart_line_label_5": "曲线 5",
+    "chart_line_label_6": "曲线 6",
+    "chart_line_label_7": "曲线 7",
+    "chart_line_label_8": "曲线 8",
+    "chart_line_label_9": "曲线 9",
+    "chart_line_hidden": "不显示",
+    "chart_line_actions_label": "曲线数量",
+    "chart_line_add": "增加曲线",
+    "chart_line_all": "全部",
+    "chart_line_delete": "删除曲线",
+    "chart_line_hint": "最多同时显示 9 条模型曲线",
+    "no_data": "暂无数据",
+    "loading_error": "加载失败",
+    "api_endpoint": "API端点",
+    "requests_count": "请求次数",
+    "tokens_count": "Token数量",
+    "models": "模型统计",
+    "success_rate": "成功率",
+    "total_cost": "总花费",
+    "total_cost_hint": "基于已设置的模型单价",
+    "model_price_title": "模型价格",
+    "model_price_reset": "清除价格",
+    "model_price_model_label": "选择模型",
+    "model_price_select_placeholder": "选择模型",
+    "model_price_select_hint": "模型列表来自使用统计明细",
+    "model_price_prompt": "提示价格",
+    "model_price_completion": "补全价格",
+    "model_price_cache": "缓存价格",
+    "model_price_save": "保存价格",
+    "model_price_empty": "暂未设置任何模型价格",
+    "model_price_model": "模型",
+    "model_price_saved": "模型价格已保存",
+    "model_price_model_required": "请选择要设置价格的模型",
+    "cost_trend": "花费统计",
+    "cost_axis_label": "花费 ($)",
+    "cost_need_price": "请先设置模型价格",
+    "cost_need_usage": "暂无使用数据，无法计算花费",
+    "cost_no_data": "没有可计算的花费数据"
+  },
+  "stats": {
+    "success": "成功",
+    "failure": "失败"
+  },
+  "logs": {
+    "title": "日志查看",
+    "refresh_button": "刷新日志",
+    "clear_button": "清空日志",
+    "download_button": "下载日志",
+    "error_log_button": "选择错误日志",
+    "error_logs_modal_title": "错误请求日志",
+    "error_logs_description": "请选择要下载的错误请求日志文件（仅在关闭请求日志时生成）。",
+    "error_logs_request_log_enabled": "当前已开启请求日志，按接口约定错误请求日志列表会始终为空。关闭请求日志后再刷新即可查看。",
+    "error_logs_empty": "暂无错误请求日志文件",
+    "error_logs_load_error": "加载错误日志列表失败",
+    "error_logs_size": "大小",
+    "error_logs_modified": "最后修改",
+    "error_logs_download": "下载",
+    "error_log_download_success": "错误日志下载成功",
+    "request_log_download_title": "下载报文",
+    "request_log_download_confirm": "是否要下载id为{{id}}的报文？",
+    "request_log_download_success": "报文下载成功",
+    "action_hint": "双击日志行可复制原文，长按带有请求 ID 的日志可下载报文。",
+    "action_hint_disabled": "双击日志行可复制原文，启用请求日志后可长按带请求 ID 的日志下载报文。",
+    "empty_title": "暂无日志记录",
+    "empty_desc": "当启用\"日志记录到文件\"功能后，日志将显示在这里",
+    "log_content": "日志内容",
+    "loading": "正在加载日志...",
+    "load_error": "加载日志失败",
+    "clear_confirm": "确定要清空所有日志吗？此操作不可恢复！",
+    "clear_success": "日志已清空",
+    "download_success": "日志下载成功",
+    "auto_refresh": "自动刷新",
+    "auto_refresh_enabled": "自动刷新已开启",
+    "auto_refresh_disabled": "自动刷新已关闭",
+    "load_more_hint": "向上滚动加载更多",
+    "hidden_lines": "已隐藏 {{count}} 行",
+    "loaded_lines": "已载入 {{count}} 行",
+    "filtered_lines": "已过滤 {{count}} 行",
+    "hide_management_logs": "屏蔽 {{prefix}} 日志",
+    "search_placeholder": "搜索日志内容或关键字",
+    "search_empty_title": "未找到匹配的日志",
+    "search_empty_desc": "尝试更换关键字或清空筛选条件。",
+    "double_click_copy_hint": "双击复制日志原文",
+    "copy_success": "已复制日志原文",
+    "copy_failed": "复制失败",
+    "lines": "行",
+    "removed": "已过滤",
+    "upgrade_required_title": "需要升级 CLI Proxy API",
+    "upgrade_required_desc": "当前服务器版本不支持日志查看功能，请升级到最新版本的 CLI Proxy API 以使用此功能。"
+  },
+  "config_management": {
+    "title": "配置管理",
+    "editor_title": "配置文件",
+    "reload": "重新加载",
+    "save": "保存",
+    "description": "查看并编辑服务器上的 config.yaml 配置文件。保存前请确认语法正确。",
+    "status_idle": "等待操作",
+    "status_loading": "加载配置中...",
+    "status_loaded": "配置已加载",
+    "status_dirty": "有未保存的更改",
+    "status_disconnected": "请先连接服务器以加载配置",
+    "status_load_failed": "加载失败",
+    "status_saving": "正在保存配置...",
+    "status_saved": "配置保存完成",
+    "status_save_failed": "保存失败",
+    "save_success": "配置已保存",
+    "error_yaml_not_supported": "服务器未返回 YAML 格式，请确认 /config.yaml 接口可用",
+    "editor_placeholder": "key: value",
+    "search_placeholder": "搜索配置内容...",
+    "search_button": "搜索",
+    "search_no_results": "无结果",
+    "search_prev": "上一个",
+    "search_next": "下一个"
+  },
+  "system_info": {
+    "title": "管理中心信息",
+    "connection_status_title": "连接状态",
+    "api_status_label": "API 状态:",
+    "config_status_label": "配置状态:",
+    "last_update_label": "最后更新:",
+    "cache_data": "缓存数据",
+    "real_time_data": "实时数据",
+    "not_loaded": "未加载",
+    "seconds_ago": "秒前",
+    "models_title": "可用模型列表",
+    "models_desc": "展示 /v1/models 返回的模型，并自动使用服务器保存的 API Key 进行鉴权。",
+    "models_loading": "正在加载可用模型...",
+    "models_empty": "未从 /v1/models 获取到模型数据",
+    "models_error": "获取模型列表失败",
+    "models_count": "可用模型 {{count}} 个",
+    "version_check_title": "版本检查",
+    "version_check_desc": "调用 /latest-version 接口比对服务器版本，提示是否有可用更新。",
+    "version_current_label": "当前版本",
+    "version_latest_label": "最新版本",
+    "version_check_button": "检查更新",
+    "version_check_idle": "点击检查更新",
+    "version_checking": "正在检查最新版本...",
+    "version_update_available": "有新版本可用：{{version}}",
+    "version_is_latest": "当前已是最新版本",
+    "version_check_error": "检查更新失败",
+    "version_current_missing": "未获取到服务器版本号，暂无法比对",
+    "version_unknown": "未知",
+    "quick_links_title": "快捷链接",
+    "quick_links_desc": "访问项目仓库和文档，获取帮助和更新。",
+    "link_main_repo": "主程序仓库",
+    "link_main_repo_desc": "CLI Proxy API 核心程序源代码",
+    "link_webui_repo": "WebUI 仓库",
+    "link_webui_repo_desc": "管理中心前端界面源代码",
+    "link_docs": "使用教程",
+    "link_docs_desc": "配置指南和使用说明"
+  },
+  "notification": {
+    "debug_updated": "调试设置已更新",
+    "proxy_updated": "代理设置已更新",
+    "proxy_cleared": "代理设置已清空",
+    "retry_updated": "重试设置已更新",
+    "quota_switch_project_updated": "项目切换设置已更新",
+    "quota_switch_preview_updated": "预览模型切换设置已更新",
+    "usage_statistics_updated": "使用统计设置已更新",
+    "logging_to_file_updated": "日志记录设置已更新",
+    "request_log_updated": "请求日志设置已更新",
+    "ws_auth_updated": "WebSocket 鉴权设置已更新",
+    "api_key_added": "API密钥添加成功",
+    "api_key_updated": "API密钥更新成功",
+    "api_key_deleted": "API密钥删除成功",
+    "gemini_key_added": "Gemini密钥添加成功",
+    "gemini_key_updated": "Gemini密钥更新成功",
+    "gemini_key_deleted": "Gemini密钥删除成功",
+    "gemini_multi_input_required": "请先输入至少一个Gemini密钥",
+    "gemini_multi_failed": "Gemini密钥批量添加失败",
+    "gemini_multi_summary": "Gemini批量添加完成：成功 {{success}}，跳过 {{skipped}}，失败 {{failed}}",
+    "codex_config_added": "Codex配置添加成功",
+    "codex_config_updated": "Codex配置更新成功",
+    "codex_config_deleted": "Codex配置删除成功",
+    "codex_base_url_required": "请填写Codex Base URL",
+    "claude_config_added": "Claude配置添加成功",
+    "claude_config_updated": "Claude配置更新成功",
+    "claude_config_deleted": "Claude配置删除成功",
+    "config_enabled": "配置已启用",
+    "config_disabled": "配置已停用",
+    "field_required": "必填字段不能为空",
+    "openai_provider_required": "请填写提供商名称和Base URL",
+    "openai_provider_added": "OpenAI提供商添加成功",
+    "openai_provider_updated": "OpenAI提供商更新成功",
+    "openai_provider_deleted": "OpenAI提供商删除成功",
+    "ampcode_updated": "Ampcode 配置已更新",
+    "ampcode_upstream_api_key_cleared": "Ampcode upstream API key 覆盖已清除",
+    "openai_model_name_required": "请填写模型名称",
+    "openai_test_url_required": "请先填写有效的 Base URL 以进行测试",
+    "openai_test_key_required": "请至少填写一个 API 密钥以进行测试",
+    "openai_test_model_required": "请选择要测试的模型",
+    "data_refreshed": "数据刷新成功",
+    "connection_required": "请先建立连接",
+    "refresh_failed": "刷新失败",
+    "update_failed": "更新失败",
+    "add_failed": "添加失败",
+    "delete_failed": "删除失败",
+    "upload_failed": "上传失败",
+    "download_failed": "下载失败",
+    "login_failed": "登录失败",
+    "please_enter": "请输入",
+    "please_fill": "请填写",
+    "provider_name_url": "提供商名称和Base URL",
+    "api_key": "API密钥",
+    "gemini_api_key": "Gemini API密钥",
+    "codex_api_key": "Codex API密钥",
+    "claude_api_key": "Claude API密钥",
+    "link_copied": "已复制"
+  },
+  "language": {
+    "switch": "语言",
+    "chinese": "中文",
+    "english": "English"
+  },
+  "theme": {
+    "switch": "主题",
+    "light": "亮色",
+    "dark": "暗色",
+    "switch_to_light": "切换到亮色模式",
+    "switch_to_dark": "切换到暗色模式",
+    "auto": "跟随系统"
+  },
+  "sidebar": {
+    "toggle_expand": "展开侧边栏",
+    "toggle_collapse": "收起侧边栏"
+  },
+  "footer": {
+    "api_version": "CLI Proxy API 版本",
+    "build_date": "构建时间",
+    "version": "管理中心版本",
+    "author": "作者"
+  }
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,25 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@/styles/global.scss';
+import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
+import App from './App.tsx';
+
+document.title = 'CLI Proxy API Management Center';
+
+const faviconEl = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+if (faviconEl) {
+  faviconEl.href = INLINE_LOGO_JPEG;
+  faviconEl.type = 'image/jpeg';
+} else {
+  const newFavicon = document.createElement('link');
+  newFavicon.rel = 'icon';
+  newFavicon.type = 'image/jpeg';
+  newFavicon.href = INLINE_LOGO_JPEG;
+  document.head.appendChild(newFavicon);
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
--- a/src/modules/ai-providers.js
+++ b/src/modules/ai-providers.js
--- a/src/modules/api-keys.js
+++ b/src/modules/api-keys.js
@@ -1,390 +0,0 @@
-export const apiKeysModule = {
-    // 加载API密钥
-    async loadApiKeys() {
-        try {
-            const data = await this.makeRequest('/api-keys');
-            const apiKeysValue = data?.['api-keys'] || [];
-            const keys = Array.isArray(apiKeysValue) ? apiKeysValue : [];
-            this.renderApiKeys(keys);
-        } catch (error) {
-            console.error('加载API密钥失败:', error);
-        }
-    },
-
-    // 渲染API密钥列表
-    renderApiKeys(keys) {
-        const container = document.getElementById('api-keys-list');
-
-        if (keys.length === 0) {
-            container.innerHTML = `
-                <div class="empty-state">
-                    <i class="fas fa-key"></i>
-                    <h3>${i18n.t('api_keys.empty_title')}</h3>
-                    <p>${i18n.t('api_keys.empty_desc')}</p>
-                </div>
-            `;
-            return;
-        }
-
-        const rows = keys.map((key, index) => {
-            const normalizedKey = typeof key === 'string' ? key : String(key ?? '');
-            const maskedDisplay = this.escapeHtml(this.maskApiKey(normalizedKey));
-            const keyArgument = encodeURIComponent(normalizedKey);
-            return `
-                <div class="key-table-row">
-                    <div class="key-badge">#${index + 1}</div>
-                    <div class="key-table-value">
-                        <div class="item-title">${i18n.t('api_keys.item_title')}</div>
-                        <div class="key-value">${maskedDisplay}</div>
-                    </div>
-                    <div class="item-actions compact">
-                        <button class="btn btn-secondary" data-action="edit-api-key" data-index="${index}" data-key="${keyArgument}">
-                            <i class="fas fa-edit"></i>
-                        </button>
-                        <button class="btn btn-danger" data-action="delete-api-key" data-index="${index}">
-                            <i class="fas fa-trash"></i>
-                        </button>
-                    </div>
-                </div>
-            `;
-        }).join('');
-
-        container.innerHTML = `
-            <div class="key-table">
-                ${rows}
-            </div>
-        `;
-
-        this.bindApiKeyListEvents(container);
-    },
-
-    // 注意: escapeHtml, maskApiKey, normalizeArrayResponse
-    // 现在由 app.js 通过工具模块提供，通过 this 访问
-
-    // 添加一行自定义请求头输入
-    addHeaderField(wrapperId, header = {}) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return;
-
-        const row = document.createElement('div');
-        row.className = 'header-input-row';
-        const keyValue = typeof header.key === 'string' ? header.key : '';
-        const valueValue = typeof header.value === 'string' ? header.value : '';
-        row.innerHTML = `
-            <div class="input-group header-input-group">
-                <input type="text" class="header-key-input" placeholder="${i18n.t('common.custom_headers_key_placeholder')}" value="${this.escapeHtml(keyValue)}">
-                <span class="header-separator">:</span>
-                <input type="text" class="header-value-input" placeholder="${i18n.t('common.custom_headers_value_placeholder')}" value="${this.escapeHtml(valueValue)}">
-                <button type="button" class="btn btn-small btn-danger header-remove-btn"><i class="fas fa-trash"></i></button>
-            </div>
-        `;
-
-        const removeBtn = row.querySelector('.header-remove-btn');
-        if (removeBtn) {
-            removeBtn.addEventListener('click', () => {
-                wrapper.removeChild(row);
-                if (wrapper.childElementCount === 0) {
-                    this.addHeaderField(wrapperId);
-                }
-            });
-        }
-
-        wrapper.appendChild(row);
-    },
-
-    // 填充自定义请求头输入
-    populateHeaderFields(wrapperId, headers = null) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return;
-        wrapper.innerHTML = '';
-
-        const entries = (headers && typeof headers === 'object')
-            ? Object.entries(headers).filter(([key, value]) => key && value !== undefined && value !== null)
-            : [];
-
-        if (!entries.length) {
-            this.addHeaderField(wrapperId);
-            return;
-        }
-
-        entries.forEach(([key, value]) => this.addHeaderField(wrapperId, { key, value: String(value ?? '') }));
-    },
-
-    // 收集自定义请求头输入
-    collectHeaderInputs(wrapperId) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return null;
-
-        const rows = Array.from(wrapper.querySelectorAll('.header-input-row'));
-        const headers = {};
-
-        rows.forEach(row => {
-            const keyInput = row.querySelector('.header-key-input');
-            const valueInput = row.querySelector('.header-value-input');
-            const key = keyInput ? keyInput.value.trim() : '';
-            const value = valueInput ? valueInput.value.trim() : '';
-            if (key && value) {
-                headers[key] = value;
-            }
-        });
-
-        return Object.keys(headers).length ? headers : null;
-    },
-
-    addApiKeyEntryField(wrapperId, entry = {}) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return;
-
-        const row = document.createElement('div');
-        row.className = 'api-key-input-row';
-        const keyValue = typeof entry?.['api-key'] === 'string' ? entry['api-key'] : '';
-        const proxyValue = typeof entry?.['proxy-url'] === 'string' ? entry['proxy-url'] : '';
-        row.innerHTML = `
-            <div class="input-group api-key-input-group">
-                <input type="text" class="api-key-value-input" placeholder="${i18n.t('ai_providers.openai_key_placeholder')}" value="${this.escapeHtml(keyValue)}">
-                <input type="text" class="api-key-proxy-input" placeholder="${i18n.t('ai_providers.openai_proxy_placeholder')}" value="${this.escapeHtml(proxyValue)}">
-                <button type="button" class="btn btn-small btn-danger api-key-remove-btn"><i class="fas fa-trash"></i></button>
-            </div>
-        `;
-
-        const removeBtn = row.querySelector('.api-key-remove-btn');
-        if (removeBtn) {
-            removeBtn.addEventListener('click', () => {
-                wrapper.removeChild(row);
-                if (wrapper.childElementCount === 0) {
-                    this.addApiKeyEntryField(wrapperId);
-                }
-            });
-        }
-
-        wrapper.appendChild(row);
-    },
-
-    populateApiKeyEntryFields(wrapperId, entries = []) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return;
-        wrapper.innerHTML = '';
-
-        if (!Array.isArray(entries) || entries.length === 0) {
-            this.addApiKeyEntryField(wrapperId);
-            return;
-        }
-
-        entries.forEach(entry => this.addApiKeyEntryField(wrapperId, entry));
-    },
-
-    collectApiKeyEntryInputs(wrapperId) {
-        const wrapper = document.getElementById(wrapperId);
-        if (!wrapper) return [];
-
-        const rows = Array.from(wrapper.querySelectorAll('.api-key-input-row'));
-        const entries = [];
-
-        rows.forEach(row => {
-            const keyInput = row.querySelector('.api-key-value-input');
-            const proxyInput = row.querySelector('.api-key-proxy-input');
-            const key = keyInput ? keyInput.value.trim() : '';
-            const proxy = proxyInput ? proxyInput.value.trim() : '';
-            if (key) {
-                entries.push({ 'api-key': key, 'proxy-url': proxy });
-            }
-        });
-
-        return entries;
-    },
-
-    // 规范化并写入请求头
-    applyHeadersToConfig(target, headers) {
-        if (!target) {
-            return;
-        }
-        if (headers && typeof headers === 'object' && Object.keys(headers).length) {
-            target.headers = { ...headers };
-        } else {
-            delete target.headers;
-        }
-    },
-
-    // 渲染请求头徽章
-    renderHeaderBadges(headers) {
-        if (!headers || typeof headers !== 'object') {
-            return '';
-        }
-        const entries = Object.entries(headers).filter(([key, value]) => key && value !== undefined && value !== null && value !== '');
-        if (!entries.length) {
-            return '';
-        }
-
-        const badges = entries.map(([key, value]) => `
-            <span class="header-badge"><strong>${this.escapeHtml(key)}:</strong> ${this.escapeHtml(String(value))}</span>
-        `).join('');
-
-        return `
-            <div class="item-subtitle header-badges-wrapper">
-                <span class="header-badges-label">${i18n.t('common.custom_headers_label')}:</span>
-                <div class="header-badge-list">
-                    ${badges}
-                </div>
-            </div>
-        `;
-    },
-
-    // 构造Codex配置，保持未展示的字段
-    buildCodexConfig(apiKey, baseUrl, proxyUrl, original = {}, headers = null, excludedModels = null) {
-        const result = {
-            ...original,
-            'api-key': apiKey,
-            'base-url': baseUrl || '',
-            'proxy-url': proxyUrl || ''
-        };
-        this.applyHeadersToConfig(result, headers);
-        if (Array.isArray(excludedModels)) {
-            result['excluded-models'] = excludedModels;
-        }
-        return result;
-    },
-
-    // 显示添加API密钥模态框
-    showAddApiKeyModal() {
-        const modal = document.getElementById('modal');
-        const modalBody = document.getElementById('modal-body');
-
-        modalBody.innerHTML = `
-            <h3>${i18n.t('api_keys.add_modal_title')}</h3>
-            <div class="form-group">
-                <label for="new-api-key">${i18n.t('api_keys.add_modal_key_label')}</label>
-                <input type="text" id="new-api-key" placeholder="${i18n.t('api_keys.add_modal_key_placeholder')}">
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.addApiKey()">${i18n.t('common.add')}</button>
-            </div>
-        `;
-
-        modal.style.display = 'block';
-    },
-
-    // 添加API密钥
-    async addApiKey() {
-        const newKey = document.getElementById('new-api-key').value.trim();
-
-        if (!newKey) {
-            this.showNotification(`${i18n.t('notification.please_enter')} ${i18n.t('notification.api_key')}`, 'error');
-            return;
-        }
-
-        try {
-            const data = await this.makeRequest('/api-keys');
-            const currentKeys = data['api-keys'] || [];
-            currentKeys.push(newKey);
-
-            await this.makeRequest('/api-keys', {
-                method: 'PUT',
-                body: JSON.stringify(currentKeys)
-            });
-
-            this.clearCache('api-keys'); // 仅清除 api-keys 段缓存
-            this.closeModal();
-            this.loadApiKeys();
-            this.showNotification(i18n.t('notification.api_key_added'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.add_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    // 编辑API密钥
-    editApiKey(index, currentKey) {
-        const modal = document.getElementById('modal');
-        const modalBody = document.getElementById('modal-body');
-
-        modalBody.innerHTML = `
-            <h3>${i18n.t('api_keys.edit_modal_title')}</h3>
-            <div class="form-group">
-                <label for="edit-api-key">${i18n.t('api_keys.edit_modal_key_label')}</label>
-                <input type="text" id="edit-api-key" value="${currentKey}">
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.updateApiKey(${index})">${i18n.t('common.update')}</button>
-            </div>
-        `;
-
-        modal.style.display = 'block';
-    },
-
-    // 更新API密钥
-    async updateApiKey(index) {
-        const newKey = document.getElementById('edit-api-key').value.trim();
-
-        if (!newKey) {
-            this.showNotification(`${i18n.t('notification.please_enter')} ${i18n.t('notification.api_key')}`, 'error');
-            return;
-        }
-
-        try {
-            await this.makeRequest('/api-keys', {
-                method: 'PATCH',
-                body: JSON.stringify({ index, value: newKey })
-            });
-
-            this.clearCache('api-keys'); // 仅清除 api-keys 段缓存
-            this.closeModal();
-            this.loadApiKeys();
-            this.showNotification(i18n.t('notification.api_key_updated'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    // 删除API密钥
-    async deleteApiKey(index) {
-        if (!confirm(i18n.t('api_keys.delete_confirm'))) return;
-
-        try {
-            await this.makeRequest(`/api-keys?index=${index}`, { method: 'DELETE' });
-            this.clearCache('api-keys'); // 仅清除 api-keys 段缓存
-            this.loadApiKeys();
-            this.showNotification(i18n.t('notification.api_key_deleted'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    bindApiKeyListEvents(container = null) {
-        if (this.apiKeyListEventsBound) {
-            return;
-        }
-        const listContainer = container || document.getElementById('api-keys-list');
-        if (!listContainer) return;
-
-        listContainer.addEventListener('click', (event) => {
-            const button = event.target.closest('[data-action][data-index]');
-            if (!button || !listContainer.contains(button)) return;
-
-            const action = button.dataset.action;
-            const index = Number(button.dataset.index);
-            if (!Number.isFinite(index)) return;
-
-            switch (action) {
-                case 'edit-api-key': {
-                    const rawKey = button.dataset.key || '';
-                    let decodedKey = '';
-                    try {
-                        decodedKey = decodeURIComponent(rawKey);
-                    } catch (e) {
-                        decodedKey = rawKey;
-                    }
-                    this.editApiKey(index, decodedKey);
-                    break;
-                }
-                case 'delete-api-key':
-                    this.deleteApiKey(index);
-                    break;
-                default:
-                    break;
-            }
-        });
-
-        this.apiKeyListEventsBound = true;
-    }
-};
--- a/src/modules/auth-files.js
+++ b/src/modules/auth-files.js
--- a/src/modules/config-editor.js
+++ b/src/modules/config-editor.js
@@ -1,272 +0,0 @@
-export const configEditorModule = {
-    setupConfigEditor() {
-        const textarea = document.getElementById('config-editor');
-        const saveBtn = document.getElementById('config-save-btn');
-        const reloadBtn = document.getElementById('config-reload-btn');
-        const statusEl = document.getElementById('config-editor-status');
-
-        this.configEditorElements = {
-            textarea,
-            editorInstance: null,
-            saveBtn,
-            reloadBtn,
-            statusEl
-        };
-
-        if (!textarea || !saveBtn || !reloadBtn || !statusEl) {
-            return;
-        }
-
-        if (window.CodeMirror) {
-            const editorInstance = window.CodeMirror.fromTextArea(textarea, {
-                mode: 'yaml',
-                theme: 'default',
-                lineNumbers: true,
-                indentUnit: 2,
-                tabSize: 2,
-                lineWrapping: true,
-                autoCloseBrackets: true,
-                extraKeys: {
-                    'Ctrl-/': 'toggleComment',
-                    'Cmd-/': 'toggleComment'
-                }
-            });
-
-            editorInstance.on('change', () => {
-                this.isConfigEditorDirty = true;
-                this.updateConfigEditorStatus('info', i18n.t('config_management.status_dirty'));
-            });
-
-            this.configEditorElements.editorInstance = editorInstance;
-        } else {
-            textarea.addEventListener('input', () => {
-                this.isConfigEditorDirty = true;
-                this.updateConfigEditorStatus('info', i18n.t('config_management.status_dirty'));
-            });
-        }
-
-        saveBtn.addEventListener('click', () => this.saveConfigFile());
-        reloadBtn.addEventListener('click', () => this.loadConfigFileEditor(true));
-
-        this.refreshConfigEditor();
-    },
-
-    updateConfigEditorAvailability() {
-        const { textarea, editorInstance, saveBtn, reloadBtn } = this.configEditorElements || {};
-        if ((!textarea && !editorInstance) || !saveBtn || !reloadBtn) {
-            return;
-        }
-
-        const disabled = !this.isConnected;
-        if (editorInstance) {
-            editorInstance.setOption('readOnly', disabled ? 'nocursor' : false);
-            const wrapper = editorInstance.getWrapperElement();
-            if (wrapper) {
-                wrapper.classList.toggle('cm-readonly', disabled);
-            }
-        } else if (textarea) {
-            textarea.disabled = disabled;
-        }
-
-        saveBtn.disabled = disabled;
-        reloadBtn.disabled = disabled;
-
-        if (disabled) {
-            this.updateConfigEditorStatus('info', i18n.t('config_management.status_disconnected'));
-        }
-
-        this.refreshConfigEditor();
-        this.lastEditorConnectionState = this.isConnected;
-    },
-
-    refreshConfigEditor() {
-        const instance = this.configEditorElements && this.configEditorElements.editorInstance;
-        if (instance && typeof instance.refresh === 'function') {
-            setTimeout(() => instance.refresh(), 0);
-        }
-    },
-
-    updateConfigEditorStatus(type, message) {
-        const statusEl = (this.configEditorElements && this.configEditorElements.statusEl) || document.getElementById('config-editor-status');
-        if (!statusEl) {
-            return;
-        }
-
-        statusEl.textContent = message;
-        statusEl.classList.remove('success', 'error');
-
-        if (type === 'success') {
-            statusEl.classList.add('success');
-        } else if (type === 'error') {
-            statusEl.classList.add('error');
-        }
-    },
-
-    async loadConfigFileEditor(forceRefresh = false) {
-        const { textarea, editorInstance, reloadBtn } = this.configEditorElements || {};
-        if (!textarea && !editorInstance) {
-            return;
-        }
-
-        if (!this.isConnected) {
-            this.updateConfigEditorStatus('info', i18n.t('config_management.status_disconnected'));
-            return;
-        }
-
-        if (reloadBtn) {
-            reloadBtn.disabled = true;
-        }
-        this.updateConfigEditorStatus('info', i18n.t('config_management.status_loading'));
-
-        try {
-            const yamlText = await this.fetchConfigFile(forceRefresh);
-
-            if (editorInstance) {
-                editorInstance.setValue(yamlText || '');
-                if (typeof editorInstance.markClean === 'function') {
-                    editorInstance.markClean();
-                }
-            } else if (textarea) {
-                textarea.value = yamlText || '';
-            }
-
-            this.isConfigEditorDirty = false;
-            this.updateConfigEditorStatus('success', i18n.t('config_management.status_loaded'));
-            this.refreshConfigEditor();
-        } catch (error) {
-            console.error('加载配置文件失败:', error);
-            this.updateConfigEditorStatus('error', `${i18n.t('config_management.status_load_failed')}: ${error.message}`);
-        } finally {
-            if (reloadBtn) {
-                reloadBtn.disabled = !this.isConnected;
-            }
-        }
-    },
-
-    async fetchConfigFile(forceRefresh = false) {
-        if (!forceRefresh && this.configYamlCache) {
-            return this.configYamlCache;
-        }
-
-        const requestUrl = '/config.yaml';
-
-        try {
-            const response = await this.apiClient.requestRaw(requestUrl, {
-                method: 'GET',
-                headers: {
-                    'Accept': 'application/yaml'
-                }
-            });
-
-            if (!response.ok) {
-                const errorText = await response.text().catch(() => '');
-                const message = errorText || `HTTP ${response.status}`;
-                throw new Error(message);
-            }
-
-            const contentType = response.headers.get('content-type') || '';
-            if (!/yaml/i.test(contentType)) {
-                throw new Error(i18n.t('config_management.error_yaml_not_supported'));
-            }
-
-            const text = await response.text();
-            this.lastConfigFetchUrl = requestUrl;
-            this.configYamlCache = text;
-            return text;
-        } catch (error) {
-            throw error instanceof Error ? error : new Error(String(error));
-        }
-    },
-
-    async saveConfigFile() {
-        const { textarea, editorInstance, saveBtn, reloadBtn } = this.configEditorElements || {};
-        if ((!textarea && !editorInstance) || !saveBtn) {
-            return;
-        }
-
-        if (!this.isConnected) {
-            this.updateConfigEditorStatus('error', i18n.t('config_management.status_disconnected'));
-            return;
-        }
-
-        const yamlText = editorInstance ? editorInstance.getValue() : (textarea ? textarea.value : '');
-
-        saveBtn.disabled = true;
-        if (reloadBtn) {
-            reloadBtn.disabled = true;
-        }
-        this.updateConfigEditorStatus('info', i18n.t('config_management.status_saving'));
-
-        try {
-            await this.writeConfigFile('/config.yaml', yamlText);
-            this.lastConfigFetchUrl = '/config.yaml';
-            this.configYamlCache = yamlText;
-            this.isConfigEditorDirty = false;
-            if (editorInstance && typeof editorInstance.markClean === 'function') {
-                editorInstance.markClean();
-            }
-            this.showNotification(i18n.t('config_management.save_success'), 'success');
-            this.updateConfigEditorStatus('success', i18n.t('config_management.status_saved'));
-            this.clearCache();
-            if (this.events && typeof this.events.emit === 'function') {
-                this.events.emit('config:refresh-requested', { forceRefresh: true });
-            }
-        } catch (error) {
-            const errorMessage = `${i18n.t('config_management.status_save_failed')}: ${error.message}`;
-            this.updateConfigEditorStatus('error', errorMessage);
-            this.showNotification(errorMessage, 'error');
-            this.isConfigEditorDirty = true;
-        } finally {
-            saveBtn.disabled = !this.isConnected;
-            if (reloadBtn) {
-                reloadBtn.disabled = !this.isConnected;
-            }
-        }
-    },
-
-    async writeConfigFile(endpoint, yamlText) {
-        const response = await this.apiClient.requestRaw(endpoint, {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/yaml',
-                'Accept': 'application/json, text/plain, */*'
-            },
-            body: yamlText
-        });
-
-        if (!response.ok) {
-            const contentType = response.headers.get('content-type') || '';
-            let errorText = '';
-            if (contentType.includes('application/json')) {
-                const data = await response.json().catch(() => ({}));
-                errorText = data.message || data.error || '';
-            } else {
-                errorText = await response.text().catch(() => '');
-            }
-            throw new Error(errorText || `HTTP ${response.status}`);
-        }
-
-        const contentType = response.headers.get('content-type') || '';
-        if (contentType.includes('application/json')) {
-            const data = await response.json().catch(() => null);
-            if (data && data.ok === false) {
-                throw new Error(data.message || data.error || 'Server rejected the update');
-            }
-        }
-    },
-
-    registerConfigEditorListeners() {
-        if (!this.events || typeof this.events.on !== 'function') {
-            return;
-        }
-        this.events.on('data:config-loaded', async (event) => {
-            const detail = event?.detail || {};
-            try {
-                await this.loadConfigFileEditor(detail.forceRefresh || false);
-                this.refreshConfigEditor();
-            } catch (error) {
-                console.error('加载配置文件失败:', error);
-            }
-        });
-    }
-};
--- a/src/modules/language.js
+++ b/src/modules/language.js
@@ -1,37 +0,0 @@
-export const languageModule = {
-    setupLanguageSwitcher() {
-        const loginToggle = document.getElementById('language-toggle');
-        const mainToggle = document.getElementById('language-toggle-main');
-
-        if (loginToggle) {
-            loginToggle.addEventListener('click', () => this.toggleLanguage());
-        }
-        if (mainToggle) {
-            mainToggle.addEventListener('click', () => this.toggleLanguage());
-        }
-    },
-
-    toggleLanguage() {
-        if (this.isLanguageRefreshInProgress) {
-            return;
-        }
-        this.isLanguageRefreshInProgress = true;
-
-        const currentLang = i18n.currentLanguage;
-        const newLang = currentLang === 'zh-CN' ? 'en-US' : 'zh-CN';
-        i18n.setLanguage(newLang);
-
-        this.refreshBrandTitleAfterTextChange();
-        this.updateThemeButtons();
-        this.updateConnectionStatus();
-
-        if (this.isLoggedIn && this.isConnected && this.events && typeof this.events.emit === 'function') {
-            this.events.emit('config:refresh-requested', { forceRefresh: true });
-        }
-
-        // 简单释放锁，避免短时间内的重复触发
-        setTimeout(() => {
-            this.isLanguageRefreshInProgress = false;
-        }, 500);
-    }
-};
--- a/src/modules/login.js
+++ b/src/modules/login.js
@@ -1,281 +0,0 @@
-import { secureStorage } from '../utils/secure-storage.js';
-
-export const loginModule = {
-    async checkLoginStatus() {
-        // 将旧的明文缓存迁移为加密格式
-        secureStorage.migratePlaintextKeys(['apiBase', 'apiUrl', 'managementKey']);
-
-        const savedBase = secureStorage.getItem('apiBase');
-        const savedKey = secureStorage.getItem('managementKey');
-        const wasLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
-
-        if (savedBase && savedKey && wasLoggedIn) {
-            try {
-                console.log(i18n.t('auto_login.title'));
-                this.showAutoLoginLoading();
-                await this.attemptAutoLogin(savedBase, savedKey);
-                return;
-            } catch (error) {
-                console.log(`${i18n.t('notification.login_failed')}: ${error.message}`);
-                localStorage.removeItem('isLoggedIn');
-                this.hideAutoLoginLoading();
-            }
-        }
-
-        this.showLoginPage();
-        this.loadLoginSettings();
-    },
-
-    showAutoLoginLoading() {
-        document.getElementById('auto-login-loading').style.display = 'flex';
-        document.getElementById('login-page').style.display = 'none';
-        document.getElementById('main-page').style.display = 'none';
-    },
-
-    hideAutoLoginLoading() {
-        document.getElementById('auto-login-loading').style.display = 'none';
-    },
-
-    async attemptAutoLogin(apiBase, managementKey) {
-        try {
-            this.setApiBase(apiBase);
-            this.setManagementKey(managementKey);
-
-            const savedProxy = localStorage.getItem('proxyUrl');
-            if (savedProxy) {
-                // 代理设置会在后续的API请求中自动使用
-            }
-
-            await this.testConnection();
-
-            this.isLoggedIn = true;
-            this.hideAutoLoginLoading();
-            this.showMainPage();
-
-            console.log(i18n.t('auto_login.title'));
-            return true;
-        } catch (error) {
-            console.error('自动登录失败:', error);
-            this.isLoggedIn = false;
-            this.isConnected = false;
-            throw error;
-        }
-    },
-
-    showLoginPage() {
-        document.getElementById('login-page').style.display = 'flex';
-        document.getElementById('main-page').style.display = 'none';
-        this.isLoggedIn = false;
-        this.resetBrandTitleState();
-        this.updateLoginConnectionInfo();
-    },
-
-    showMainPage() {
-        document.getElementById('login-page').style.display = 'none';
-        document.getElementById('main-page').style.display = 'block';
-        this.isLoggedIn = true;
-        this.updateConnectionInfo();
-        this.startBrandCollapseCycle();
-    },
-
-    async login(apiBase, managementKey) {
-        try {
-            this.setApiBase(apiBase);
-            this.setManagementKey(managementKey);
-
-            await this.testConnection();
-
-            this.isLoggedIn = true;
-            localStorage.setItem('isLoggedIn', 'true');
-
-            this.showMainPage();
-            return true;
-        } catch (error) {
-            console.error('登录失败:', error);
-            throw error;
-        }
-    },
-
-    logout() {
-        this.isLoggedIn = false;
-        this.isConnected = false;
-        this.clearCache();
-        this.stopStatusUpdateTimer();
-        this.resetVersionInfo();
-        this.setManagementKey('', { persist: false });
-        this.oauthExcludedModels = {};
-        this._oauthExcludedLoading = false;
-        if (typeof this.renderOauthExcludedModels === 'function') {
-            this.renderOauthExcludedModels('all');
-        }
-        if (typeof this.clearAvailableModels === 'function') {
-            this.clearAvailableModels('common.disconnected');
-        }
-
-        localStorage.removeItem('isLoggedIn');
-        secureStorage.removeItem('managementKey');
-
-        this.showLoginPage();
-    },
-
-    async handleLogin() {
-        const apiBaseInput = document.getElementById('login-api-base');
-        const managementKeyInput = document.getElementById('login-management-key');
-        const managementKey = managementKeyInput ? managementKeyInput.value.trim() : '';
-
-        if (!managementKey) {
-            this.showLoginError(i18n.t('login.error_required'));
-            return;
-        }
-
-        if (apiBaseInput && apiBaseInput.value.trim()) {
-            this.setApiBase(apiBaseInput.value.trim());
-        }
-
-        const submitBtn = document.getElementById('login-submit');
-        const originalText = submitBtn ? submitBtn.innerHTML : '';
-
-        try {
-            if (submitBtn) {
-                submitBtn.innerHTML = `<div class=\"loading\"></div> ${i18n.t('login.submitting')}`;
-                submitBtn.disabled = true;
-            }
-            this.hideLoginError();
-
-            this.setManagementKey(managementKey);
-
-            await this.login(this.apiBase, this.managementKey);
-        } catch (error) {
-            this.showLoginError(`${i18n.t('login.error_title')}: ${error.message}`);
-        } finally {
-            if (submitBtn) {
-                submitBtn.innerHTML = originalText;
-                submitBtn.disabled = false;
-            }
-        }
-    },
-
-    toggleLoginKeyVisibility(button) {
-        const inputGroup = button.closest('.input-group');
-        const keyInput = inputGroup.querySelector('input[type=\"password\"], input[type=\"text\"]');
-
-        if (keyInput.type === 'password') {
-            keyInput.type = 'text';
-            button.innerHTML = '<i class=\"fas fa-eye-slash\"></i>';
-        } else {
-            keyInput.type = 'password';
-            button.innerHTML = '<i class=\"fas fa-eye\"></i>';
-        }
-    },
-
-    showLoginError(message) {
-        const errorDiv = document.getElementById('login-error');
-        const errorMessage = document.getElementById('login-error-message');
-
-        errorMessage.textContent = message;
-        errorDiv.style.display = 'flex';
-    },
-
-    hideLoginError() {
-        const errorDiv = document.getElementById('login-error');
-        errorDiv.style.display = 'none';
-    },
-
-    updateConnectionInfo() {
-        const apiUrlElement = document.getElementById('display-api-url');
-        const statusElement = document.getElementById('display-connection-status');
-
-        if (apiUrlElement) {
-            apiUrlElement.textContent = this.apiBase || '-';
-        }
-
-        if (statusElement) {
-            let statusHtml = '';
-            if (this.isConnected) {
-                statusHtml = `<span class=\"status-indicator connected\"><i class=\"fas fa-circle\"></i> ${i18n.t('common.connected')}</span>`;
-            } else {
-                statusHtml = `<span class=\"status-indicator disconnected\"><i class=\"fas fa-circle\"></i> ${i18n.t('common.disconnected')}</span>`;
-            }
-            statusElement.innerHTML = statusHtml;
-        }
-    },
-
-    loadLoginSettings() {
-        const savedBase = secureStorage.getItem('apiBase');
-        const savedKey = secureStorage.getItem('managementKey');
-        const loginKeyInput = document.getElementById('login-management-key');
-        const apiBaseInput = document.getElementById('login-api-base');
-
-        if (savedBase) {
-            this.setApiBase(savedBase);
-        } else {
-            this.setApiBase(this.detectApiBaseFromLocation());
-        }
-
-        if (apiBaseInput) {
-            apiBaseInput.value = this.apiBase || '';
-        }
-
-        if (loginKeyInput && savedKey) {
-            loginKeyInput.value = savedKey;
-        }
-        this.setManagementKey(savedKey || '', { persist: false });
-
-        this.setupLoginAutoSave();
-    },
-
-    setupLoginAutoSave() {
-        const loginKeyInput = document.getElementById('login-management-key');
-        const apiBaseInput = document.getElementById('login-api-base');
-        const resetButton = document.getElementById('login-reset-api-base');
-
-        const saveKey = (val) => {
-            const trimmed = val.trim();
-            if (trimmed) {
-                this.setManagementKey(trimmed);
-            }
-        };
-        const saveKeyDebounced = this.debounce(saveKey, 500);
-
-        if (loginKeyInput) {
-            loginKeyInput.addEventListener('change', (e) => saveKey(e.target.value));
-            loginKeyInput.addEventListener('input', (e) => saveKeyDebounced(e.target.value));
-        }
-
-        if (apiBaseInput) {
-            const persistBase = (val) => {
-                const normalized = this.normalizeBase(val);
-                if (normalized) {
-                    this.setApiBase(normalized);
-                }
-            };
-            const persistBaseDebounced = this.debounce(persistBase, 500);
-
-            apiBaseInput.addEventListener('change', (e) => persistBase(e.target.value));
-            apiBaseInput.addEventListener('input', (e) => persistBaseDebounced(e.target.value));
-        }
-
-        if (resetButton) {
-            resetButton.addEventListener('click', () => {
-                const detected = this.detectApiBaseFromLocation();
-                this.setApiBase(detected);
-                if (apiBaseInput) {
-                    apiBaseInput.value = detected;
-                }
-            });
-        }
-
-        this.updateLoginConnectionInfo();
-    },
-
-    updateLoginConnectionInfo() {
-        const connectionUrlElement = document.getElementById('login-connection-url');
-        const customInput = document.getElementById('login-api-base');
-        if (connectionUrlElement) {
-            connectionUrlElement.textContent = this.apiBase || '-';
-        }
-        if (customInput && customInput !== document.activeElement) {
-            customInput.value = this.apiBase || '';
-        }
-    }
-};
--- a/src/modules/logs.js
+++ b/src/modules/logs.js
@@ -1,657 +0,0 @@
-export const logsModule = {
-    toggleLogsNavItem(show) {
-        const logsNavItem = document.getElementById('logs-nav-item');
-        if (logsNavItem) {
-            logsNavItem.style.display = show ? '' : 'none';
-        }
-    },
-
-    async refreshLogs(incremental = false) {
-        const logsContent = document.getElementById('logs-content');
-        if (!logsContent) return;
-
-        try {
-            if (incremental && !this.latestLogTimestamp) {
-                incremental = false;
-            }
-
-            if (!incremental) {
-                logsContent.innerHTML = '<div class="loading-placeholder" data-i18n="logs.loading">' + i18n.t('logs.loading') + '</div>';
-            }
-
-            let url = '/logs';
-            const params = new URLSearchParams();
-
-            if (incremental && this.latestLogTimestamp) {
-                params.set('after', this.latestLogTimestamp);
-            }
-
-            const logFetchLimit = Number.isFinite(this.logFetchLimit) ? this.logFetchLimit : 2500;
-            if (logFetchLimit > 0) {
-                params.set('limit', logFetchLimit);
-            }
-
-            const queryString = params.toString();
-            if (queryString) {
-                url += `?${queryString}`;
-            }
-
-            const response = await this.makeRequest(url, {
-                method: 'GET'
-            });
-
-            if (response && response.lines) {
-                if (response['latest-timestamp']) {
-                    this.latestLogTimestamp = response['latest-timestamp'];
-                }
-
-                if (incremental && response.lines.length > 0) {
-                    this.appendLogs(response.lines, response['line-count'] || 0);
-                } else if (!incremental && response.lines.length > 0) {
-                    this.renderLogs(response.lines, response['line-count'] || response.lines.length, true);
-                } else if (!incremental) {
-                    this.latestLogTimestamp = null;
-                    this.renderLogs([], 0, false);
-                }
-            } else if (!incremental) {
-                this.latestLogTimestamp = null;
-                this.renderLogs([], 0, false);
-            }
-        } catch (error) {
-            console.error('加载日志失败:', error);
-            if (!incremental) {
-                this.allLogLines = [];
-                this.displayedLogLines = [];
-                this.latestLogTimestamp = null;
-                const is404 = error.message && (error.message.includes('404') || error.message.includes('Not Found'));
-
-                if (is404) {
-                    logsContent.innerHTML = '<div class="upgrade-notice"><i class="fas fa-arrow-circle-up"></i><h3 data-i18n="logs.upgrade_required_title">' +
-                        i18n.t('logs.upgrade_required_title') + '</h3><p data-i18n="logs.upgrade_required_desc">' +
-                        i18n.t('logs.upgrade_required_desc') + '</p></div>';
-                } else {
-                    logsContent.innerHTML = '<div class="error-state"><i class="fas fa-exclamation-triangle"></i><p data-i18n="logs.load_error">' +
-                        i18n.t('logs.load_error') + '</p><p>' + error.message + '</p></div>';
-                }
-            }
-        }
-    },
-
-    renderLogs(lines, lineCount, scrollToBottom = true) {
-        const logsContent = document.getElementById('logs-content');
-        if (!logsContent) return;
-
-        const sourceLines = Array.isArray(lines) ? lines : [];
-        const filteredLines = sourceLines.filter(line => !line.includes('/v0/management/'));
-        let displayedLines = filteredLines;
-        if (filteredLines.length > this.maxDisplayLogLines) {
-            const linesToRemove = filteredLines.length - this.maxDisplayLogLines;
-            displayedLines = filteredLines.slice(linesToRemove);
-        }
-
-        this.allLogLines = displayedLines.slice();
-
-        if (displayedLines.length === 0) {
-            this.displayedLogLines = [];
-            logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i><p data-i18n="logs.empty_title">' +
-                i18n.t('logs.empty_title') + '</p><p data-i18n="logs.empty_desc">' +
-                i18n.t('logs.empty_desc') + '</p></div>';
-            return;
-        }
-
-        const visibleLines = this.filterLogLinesBySearch(displayedLines);
-        this.displayedLogLines = visibleLines.slice();
-
-        if (visibleLines.length === 0) {
-            logsContent.innerHTML = '<div class="empty-state"><i class="fas fa-search"></i><p data-i18n="logs.search_empty_title">' +
-                i18n.t('logs.search_empty_title') + '</p><p data-i18n="logs.search_empty_desc">' +
-                i18n.t('logs.search_empty_desc') + '</p></div>';
-            return;
-        }
-
-        const displayedLineCount = this.displayedLogLines.length;
-        logsContent.innerHTML = `
-            <div class="logs-info">
-                <span><i class="fas fa-list-ol"></i> ${displayedLineCount} ${i18n.t('logs.lines')}</span>
-            </div>
-            <pre class="logs-text">${this.buildLogsHtml(this.displayedLogLines)}</pre>
-        `;
-
-        if (scrollToBottom && !this.logSearchQuery) {
-            const logsTextElement = logsContent.querySelector('.logs-text');
-            if (logsTextElement) {
-                logsTextElement.scrollTop = logsTextElement.scrollHeight;
-            }
-        }
-    },
-
-    appendLogs(newLines, totalLineCount) {
-        const logsContent = document.getElementById('logs-content');
-        if (!logsContent) return;
-
-        if (!newLines || newLines.length === 0) {
-            return;
-        }
-
-        const logsTextElement = logsContent.querySelector('.logs-text');
-        const logsInfoElement = logsContent.querySelector('.logs-info');
-
-        const filteredNewLines = newLines.filter(line => !line.includes('/v0/management/'));
-        if (filteredNewLines.length === 0) {
-            return;
-        }
-
-        if (!logsTextElement) {
-            this.renderLogs(filteredNewLines, totalLineCount || filteredNewLines.length, true);
-            return;
-        }
-
-        const isAtBottom = logsTextElement.scrollHeight - logsTextElement.scrollTop - logsTextElement.clientHeight < 50;
-
-        const baseLines = Array.isArray(this.allLogLines) && this.allLogLines.length > 0
-            ? this.allLogLines
-            : (Array.isArray(this.displayedLogLines) ? this.displayedLogLines : []);
-
-        this.allLogLines = baseLines.concat(filteredNewLines);
-        if (this.allLogLines.length > this.maxDisplayLogLines) {
-            this.allLogLines = this.allLogLines.slice(this.allLogLines.length - this.maxDisplayLogLines);
-        }
-
-        const visibleLines = this.filterLogLinesBySearch(this.allLogLines);
-        this.displayedLogLines = visibleLines.slice();
-
-        if (visibleLines.length === 0) {
-            this.renderLogs(this.allLogLines, this.allLogLines.length, false);
-            return;
-        }
-
-        logsTextElement.innerHTML = this.buildLogsHtml(this.displayedLogLines);
-
-        if (logsInfoElement) {
-            const displayedLines = this.displayedLogLines.length;
-            logsInfoElement.innerHTML = `<span><i class="fas fa-list-ol"></i> ${displayedLines} ${i18n.t('logs.lines')}</span>`;
-        }
-
-        if (isAtBottom && !this.logSearchQuery) {
-            logsTextElement.scrollTop = logsTextElement.scrollHeight;
-        }
-    },
-
-    filterLogLinesBySearch(lines) {
-        const keyword = (this.logSearchQuery || '').toLowerCase();
-        if (!keyword) {
-            return Array.isArray(lines) ? lines.slice() : [];
-        }
-        if (!Array.isArray(lines) || lines.length === 0) {
-            return [];
-        }
-        return lines.filter(line => (line || '').toLowerCase().includes(keyword));
-    },
-
-    updateLogSearchQuery(value = '') {
-        const normalized = (value || '').trim();
-        if (this.logSearchQuery === normalized) {
-            return;
-        }
-        this.logSearchQuery = normalized;
-        this.applyLogSearchFilter();
-    },
-
-    applyLogSearchFilter() {
-        const logsContent = document.getElementById('logs-content');
-        if (!logsContent) return;
-        if (logsContent.querySelector('.upgrade-notice') || logsContent.querySelector('.error-state')) {
-            return;
-        }
-        const baseLines = Array.isArray(this.allLogLines) ? this.allLogLines : [];
-        if (baseLines.length === 0 && logsContent.querySelector('.loading-placeholder')) {
-            return;
-        }
-        this.renderLogs(baseLines, baseLines.length, false);
-    },
-
-    buildLogsHtml(lines) {
-        if (!lines || lines.length === 0) {
-            return '';
-        }
-
-        return lines.map(line => {
-            let processedLine = line.replace(/\[GIN\]\s+\d{4}\/\d{2}\/\d{2}\s+-\s+\d{2}:\d{2}:\d{2}\s+/g, '');
-            const highlights = [];
-
-            const statusInfo = this.detectHttpStatus(line);
-            if (statusInfo) {
-                const statusPattern = new RegExp(`\\b${statusInfo.code}\\b`);
-                const match = statusPattern.exec(processedLine);
-                if (match) {
-                    highlights.push({
-                        start: match.index,
-                        end: match.index + match[0].length,
-                        className: `log-status-tag log-status-${statusInfo.bucket}`,
-                        priority: 10
-                    });
-                }
-            }
-
-            const timestampPattern = /\d{4}[-/]\d{2}[-/]\d{2}[T]\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})?|\[\d{2}:\d{2}:\d{2}\]/g;
-            let match;
-            while ((match = timestampPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-timestamp',
-                    priority: 5
-                });
-            }
-
-            const bracketTimestampPattern = /\[\d{4}[-/]\d{2}[-/]\d{2}\s+\d{2}:\d{2}:\d{2}(?:\.\d+)?\]/g;
-            while ((match = bracketTimestampPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-timestamp',
-                    priority: 5
-                });
-            }
-
-            const levelPattern = /\[(ERROR|ERRO|ERR|FATAL|CRITICAL|CRIT|WARN|WARNING|INFO|DEBUG|TRACE|PANIC)\]/gi;
-            while ((match = levelPattern.exec(processedLine)) !== null) {
-                const level = match[1].toUpperCase();
-                let className = 'log-level';
-                if (['ERROR', 'ERRO', 'ERR', 'FATAL', 'CRITICAL', 'CRIT', 'PANIC'].includes(level)) {
-                    className += ' log-level-error';
-                } else if (['WARN', 'WARNING'].includes(level)) {
-                    className += ' log-level-warn';
-                } else if (level === 'INFO') {
-                    className += ' log-level-info';
-                } else if (['DEBUG', 'TRACE'].includes(level)) {
-                    className += ' log-level-debug';
-                }
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className,
-                    priority: 8
-                });
-            }
-
-            const methodPattern = /\b(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\b/g;
-            while ((match = methodPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-http-method',
-                    priority: 6
-                });
-            }
-
-            const urlPattern = /(https?:\/\/[^\s<>"']+)/g;
-            while ((match = urlPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-path',
-                    priority: 4
-                });
-            }
-
-            const ipPattern = /\b(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\b/g;
-            while ((match = ipPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-ip',
-                    priority: 7
-                });
-            }
-
-            const successPattern = /\b(success|successful|succeeded|completed|ok|done|passed)\b/gi;
-            while ((match = successPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-keyword-success',
-                    priority: 3
-                });
-            }
-
-            const errorPattern = /\b(failed|failure|error|exception|panic|fatal|critical|aborted|denied|refused|timeout|invalid)\b/gi;
-            while ((match = errorPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-keyword-error',
-                    priority: 3
-                });
-            }
-
-            const headersPattern = /\b(x-[a-z0-9-]+|authorization|content-type|user-agent)\b/gi;
-            while ((match = headersPattern.exec(processedLine)) !== null) {
-                highlights.push({
-                    start: match.index,
-                    end: match.index + match[0].length,
-                    className: 'log-header-key',
-                    priority: 2
-                });
-            }
-
-            highlights.sort((a, b) => {
-                if (a.start === b.start) {
-                    return b.priority - a.priority;
-                }
-                return a.start - b.start;
-            });
-
-            let cursor = 0;
-            let result = '';
-
-            highlights.forEach((highlight) => {
-                if (highlight.start < cursor) {
-                    return;
-                }
-
-                result += this.escapeHtml(processedLine.slice(cursor, highlight.start));
-                result += `<span class="${highlight.className}">${this.escapeHtml(processedLine.slice(highlight.start, highlight.end))}</span>`;
-                cursor = highlight.end;
-            });
-
-            result += this.escapeHtml(processedLine.slice(cursor));
-
-            return `<span class="log-line">${result}</span>`;
-        }).join('');
-    },
-
-    detectHttpStatus(line) {
-        if (!line) return null;
-
-        const patterns = [
-            /\|\s*([1-5]\d{2})\s*\|/,
-            /\b([1-5]\d{2})\s*-/,
-            /\b(?:GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\s+\S+\s+([1-5]\d{2})\b/,
-            /\b(?:status|code|http)[:\s]+([1-5]\d{2})\b/i,
-            /\b([1-5]\d{2})\s+(?:OK|Created|Accepted|No Content|Moved|Found|Bad Request|Unauthorized|Forbidden|Not Found|Method Not Allowed|Internal Server Error|Bad Gateway|Service Unavailable|Gateway Timeout)\b/i
-        ];
-
-        for (const pattern of patterns) {
-            const match = line.match(pattern);
-            if (match) {
-                const code = parseInt(match[1], 10);
-                if (Number.isNaN(code)) {
-                    continue;
-                }
-
-                if (code >= 500) {
-                    return { code, bucket: '5xx', match: match[1] };
-                }
-                if (code >= 400) {
-                    return { code, bucket: '4xx', match: match[1] };
-                }
-                if (code >= 300) {
-                    return { code, bucket: '3xx', match: match[1] };
-                }
-                if (code >= 200) {
-                    return { code, bucket: '2xx', match: match[1] };
-                }
-                if (code >= 100) {
-                    return { code, bucket: '1xx', match: match[1] };
-                }
-            }
-        }
-
-        return null;
-    },
-
-    async openErrorLogsModal() {
-        const modalBody = document.getElementById('modal-body');
-        if (!modalBody) return;
-
-        modalBody.innerHTML = `
-            <h3>${i18n.t('logs.error_logs_modal_title')}</h3>
-            <div class="provider-item">
-                <div class="item-content">
-                    <p class="form-hint">${i18n.t('logs.error_logs_description')}</p>
-                    <div class="loading-placeholder">${i18n.t('common.loading')}</div>
-                </div>
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.close')}</button>
-            </div>
-        `;
-        this.showModal();
-
-        try {
-            const response = await this.makeRequest('/request-error-logs', {
-                method: 'GET'
-            });
-            const files = Array.isArray(response?.files) ? response.files.slice() : [];
-            if (files.length > 1) {
-                files.sort((a, b) => (b.modified || 0) - (a.modified || 0));
-            }
-            modalBody.innerHTML = this.buildErrorLogsModal(files);
-            this.showModal();
-            this.bindErrorLogDownloadButtons();
-        } catch (error) {
-            console.error('加载错误日志列表失败:', error);
-            modalBody.innerHTML = `
-                <h3>${i18n.t('logs.error_logs_modal_title')}</h3>
-                <div class="provider-item">
-                    <div class="item-content">
-                        <div class="error-state">
-                            <i class="fas fa-exclamation-triangle"></i>
-                            <p>${i18n.t('logs.error_logs_load_error')}</p>
-                            <p>${this.escapeHtml(error.message || '')}</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-actions">
-                    <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.close')}</button>
-                </div>
-            `;
-            this.showNotification(`${i18n.t('logs.error_logs_load_error')}: ${error.message}`, 'error');
-        }
-    },
-
-    buildErrorLogsModal(files) {
-        const listHtml = Array.isArray(files) && files.length > 0
-            ? files.map(file => this.buildErrorLogCard(file)).join('')
-            : `
-                <div class="empty-state">
-                    <i class="fas fa-inbox"></i>
-                    <h3>${i18n.t('logs.error_logs_empty')}</h3>
-                    <p>${i18n.t('logs.error_logs_description')}</p>
-                </div>
-            `;
-
-        return `
-            <h3>${i18n.t('logs.error_logs_modal_title')}</h3>
-            <p class="form-hint">${i18n.t('logs.error_logs_description')}</p>
-            <div class="provider-list">
-                ${listHtml}
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.close')}</button>
-            </div>
-        `;
-    },
-
-    buildErrorLogCard(file) {
-        const name = file?.name || '';
-        const size = typeof file?.size === 'number' ? this.formatFileSize(file.size) : '-';
-        const modified = file?.modified ? this.formatErrorLogTime(file.modified) : '-';
-        return `
-            <div class="provider-item">
-                <div class="item-content">
-                    <div class="item-title">${this.escapeHtml(name)}</div>
-                    <div class="item-subtitle">${i18n.t('logs.error_logs_size')}: ${this.escapeHtml(size)}</div>
-                    <div class="item-subtitle">${i18n.t('logs.error_logs_modified')}: ${this.escapeHtml(modified)}</div>
-                </div>
-                <div class="item-actions">
-                    <button class="btn btn-secondary error-log-download-btn" data-log-name="${this.escapeHtml(name)}">
-                        <i class="fas fa-download"></i> ${i18n.t('logs.error_logs_download')}
-                    </button>
-                </div>
-            </div>
-        `;
-    },
-
-    bindErrorLogDownloadButtons() {
-        const modalBody = document.getElementById('modal-body');
-        if (!modalBody) return;
-        const buttons = modalBody.querySelectorAll('.error-log-download-btn');
-        buttons.forEach(button => {
-            button.onclick = () => {
-                const filename = button.getAttribute('data-log-name');
-                if (filename) {
-                    this.downloadErrorLog(filename);
-                }
-            };
-        });
-    },
-
-    formatErrorLogTime(timestamp) {
-        const numeric = Number(timestamp);
-        if (!Number.isFinite(numeric) || numeric <= 0) {
-            return '-';
-        }
-        const date = new Date(numeric * 1000);
-        if (Number.isNaN(date.getTime())) {
-            return '-';
-        }
-        const locale = i18n?.currentLanguage || undefined;
-        return date.toLocaleString(locale);
-    },
-
-    async downloadErrorLog(filename) {
-        if (!filename) return;
-        try {
-            const response = await this.apiClient.requestRaw(`/request-error-logs/${encodeURIComponent(filename)}`, {
-                method: 'GET'
-            });
-
-            if (!response.ok) {
-                let errorMessage = `HTTP ${response.status}`;
-                try {
-                    const errorData = await response.json();
-                    if (errorData && errorData.error) {
-                        errorMessage = errorData.error;
-                    }
-                } catch (parseError) {
-                    // ignore JSON parse error and use default message
-                }
-                throw new Error(errorMessage);
-            }
-
-            const blob = await response.blob();
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = filename;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            window.URL.revokeObjectURL(url);
-            this.showNotification(i18n.t('logs.error_log_download_success'), 'success');
-        } catch (error) {
-            console.error('下载错误日志失败:', error);
-            this.showNotification(`${i18n.t('notification.download_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    async downloadLogs() {
-        try {
-            const response = await this.makeRequest('/logs', {
-                method: 'GET'
-            });
-
-            if (response && response.lines && response.lines.length > 0) {
-                const logsText = response.lines.join('\n');
-                const blob = new Blob([logsText], { type: 'text/plain' });
-                const url = window.URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `cli-proxy-api-logs-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.log`;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                window.URL.revokeObjectURL(url);
-                this.showNotification(i18n.t('logs.download_success'), 'success');
-            } else {
-                this.showNotification(i18n.t('logs.empty_title'), 'info');
-            }
-        } catch (error) {
-            console.error('下载日志失败:', error);
-            this.showNotification(`${i18n.t('notification.download_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    async clearLogs() {
-        if (!confirm(i18n.t('logs.clear_confirm'))) {
-            return;
-        }
-
-        try {
-            const response = await this.makeRequest('/logs', {
-                method: 'DELETE'
-            });
-
-            if (response && response.status === 'ok') {
-                const removedCount = response.removed || 0;
-                const message = `${i18n.t('logs.clear_success')} (${i18n.t('logs.removed')}: ${removedCount} ${i18n.t('logs.lines')})`;
-                this.showNotification(message, 'success');
-            } else {
-                this.showNotification(i18n.t('logs.clear_success'), 'success');
-            }
-
-            this.latestLogTimestamp = null;
-            await this.refreshLogs(false);
-        } catch (error) {
-            console.error('清空日志失败:', error);
-            this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    toggleLogsAutoRefresh(enabled) {
-        if (enabled) {
-            if (this.logsRefreshTimer) {
-                clearInterval(this.logsRefreshTimer);
-            }
-            this.logsRefreshTimer = setInterval(() => {
-                const logsSection = document.getElementById('logs');
-                if (logsSection && logsSection.classList.contains('active')) {
-                    this.refreshLogs(true);
-                }
-            }, 5000);
-            this.showNotification(i18n.t('logs.auto_refresh_enabled'), 'success');
-        } else {
-            if (this.logsRefreshTimer) {
-                clearInterval(this.logsRefreshTimer);
-                this.logsRefreshTimer = null;
-            }
-            this.showNotification(i18n.t('logs.auto_refresh_disabled'), 'info');
-        }
-    },
-
-    registerLogsListeners() {
-        if (!this.events || typeof this.events.on !== 'function') {
-            return;
-        }
-        this.events.on('connection:status-changed', (event) => {
-            const detail = event?.detail || {};
-            if (detail.isConnected) {
-                // 仅在日志页激活时刷新，避免非日志页面触发请求
-                const logsSection = document.getElementById('logs');
-                if (logsSection && logsSection.classList.contains('active')) {
-                    this.refreshLogs(false);
-                }
-            } else {
-                this.latestLogTimestamp = null;
-            }
-        });
-        this.events.on('navigation:section-activated', (event) => {
-            const detail = event?.detail || {};
-            if (detail.sectionId === 'logs' && this.isConnected) {
-                this.refreshLogs(false);
-            }
-        });
-    }
-};
--- a/src/modules/navigation.js
+++ b/src/modules/navigation.js
@@ -1,103 +0,0 @@
-export const navigationModule = {
-    setupNavigation() {
-        const navItems = document.querySelectorAll('.nav-item');
-        navItems.forEach(item => {
-            item.addEventListener('click', (e) => {
-                e.preventDefault();
-
-                navItems.forEach(nav => nav.classList.remove('active'));
-                document.querySelectorAll('.content-section').forEach(section => section.classList.remove('active'));
-
-                item.classList.add('active');
-                const sectionId = item.getAttribute('data-section');
-                const section = document.getElementById(sectionId);
-                if (section) {
-                    section.classList.add('active');
-                }
-
-                if (sectionId === 'config-management') {
-                    this.loadConfigFileEditor();
-                    this.refreshConfigEditor();
-                }
-                if (this.events && typeof this.events.emit === 'function') {
-                    this.events.emit('navigation:section-activated', { sectionId });
-                }
-            });
-        });
-    },
-
-    toggleMobileSidebar() {
-        const sidebar = document.getElementById('sidebar');
-        const overlay = document.getElementById('sidebar-overlay');
-        const layout = document.getElementById('layout-container');
-        const mainWrapper = document.getElementById('main-wrapper');
-
-        if (sidebar && overlay) {
-            const isOpen = sidebar.classList.toggle('mobile-open');
-            overlay.classList.toggle('active');
-            if (layout) {
-                layout.classList.toggle('sidebar-open', isOpen);
-            }
-            if (mainWrapper) {
-                mainWrapper.classList.toggle('sidebar-open', isOpen);
-            }
-        }
-    },
-
-    closeMobileSidebar() {
-        const sidebar = document.getElementById('sidebar');
-        const overlay = document.getElementById('sidebar-overlay');
-        const layout = document.getElementById('layout-container');
-        const mainWrapper = document.getElementById('main-wrapper');
-
-        if (sidebar && overlay) {
-            sidebar.classList.remove('mobile-open');
-            overlay.classList.remove('active');
-            if (layout) {
-                layout.classList.remove('sidebar-open');
-            }
-            if (mainWrapper) {
-                mainWrapper.classList.remove('sidebar-open');
-            }
-        }
-    },
-
-    toggleSidebar() {
-        const sidebar = document.getElementById('sidebar');
-        const layout = document.getElementById('layout-container');
-
-        if (sidebar && layout) {
-            const isCollapsed = sidebar.classList.toggle('collapsed');
-            layout.classList.toggle('sidebar-collapsed', isCollapsed);
-
-            localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
-
-            const toggleBtn = document.getElementById('sidebar-toggle-btn-desktop');
-            if (toggleBtn) {
-                toggleBtn.setAttribute('data-i18n-title', isCollapsed ? 'sidebar.toggle_expand' : 'sidebar.toggle_collapse');
-                toggleBtn.title = i18n.t(isCollapsed ? 'sidebar.toggle_expand' : 'sidebar.toggle_collapse');
-            }
-        }
-    },
-
-    restoreSidebarState() {
-        if (window.innerWidth > 1024) {
-            const savedState = localStorage.getItem('sidebarCollapsed');
-            if (savedState === 'true') {
-                const sidebar = document.getElementById('sidebar');
-                const layout = document.getElementById('layout-container');
-
-                if (sidebar && layout) {
-                    sidebar.classList.add('collapsed');
-                    layout.classList.add('sidebar-collapsed');
-
-                    const toggleBtn = document.getElementById('sidebar-toggle-btn-desktop');
-                    if (toggleBtn) {
-                        toggleBtn.setAttribute('data-i18n-title', 'sidebar.toggle_expand');
-                        toggleBtn.title = i18n.t('sidebar.toggle_expand');
-                    }
-                }
-            }
-        }
-    }
-};
--- a/src/modules/oauth.js
+++ b/src/modules/oauth.js
@@ -1,960 +0,0 @@
-export const oauthModule = {
-    // ===== Codex OAuth 相关方法 =====
-
-    // 开始 Codex OAuth 流程
-    async startCodexOAuth() {
-        try {
-            const response = await this.makeRequest('/codex-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('codex-oauth-url');
-            const content = document.getElementById('codex-oauth-content');
-            const status = document.getElementById('codex-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.codex_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startCodexOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.codex_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 从 URL 中提取 state 参数
-    extractStateFromUrl(url) {
-        try {
-            const urlObj = new URL(url);
-            return urlObj.searchParams.get('state');
-        } catch (error) {
-            console.error('Failed to extract state from URL:', error);
-            return null;
-        }
-    },
-
-    // 打开 Codex 授权链接
-    openCodexLink() {
-        const urlInput = document.getElementById('codex-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Codex 授权链接
-    async copyCodexLink() {
-        const urlInput = document.getElementById('codex-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 OAuth 状态
-    startCodexOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('codex-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetCodexOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.codex_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.codex_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.codex_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetCodexOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.codex_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('codex-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.codex_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.codex_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetCodexOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Codex OAuth UI 到初始状态
-    resetCodexOAuthUI() {
-        const urlInput = document.getElementById('codex-oauth-url');
-        const content = document.getElementById('codex-oauth-content');
-        const status = document.getElementById('codex-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== Anthropic OAuth 相关方法 =====
-
-    // 开始 Anthropic OAuth 流程
-    async startAnthropicOAuth() {
-        try {
-            const response = await this.makeRequest('/anthropic-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('anthropic-oauth-url');
-            const content = document.getElementById('anthropic-oauth-content');
-            const status = document.getElementById('anthropic-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.anthropic_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startAnthropicOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.anthropic_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 Anthropic 授权链接
-    openAnthropicLink() {
-        const urlInput = document.getElementById('anthropic-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Anthropic 授权链接
-    async copyAnthropicLink() {
-        const urlInput = document.getElementById('anthropic-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 Anthropic OAuth 状态
-    startAnthropicOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('anthropic-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetAnthropicOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.anthropic_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.anthropic_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.anthropic_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetAnthropicOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.anthropic_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('anthropic-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.anthropic_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.anthropic_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetAnthropicOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Anthropic OAuth UI 到初始状态
-    resetAnthropicOAuthUI() {
-        const urlInput = document.getElementById('anthropic-oauth-url');
-        const content = document.getElementById('anthropic-oauth-content');
-        const status = document.getElementById('anthropic-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== Antigravity OAuth 相关方法 =====
-
-    // 开始 Antigravity OAuth 流程
-    async startAntigravityOAuth() {
-        try {
-            const response = await this.makeRequest('/antigravity-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = response.state || this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('antigravity-oauth-url');
-            const content = document.getElementById('antigravity-oauth-content');
-            const status = document.getElementById('antigravity-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.antigravity_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startAntigravityOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.antigravity_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 Antigravity 授权链接
-    openAntigravityLink() {
-        const urlInput = document.getElementById('antigravity-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Antigravity 授权链接
-    async copyAntigravityLink() {
-        const urlInput = document.getElementById('antigravity-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 Antigravity OAuth 状态
-    startAntigravityOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('antigravity-oauth-status');
-
-                if (status === 'ok') {
-                    clearInterval(pollInterval);
-                    this.resetAntigravityOAuthUI();
-                    this.showNotification(i18n.t('auth_login.antigravity_oauth_status_success'), 'success');
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.antigravity_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.antigravity_oauth_status_error')} ${errorMessage}`, 'error');
-                    setTimeout(() => {
-                        this.resetAntigravityOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.antigravity_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('antigravity-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.antigravity_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.antigravity_oauth_polling_error')} ${error.message}`, 'error');
-                setTimeout(() => {
-                    this.resetAntigravityOAuthUI();
-                }, 3000);
-            }
-        }, 2000);
-
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Antigravity OAuth UI 到初始状态
-    resetAntigravityOAuthUI() {
-        const urlInput = document.getElementById('antigravity-oauth-url');
-        const content = document.getElementById('antigravity-oauth-content');
-        const status = document.getElementById('antigravity-oauth-status');
-
-        if (urlInput) {
-            urlInput.value = '';
-        }
-        if (content) {
-            content.style.display = 'none';
-        }
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== Gemini CLI OAuth 相关方法 =====
-
-    // 开始 Gemini CLI OAuth 流程
-    async startGeminiCliOAuth() {
-        try {
-            const response = await this.makeRequest('/gemini-cli-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('gemini-cli-oauth-url');
-            const content = document.getElementById('gemini-cli-oauth-content');
-            const status = document.getElementById('gemini-cli-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.gemini_cli_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startGeminiCliOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.gemini_cli_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 Gemini CLI 授权链接
-    openGeminiCliLink() {
-        const urlInput = document.getElementById('gemini-cli-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Gemini CLI 授权链接
-    async copyGeminiCliLink() {
-        const urlInput = document.getElementById('gemini-cli-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 Gemini CLI OAuth 状态
-    startGeminiCliOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('gemini-cli-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetGeminiCliOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.gemini_cli_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.gemini_cli_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.gemini_cli_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetGeminiCliOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.gemini_cli_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('gemini-cli-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.gemini_cli_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.gemini_cli_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetGeminiCliOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Gemini CLI OAuth UI 到初始状态
-    resetGeminiCliOAuthUI() {
-        const urlInput = document.getElementById('gemini-cli-oauth-url');
-        const content = document.getElementById('gemini-cli-oauth-content');
-        const status = document.getElementById('gemini-cli-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== Qwen OAuth 相关方法 =====
-
-    // 开始 Qwen OAuth 流程
-    async startQwenOAuth() {
-        try {
-            const response = await this.makeRequest('/qwen-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('qwen-oauth-url');
-            const content = document.getElementById('qwen-oauth-content');
-            const status = document.getElementById('qwen-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.qwen_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startQwenOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.qwen_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 Qwen 授权链接
-    openQwenLink() {
-        const urlInput = document.getElementById('qwen-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Qwen 授权链接
-    async copyQwenLink() {
-        const urlInput = document.getElementById('qwen-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 Qwen OAuth 状态
-    startQwenOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('qwen-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetQwenOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.qwen_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.qwen_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.qwen_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetQwenOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.qwen_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('qwen-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.qwen_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.qwen_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetQwenOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Qwen OAuth UI 到初始状态
-    resetQwenOAuthUI() {
-        const urlInput = document.getElementById('qwen-oauth-url');
-        const content = document.getElementById('qwen-oauth-content');
-        const status = document.getElementById('qwen-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== iFlow OAuth 相关方法 =====
-
-    // 开始 iFlow OAuth 流程
-    async startIflowOAuth() {
-        if (!this.isIflowOAuthAllowed()) {
-            const statusEl = document.getElementById('iflow-oauth-status');
-            if (statusEl) {
-                statusEl.textContent = i18n.t('auth_login.iflow_oauth_local_only');
-                statusEl.style.display = 'block';
-                statusEl.style.color = 'var(--warning-text)';
-            }
-            this.showNotification(i18n.t('auth_login.iflow_oauth_local_only'), 'error');
-            return;
-        }
-
-        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';
-    }
-};
--- a/src/modules/settings.js
+++ b/src/modules/settings.js
@@ -1,411 +0,0 @@
-// 设置与开关相关方法模块
-// 注意：这些函数依赖于在 CLIProxyManager 实例上提供的 makeRequest/clearCache/showNotification/errorHandler 等基础能力
-
-export async function updateDebug(enabled) {
-    const previousValue = !enabled;
-    try {
-        await this.makeRequest('/debug', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache('debug'); // 仅清除 debug 配置段的缓存
-        this.showNotification(i18n.t('notification.debug_updated'), 'success');
-    } catch (error) {
-        this.errorHandler.handleUpdateError(
-            error,
-            i18n.t('settings.debug_mode') || '调试模式',
-            () => document.getElementById('debug-toggle').checked = previousValue
-        );
-    }
-}
-
-export async function updateProxyUrl() {
-    const proxyUrl = document.getElementById('proxy-url').value.trim();
-    const previousValue = document.getElementById('proxy-url').getAttribute('data-previous-value') || '';
-
-    try {
-        await this.makeRequest('/proxy-url', {
-            method: 'PUT',
-            body: JSON.stringify({ value: proxyUrl })
-        });
-        this.clearCache('proxy-url'); // 仅清除 proxy-url 配置段的缓存
-        document.getElementById('proxy-url').setAttribute('data-previous-value', proxyUrl);
-        this.showNotification(i18n.t('notification.proxy_updated'), 'success');
-    } catch (error) {
-        this.errorHandler.handleUpdateError(
-            error,
-            i18n.t('settings.proxy_url') || '代理设置',
-            () => document.getElementById('proxy-url').value = previousValue
-        );
-    }
-}
-
-export async function clearProxyUrl() {
-    const previousValue = document.getElementById('proxy-url').value;
-
-    try {
-        await this.makeRequest('/proxy-url', { method: 'DELETE' });
-        document.getElementById('proxy-url').value = '';
-        document.getElementById('proxy-url').setAttribute('data-previous-value', '');
-        this.clearCache('proxy-url'); // 仅清除 proxy-url 配置段的缓存
-        this.showNotification(i18n.t('notification.proxy_cleared'), 'success');
-    } catch (error) {
-        this.errorHandler.handleUpdateError(
-            error,
-            i18n.t('settings.proxy_url') || '代理设置',
-            () => document.getElementById('proxy-url').value = previousValue
-        );
-    }
-}
-
-export async function updateRequestRetry() {
-    const retryInput = document.getElementById('request-retry');
-    const retryCount = parseInt(retryInput.value);
-    const previousValue = retryInput.getAttribute('data-previous-value') || '0';
-
-    try {
-        await this.makeRequest('/request-retry', {
-            method: 'PUT',
-            body: JSON.stringify({ value: retryCount })
-        });
-        this.clearCache('request-retry'); // 仅清除 request-retry 配置段的缓存
-        retryInput.setAttribute('data-previous-value', retryCount.toString());
-        this.showNotification(i18n.t('notification.retry_updated'), 'success');
-    } catch (error) {
-        this.errorHandler.handleUpdateError(
-            error,
-            i18n.t('settings.request_retry') || '重试设置',
-            () => retryInput.value = previousValue
-        );
-    }
-}
-
-export async function loadDebugSettings() {
-    try {
-        const debugValue = await this.getConfig('debug'); // 仅获取 debug 配置段
-        if (debugValue !== undefined) {
-            document.getElementById('debug-toggle').checked = debugValue;
-        }
-    } catch (error) {
-        this.errorHandler.handleLoadError(error, i18n.t('settings.debug_mode') || '调试设置');
-    }
-}
-
-export async function loadProxySettings() {
-    try {
-        const proxyUrl = await this.getConfig('proxy-url'); // 仅获取 proxy-url 配置段
-        const proxyInput = document.getElementById('proxy-url');
-        if (proxyUrl !== undefined) {
-            proxyInput.value = proxyUrl || '';
-            proxyInput.setAttribute('data-previous-value', proxyUrl || '');
-        }
-    } catch (error) {
-        this.errorHandler.handleLoadError(error, i18n.t('settings.proxy_settings') || '代理设置');
-    }
-}
-
-export async function loadRetrySettings() {
-    try {
-        const config = await this.getConfig();
-        if (config['request-retry'] !== undefined) {
-            document.getElementById('request-retry').value = config['request-retry'];
-        }
-    } catch (error) {
-        console.error('加载重试设置失败:', error);
-    }
-}
-
-export async function loadQuotaSettings() {
-    try {
-        const config = await this.getConfig();
-        if (config['quota-exceeded']) {
-            if (config['quota-exceeded']['switch-project'] !== undefined) {
-                document.getElementById('switch-project-toggle').checked = config['quota-exceeded']['switch-project'];
-            }
-            if (config['quota-exceeded']['switch-preview-model'] !== undefined) {
-                document.getElementById('switch-preview-model-toggle').checked = config['quota-exceeded']['switch-preview-model'];
-            }
-        }
-    } catch (error) {
-        console.error('加载配额设置失败:', error);
-    }
-}
-
-export async function loadUsageStatisticsSettings() {
-    try {
-        const config = await this.getConfig();
-        if (config['usage-statistics-enabled'] !== undefined) {
-            const usageToggle = document.getElementById('usage-statistics-enabled-toggle');
-            if (usageToggle) {
-                usageToggle.checked = config['usage-statistics-enabled'];
-            }
-        }
-    } catch (error) {
-        console.error('加载使用统计设置失败:', error);
-    }
-}
-
-export async function loadRequestLogSetting() {
-    try {
-        const config = await this.getConfig();
-        if (config['request-log'] !== undefined) {
-            const requestLogToggle = document.getElementById('request-log-toggle');
-            if (requestLogToggle) {
-                requestLogToggle.checked = config['request-log'];
-            }
-        }
-    } catch (error) {
-        console.error('加载请求日志设置失败:', error);
-    }
-}
-
-export async function loadWsAuthSetting() {
-    try {
-        const config = await this.getConfig();
-        if (config['ws-auth'] !== undefined) {
-            const wsAuthToggle = document.getElementById('ws-auth-toggle');
-            if (wsAuthToggle) {
-                wsAuthToggle.checked = config['ws-auth'];
-            }
-        }
-    } catch (error) {
-        console.error('加载 WebSocket 鉴权设置失败:', error);
-    }
-}
-
-export async function updateUsageStatisticsEnabled(enabled) {
-    try {
-        await this.makeRequest('/usage-statistics-enabled', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache();
-        this.showNotification(i18n.t('notification.usage_statistics_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        const usageToggle = document.getElementById('usage-statistics-enabled-toggle');
-        if (usageToggle) {
-            usageToggle.checked = !enabled;
-        }
-    }
-}
-
-export async function updateRequestLog(enabled) {
-    try {
-        await this.makeRequest('/request-log', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache();
-        this.showNotification(i18n.t('notification.request_log_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        const requestLogToggle = document.getElementById('request-log-toggle');
-        if (requestLogToggle) {
-            requestLogToggle.checked = !enabled;
-        }
-    }
-}
-
-export async function updateWsAuth(enabled) {
-    try {
-        await this.makeRequest('/ws-auth', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache();
-        this.showNotification(i18n.t('notification.ws_auth_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        const wsAuthToggle = document.getElementById('ws-auth-toggle');
-        if (wsAuthToggle) {
-            wsAuthToggle.checked = !enabled;
-        }
-    }
-}
-
-export async function updateLoggingToFile(enabled) {
-    try {
-        await this.makeRequest('/logging-to-file', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache();
-        this.showNotification(i18n.t('notification.logging_to_file_updated'), 'success');
-        // 显示或隐藏日志查看栏目
-        this.toggleLogsNavItem(enabled);
-        // 如果启用了日志记录，自动刷新日志
-        if (enabled) {
-            setTimeout(() => this.refreshLogs(), 500);
-        }
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        const loggingToggle = document.getElementById('logging-to-file-toggle');
-        if (loggingToggle) {
-            loggingToggle.checked = !enabled;
-        }
-    }
-}
-
-export async function updateSwitchProject(enabled) {
-    try {
-        await this.makeRequest('/quota-exceeded/switch-project', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache(); // 清除缓存
-        this.showNotification(i18n.t('notification.quota_switch_project_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        document.getElementById('switch-project-toggle').checked = !enabled;
-    }
-}
-
-export async function updateSwitchPreviewModel(enabled) {
-    try {
-        await this.makeRequest('/quota-exceeded/switch-preview-model', {
-            method: 'PUT',
-            body: JSON.stringify({ value: enabled })
-        });
-        this.clearCache(); // 清除缓存
-        this.showNotification(i18n.t('notification.quota_switch_preview_updated'), 'success');
-    } catch (error) {
-        this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        document.getElementById('switch-preview-model-toggle').checked = !enabled;
-    }
-}
-
-// 统一应用配置到界面，供 connection 模块或事件总线调用
-export async function applySettingsFromConfig(config = {}, keyStats = null) {
-    if (!config || typeof config !== 'object') {
-        return;
-    }
-
-    // 调试设置
-    if (config.debug !== undefined) {
-        const toggle = document.getElementById('debug-toggle');
-        if (toggle) {
-            toggle.checked = config.debug;
-        }
-    }
-
-    // 代理设置
-    if (config['proxy-url'] !== undefined) {
-        const proxyInput = document.getElementById('proxy-url');
-        if (proxyInput) {
-            proxyInput.value = config['proxy-url'] || '';
-        }
-    }
-
-    // 请求重试设置
-    if (config['request-retry'] !== undefined) {
-        const retryInput = document.getElementById('request-retry');
-        if (retryInput) {
-            retryInput.value = config['request-retry'];
-        }
-    }
-
-    // 配额超出行为
-    if (config['quota-exceeded']) {
-        if (config['quota-exceeded']['switch-project'] !== undefined) {
-            const toggle = document.getElementById('switch-project-toggle');
-            if (toggle) {
-                toggle.checked = config['quota-exceeded']['switch-project'];
-            }
-        }
-        if (config['quota-exceeded']['switch-preview-model'] !== undefined) {
-            const toggle = document.getElementById('switch-preview-model-toggle');
-            if (toggle) {
-                toggle.checked = config['quota-exceeded']['switch-preview-model'];
-            }
-        }
-    }
-
-    if (config['usage-statistics-enabled'] !== undefined) {
-        const usageToggle = document.getElementById('usage-statistics-enabled-toggle');
-        if (usageToggle) {
-            usageToggle.checked = config['usage-statistics-enabled'];
-        }
-    }
-
-    // 日志记录设置
-    if (config['logging-to-file'] !== undefined) {
-        const loggingToggle = document.getElementById('logging-to-file-toggle');
-        if (loggingToggle) {
-            loggingToggle.checked = config['logging-to-file'];
-        }
-        if (typeof this.toggleLogsNavItem === 'function') {
-            this.toggleLogsNavItem(config['logging-to-file']);
-        }
-    }
-    if (config['request-log'] !== undefined) {
-        const requestLogToggle = document.getElementById('request-log-toggle');
-        if (requestLogToggle) {
-            requestLogToggle.checked = config['request-log'];
-        }
-    }
-    if (config['ws-auth'] !== undefined) {
-        const wsAuthToggle = document.getElementById('ws-auth-toggle');
-        if (wsAuthToggle) {
-            wsAuthToggle.checked = config['ws-auth'];
-        }
-    }
-
-    // API 密钥
-    if (config['api-keys'] && typeof this.renderApiKeys === 'function') {
-        this.renderApiKeys(config['api-keys']);
-    }
-
-    // Gemini keys
-    if (typeof this.renderGeminiKeys === 'function') {
-        await this.renderGeminiKeys(this.getGeminiKeysFromConfig(config), keyStats);
-    }
-
-    // Codex 密钥
-    if (typeof this.renderCodexKeys === 'function') {
-        await this.renderCodexKeys(Array.isArray(config['codex-api-key']) ? config['codex-api-key'] : [], keyStats);
-    }
-
-    // Claude 密钥
-    if (typeof this.renderClaudeKeys === 'function') {
-        await this.renderClaudeKeys(Array.isArray(config['claude-api-key']) ? config['claude-api-key'] : [], keyStats);
-    }
-
-    // OpenAI 兼容提供商
-    if (typeof this.renderOpenAIProviders === 'function') {
-        await this.renderOpenAIProviders(Array.isArray(config['openai-compatibility']) ? config['openai-compatibility'] : [], keyStats);
-    }
-}
-
-// 设置模块订阅全局事件，减少与连接层耦合
-export function registerSettingsListeners() {
-    if (!this.events || typeof this.events.on !== 'function') {
-        return;
-    }
-    this.events.on('data:config-loaded', (event) => {
-        const detail = event?.detail || {};
-        this.applySettingsFromConfig(detail.config || {}, detail.keyStats || null);
-    });
-}
-
-export const settingsModule = {
-    updateDebug,
-    updateProxyUrl,
-    clearProxyUrl,
-    updateRequestRetry,
-    loadDebugSettings,
-    loadProxySettings,
-    loadRetrySettings,
-    loadQuotaSettings,
-    loadUsageStatisticsSettings,
-    loadRequestLogSetting,
-    loadWsAuthSetting,
-    updateUsageStatisticsEnabled,
-    updateRequestLog,
-    updateWsAuth,
-    updateLoggingToFile,
-    updateSwitchProject,
-    updateSwitchPreviewModel,
-    applySettingsFromConfig,
-    registerSettingsListeners
-};
--- a/src/modules/theme.js
+++ b/src/modules/theme.js
@@ -1,73 +0,0 @@
-export const themeModule = {
-    initializeTheme() {
-        const savedTheme = localStorage.getItem('preferredTheme');
-        if (savedTheme && ['light', 'dark'].includes(savedTheme)) {
-            this.currentTheme = savedTheme;
-        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            this.currentTheme = 'dark';
-        } else {
-            this.currentTheme = 'light';
-        }
-
-        this.applyTheme(this.currentTheme);
-        this.updateThemeButtons();
-
-        if (window.matchMedia) {
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-                if (!localStorage.getItem('preferredTheme')) {
-                    this.currentTheme = e.matches ? 'dark' : 'light';
-                    this.applyTheme(this.currentTheme);
-                    this.updateThemeButtons();
-                }
-            });
-        }
-    },
-
-    applyTheme(theme) {
-        if (theme === 'dark') {
-            document.documentElement.setAttribute('data-theme', 'dark');
-        } else {
-            document.documentElement.removeAttribute('data-theme');
-        }
-        this.currentTheme = theme;
-    },
-
-    toggleTheme() {
-        const newTheme = this.currentTheme === 'light' ? 'dark' : 'light';
-        this.applyTheme(newTheme);
-        this.updateThemeButtons();
-        localStorage.setItem('preferredTheme', newTheme);
-    },
-
-    updateThemeButtons() {
-        const loginThemeBtn = document.getElementById('theme-toggle');
-        const mainThemeBtn = document.getElementById('theme-toggle-main');
-
-        const updateButton = (btn) => {
-            if (!btn) return;
-            const icon = btn.querySelector('i');
-            if (this.currentTheme === 'dark') {
-                icon.className = 'fas fa-sun';
-                btn.title = i18n.t('theme.switch_to_light');
-            } else {
-                icon.className = 'fas fa-moon';
-                btn.title = i18n.t('theme.switch_to_dark');
-            }
-        };
-
-        updateButton(loginThemeBtn);
-        updateButton(mainThemeBtn);
-    },
-
-    setupThemeSwitcher() {
-        const loginToggle = document.getElementById('theme-toggle');
-        const mainToggle = document.getElementById('theme-toggle-main');
-
-        if (loginToggle) {
-            loginToggle.addEventListener('click', () => this.toggleTheme());
-        }
-        if (mainToggle) {
-            mainToggle.addEventListener('click', () => this.toggleTheme());
-        }
-    }
-};
--- a/src/modules/usage.js
+++ b/src/modules/usage.js
--- a/src/pages/AiProvidersPage.module.scss
+++ b/src/pages/AiProvidersPage.module.scss
@@ -0,0 +1,531 @@
+@use '../styles/variables' as *;
+@use '../styles/mixins' as *;
+
+.container {
+  width: 100%;
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.cardTitleIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xl;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  h3 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+}
+
+.providerList {
+  display: grid;
+  gap: $spacing-md;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+// 成功失败次数统计样式
+.cardStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 4px;
+}
+
+.statPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.1;
+  border: 1px solid transparent;
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.statSuccess {
+  background-color: var(--success-badge-bg, #d1fae5);
+  color: var(--success-badge-text, #065f46);
+  border-color: var(--success-badge-border, #6ee7b7);
+}
+
+.statFailure {
+  background-color: var(--failure-badge-bg, #fee2e2);
+  color: var(--failure-badge-text, #991b1b);
+  border-color: var(--failure-badge-border, #fca5a5);
+}
+
+// 字段行样式：标签 + 值
+.fieldRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 4px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.fieldLabel {
+  color: var(--text-tertiary);
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.fieldValue {
+  color: var(--text-primary);
+  font-weight: 600;
+  word-break: break-all;
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;
+}
+
+// 自定义请求头徽章
+.headerBadgeList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.headerBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--accent-tertiary, #f3f4f6);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+
+  strong {
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+}
+
+// 模型标签容器
+.modelTagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+  align-items: center;
+}
+
+.modelCountLabel {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+// 单个模型标签
+.modelTag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--bg-quinary, #f8f9fa);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-secondary);
+  border-radius: 14px;
+  padding: 4px 10px;
+  font-size: 12px;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--primary-color);
+  }
+}
+
+.modelName {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modelAlias {
+  color: var(--text-tertiary);
+  font-style: italic;
+
+  &::before {
+    content: '→ ';
+  }
+}
+
+// 排除模型标签（警告色）
+.excludedModelTag {
+  background: var(--warning-bg, #fef3c7);
+  border-color: var(--warning-border, #fbbf24);
+  color: var(--warning-text, #92400e);
+
+  .modelName {
+    color: var(--warning-text, #92400e);
+  }
+}
+
+// 排除模型区块
+.excludedModelsSection {
+  margin-top: 8px;
+}
+
+.excludedModelsLabel {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--warning-text, #92400e);
+  margin-bottom: 4px;
+}
+
+// API密钥条目列表（二级卡片）
+.apiKeyEntriesSection {
+  margin-top: 10px;
+}
+
+.apiKeyEntriesLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.apiKeyEntryList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.apiKeyEntryCard {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-secondary, #f9fafb);
+  border: 1px solid var(--border-secondary);
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.apiKeyEntryIndex {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.apiKeyEntryKey {
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.apiKeyEntryProxy {
+  color: var(--text-tertiary);
+  font-size: 11px;
+
+  &::before {
+    content: '| Proxy: ';
+    color: var(--text-quaternary);
+  }
+}
+
+.apiKeyEntryStats {
+  display: flex;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.apiKeyEntryStat {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 10px;
+  font-weight: 600;
+
+  svg {
+    display: block;
+  }
+}
+
+.apiKeyEntryStatSuccess {
+  background: var(--success-badge-bg, #d1fae5);
+  color: var(--success-badge-text, #065f46);
+}
+
+.apiKeyEntryStatFailure {
+  background: var(--failure-badge-bg, #fee2e2);
+  color: var(--failure-badge-text, #991b1b);
+}
+
+// OpenAI 模型发现（二级界面）
+.modelDiscoveryList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 360px;
+  overflow-y: auto;
+  margin-top: 8px;
+  padding-right: 4px;
+}
+
+.modelDiscoveryRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+
+  input[type='checkbox'] {
+    margin-top: 2px;
+    cursor: pointer;
+  }
+
+  &:hover {
+    border-color: var(--primary-color);
+    background: var(--bg-secondary);
+  }
+}
+
+.modelDiscoveryRowSelected {
+  border-color: var(--primary-color);
+  background: var(--bg-tertiary);
+}
+
+.modelDiscoveryMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.modelDiscoveryName {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modelDiscoveryAlias {
+  margin-left: 6px;
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+.modelDiscoveryDesc {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+.openaiTestButtonSuccess {
+  background-color: var(--success-badge-bg, #d1fae5);
+  border-color: var(--success-badge-border, #6ee7b7);
+  color: var(--success-badge-text, #065f46);
+
+  &:hover {
+    background-color: var(--success-badge-bg, #d1fae5);
+    border-color: var(--success-badge-border, #6ee7b7);
+  }
+}
+
+// 连通性测试按钮高度对齐
+.openaiTestSelect {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.openaiTestButton {
+  flex: 1 1 0;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+// 状态监测栏
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 8px 0;
+  max-width: 280px;
+}
+
+.statusBlocks {
+  display: flex;
+  gap: 2px;
+  flex: 1;
+  min-width: 180px;
+}
+
+.statusBlock {
+  flex: 1;
+  height: 8px;
+  border-radius: 2px;
+  min-width: 6px;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+
+  &:hover {
+    transform: scaleY(1.5);
+    opacity: 0.85;
+  }
+}
+
+.statusBlockSuccess {
+  background-color: var(--success-color, #22c55e);
+}
+
+.statusBlockFailure {
+  background-color: var(--danger-color, #ef4444);
+}
+
+.statusBlockMixed {
+  background-color: var(--warning-color, #f59e0b);
+}
+
+.statusBlockIdle {
+  background-color: var(--border-secondary, #e5e7eb);
+}
+
+.statusRate {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--bg-tertiary);
+}
+
+.statusRateHigh {
+  color: var(--success-badge-text, #065f46);
+  background: var(--success-badge-bg, #d1fae5);
+}
+
+.statusRateMedium {
+  color: var(--warning-text, #92400e);
+  background: var(--warning-bg, #fef3c7);
+}
+
+.statusRateLow {
+  color: var(--failure-badge-text, #991b1b);
+  background: var(--failure-badge-bg, #fee2e2);
+}
+
+// 暗色主题适配
+:global([data-theme='dark']) {
+  .headerBadge {
+    background: rgba(59, 130, 246, 0.15);
+    border-color: rgba(59, 130, 246, 0.3);
+    color: var(--text-secondary);
+
+    strong {
+      color: var(--text-secondary);
+    }
+  }
+
+  .modelTag {
+    background: rgba(59, 130, 246, 0.1);
+    border-color: var(--border-secondary);
+  }
+
+  .excludedModelTag {
+    background: rgba(251, 191, 36, 0.22);
+    border-color: rgba(251, 191, 36, 0.55);
+    color: #fde68a;
+
+    .modelName {
+      color: #fde68a;
+    }
+  }
+
+  .excludedModelsLabel {
+    color: #fde68a;
+  }
+
+  .apiKeyEntryCard {
+    background: var(--bg-tertiary);
+    border-color: var(--border-primary);
+  }
+
+  .apiKeyEntryIndex {
+    background: var(--primary-color);
+  }
+
+  .statusBlockIdle {
+    background-color: var(--border-primary, #374151);
+  }
+
+  .statusRateHigh {
+    background: rgba(34, 197, 94, 0.2);
+    color: #86efac;
+  }
+
+  .statusRateMedium {
+    background: rgba(251, 191, 36, 0.2);
+    color: #fde68a;
+  }
+
+  .statusRateLow {
+    background: rgba(239, 68, 68, 0.2);
+    color: #fca5a5;
+  }
+}
--- a/src/pages/AiProvidersPage.tsx
+++ b/src/pages/AiProvidersPage.tsx
--- a/src/pages/ApiKeysPage.module.scss
+++ b/src/pages/ApiKeysPage.module.scss
@@ -0,0 +1,56 @@
+@use '../styles/mixins' as *;
+
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.actions {
+  display: flex;
+  gap: $spacing-sm;
+}
+
+.emptyState {
+  text-align: center;
+  padding: $spacing-2xl;
+  color: var(--text-secondary);
+
+  i {
+    font-size: 48px;
+    margin-bottom: $spacing-md;
+    opacity: 0.5;
+  }
+
+  h3 {
+    margin: 0 0 $spacing-sm 0;
+    color: var(--text-primary);
+  }
+
+  p {
+    margin: 0;
+  }
+}
--- a/src/pages/ApiKeysPage.tsx
+++ b/src/pages/ApiKeysPage.tsx
@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
+import { apiKeysApi } from '@/services/api';
+import { maskApiKey } from '@/utils/format';
+import styles from './ApiKeysPage.module.scss';
+
+export function ApiKeysPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [apiKeys, setApiKeys] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [inputValue, setInputValue] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [deletingIndex, setDeletingIndex] = useState<number | null>(null);
+
+  const disableControls = useMemo(() => connectionStatus !== 'connected', [connectionStatus]);
+
+  const loadApiKeys = useCallback(
+    async (force = false) => {
+      setLoading(true);
+      setError('');
+      try {
+        const result = (await fetchConfig('api-keys', force)) as string[] | undefined;
+        const list = Array.isArray(result) ? result : [];
+        setApiKeys(list);
+      } catch (err: any) {
+        setError(err?.message || t('notification.refresh_failed'));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [fetchConfig, t]
+  );
+
+  useEffect(() => {
+    loadApiKeys();
+  }, [loadApiKeys]);
+
+  useEffect(() => {
+    if (Array.isArray(config?.apiKeys)) {
+      setApiKeys(config.apiKeys);
+    }
+  }, [config?.apiKeys]);
+
+  const openAddModal = () => {
+    setEditingIndex(null);
+    setInputValue('');
+    setModalOpen(true);
+  };
+
+  const openEditModal = (index: number) => {
+    setEditingIndex(index);
+    setInputValue(apiKeys[index] ?? '');
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalOpen(false);
+    setInputValue('');
+    setEditingIndex(null);
+  };
+
+  const handleSave = async () => {
+    const trimmed = inputValue.trim();
+    if (!trimmed) {
+      showNotification(`${t('notification.please_enter')} ${t('notification.api_key')}`, 'error');
+      return;
+    }
+
+    const isEdit = editingIndex !== null;
+    const nextKeys = isEdit
+      ? apiKeys.map((key, idx) => (idx === editingIndex ? trimmed : key))
+      : [...apiKeys, trimmed];
+
+    setSaving(true);
+    try {
+      if (isEdit && editingIndex !== null) {
+        await apiKeysApi.update(editingIndex, trimmed);
+        showNotification(t('notification.api_key_updated'), 'success');
+      } else {
+        await apiKeysApi.replace(nextKeys);
+        showNotification(t('notification.api_key_added'), 'success');
+      }
+
+      setApiKeys(nextKeys);
+      updateConfigValue('api-keys', nextKeys);
+      clearCache('api-keys');
+      closeModal();
+    } catch (err: any) {
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (index: number) => {
+    if (!window.confirm(t('api_keys.delete_confirm'))) return;
+    setDeletingIndex(index);
+    try {
+      await apiKeysApi.delete(index);
+      const nextKeys = apiKeys.filter((_, idx) => idx !== index);
+      setApiKeys(nextKeys);
+      updateConfigValue('api-keys', nextKeys);
+      clearCache('api-keys');
+      showNotification(t('notification.api_key_deleted'), 'success');
+    } catch (err: any) {
+      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setDeletingIndex(null);
+    }
+  };
+
+  const actionButtons = (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <Button variant="secondary" size="sm" onClick={() => loadApiKeys(true)} disabled={loading}>
+        {t('common.refresh')}
+      </Button>
+      <Button size="sm" onClick={openAddModal} disabled={disableControls}>
+        {t('api_keys.add_button')}
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.pageTitle}>{t('api_keys.title')}</h1>
+
+      <Card title={t('api_keys.proxy_auth_title')} extra={actionButtons}>
+        {error && <div className="error-box">{error}</div>}
+
+        {loading ? (
+          <div className="flex-center" style={{ padding: '24px 0' }}>
+            <LoadingSpinner size={28} />
+          </div>
+        ) : apiKeys.length === 0 ? (
+          <EmptyState
+            title={t('api_keys.empty_title')}
+            description={t('api_keys.empty_desc')}
+            action={
+              <Button onClick={openAddModal} disabled={disableControls}>
+                {t('api_keys.add_button')}
+              </Button>
+            }
+          />
+        ) : (
+          <div className="item-list">
+            {apiKeys.map((key, index) => (
+              <div key={index} className="item-row">
+                <div className="item-meta">
+                  <div className="pill">#{index + 1}</div>
+                  <div className="item-title">{t('api_keys.item_title')}</div>
+                  <div className="item-subtitle">{maskApiKey(String(key || ''))}</div>
+                </div>
+                <div className="item-actions">
+                  <Button variant="secondary" size="sm" onClick={() => openEditModal(index)} disabled={disableControls}>
+                    {t('common.edit')}
+                  </Button>
+                  <Button
+                    variant="danger"
+                    size="sm"
+                    onClick={() => handleDelete(index)}
+                    disabled={disableControls || deletingIndex === index}
+                    loading={deletingIndex === index}
+                  >
+                    {t('common.delete')}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <Modal
+          open={modalOpen}
+          onClose={closeModal}
+          title={editingIndex !== null ? t('api_keys.edit_modal_title') : t('api_keys.add_modal_title')}
+          footer={
+            <>
+              <Button variant="secondary" onClick={closeModal} disabled={saving}>
+                {t('common.cancel')}
+              </Button>
+              <Button onClick={handleSave} loading={saving}>
+                {editingIndex !== null ? t('common.update') : t('common.add')}
+              </Button>
+            </>
+          }
+        >
+          <Input
+            label={
+              editingIndex !== null ? t('api_keys.edit_modal_key_label') : t('api_keys.add_modal_key_label')
+            }
+            placeholder={
+              editingIndex !== null
+                ? t('api_keys.edit_modal_key_label')
+                : t('api_keys.add_modal_key_placeholder')
+            }
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            disabled={saving}
+          />
+        </Modal>
+      </Card>
+    </div>
+  );
+}
--- a/src/pages/AuthFilesPage.module.scss
+++ b/src/pages/AuthFilesPage.module.scss
@@ -0,0 +1,563 @@
+@use '../styles/variables' as *;
+@use '../styles/mixins' as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.pageHeader {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.headerActions {
+  display: flex;
+  gap: $spacing-sm;
+  flex-wrap: wrap;
+}
+
+.errorBox {
+  padding: $spacing-md;
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--danger-color);
+  border-radius: $radius-md;
+  color: var(--danger-color);
+  font-size: 14px;
+  margin-bottom: $spacing-md;
+}
+
+// 筛选区域
+.filterSection {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+  margin-bottom: $spacing-lg;
+}
+
+.filterTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-xs;
+}
+
+.filterTag {
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all $transition-fast;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: $shadow-sm;
+  }
+}
+
+.filterTagActive {
+  font-weight: 600;
+}
+
+.filterControls {
+  display: flex;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+  align-items: flex-end;
+
+  // 修复 Input 组件在 filterItem 中的嵌套样式
+  :global(.form-group) {
+    margin: 0;
+  }
+
+  :global(.input) {
+    height: 38px;
+    box-sizing: border-box;
+  }
+}
+
+.filterItem {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  // 搜索输入框需要更宽以显示完整的 placeholder
+  &:first-child {
+    min-width: 220px;
+    flex: 1;
+    max-width: 320px;
+  }
+
+  // 其他 filterItem 保持较小的宽度
+  &:not(:first-child) {
+    min-width: auto;
+  }
+}
+
+.pageSizeSelect {
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: pointer;
+  height: 38px;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+  }
+}
+
+.statsInfo {
+  padding: 8px 12px;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-md;
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  height: 38px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+// 卡片网格
+.fileGrid {
+  display: grid;
+  gap: $spacing-md;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+
+  @include tablet {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+// 单个认证文件卡片
+.fileCard {
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  padding: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  transition: transform $transition-fast, box-shadow $transition-fast, border-color $transition-fast;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: $shadow-md;
+    border-color: rgba(37, 99, 235, 0.2);
+  }
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  min-height: 28px;
+}
+
+.typeBadge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.fileName {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.cardMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding: $spacing-xs 0;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.cardStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+  padding-top: $spacing-xs;
+  margin-top: $spacing-xs;
+}
+
+.statPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.1;
+  border: 1px solid transparent;
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.statSuccess {
+  background-color: var(--success-badge-bg, #d1fae5);
+  color: var(--success-badge-text, #065f46);
+  border-color: var(--success-badge-border, #6ee7b7);
+}
+
+.statFailure {
+  background-color: var(--failure-badge-bg, #fee2e2);
+  color: var(--failure-badge-text, #991b1b);
+  border-color: var(--failure-badge-border, #fca5a5);
+}
+
+// 状态监测栏
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  max-width: 280px;
+}
+
+.statusBlocks {
+  display: flex;
+  gap: 2px;
+  flex: 1;
+  min-width: 180px;
+}
+
+.statusBlock {
+  flex: 1;
+  height: 8px;
+  border-radius: 2px;
+  min-width: 6px;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+
+  &:hover {
+    transform: scaleY(1.5);
+    opacity: 0.85;
+  }
+}
+
+.statusBlockSuccess {
+  background-color: var(--success-color, #22c55e);
+}
+
+.statusBlockFailure {
+  background-color: var(--danger-color, #ef4444);
+}
+
+.statusBlockMixed {
+  background-color: var(--warning-color, #f59e0b);
+}
+
+.statusBlockIdle {
+  background-color: var(--border-secondary, #e5e7eb);
+}
+
+.statusRate {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--bg-tertiary);
+}
+
+.statusRateHigh {
+  color: var(--success-badge-text, #065f46);
+  background: var(--success-badge-bg, #d1fae5);
+}
+
+.statusRateMedium {
+  color: var(--warning-text, #92400e);
+  background: var(--warning-bg, #fef3c7);
+}
+
+.statusRateLow {
+  color: var(--failure-badge-text, #991b1b);
+  background: var(--failure-badge-bg, #fee2e2);
+}
+
+.cardActions {
+  display: flex;
+  gap: $spacing-xs;
+  justify-content: flex-end;
+  margin-top: auto;
+  padding-top: $spacing-sm;
+}
+
+.iconButton:global(.btn.btn-sm) {
+  width: 34px;
+  height: 34px;
+  min-width: 34px;
+  padding: 0;
+  box-sizing: border-box;
+  border-radius: 6px;
+  gap: 0;
+}
+
+.actionIcon {
+  display: block;
+}
+
+.virtualBadge {
+  font-size: 12px;
+  color: var(--text-secondary);
+  background-color: var(--bg-tertiary);
+  padding: 4px 10px;
+  border-radius: $radius-sm;
+  font-style: italic;
+  display: inline-flex;
+  align-items: center;
+}
+
+// 分页
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: $spacing-md;
+  margin-top: $spacing-lg;
+  padding-top: $spacing-md;
+  border-top: 1px solid var(--border-color);
+}
+
+.pageInfo {
+  font-size: 13px;
+  color: var(--text-secondary);
+  padding: $spacing-xs $spacing-md;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-md;
+}
+
+// OAuth 排除列表
+.excludedList {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.excludedItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-md;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-md;
+  border: 1px solid var(--border-color);
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.excludedInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.excludedProvider {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.excludedModels {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.excludedActions {
+  display: flex;
+  gap: $spacing-xs;
+  flex-shrink: 0;
+}
+
+// 详情弹窗
+.detailContent {
+  max-height: 400px;
+  overflow: auto;
+}
+
+.jsonContent {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  font-family: monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+// 表单
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+  margin-top: $spacing-md;
+
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+}
+
+.textarea {
+  width: 100%;
+  padding: $spacing-sm $spacing-md;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: monospace;
+  resize: vertical;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+  }
+
+  &::placeholder {
+    color: var(--text-tertiary);
+  }
+}
+
+.hint {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-style: italic;
+  text-align: center;
+  padding: $spacing-lg;
+}
+
+// 模型列表弹窗
+.modelsList {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.modelItem {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-md;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-md;
+  border: 1px solid var(--border-color);
+  flex-wrap: wrap;
+  cursor: pointer;
+  transition: all $transition-fast;
+
+  &:hover {
+    background-color: var(--bg-hover);
+    border-color: var(--primary-color);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.modelId {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.modelDisplayName {
+  font-size: 12px;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.modelType {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  background-color: var(--bg-tertiary);
+  padding: 2px 8px;
+  border-radius: 10px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.modelItemExcluded {
+  opacity: 0.6;
+  background-color: var(--bg-tertiary);
+  border-style: dashed;
+
+  .modelId {
+    text-decoration: line-through;
+    color: var(--text-tertiary);
+  }
+
+  &:hover {
+    border-color: var(--danger-color);
+  }
+}
+
+.modelExcludedBadge {
+  font-size: 10px;
+  color: var(--danger-color);
+  background-color: rgba(239, 68, 68, 0.1);
+  padding: 2px 6px;
+  border-radius: 8px;
+  border: 1px solid var(--danger-color);
+  flex-shrink: 0;
+}
--- a/src/pages/AuthFilesPage.tsx
+++ b/src/pages/AuthFilesPage.tsx
--- a/src/pages/ConfigPage.module.scss
+++ b/src/pages/ConfigPage.module.scss
@@ -0,0 +1,263 @@
+@use '../styles/mixins' as *;
+
+.container {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-md 0;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  flex: 1;
+  min-height: 0;
+}
+
+.searchInputWrapper {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  // The shared Input component adds a wrapper (.form-group) with margin-bottom.
+  // In the floating toolbar we want the input to be compact.
+  :global(.form-group) {
+    margin-bottom: 0;
+  }
+}
+
+.searchInput {
+  flex: 1;
+  border-radius: $radius-full !important;
+  padding-right: 132px !important;
+}
+
+.searchCount {
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  padding: 2px 8px;
+  border-radius: $radius-full;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.searchRight {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.searchButton {
+  @include button-reset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: $radius-full;
+  background: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  color: #fff;
+  transition: background-color $transition-fast, border-color $transition-fast, opacity $transition-fast;
+
+  &:hover:not(:disabled) {
+    background: var(--primary-hover);
+    border-color: var(--primary-hover);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.searchActions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+
+  button {
+    min-width: 32px;
+    width: 32px;
+    height: 32px;
+    padding: 0 !important;
+    border-radius: $radius-full;
+  }
+}
+
+.controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.status {
+  font-size: 14px;
+  color: var(--text-secondary);
+
+  &.modified {
+    color: #f59e0b;
+  }
+
+  &.saved {
+    color: #16a34a;
+  }
+
+  &.error {
+    color: #dc2626;
+  }
+}
+
+.editorWrapper {
+  width: 100%;
+  flex: 0 0 auto;
+  height: 480px;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  overflow: hidden;
+  position: relative;
+  --floating-controls-height: 0px;
+
+  // Floating search toolbar on top of the editor (but not covering content).
+  .floatingControls {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    right: 12px;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    flex-wrap: wrap;
+    pointer-events: auto;
+  }
+
+  // CodeMirror theme overrides
+  :global {
+    .cm-editor {
+      height: 100%;
+      font-size: 14px;
+      font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
+    }
+
+    .cm-scroller {
+      overflow: auto;
+      padding-top: calc(var(--floating-controls-height, 0px) + #{$spacing-md});
+      -webkit-overflow-scrolling: touch;
+      touch-action: pan-x pan-y;
+      overscroll-behavior: contain;
+    }
+
+    .cm-gutters {
+      border-right: 1px solid var(--border-color);
+      background: var(--bg-secondary);
+    }
+
+    .cm-lineNumbers .cm-gutterElement {
+      padding: 0 8px 0 12px;
+      min-width: 40px;
+      color: var(--text-muted);
+    }
+
+    .cm-activeLine {
+      background: var(--bg-hover);
+    }
+
+    .cm-activeLineGutter {
+      background: var(--bg-hover);
+    }
+
+    .cm-selectionMatch {
+      background: rgba(255, 193, 7, 0.3);
+    }
+
+    .cm-searchMatch {
+      background: rgba(255, 193, 7, 0.4);
+      outline: 1px solid rgba(255, 193, 7, 0.6);
+    }
+
+    .cm-searchMatch-selected {
+      background: rgba(255, 152, 0, 0.5);
+    }
+
+    // Dark theme adjustments
+    [data-theme='dark'] & {
+      .cm-gutters {
+        background: var(--bg-tertiary);
+      }
+
+      .cm-selectionMatch {
+        background: rgba(255, 193, 7, 0.2);
+      }
+    }
+  }
+}
+
+.configCard {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.actions {
+  display: flex;
+  gap: $spacing-sm;
+  justify-content: flex-end;
+
+  @include mobile {
+    justify-content: stretch;
+
+    button {
+      flex: 1;
+    }
+  }
+}
+
+@media (max-height: 820px) {
+  .pageTitle {
+    font-size: 24px;
+    margin-bottom: $spacing-sm;
+  }
+
+  .description {
+    margin-bottom: $spacing-lg;
+  }
+
+  .content {
+    gap: $spacing-md;
+  }
+
+  .configCard {
+    padding: $spacing-md;
+  }
+
+  .editorWrapper {
+    height: 360px;
+  }
+}
--- a/src/pages/ConfigPage.tsx
+++ b/src/pages/ConfigPage.tsx
@@ -0,0 +1,338 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import { yaml } from '@codemirror/lang-yaml';
+import { search, searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import { keymap } from '@codemirror/view';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { IconChevronDown, IconChevronUp, IconSearch } from '@/components/ui/icons';
+import { useNotificationStore, useAuthStore, useThemeStore } from '@/stores';
+import { configFileApi } from '@/services/api/configFile';
+import styles from './ConfigPage.module.scss';
+
+export function ConfigPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
+
+  const [content, setContent] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [dirty, setDirty] = useState(false);
+
+  // Search state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<{ current: number; total: number }>({ current: 0, total: 0 });
+  const [lastSearchedQuery, setLastSearchedQuery] = useState('');
+  const editorRef = useRef<ReactCodeMirrorRef>(null);
+  const floatingControlsRef = useRef<HTMLDivElement>(null);
+  const editorWrapperRef = useRef<HTMLDivElement>(null);
+
+  const disableControls = connectionStatus !== 'connected';
+
+  const loadConfig = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await configFileApi.fetchConfigYaml();
+      setContent(data);
+      setDirty(false);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : t('notification.refresh_failed');
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  useEffect(() => {
+    loadConfig();
+  }, [loadConfig]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await configFileApi.saveConfigYaml(content);
+      setDirty(false);
+      showNotification(t('config_management.save_success'), 'success');
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : '';
+      showNotification(`${t('notification.save_failed')}: ${message}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleChange = useCallback((value: string) => {
+    setContent(value);
+    setDirty(true);
+  }, []);
+
+  // Search functionality
+  const performSearch = useCallback((query: string, direction: 'next' | 'prev' = 'next') => {
+    if (!query || !editorRef.current?.view) return;
+
+    const view = editorRef.current.view;
+    const doc = view.state.doc.toString();
+    const matches: number[] = [];
+    const lowerQuery = query.toLowerCase();
+    const lowerDoc = doc.toLowerCase();
+
+    let pos = 0;
+    while (pos < lowerDoc.length) {
+      const index = lowerDoc.indexOf(lowerQuery, pos);
+      if (index === -1) break;
+      matches.push(index);
+      pos = index + 1;
+    }
+
+    if (matches.length === 0) {
+      setSearchResults({ current: 0, total: 0 });
+      return;
+    }
+
+    // Find current match based on cursor position
+    const selection = view.state.selection.main;
+    const cursorPos = direction === 'prev' ? selection.from : selection.to;
+    let currentIndex = 0;
+
+    if (direction === 'next') {
+      // Find next match after cursor
+      for (let i = 0; i < matches.length; i++) {
+        if (matches[i] > cursorPos) {
+          currentIndex = i;
+          break;
+        }
+        // If no match after cursor, wrap to first
+        if (i === matches.length - 1) {
+          currentIndex = 0;
+        }
+      }
+    } else {
+      // Find previous match before cursor
+      for (let i = matches.length - 1; i >= 0; i--) {
+        if (matches[i] < cursorPos) {
+          currentIndex = i;
+          break;
+        }
+        // If no match before cursor, wrap to last
+        if (i === 0) {
+          currentIndex = matches.length - 1;
+        }
+      }
+    }
+
+    const matchPos = matches[currentIndex];
+    setSearchResults({ current: currentIndex + 1, total: matches.length });
+
+    // Scroll to and select the match
+    view.dispatch({
+      selection: { anchor: matchPos, head: matchPos + query.length },
+      scrollIntoView: true
+    });
+    view.focus();
+  }, []);
+
+  const handleSearchChange = useCallback((value: string) => {
+    setSearchQuery(value);
+    // Do not auto-search on each keystroke. Clear previous results when query changes.
+    if (!value) {
+      setSearchResults({ current: 0, total: 0 });
+      setLastSearchedQuery('');
+    } else {
+      setSearchResults({ current: 0, total: 0 });
+    }
+  }, []);
+
+  const executeSearch = useCallback((direction: 'next' | 'prev' = 'next') => {
+    if (!searchQuery) return;
+    setLastSearchedQuery(searchQuery);
+    performSearch(searchQuery, direction);
+  }, [searchQuery, performSearch]);
+
+  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      executeSearch(e.shiftKey ? 'prev' : 'next');
+    }
+  }, [executeSearch]);
+
+  const handlePrevMatch = useCallback(() => {
+    if (!lastSearchedQuery) return;
+    performSearch(lastSearchedQuery, 'prev');
+  }, [lastSearchedQuery, performSearch]);
+
+  const handleNextMatch = useCallback(() => {
+    if (!lastSearchedQuery) return;
+    performSearch(lastSearchedQuery, 'next');
+  }, [lastSearchedQuery, performSearch]);
+
+  // Keep floating controls from covering editor content by syncing its height to a CSS variable.
+  useLayoutEffect(() => {
+    const controlsEl = floatingControlsRef.current;
+    const wrapperEl = editorWrapperRef.current;
+    if (!controlsEl || !wrapperEl) return;
+
+    const updatePadding = () => {
+      const height = controlsEl.getBoundingClientRect().height;
+      wrapperEl.style.setProperty('--floating-controls-height', `${height}px`);
+    };
+
+    updatePadding();
+    window.addEventListener('resize', updatePadding);
+
+    const ro = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updatePadding);
+    ro?.observe(controlsEl);
+
+    return () => {
+      ro?.disconnect();
+      window.removeEventListener('resize', updatePadding);
+    };
+  }, []);
+
+  // CodeMirror extensions
+  const extensions = useMemo(() => [
+    yaml(),
+    search(),
+    highlightSelectionMatches(),
+    keymap.of(searchKeymap)
+  ], []);
+
+  // Status text
+  const getStatusText = () => {
+    if (disableControls) return t('config_management.status_disconnected');
+    if (loading) return t('config_management.status_loading');
+    if (error) return t('config_management.status_load_failed');
+    if (saving) return t('config_management.status_saving');
+    if (dirty) return t('config_management.status_dirty');
+    return t('config_management.status_loaded');
+  };
+
+  const getStatusClass = () => {
+    if (error) return styles.error;
+    if (dirty) return styles.modified;
+    if (!loading && !saving) return styles.saved;
+    return '';
+  };
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.pageTitle}>{t('config_management.title')}</h1>
+      <p className={styles.description}>{t('config_management.description')}</p>
+
+      <Card className={styles.configCard}>
+        <div className={styles.content}>
+          {/* Editor */}
+          {error && <div className="error-box">{error}</div>}
+          <div className={styles.editorWrapper} ref={editorWrapperRef}>
+            {/* Floating search controls */}
+            <div className={styles.floatingControls} ref={floatingControlsRef}>
+              <div className={styles.searchInputWrapper}>
+                <Input
+                  value={searchQuery}
+                  onChange={(e) => handleSearchChange(e.target.value)}
+                  onKeyDown={handleSearchKeyDown}
+                  placeholder={t('config_management.search_placeholder', {
+                    defaultValue: '搜索配置内容...'
+                  })}
+                  disabled={disableControls || loading}
+                  className={styles.searchInput}
+                  rightElement={
+                    <div className={styles.searchRight}>
+                      {searchQuery && lastSearchedQuery === searchQuery && (
+                        <span className={styles.searchCount}>
+                          {searchResults.total > 0
+                            ? `${searchResults.current} / ${searchResults.total}`
+                            : t('config_management.search_no_results', { defaultValue: '无结果' })}
+                        </span>
+                      )}
+                      <button
+                        type="button"
+                        className={styles.searchButton}
+                        onClick={() => executeSearch('next')}
+                        disabled={!searchQuery || disableControls || loading}
+                        title={t('config_management.search_button', { defaultValue: '搜索' })}
+                      >
+                        <IconSearch size={16} />
+                      </button>
+                    </div>
+                  }
+                />
+              </div>
+              <div className={styles.searchActions}>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={handlePrevMatch}
+                  disabled={!searchQuery || lastSearchedQuery !== searchQuery || searchResults.total === 0}
+                  title={t('config_management.search_prev', { defaultValue: '上一个' })}
+                >
+                  <IconChevronUp size={16} />
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={handleNextMatch}
+                  disabled={!searchQuery || lastSearchedQuery !== searchQuery || searchResults.total === 0}
+                  title={t('config_management.search_next', { defaultValue: '下一个' })}
+                >
+                  <IconChevronDown size={16} />
+                </Button>
+              </div>
+            </div>
+            <CodeMirror
+              ref={editorRef}
+              value={content}
+              onChange={handleChange}
+              extensions={extensions}
+              theme={resolvedTheme}
+              editable={!disableControls && !loading}
+              placeholder={t('config_management.editor_placeholder')}
+              height="100%"
+              style={{ height: '100%' }}
+              basicSetup={{
+                lineNumbers: true,
+                highlightActiveLineGutter: true,
+                highlightActiveLine: true,
+                foldGutter: true,
+                dropCursor: true,
+                allowMultipleSelections: true,
+                indentOnInput: true,
+                bracketMatching: true,
+                closeBrackets: true,
+                autocompletion: false,
+                rectangularSelection: true,
+                crosshairCursor: false,
+                highlightSelectionMatches: true,
+                closeBracketsKeymap: true,
+                searchKeymap: true,
+                foldKeymap: true,
+                completionKeymap: false,
+                lintKeymap: true
+              }}
+            />
+          </div>
+
+          {/* Controls */}
+          <div className={styles.controls}>
+            <span className={`${styles.status} ${getStatusClass()}`}>
+              {getStatusText()}
+            </span>
+            <div className={styles.actions}>
+              <Button variant="secondary" size="sm" onClick={loadConfig} disabled={loading}>
+                {t('config_management.reload')}
+              </Button>
+              <Button size="sm" onClick={handleSave} loading={saving} disabled={disableControls || loading || !dirty}>
+                {t('config_management.save')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
--- a/src/pages/DashboardPage.module.scss
+++ b/src/pages/DashboardPage.module.scss
@@ -0,0 +1,320 @@
+@use 'sass:color';
+@use '../styles/variables.scss' as *;
+
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.header {
+  margin-bottom: $spacing-sm;
+}
+
+.title {
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.subtitle {
+  font-size: 15px;
+  color: var(--text-secondary);
+  margin: $spacing-xs 0 0 0;
+}
+
+.connectionCard {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  padding: $spacing-md $spacing-lg;
+  flex-wrap: wrap;
+}
+
+.connectionStatus {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.statusDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: $gray-400;
+
+  &.connected {
+    background: $success-color;
+    box-shadow: 0 0 8px rgba($success-color, 0.5);
+  }
+
+  &.connecting {
+    background: $warning-color;
+    animation: pulse 1s ease-in-out infinite;
+  }
+
+  &.disconnected {
+    background: $error-color;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.statusText {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.connectionInfo {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+}
+
+.serverUrl {
+  font-family: $font-mono;
+  font-size: 13px;
+  color: var(--text-secondary);
+  background: var(--bg-primary);
+  padding: 4px 10px;
+  border-radius: $radius-md;
+  border: 1px solid var(--border-color);
+}
+
+.serverVersion {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--primary-color);
+  background: rgba($primary-color, 0.1);
+  padding: 4px 10px;
+  border-radius: $radius-full;
+}
+
+.buildDate {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.statsGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $spacing-md;
+
+  @media (max-width: 900px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 500px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.statCard {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  padding: $spacing-lg;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  text-decoration: none;
+  transition: all $transition-fast;
+
+  &:hover {
+    border-color: var(--primary-color);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+  }
+}
+
+.statIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: $radius-md;
+  background: var(--bg-secondary);
+  color: var(--primary-color);
+}
+
+.statContent {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.statValue {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--text-primary);
+}
+
+.statLabel {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.statSublabel {
+  font-size: 11px;
+  color: var(--text-secondary);
+  opacity: 0.8;
+  margin-top: 2px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.sectionTitle {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.actionsGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.actionButton {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+
+  // Button 内部的 span 需要 flex 对齐图标和文字
+  > span {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-sm;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+.configGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: $spacing-sm;
+}
+
+.configItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-md;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+}
+
+.configLabel {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.configValue {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+
+  &.enabled {
+    color: $success-color;
+  }
+
+  &.disabled {
+    color: var(--text-secondary);
+  }
+}
+
+.configValueMono {
+  font-size: 12px;
+  font-family: $font-mono;
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+
+.configItemFull {
+  grid-column: 1 / -1;
+}
+
+// Usage stats section
+.usageGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: $spacing-sm;
+}
+
+.usageCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-md;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  text-align: center;
+}
+
+.usageValue {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--primary-color);
+}
+
+.usageLabel {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+.usageLoading,
+.usageEmpty {
+  padding: $spacing-lg;
+  text-align: center;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+}
+
+.viewMoreLink {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  color: var(--primary-color);
+  text-decoration: none;
+  margin-top: $spacing-xs;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -0,0 +1,319 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  IconKey,
+  IconBot,
+  IconFileText,
+  IconSatellite
+} from '@/components/ui/icons';
+import { useAuthStore, useConfigStore, useModelsStore } from '@/stores';
+import { apiKeysApi, providersApi, authFilesApi } from '@/services/api';
+import styles from './DashboardPage.module.scss';
+
+interface QuickStat {
+  label: string;
+  value: number | string;
+  icon: React.ReactNode;
+  path: string;
+  loading?: boolean;
+  sublabel?: string;
+}
+
+interface ProviderStats {
+  gemini: number | null;
+  codex: number | null;
+  claude: number | null;
+  openai: number | null;
+}
+
+export function DashboardPage() {
+  const { t, i18n } = useTranslation();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const serverVersion = useAuthStore((state) => state.serverVersion);
+  const serverBuildDate = useAuthStore((state) => state.serverBuildDate);
+  const apiBase = useAuthStore((state) => state.apiBase);
+  const config = useConfigStore((state) => state.config);
+
+  const models = useModelsStore((state) => state.models);
+  const modelsLoading = useModelsStore((state) => state.loading);
+  const fetchModelsFromStore = useModelsStore((state) => state.fetchModels);
+
+  const [stats, setStats] = useState<{
+    apiKeys: number | null;
+    authFiles: number | null;
+  }>({
+    apiKeys: null,
+    authFiles: null
+  });
+
+  const [providerStats, setProviderStats] = useState<ProviderStats>({
+    gemini: null,
+    codex: null,
+    claude: null,
+    openai: null
+  });
+
+  const [loading, setLoading] = useState(true);
+
+  const apiKeysCache = useRef<string[]>([]);
+
+  useEffect(() => {
+    apiKeysCache.current = [];
+  }, [apiBase, config?.apiKeys]);
+
+  const normalizeApiKeyList = (input: any): string[] => {
+    if (!Array.isArray(input)) return [];
+    const seen = new Set<string>();
+    const keys: string[] = [];
+
+    input.forEach((item) => {
+      const value = typeof item === 'string' ? item : item?.['api-key'] ?? item?.apiKey ?? '';
+      const trimmed = String(value || '').trim();
+      if (!trimmed || seen.has(trimmed)) return;
+      seen.add(trimmed);
+      keys.push(trimmed);
+    });
+
+    return keys;
+  };
+
+  const resolveApiKeysForModels = useCallback(async () => {
+    if (apiKeysCache.current.length) {
+      return apiKeysCache.current;
+    }
+
+    const configKeys = normalizeApiKeyList(config?.apiKeys);
+    if (configKeys.length) {
+      apiKeysCache.current = configKeys;
+      return configKeys;
+    }
+
+    try {
+      const list = await apiKeysApi.list();
+      const normalized = normalizeApiKeyList(list);
+      if (normalized.length) {
+        apiKeysCache.current = normalized;
+      }
+      return normalized;
+    } catch {
+      return [];
+    }
+  }, [config?.apiKeys]);
+
+  const fetchModels = useCallback(async () => {
+    if (connectionStatus !== 'connected' || !apiBase) {
+      return;
+    }
+
+    try {
+      const apiKeys = await resolveApiKeysForModels();
+      const primaryKey = apiKeys[0];
+      await fetchModelsFromStore(apiBase, primaryKey);
+    } catch {
+      // Ignore model fetch errors on dashboard
+    }
+  }, [connectionStatus, apiBase, resolveApiKeysForModels, fetchModelsFromStore]);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      setLoading(true);
+      try {
+        const [keysRes, filesRes, geminiRes, codexRes, claudeRes, openaiRes] = await Promise.allSettled([
+          apiKeysApi.list(),
+          authFilesApi.list(),
+          providersApi.getGeminiKeys(),
+          providersApi.getCodexConfigs(),
+          providersApi.getClaudeConfigs(),
+          providersApi.getOpenAIProviders()
+        ]);
+
+        setStats({
+          apiKeys: keysRes.status === 'fulfilled' ? keysRes.value.length : null,
+          authFiles: filesRes.status === 'fulfilled' ? filesRes.value.files.length : null
+        });
+
+        setProviderStats({
+          gemini: geminiRes.status === 'fulfilled' ? geminiRes.value.length : null,
+          codex: codexRes.status === 'fulfilled' ? codexRes.value.length : null,
+          claude: claudeRes.status === 'fulfilled' ? claudeRes.value.length : null,
+          openai: openaiRes.status === 'fulfilled' ? openaiRes.value.length : null
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (connectionStatus === 'connected') {
+      fetchStats();
+      fetchModels();
+    } else {
+      setLoading(false);
+    }
+  }, [connectionStatus, fetchModels]);
+
+  // Calculate total provider keys only when all provider stats are available.
+  const providerStatsReady =
+    providerStats.gemini !== null &&
+    providerStats.codex !== null &&
+    providerStats.claude !== null &&
+    providerStats.openai !== null;
+  const hasProviderStats =
+    providerStats.gemini !== null ||
+    providerStats.codex !== null ||
+    providerStats.claude !== null ||
+    providerStats.openai !== null;
+  const totalProviderKeys = providerStatsReady
+    ? (providerStats.gemini ?? 0) +
+      (providerStats.codex ?? 0) +
+      (providerStats.claude ?? 0) +
+      (providerStats.openai ?? 0)
+    : 0;
+
+  const quickStats: QuickStat[] = [
+    {
+      label: t('nav.api_keys'),
+      value: stats.apiKeys ?? '-',
+      icon: <IconKey size={24} />,
+      path: '/api-keys',
+      loading: loading && stats.apiKeys === null,
+      sublabel: t('dashboard.management_keys')
+    },
+    {
+      label: t('nav.ai_providers'),
+      value: loading ? '-' : providerStatsReady ? totalProviderKeys : '-',
+      icon: <IconBot size={24} />,
+      path: '/ai-providers',
+      loading: loading,
+      sublabel: hasProviderStats
+        ? t('dashboard.provider_keys_detail', {
+            gemini: providerStats.gemini ?? '-',
+            codex: providerStats.codex ?? '-',
+            claude: providerStats.claude ?? '-',
+            openai: providerStats.openai ?? '-'
+          })
+        : undefined
+    },
+    {
+      label: t('nav.auth_files'),
+      value: stats.authFiles ?? '-',
+      icon: <IconFileText size={24} />,
+      path: '/auth-files',
+      loading: loading && stats.authFiles === null,
+      sublabel: t('dashboard.oauth_credentials')
+    },
+    {
+      label: t('dashboard.available_models'),
+      value: modelsLoading ? '-' : models.length,
+      icon: <IconSatellite size={24} />,
+      path: '/system',
+      loading: modelsLoading,
+      sublabel: t('dashboard.available_models_desc')
+    }
+  ];
+
+  return (
+    <div className={styles.dashboard}>
+      <div className={styles.header}>
+        <h1 className={styles.title}>{t('dashboard.title')}</h1>
+        <p className={styles.subtitle}>{t('dashboard.subtitle')}</p>
+      </div>
+
+      <div className={styles.connectionCard}>
+        <div className={styles.connectionStatus}>
+          <span
+            className={`${styles.statusDot} ${
+              connectionStatus === 'connected'
+                ? styles.connected
+                : connectionStatus === 'connecting'
+                  ? styles.connecting
+                  : styles.disconnected
+            }`}
+          />
+          <span className={styles.statusText}>
+            {t(
+              connectionStatus === 'connected'
+                ? 'common.connected'
+                : connectionStatus === 'connecting'
+                  ? 'common.connecting'
+                  : 'common.disconnected'
+            )}
+          </span>
+        </div>
+        <div className={styles.connectionInfo}>
+          <span className={styles.serverUrl}>{apiBase || '-'}</span>
+          {serverVersion && (
+            <span className={styles.serverVersion}>
+              v{serverVersion.trim().replace(/^[vV]+/, '')}
+            </span>
+          )}
+          {serverBuildDate && (
+            <span className={styles.buildDate}>
+              {new Date(serverBuildDate).toLocaleDateString(i18n.language)}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className={styles.statsGrid}>
+        {quickStats.map((stat) => (
+          <Link key={stat.path} to={stat.path} className={styles.statCard}>
+            <div className={styles.statIcon}>{stat.icon}</div>
+            <div className={styles.statContent}>
+              <span className={styles.statValue}>{stat.loading ? '...' : stat.value}</span>
+              <span className={styles.statLabel}>{stat.label}</span>
+              {stat.sublabel && !stat.loading && (
+                <span className={styles.statSublabel}>{stat.sublabel}</span>
+              )}
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {config && (
+        <div className={styles.section}>
+          <h2 className={styles.sectionTitle}>{t('dashboard.current_config')}</h2>
+          <div className={styles.configGrid}>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.debug_enable')}</span>
+              <span className={`${styles.configValue} ${config.debug ? styles.enabled : styles.disabled}`}>
+                {config.debug ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.usage_statistics_enable')}</span>
+              <span className={`${styles.configValue} ${config.usageStatisticsEnabled ? styles.enabled : styles.disabled}`}>
+                {config.usageStatisticsEnabled ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.logging_to_file_enable')}</span>
+              <span className={`${styles.configValue} ${config.loggingToFile ? styles.enabled : styles.disabled}`}>
+                {config.loggingToFile ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.retry_count_label')}</span>
+              <span className={styles.configValue}>{config.requestRetry ?? 0}</span>
+            </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.ws_auth_enable')}</span>
+              <span className={`${styles.configValue} ${config.wsAuth ? styles.enabled : styles.disabled}`}>
+                {config.wsAuth ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            {config.proxyUrl && (
+              <div className={`${styles.configItem} ${styles.configItemFull}`}>
+                <span className={styles.configLabel}>{t('basic_settings.proxy_url_label')}</span>
+                <span className={styles.configValueMono}>{config.proxyUrl}</span>
+              </div>
+            )}
+          </div>
+          <Link to="/settings" className={styles.viewMoreLink}>
+            {t('dashboard.edit_settings')} →
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/pages/Login/Login.module.scss
+++ b/src/pages/Login/Login.module.scss
@@ -0,0 +1,124 @@
+.container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%);
+  padding: $spacing-md;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  padding: $spacing-md 0;
+}
+
+.controls {
+  display: flex;
+  gap: $spacing-sm;
+}
+
+.iconButton {
+  @include button-reset;
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+  padding: $spacing-sm $spacing-md;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+  border-radius: $radius-md;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+
+  i {
+    font-size: 18px;
+  }
+
+  span {
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+.loginBox {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 450px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.logo {
+  width: 80px;
+  height: 80px;
+  background-color: white;
+  border-radius: $radius-full;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40px;
+  color: var(--primary-color);
+  margin-bottom: $spacing-lg;
+  box-shadow: var(--shadow-lg);
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  color: white;
+  margin: 0 0 $spacing-sm 0;
+  text-align: center;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 0 0 $spacing-2xl 0;
+  text-align: center;
+}
+
+.form {
+  width: 100%;
+  background-color: var(--bg-primary);
+  padding: $spacing-2xl;
+  border-radius: $radius-lg;
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.detectedInfo {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-md;
+  background-color: rgba(59, 130, 246, 0.1);
+  border-radius: $radius-md;
+  font-size: 13px;
+  color: var(--text-secondary);
+
+  i {
+    color: var(--primary-color);
+  }
+
+  strong {
+    color: var(--text-primary);
+  }
+}
+
+.footer {
+  margin-top: $spacing-xl;
+  text-align: center;
+}
+
+.version {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  margin: 0;
+}
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,159 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Navigate, useNavigate, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { IconEye, IconEyeOff } from '@/components/ui/icons';
+import { useAuthStore, useNotificationStore } from '@/stores';
+import { detectApiBaseFromLocation, normalizeApiBase } from '@/utils/connection';
+
+export function LoginPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { showNotification } = useNotificationStore();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const login = useAuthStore((state) => state.login);
+  const restoreSession = useAuthStore((state) => state.restoreSession);
+  const storedBase = useAuthStore((state) => state.apiBase);
+  const storedKey = useAuthStore((state) => state.managementKey);
+
+  const [apiBase, setApiBase] = useState('');
+  const [managementKey, setManagementKey] = useState('');
+  const [showCustomBase, setShowCustomBase] = useState(false);
+  const [showKey, setShowKey] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [autoLoading, setAutoLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const detectedBase = useMemo(() => detectApiBaseFromLocation(), []);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const autoLoggedIn = await restoreSession();
+        if (!autoLoggedIn) {
+          setApiBase(storedBase || detectedBase);
+          setManagementKey(storedKey || '');
+        }
+      } finally {
+        setAutoLoading(false);
+      }
+    };
+
+    init();
+  }, [detectedBase, restoreSession, storedBase, storedKey]);
+
+  if (isAuthenticated) {
+    const redirect = (location.state as any)?.from?.pathname || '/';
+    return <Navigate to={redirect} replace />;
+  }
+
+  const handleUseCurrent = () => {
+    setApiBase(detectedBase);
+  };
+
+  const handleSubmit = async () => {
+    if (!managementKey.trim()) {
+      setError(t('login.error_required'));
+      return;
+    }
+
+    const baseToUse = apiBase ? normalizeApiBase(apiBase) : detectedBase;
+    setLoading(true);
+    setError('');
+    try {
+      await login({ apiBase: baseToUse, managementKey: managementKey.trim() });
+      showNotification(t('common.connected_status'), 'success');
+      navigate('/', { replace: true });
+    } catch (err: any) {
+      const message = err?.message || t('login.error_invalid');
+      setError(message);
+      showNotification(`${t('notification.login_failed')}: ${message}`, 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <div className="login-header">
+          <div className="title">{t('title.login')}</div>
+          <div className="subtitle">{t('login.subtitle')}</div>
+        </div>
+
+        <div className="connection-box">
+          <div className="label">{t('login.connection_current')}</div>
+          <div className="value">{apiBase || detectedBase}</div>
+          <div className="hint">{t('login.connection_auto_hint')}</div>
+        </div>
+
+        <div className="toggle-advanced">
+          <input
+            id="custom-connection-toggle"
+            type="checkbox"
+            checked={showCustomBase}
+            onChange={(e) => setShowCustomBase(e.target.checked)}
+          />
+          <label htmlFor="custom-connection-toggle">{t('login.custom_connection_label')}</label>
+        </div>
+
+        {showCustomBase && (
+          <Input
+            label={t('login.custom_connection_label')}
+            placeholder={t('login.custom_connection_placeholder')}
+            value={apiBase}
+            onChange={(e) => setApiBase(e.target.value)}
+            hint={t('login.custom_connection_hint')}
+          />
+        )}
+
+        <Input
+          label={t('login.management_key_label')}
+          placeholder={t('login.management_key_placeholder')}
+          type={showKey ? 'text' : 'password'}
+          value={managementKey}
+          onChange={(e) => setManagementKey(e.target.value)}
+          rightElement={
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              onClick={() => setShowKey((prev) => !prev)}
+              aria-label={
+                showKey
+                  ? t('login.hide_key', { defaultValue: '隐藏密钥' })
+                  : t('login.show_key', { defaultValue: '显示密钥' })
+              }
+              title={
+                showKey
+                  ? t('login.hide_key', { defaultValue: '隐藏密钥' })
+                  : t('login.show_key', { defaultValue: '显示密钥' })
+              }
+            >
+              {showKey ? <IconEyeOff size={16} /> : <IconEye size={16} />}
+            </button>
+          }
+        />
+
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <Button variant="secondary" onClick={handleUseCurrent}>
+            {t('login.use_current_address')}
+          </Button>
+          <Button fullWidth onClick={handleSubmit} loading={loading}>
+            {loading ? t('login.submitting') : t('login.submit_button')}
+          </Button>
+        </div>
+
+        {error && <div className="error-box">{error}</div>}
+
+        {autoLoading && (
+          <div className="connection-box">
+            <div className="label">{t('auto_login.title')}</div>
+            <div className="value">{t('auto_login.message')}</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/pages/LogsPage.module.scss
+++ b/src/pages/LogsPage.module.scss
@@ -0,0 +1,534 @@
+@use '../styles/mixins' as *;
+
+.container {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
+  @include mobile {
+    min-height: auto;
+    overflow: visible;
+  }
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-lg 0;
+}
+
+.tabBar {
+  display: flex;
+  gap: $spacing-xs;
+  margin-bottom: $spacing-lg;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.tabItem {
+  @include button-reset;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+}
+
+.tabActive {
+  color: var(--primary-color);
+  border-bottom-color: var(--primary-color);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  flex: 1;
+  min-height: 0;
+
+  @include mobile {
+    gap: $spacing-md;
+    min-height: auto;
+  }
+}
+
+.logCard {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+
+  @include mobile {
+    flex: 0 0 auto;
+    min-height: auto;
+    overflow: visible;
+  }
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  flex-wrap: wrap;
+  margin-left: auto;
+
+  @include mobile {
+    align-items: flex-start;
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
+.filters {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+  margin-bottom: $spacing-md;
+
+  :global(.form-group) {
+    margin: 0;
+  }
+
+  @include mobile {
+    gap: $spacing-sm;
+    margin-bottom: $spacing-sm;
+  }
+}
+
+.searchWrapper {
+  flex: 1;
+  min-width: 220px;
+  max-width: 420px;
+}
+
+.searchInput {
+  padding-right: 44px !important;
+}
+
+.searchIcon {
+  color: var(--text-tertiary);
+  pointer-events: none;
+}
+
+.searchClear {
+  @include button-reset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: $radius-full;
+  color: var(--text-secondary);
+
+  &:hover {
+    background: var(--bg-secondary);
+  }
+}
+
+.filterStats {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.removedCount {
+  color: var(--text-tertiary);
+}
+
+.actionButton {
+  white-space: nowrap;
+}
+
+.buttonContent {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  svg {
+    flex: 0 0 auto;
+  }
+}
+
+.switchLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  svg {
+    flex: 0 0 auto;
+  }
+}
+
+.logPanel {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  flex: 1 1 auto;
+  min-height: 280px;
+  max-height: calc(100vh - 320px);
+  overflow: auto;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-y;
+  overscroll-behavior: contain;
+
+  @include tablet {
+    min-height: 240px;
+    max-height: calc(100vh - 300px);
+  }
+
+  @include mobile {
+    min-height: 360px;
+    max-height: 480px;
+    flex: 0 0 auto;
+    overflow: auto;
+  }
+}
+
+.errorPanel {
+  height: 480px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.loadMoreBanner {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-sm;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  font-size: 12px;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: $spacing-xs;
+
+    > span {
+      width: 100%;
+    }
+  }
+}
+
+.loadMoreCount {
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.loadMoreStats {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+
+  @include mobile {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: $spacing-sm;
+
+    > span {
+      white-space: nowrap;
+    }
+  }
+}
+
+.logList {
+  display: flex;
+  flex-direction: column;
+}
+
+.logRow {
+  display: grid;
+  grid-template-columns: 170px 1fr;
+  gap: $spacing-md;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-color);
+  border-left: 3px solid transparent;
+  cursor: copy;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--text-primary);
+
+  &:hover {
+    background: rgba(59, 130, 246, 0.06);
+  }
+
+  @include tablet {
+    grid-template-columns: 140px 1fr;
+    gap: $spacing-sm;
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  @include mobile {
+    grid-template-columns: 1fr;
+    gap: $spacing-xs;
+    padding: 8px 10px;
+    font-size: 11.5px;
+  }
+}
+
+.rowWarn {
+  border-left-color: var(--warning-color);
+}
+
+.rowError {
+  border-left-color: var(--error-color);
+}
+
+.timestamp {
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  padding-top: 2px;
+
+  @include mobile {
+    white-space: normal;
+  }
+}
+
+.rowMain {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: $radius-full;
+  font-size: 12px;
+  font-weight: 800;
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: $radius-full;
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.source {
+  color: var(--text-secondary);
+  max-width: 240px;
+  @include text-ellipsis;
+
+  @include mobile {
+    max-width: 100%;
+  }
+}
+
+.requestIdBadge {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 11px;
+  color: #0891b2;
+  background: rgba(8, 145, 178, 0.1);
+  border-color: rgba(8, 145, 178, 0.25);
+}
+
+.statusBadge {
+  font-variant-numeric: tabular-nums;
+}
+
+.statusSuccess {
+  color: var(--success-badge-text);
+  background: var(--success-badge-bg);
+  border-color: var(--success-badge-border);
+}
+
+.statusInfo {
+  color: var(--info-color);
+  background: rgba(59, 130, 246, 0.12);
+  border-color: rgba(59, 130, 246, 0.25);
+}
+
+.statusWarn {
+  color: var(--warning-color);
+  background: rgba(245, 158, 11, 0.14);
+  border-color: rgba(245, 158, 11, 0.25);
+}
+
+.statusError {
+  color: var(--failure-badge-text);
+  background: var(--failure-badge-bg);
+  border-color: var(--failure-badge-border);
+}
+
+.levelInfo {
+  color: var(--info-color);
+  background: rgba(59, 130, 246, 0.12);
+  border-color: rgba(59, 130, 246, 0.25);
+}
+
+.levelWarn {
+  color: var(--warning-color);
+  background: rgba(245, 158, 11, 0.14);
+  border-color: rgba(245, 158, 11, 0.25);
+}
+
+.levelError {
+  color: var(--error-color);
+  background: rgba(239, 68, 68, 0.12);
+  border-color: rgba(239, 68, 68, 0.25);
+}
+
+.levelDebug,
+.levelTrace {
+  color: var(--text-secondary);
+  background: rgba(107, 114, 128, 0.12);
+  border-color: rgba(107, 114, 128, 0.25);
+}
+
+.methodBadge {
+  color: var(--text-primary);
+  background: rgba(59, 130, 246, 0.08);
+  border-color: rgba(59, 130, 246, 0.22);
+}
+
+.path {
+  color: var(--text-primary);
+  font-weight: 700;
+  max-width: 520px;
+  @include text-ellipsis;
+
+  @include mobile {
+    max-width: 100%;
+    flex-basis: 100%;
+  }
+}
+
+.message {
+  color: var(--text-secondary);
+  word-break: break-word;
+
+  @include mobile {
+    flex-basis: 100%;
+  }
+}
+
+@media (max-height: 820px) {
+  .pageTitle {
+    font-size: 24px;
+    margin-bottom: $spacing-md;
+  }
+
+  .tabBar {
+    margin-bottom: $spacing-md;
+  }
+
+  .tabItem {
+    padding: 10px 16px;
+  }
+
+  .content {
+    gap: $spacing-md;
+  }
+
+  .logCard {
+    padding: $spacing-md;
+  }
+
+  .logPanel {
+    min-height: 200px;
+    max-height: calc(100vh - 280px);
+  }
+
+  .logRow {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .errorPanel {
+    height: 360px;
+  }
+}
+
+@media (max-height: 600px) {
+  .pageTitle {
+    font-size: 20px;
+    margin-bottom: $spacing-sm;
+  }
+
+  .tabBar {
+    margin-bottom: $spacing-sm;
+  }
+
+  .tabItem {
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+
+  .content {
+    gap: $spacing-sm;
+  }
+
+  .filters {
+    margin-bottom: $spacing-sm;
+    gap: $spacing-sm;
+  }
+
+  .logCard {
+    padding: $spacing-sm;
+  }
+
+  .logPanel {
+    min-height: 160px;
+    max-height: calc(100vh - 220px);
+  }
+
+  .logRow {
+    padding: 6px 8px;
+    font-size: 11px;
+    grid-template-columns: 130px 1fr;
+    gap: $spacing-xs;
+  }
+
+  .loadMoreBanner {
+    padding: 6px 10px;
+  }
+
+  .errorPanel {
+    height: 280px;
+  }
+}
--- a/src/pages/LogsPage.tsx
+++ b/src/pages/LogsPage.tsx
--- a/src/pages/OAuthPage.module.scss
+++ b/src/pages/OAuthPage.module.scss
@@ -0,0 +1,138 @@
+@use '../styles/mixins' as *;
+
+.container {
+  width: 100%;
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.cardTitleIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xl;
+}
+
+.oauthSection {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.oauthGrid {
+  display: grid;
+  gap: $spacing-lg;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.oauthCard {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.oauthStatus {
+  padding: $spacing-md;
+  border-radius: $radius-md;
+  font-size: 14px;
+
+  &.success {
+    background-color: rgba(34, 197, 94, 0.1);
+    color: #16a34a;
+  }
+
+  &.error {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: #dc2626;
+  }
+
+  &.waiting {
+    background-color: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+  }
+}
+
+.callbackSection {
+  margin-top: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.callbackActions {
+  display: flex;
+  gap: $spacing-md;
+}
+
+.authUrlBox {
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.authUrlLabel {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.authUrlValue {
+  font-weight: 700;
+  color: var(--text-primary);
+  word-break: break-all;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+  max-width: 100%;
+}
+
+.authUrlActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $spacing-sm;
+  margin-top: $spacing-sm;
+}
+
+.filePicker {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  flex-wrap: wrap;
+}
+
+.fileName {
+  flex: 1;
+  min-width: 220px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.fileNamePlaceholder {
+  color: var(--text-secondary);
+}
--- a/src/pages/OAuthPage.tsx
+++ b/src/pages/OAuthPage.tsx
@@ -0,0 +1,573 @@
+import { useEffect, useRef, useState, type ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useNotificationStore, useThemeStore } from '@/stores';
+import { oauthApi, type OAuthProvider, type IFlowCookieAuthResponse } from '@/services/api/oauth';
+import { vertexApi, type VertexImportResponse } from '@/services/api/vertex';
+import styles from './OAuthPage.module.scss';
+import iconOpenaiLight from '@/assets/icons/openai-light.svg';
+import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
+import iconClaude from '@/assets/icons/claude.svg';
+import iconAntigravity from '@/assets/icons/antigravity.svg';
+import iconGemini from '@/assets/icons/gemini.svg';
+import iconQwen from '@/assets/icons/qwen.svg';
+import iconIflow from '@/assets/icons/iflow.svg';
+import iconVertex from '@/assets/icons/vertex.svg';
+
+interface ProviderState {
+  url?: string;
+  state?: string;
+  status?: 'idle' | 'waiting' | 'success' | 'error';
+  error?: string;
+  polling?: boolean;
+  projectId?: string;
+  projectIdError?: string;
+  callbackUrl?: string;
+  callbackSubmitting?: boolean;
+  callbackStatus?: 'success' | 'error';
+  callbackError?: string;
+}
+
+interface IFlowCookieState {
+  cookie: string;
+  loading: boolean;
+  result?: IFlowCookieAuthResponse;
+  error?: string;
+  errorType?: 'error' | 'warning';
+}
+
+interface VertexImportResult {
+  projectId?: string;
+  email?: string;
+  location?: string;
+  authFile?: string;
+}
+
+interface VertexImportState {
+  file?: File;
+  fileName: string;
+  location: string;
+  loading: boolean;
+  error?: string;
+  result?: VertexImportResult;
+}
+
+const PROVIDERS: { id: OAuthProvider; titleKey: string; hintKey: string; urlLabelKey: string; icon: string | { light: string; dark: string } }[] = [
+  { id: 'codex', titleKey: 'auth_login.codex_oauth_title', hintKey: 'auth_login.codex_oauth_hint', urlLabelKey: 'auth_login.codex_oauth_url_label', icon: { light: iconOpenaiLight, dark: iconOpenaiDark } },
+  { id: 'anthropic', titleKey: 'auth_login.anthropic_oauth_title', hintKey: 'auth_login.anthropic_oauth_hint', urlLabelKey: 'auth_login.anthropic_oauth_url_label', icon: iconClaude },
+  { id: 'antigravity', titleKey: 'auth_login.antigravity_oauth_title', hintKey: 'auth_login.antigravity_oauth_hint', urlLabelKey: 'auth_login.antigravity_oauth_url_label', icon: iconAntigravity },
+  { id: 'gemini-cli', titleKey: 'auth_login.gemini_cli_oauth_title', hintKey: 'auth_login.gemini_cli_oauth_hint', urlLabelKey: 'auth_login.gemini_cli_oauth_url_label', icon: iconGemini },
+  { id: 'qwen', titleKey: 'auth_login.qwen_oauth_title', hintKey: 'auth_login.qwen_oauth_hint', urlLabelKey: 'auth_login.qwen_oauth_url_label', icon: iconQwen },
+  { id: 'iflow', titleKey: 'auth_login.iflow_oauth_title', hintKey: 'auth_login.iflow_oauth_hint', urlLabelKey: 'auth_login.iflow_oauth_url_label', icon: iconIflow }
+];
+
+const CALLBACK_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
+
+const getIcon = (icon: string | { light: string; dark: string }, theme: 'light' | 'dark') => {
+  return typeof icon === 'string' ? icon : icon[theme];
+};
+
+export function OAuthPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
+  const [states, setStates] = useState<Record<OAuthProvider, ProviderState>>({} as Record<OAuthProvider, ProviderState>);
+  const [iflowCookie, setIflowCookie] = useState<IFlowCookieState>({ cookie: '', loading: false });
+  const [vertexState, setVertexState] = useState<VertexImportState>({
+    fileName: '',
+    location: '',
+    loading: false
+  });
+  const timers = useRef<Record<string, number>>({});
+  const vertexFileInputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    return () => {
+      Object.values(timers.current).forEach((timer) => window.clearInterval(timer));
+    };
+  }, []);
+
+  const updateProviderState = (provider: OAuthProvider, next: Partial<ProviderState>) => {
+    setStates((prev) => ({
+      ...prev,
+      [provider]: { ...(prev[provider] ?? {}), ...next }
+    }));
+  };
+
+  const startPolling = (provider: OAuthProvider, state: string) => {
+    if (timers.current[provider]) {
+      clearInterval(timers.current[provider]);
+    }
+    const timer = window.setInterval(async () => {
+      try {
+        const res = await oauthApi.getAuthStatus(state);
+        if (res.status === 'ok') {
+          updateProviderState(provider, { status: 'success', polling: false });
+          showNotification(t('auth_login.codex_oauth_status_success'), 'success');
+          window.clearInterval(timer);
+          delete timers.current[provider];
+        } else if (res.status === 'error') {
+          updateProviderState(provider, { status: 'error', error: res.error, polling: false });
+          showNotification(`${t('auth_login.codex_oauth_status_error')} ${res.error || ''}`, 'error');
+          window.clearInterval(timer);
+          delete timers.current[provider];
+        }
+      } catch (err: any) {
+        updateProviderState(provider, { status: 'error', error: err?.message, polling: false });
+        window.clearInterval(timer);
+        delete timers.current[provider];
+      }
+    }, 3000);
+    timers.current[provider] = timer;
+  };
+
+  const startAuth = async (provider: OAuthProvider) => {
+    const projectId = provider === 'gemini-cli' ? (states[provider]?.projectId || '').trim() : undefined;
+    if (provider === 'gemini-cli' && !projectId) {
+      const message = t('auth_login.gemini_cli_project_id_required');
+      updateProviderState(provider, { projectIdError: message });
+      showNotification(message, 'warning');
+      return;
+    }
+    if (provider === 'gemini-cli') {
+      updateProviderState(provider, { projectIdError: undefined });
+    }
+    updateProviderState(provider, {
+      status: 'waiting',
+      polling: true,
+      error: undefined,
+      callbackStatus: undefined,
+      callbackError: undefined,
+      callbackUrl: ''
+    });
+    try {
+      const res = await oauthApi.startAuth(
+        provider,
+        provider === 'gemini-cli' ? { projectId: projectId! } : undefined
+      );
+      updateProviderState(provider, { url: res.url, state: res.state, status: 'waiting', polling: true });
+      if (res.state) {
+        startPolling(provider, res.state);
+      }
+    } catch (err: any) {
+      updateProviderState(provider, { status: 'error', error: err?.message, polling: false });
+      showNotification(`${t('auth_login.codex_oauth_start_error')} ${err?.message || ''}`, 'error');
+    }
+  };
+
+  const copyLink = async (url?: string) => {
+    if (!url) return;
+    try {
+      await navigator.clipboard.writeText(url);
+      showNotification(t('notification.link_copied'), 'success');
+    } catch {
+      showNotification('Copy failed', 'error');
+    }
+  };
+
+  const submitCallback = async (provider: OAuthProvider) => {
+    const redirectUrl = (states[provider]?.callbackUrl || '').trim();
+    if (!redirectUrl) {
+      showNotification(t('auth_login.oauth_callback_required'), 'warning');
+      return;
+    }
+    updateProviderState(provider, {
+      callbackSubmitting: true,
+      callbackStatus: undefined,
+      callbackError: undefined
+    });
+    try {
+      await oauthApi.submitCallback(provider, redirectUrl);
+      updateProviderState(provider, { callbackSubmitting: false, callbackStatus: 'success' });
+      showNotification(t('auth_login.oauth_callback_success'), 'success');
+    } catch (err: any) {
+      const errorMessage =
+        err?.status === 404
+          ? t('auth_login.oauth_callback_upgrade_hint', {
+              defaultValue: 'Please update CLI Proxy API or check the connection.'
+            })
+          : err?.message;
+      updateProviderState(provider, {
+        callbackSubmitting: false,
+        callbackStatus: 'error',
+        callbackError: errorMessage
+      });
+      const notificationMessage = errorMessage
+        ? `${t('auth_login.oauth_callback_error')} ${errorMessage}`
+        : t('auth_login.oauth_callback_error');
+      showNotification(notificationMessage, 'error');
+    }
+  };
+
+  const submitIflowCookie = async () => {
+    const cookie = iflowCookie.cookie.trim();
+    if (!cookie) {
+      showNotification(t('auth_login.iflow_cookie_required'), 'warning');
+      return;
+    }
+    setIflowCookie((prev) => ({
+      ...prev,
+      loading: true,
+      error: undefined,
+      errorType: undefined,
+      result: undefined
+    }));
+    try {
+      const res = await oauthApi.iflowCookieAuth(cookie);
+      if (res.status === 'ok') {
+        setIflowCookie((prev) => ({ ...prev, loading: false, result: res }));
+        showNotification(t('auth_login.iflow_cookie_status_success'), 'success');
+      } else {
+        setIflowCookie((prev) => ({
+          ...prev,
+          loading: false,
+          error: res.error,
+          errorType: 'error'
+        }));
+        showNotification(`${t('auth_login.iflow_cookie_status_error')} ${res.error || ''}`, 'error');
+      }
+    } catch (err: any) {
+      if (err?.status === 409) {
+        const message = t('auth_login.iflow_cookie_config_duplicate');
+        setIflowCookie((prev) => ({ ...prev, loading: false, error: message, errorType: 'warning' }));
+        showNotification(message, 'warning');
+        return;
+      }
+      setIflowCookie((prev) => ({ ...prev, loading: false, error: err?.message, errorType: 'error' }));
+      showNotification(`${t('auth_login.iflow_cookie_start_error')} ${err?.message || ''}`, 'error');
+    }
+  };
+
+  const handleVertexFilePick = () => {
+    vertexFileInputRef.current?.click();
+  };
+
+  const handleVertexFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    if (!file.name.endsWith('.json')) {
+      showNotification(t('vertex_import.file_required'), 'warning');
+      event.target.value = '';
+      return;
+    }
+    setVertexState((prev) => ({
+      ...prev,
+      file,
+      fileName: file.name,
+      error: undefined,
+      result: undefined
+    }));
+    event.target.value = '';
+  };
+
+  const handleVertexImport = async () => {
+    if (!vertexState.file) {
+      const message = t('vertex_import.file_required');
+      setVertexState((prev) => ({ ...prev, error: message }));
+      showNotification(message, 'warning');
+      return;
+    }
+    const location = vertexState.location.trim();
+    setVertexState((prev) => ({ ...prev, loading: true, error: undefined, result: undefined }));
+    try {
+      const res: VertexImportResponse = await vertexApi.importCredential(
+        vertexState.file,
+        location || undefined
+      );
+      const result: VertexImportResult = {
+        projectId: res.project_id,
+        email: res.email,
+        location: res.location,
+        authFile: res['auth-file'] ?? res.auth_file
+      };
+      setVertexState((prev) => ({ ...prev, loading: false, result }));
+      showNotification(t('vertex_import.success'), 'success');
+    } catch (err: any) {
+      const message = err?.message || '';
+      setVertexState((prev) => ({
+        ...prev,
+        loading: false,
+        error: message || t('notification.upload_failed')
+      }));
+      const notification = message
+        ? `${t('notification.upload_failed')}: ${message}`
+        : t('notification.upload_failed');
+      showNotification(notification, 'error');
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.pageTitle}>{t('nav.oauth', { defaultValue: 'OAuth' })}</h1>
+
+      <div className={styles.content}>
+        {PROVIDERS.map((provider) => {
+          const state = states[provider.id] || {};
+          const canSubmitCallback = CALLBACK_SUPPORTED.includes(provider.id) && Boolean(state.url);
+          return (
+            <div key={provider.id}>
+              <Card
+                title={
+                  <span className={styles.cardTitle}>
+                    <img
+                      src={getIcon(provider.icon, resolvedTheme)}
+                      alt=""
+                      className={styles.cardTitleIcon}
+                    />
+                    {t(provider.titleKey)}
+                  </span>
+                }
+                extra={
+                  <Button onClick={() => startAuth(provider.id)} loading={state.polling}>
+                    {t('common.login')}
+                  </Button>
+                }
+              >
+                <div className="hint">{t(provider.hintKey)}</div>
+                {provider.id === 'gemini-cli' && (
+                  <Input
+                    label={t('auth_login.gemini_cli_project_id_label')}
+                    hint={t('auth_login.gemini_cli_project_id_hint')}
+                    value={state.projectId || ''}
+                    error={state.projectIdError}
+                    onChange={(e) =>
+                      updateProviderState(provider.id, {
+                        projectId: e.target.value,
+                        projectIdError: undefined
+                      })
+                    }
+                    placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
+                  />
+                )}
+                {state.url && (
+                  <div className={`connection-box ${styles.authUrlBox}`}>
+                    <div className={styles.authUrlLabel}>{t(provider.urlLabelKey)}</div>
+                    <div className={styles.authUrlValue}>{state.url}</div>
+                    <div className={styles.authUrlActions}>
+                      <Button variant="secondary" size="sm" onClick={() => copyLink(state.url!)}>
+                        {t('auth_login.codex_copy_link')}
+                      </Button>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => window.open(state.url, '_blank', 'noopener,noreferrer')}
+                      >
+                        {t('auth_login.codex_open_link')}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+                {canSubmitCallback && (
+                  <div className={styles.callbackSection}>
+                    <Input
+                      label={t('auth_login.oauth_callback_label')}
+                      hint={t('auth_login.oauth_callback_hint')}
+                      value={state.callbackUrl || ''}
+                      onChange={(e) =>
+                        updateProviderState(provider.id, {
+                          callbackUrl: e.target.value,
+                          callbackStatus: undefined,
+                          callbackError: undefined
+                        })
+                      }
+                      placeholder={t('auth_login.oauth_callback_placeholder')}
+                    />
+                    <div className={styles.callbackActions}>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => submitCallback(provider.id)}
+                        loading={state.callbackSubmitting}
+                      >
+                        {t('auth_login.oauth_callback_button')}
+                      </Button>
+                    </div>
+                    {state.callbackStatus === 'success' && state.status === 'waiting' && (
+                      <div className="status-badge success" style={{ marginTop: 8 }}>
+                        {t('auth_login.oauth_callback_status_success')}
+                      </div>
+                    )}
+                    {state.callbackStatus === 'error' && (
+                      <div className="status-badge error" style={{ marginTop: 8 }}>
+                        {t('auth_login.oauth_callback_status_error')} {state.callbackError || ''}
+                      </div>
+                    )}
+                  </div>
+                )}
+                {state.status && state.status !== 'idle' && (
+                  <div className="status-badge" style={{ marginTop: 8 }}>
+                    {state.status === 'success'
+                      ? t('auth_login.codex_oauth_status_success')
+                      : state.status === 'error'
+                        ? `${t('auth_login.codex_oauth_status_error')} ${state.error || ''}`
+                        : t('auth_login.codex_oauth_status_waiting')}
+                  </div>
+                )}
+              </Card>
+            </div>
+          );
+        })}
+
+        {/* Vertex JSON 登录 */}
+        <Card
+          title={
+            <span className={styles.cardTitle}>
+              <img src={iconVertex} alt="" className={styles.cardTitleIcon} />
+              {t('vertex_import.title')}
+            </span>
+          }
+          extra={
+            <Button onClick={handleVertexImport} loading={vertexState.loading}>
+              {t('vertex_import.import_button')}
+            </Button>
+          }
+        >
+          <div className="hint">{t('vertex_import.description')}</div>
+          <Input
+            label={t('vertex_import.location_label')}
+            hint={t('vertex_import.location_hint')}
+            value={vertexState.location}
+            onChange={(e) =>
+              setVertexState((prev) => ({
+                ...prev,
+                location: e.target.value
+              }))
+            }
+            placeholder={t('vertex_import.location_placeholder')}
+          />
+          <div className="form-group">
+            <label>{t('vertex_import.file_label')}</label>
+            <div className={styles.filePicker}>
+              <Button variant="secondary" size="sm" onClick={handleVertexFilePick}>
+                {t('vertex_import.choose_file')}
+              </Button>
+              <div
+                className={`${styles.fileName} ${
+                  vertexState.fileName ? '' : styles.fileNamePlaceholder
+                }`.trim()}
+              >
+                {vertexState.fileName || t('vertex_import.file_placeholder')}
+              </div>
+            </div>
+            <div className="hint">{t('vertex_import.file_hint')}</div>
+            <input
+              ref={vertexFileInputRef}
+              type="file"
+              accept=".json,application/json"
+              style={{ display: 'none' }}
+              onChange={handleVertexFileChange}
+            />
+          </div>
+          {vertexState.error && (
+            <div className="status-badge error" style={{ marginTop: 8 }}>
+              {vertexState.error}
+            </div>
+          )}
+          {vertexState.result && (
+            <div className="connection-box" style={{ marginTop: 12 }}>
+              <div className="label">{t('vertex_import.result_title')}</div>
+              <div className="key-value-list">
+                {vertexState.result.projectId && (
+                  <div className="key-value-item">
+                    <span className="key">{t('vertex_import.result_project')}</span>
+                    <span className="value">{vertexState.result.projectId}</span>
+                  </div>
+                )}
+                {vertexState.result.email && (
+                  <div className="key-value-item">
+                    <span className="key">{t('vertex_import.result_email')}</span>
+                    <span className="value">{vertexState.result.email}</span>
+                  </div>
+                )}
+                {vertexState.result.location && (
+                  <div className="key-value-item">
+                    <span className="key">{t('vertex_import.result_location')}</span>
+                    <span className="value">{vertexState.result.location}</span>
+                  </div>
+                )}
+                {vertexState.result.authFile && (
+                  <div className="key-value-item">
+                    <span className="key">{t('vertex_import.result_file')}</span>
+                    <span className="value">{vertexState.result.authFile}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </Card>
+
+        {/* iFlow Cookie 登录 */}
+        <Card
+          title={
+            <span className={styles.cardTitle}>
+              <img src={iconIflow} alt="" className={styles.cardTitleIcon} />
+              {t('auth_login.iflow_cookie_title')}
+            </span>
+          }
+          extra={
+            <Button onClick={submitIflowCookie} loading={iflowCookie.loading}>
+              {t('auth_login.iflow_cookie_button')}
+            </Button>
+          }
+        >
+          <div className="hint">{t('auth_login.iflow_cookie_hint')}</div>
+          <div className="hint" style={{ marginTop: 4 }}>
+            {t('auth_login.iflow_cookie_key_hint')}
+          </div>
+          <div className="form-item" style={{ marginTop: 12 }}>
+            <label className="label">{t('auth_login.iflow_cookie_label')}</label>
+            <Input
+              value={iflowCookie.cookie}
+              onChange={(e) => setIflowCookie((prev) => ({ ...prev, cookie: e.target.value }))}
+              placeholder={t('auth_login.iflow_cookie_placeholder')}
+            />
+          </div>
+          {iflowCookie.error && (
+            <div
+              className={`status-badge ${iflowCookie.errorType === 'warning' ? 'warning' : 'error'}`}
+              style={{ marginTop: 8 }}
+            >
+              {iflowCookie.errorType === 'warning'
+                ? t('auth_login.iflow_cookie_status_duplicate')
+                : t('auth_login.iflow_cookie_status_error')}{' '}
+              {iflowCookie.error}
+            </div>
+          )}
+          {iflowCookie.result && iflowCookie.result.status === 'ok' && (
+            <div className="connection-box" style={{ marginTop: 12 }}>
+              <div className="label">{t('auth_login.iflow_cookie_result_title')}</div>
+              <div className="key-value-list">
+                {iflowCookie.result.email && (
+                  <div className="key-value-item">
+                    <span className="key">{t('auth_login.iflow_cookie_result_email')}</span>
+                    <span className="value">{iflowCookie.result.email}</span>
+                  </div>
+                )}
+                {iflowCookie.result.expired && (
+                  <div className="key-value-item">
+                    <span className="key">{t('auth_login.iflow_cookie_result_expired')}</span>
+                    <span className="value">{iflowCookie.result.expired}</span>
+                  </div>
+                )}
+                {iflowCookie.result.saved_path && (
+                  <div className="key-value-item">
+                    <span className="key">{t('auth_login.iflow_cookie_result_path')}</span>
+                    <span className="value">{iflowCookie.result.saved_path}</span>
+                  </div>
+                )}
+                {iflowCookie.result.type && (
+                  <div className="key-value-item">
+                    <span className="key">{t('auth_login.iflow_cookie_result_type')}</span>
+                    <span className="value">{iflowCookie.result.type}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/PlaceholderPage.module.scss
+++ b/src/pages/PlaceholderPage.module.scss
@@ -0,0 +1,32 @@
+.container {
+  width: 100%;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholder {
+  text-align: center;
+  padding: $spacing-2xl;
+
+  .icon {
+    font-size: 64px;
+    color: var(--text-secondary);
+    opacity: 0.5;
+    margin-bottom: $spacing-lg;
+  }
+
+  h2 {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0 0 $spacing-md 0;
+  }
+
+  p {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin: 0;
+  }
+}
--- a/src/pages/PlaceholderPage.tsx
+++ b/src/pages/PlaceholderPage.tsx
@@ -0,0 +1,12 @@
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+
+export function PlaceholderPage({ titleKey }: { titleKey: string }) {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t(titleKey)}>
+      <p style={{ color: 'var(--text-secondary)' }}>{t('common.loading')}</p>
+    </Card>
+  );
+}
--- a/src/pages/Settings/Settings.module.scss
+++ b/src/pages/Settings/Settings.module.scss
@@ -0,0 +1,137 @@
+@use '../../styles/mixins' as *;
+
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.grid {
+  display: grid;
+  gap: $spacing-lg;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.settingRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+}
+
+.settingInfo {
+  flex: 1;
+
+  h4 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0 0 $spacing-xs 0;
+  }
+
+  p {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin: 0;
+  }
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 52px;
+  height: 28px;
+  flex-shrink: 0;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + .slider {
+      background-color: var(--primary-color);
+
+      &:before {
+        transform: translateX(24px);
+      }
+    }
+
+    &:focus + .slider {
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    }
+  }
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--border-color);
+  transition: $transition-fast;
+  border-radius: $radius-full;
+
+  &:before {
+    position: absolute;
+    content: '';
+    height: 20px;
+    width: 20px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: $transition-fast;
+    border-radius: $radius-full;
+  }
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.buttonGroup {
+  display: flex;
+  gap: $spacing-sm;
+}
+
+.retryRow {
+  display: flex;
+  align-items: flex-end;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+
+  :global(.form-group) {
+    margin-bottom: 0;
+  }
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.retryInput {
+  width: 140px;
+
+  @include mobile {
+    width: 100%;
+  }
+}
+
+.retryButton {
+  @include mobile {
+    width: 100%;
+  }
+}
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -0,0 +1,327 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
+import { configApi } from '@/services/api';
+import type { Config } from '@/types';
+import styles from './Settings/Settings.module.scss';
+
+type PendingKey =
+  | 'debug'
+  | 'proxy'
+  | 'retry'
+  | 'switchProject'
+  | 'switchPreview'
+  | 'usage'
+  | 'loggingToFile'
+  | 'wsAuth';
+
+export function SettingsPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [loading, setLoading] = useState(true);
+  const [proxyValue, setProxyValue] = useState('');
+  const [retryValue, setRetryValue] = useState(0);
+  const [pending, setPending] = useState<Record<PendingKey, boolean>>({} as Record<PendingKey, boolean>);
+  const [error, setError] = useState('');
+
+  const disableControls = connectionStatus !== 'connected';
+
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      setError('');
+      try {
+        const data = (await fetchConfig()) as Config;
+        setProxyValue(data?.proxyUrl ?? '');
+        setRetryValue(typeof data?.requestRetry === 'number' ? data.requestRetry : 0);
+      } catch (err: any) {
+        setError(err?.message || t('notification.refresh_failed'));
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    load();
+  }, [fetchConfig, t]);
+
+  useEffect(() => {
+    if (config) {
+      setProxyValue(config.proxyUrl ?? '');
+      if (typeof config.requestRetry === 'number') {
+        setRetryValue(config.requestRetry);
+      }
+    }
+  }, [config?.proxyUrl, config?.requestRetry]);
+
+  const setPendingFlag = (key: PendingKey, value: boolean) => {
+    setPending((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const toggleSetting = async (
+    section: PendingKey,
+    rawKey: 'debug' | 'usage-statistics-enabled' | 'logging-to-file' | 'ws-auth',
+    value: boolean,
+    updater: (val: boolean) => Promise<any>,
+    successMessage: string
+  ) => {
+    const previous = (() => {
+      switch (rawKey) {
+        case 'debug':
+          return config?.debug ?? false;
+        case 'usage-statistics-enabled':
+          return config?.usageStatisticsEnabled ?? false;
+        case 'logging-to-file':
+          return config?.loggingToFile ?? false;
+        case 'ws-auth':
+          return config?.wsAuth ?? false;
+        default:
+          return false;
+      }
+    })();
+
+    setPendingFlag(section, true);
+    updateConfigValue(rawKey, value);
+
+    try {
+      await updater(value);
+      clearCache(rawKey);
+      showNotification(successMessage, 'success');
+    } catch (err: any) {
+      updateConfigValue(rawKey, previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag(section, false);
+    }
+  };
+
+  const handleProxyUpdate = async () => {
+    const previous = config?.proxyUrl ?? '';
+    setPendingFlag('proxy', true);
+    updateConfigValue('proxy-url', proxyValue);
+    try {
+      await configApi.updateProxyUrl(proxyValue.trim());
+      clearCache('proxy-url');
+      showNotification(t('notification.proxy_updated'), 'success');
+    } catch (err: any) {
+      setProxyValue(previous);
+      updateConfigValue('proxy-url', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('proxy', false);
+    }
+  };
+
+  const handleProxyClear = async () => {
+    const previous = config?.proxyUrl ?? '';
+    setPendingFlag('proxy', true);
+    updateConfigValue('proxy-url', '');
+    try {
+      await configApi.clearProxyUrl();
+      clearCache('proxy-url');
+      setProxyValue('');
+      showNotification(t('notification.proxy_cleared'), 'success');
+    } catch (err: any) {
+      setProxyValue(previous);
+      updateConfigValue('proxy-url', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('proxy', false);
+    }
+  };
+
+  const handleRetryUpdate = async () => {
+    const previous = config?.requestRetry ?? 0;
+    const parsed = Number(retryValue);
+    if (!Number.isFinite(parsed) || parsed < 0) {
+      showNotification(t('login.error_invalid'), 'error');
+      setRetryValue(previous);
+      return;
+    }
+    setPendingFlag('retry', true);
+    updateConfigValue('request-retry', parsed);
+    try {
+      await configApi.updateRequestRetry(parsed);
+      clearCache('request-retry');
+      showNotification(t('notification.retry_updated'), 'success');
+    } catch (err: any) {
+      setRetryValue(previous);
+      updateConfigValue('request-retry', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('retry', false);
+    }
+  };
+
+  const quotaSwitchProject = config?.quotaExceeded?.switchProject ?? false;
+  const quotaSwitchPreview = config?.quotaExceeded?.switchPreviewModel ?? false;
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.pageTitle}>{t('basic_settings.title')}</h1>
+
+      <div className={styles.grid}>
+        <Card>
+        {error && <div className="error-box">{error}</div>}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <ToggleSwitch
+            label={t('basic_settings.debug_enable')}
+            checked={config?.debug ?? false}
+            disabled={disableControls || pending.debug || loading}
+            onChange={(value) =>
+              toggleSetting('debug', 'debug', value, configApi.updateDebug, t('notification.debug_updated'))
+            }
+          />
+
+          <ToggleSwitch
+            label={t('basic_settings.usage_statistics_enable')}
+            checked={config?.usageStatisticsEnabled ?? false}
+            disabled={disableControls || pending.usage || loading}
+            onChange={(value) =>
+              toggleSetting(
+                'usage',
+                'usage-statistics-enabled',
+                value,
+                configApi.updateUsageStatistics,
+                t('notification.usage_statistics_updated')
+              )
+            }
+          />
+
+          <ToggleSwitch
+            label={t('basic_settings.logging_to_file_enable')}
+            checked={config?.loggingToFile ?? false}
+            disabled={disableControls || pending.loggingToFile || loading}
+            onChange={(value) =>
+              toggleSetting(
+                'loggingToFile',
+                'logging-to-file',
+                value,
+                configApi.updateLoggingToFile,
+                t('notification.logging_to_file_updated')
+              )
+            }
+          />
+
+          <ToggleSwitch
+            label={t('basic_settings.ws_auth_enable')}
+            checked={config?.wsAuth ?? false}
+            disabled={disableControls || pending.wsAuth || loading}
+            onChange={(value) =>
+              toggleSetting(
+                'wsAuth',
+                'ws-auth',
+                value,
+                configApi.updateWsAuth,
+                t('notification.ws_auth_updated')
+              )
+            }
+          />
+        </div>
+      </Card>
+
+      <Card title={t('basic_settings.proxy_title')}>
+        <Input
+          label={t('basic_settings.proxy_url_label')}
+          placeholder={t('basic_settings.proxy_url_placeholder')}
+          value={proxyValue}
+          onChange={(e) => setProxyValue(e.target.value)}
+          disabled={disableControls || loading}
+        />
+        <div style={{ display: 'flex', gap: 12 }}>
+          <Button variant="secondary" onClick={handleProxyClear} disabled={disableControls || pending.proxy || loading}>
+            {t('basic_settings.proxy_clear')}
+          </Button>
+          <Button onClick={handleProxyUpdate} loading={pending.proxy} disabled={disableControls || loading}>
+            {t('basic_settings.proxy_update')}
+          </Button>
+        </div>
+      </Card>
+
+      <Card title={t('basic_settings.retry_title')}>
+        <div className={styles.retryRow}>
+          <Input
+            label={t('basic_settings.retry_count_label')}
+            type="number"
+            inputMode="numeric"
+            min={0}
+            step={1}
+            value={retryValue}
+            onChange={(e) => setRetryValue(Number(e.target.value))}
+            disabled={disableControls || loading}
+            className={styles.retryInput}
+          />
+          <Button
+            className={styles.retryButton}
+            onClick={handleRetryUpdate}
+            loading={pending.retry}
+            disabled={disableControls || loading}
+          >
+            {t('basic_settings.retry_update')}
+          </Button>
+        </div>
+      </Card>
+
+      <Card title={t('basic_settings.quota_title')}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <ToggleSwitch
+            label={t('basic_settings.quota_switch_project')}
+            checked={quotaSwitchProject}
+            disabled={disableControls || pending.switchProject || loading}
+            onChange={(value) =>
+              (async () => {
+                const previous = config?.quotaExceeded?.switchProject ?? false;
+                const nextQuota = { ...(config?.quotaExceeded || {}), switchProject: value };
+                setPendingFlag('switchProject', true);
+                updateConfigValue('quota-exceeded', nextQuota);
+                try {
+                  await configApi.updateSwitchProject(value);
+                  clearCache('quota-exceeded');
+                  showNotification(t('notification.quota_switch_project_updated'), 'success');
+                } catch (err: any) {
+                  updateConfigValue('quota-exceeded', { ...(config?.quotaExceeded || {}), switchProject: previous });
+                  showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+                } finally {
+                  setPendingFlag('switchProject', false);
+                }
+              })()
+            }
+          />
+          <ToggleSwitch
+            label={t('basic_settings.quota_switch_preview')}
+            checked={quotaSwitchPreview}
+            disabled={disableControls || pending.switchPreview || loading}
+            onChange={(value) =>
+              (async () => {
+                const previous = config?.quotaExceeded?.switchPreviewModel ?? false;
+                const nextQuota = { ...(config?.quotaExceeded || {}), switchPreviewModel: value };
+                setPendingFlag('switchPreview', true);
+                updateConfigValue('quota-exceeded', nextQuota);
+                try {
+                  await configApi.updateSwitchPreviewModel(value);
+                  clearCache('quota-exceeded');
+                  showNotification(t('notification.quota_switch_preview_updated'), 'success');
+                } catch (err: any) {
+                  updateConfigValue('quota-exceeded', { ...(config?.quotaExceeded || {}), switchPreviewModel: previous });
+                  showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+                } finally {
+                  setPendingFlag('switchPreview', false);
+                }
+              })()
+            }
+          />
+        </div>
+      </Card>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/SystemPage.module.scss
+++ b/src/pages/SystemPage.module.scss
@@ -0,0 +1,215 @@
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xl;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.sectionTitle {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-md 0;
+}
+
+.sectionDescription {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 $spacing-md 0;
+}
+
+.infoGrid {
+  display: grid;
+  gap: $spacing-sm;
+
+  .infoRow {
+    display: flex;
+    justify-content: space-between;
+    padding: $spacing-sm $spacing-md;
+    background-color: var(--bg-secondary);
+    border-radius: $radius-md;
+
+    .label {
+      font-weight: 500;
+      color: var(--text-secondary);
+    }
+
+    .value {
+      color: var(--text-primary);
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    }
+  }
+}
+
+.modelsList {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.modelItem {
+  padding: $spacing-sm $spacing-md;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-md;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+
+  &:hover {
+    background-color: var(--bg-hover);
+  }
+}
+
+.modelTags {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 0 0 100%;
+  gap: $spacing-sm;
+}
+
+.modelTag {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  padding: 4px 10px;
+  border-radius: $radius-full;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-secondary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+.modelName {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.modelAlias {
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.versionCheck {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.versionInfo {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: $spacing-md;
+
+  .versionItem {
+    padding: $spacing-md;
+    background-color: var(--bg-secondary);
+    border-radius: $radius-md;
+
+    .label {
+      font-size: 12px;
+      color: var(--text-secondary);
+      margin-bottom: $spacing-xs;
+    }
+
+    .version {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    }
+  }
+}
+
+.quickLinks {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: $spacing-md;
+}
+
+.linkCard {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  padding: $spacing-md $spacing-lg;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--bg-hover);
+    border-color: var(--primary-color);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.linkIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: $radius-md;
+  background-color: var(--primary-color);
+  color: white;
+  flex-shrink: 0;
+
+  &.github {
+    background-color: #24292f;
+  }
+
+  &.docs {
+    background-color: #10b981;
+  }
+}
+
+.linkContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.linkTitle {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+
+  svg {
+    opacity: 0.5;
+    flex-shrink: 0;
+  }
+}
+
+.linkDesc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
--- a/src/pages/SystemPage.tsx
+++ b/src/pages/SystemPage.tsx
@@ -0,0 +1,254 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { IconGithub, IconBookOpen, IconExternalLink, IconCode } from '@/components/ui/icons';
+import { useAuthStore, useConfigStore, useNotificationStore, useModelsStore } from '@/stores';
+import { apiKeysApi } from '@/services/api/apiKeys';
+import { classifyModels } from '@/utils/models';
+import styles from './SystemPage.module.scss';
+
+export function SystemPage() {
+  const { t, i18n } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const auth = useAuthStore();
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+
+  const models = useModelsStore((state) => state.models);
+  const modelsLoading = useModelsStore((state) => state.loading);
+  const modelsError = useModelsStore((state) => state.error);
+  const fetchModelsFromStore = useModelsStore((state) => state.fetchModels);
+
+  const [modelStatus, setModelStatus] = useState<{ type: 'success' | 'warning' | 'error' | 'muted'; message: string }>();
+
+  const apiKeysCache = useRef<string[]>([]);
+
+  const otherLabel = useMemo(
+    () => (i18n.language?.toLowerCase().startsWith('zh') ? '其他' : 'Other'),
+    [i18n.language]
+  );
+  const groupedModels = useMemo(() => classifyModels(models, { otherLabel }), [models, otherLabel]);
+
+  const normalizeApiKeyList = (input: any): string[] => {
+    if (!Array.isArray(input)) return [];
+    const seen = new Set<string>();
+    const keys: string[] = [];
+
+    input.forEach((item) => {
+      const value = typeof item === 'string' ? item : item?.['api-key'] ?? item?.apiKey ?? '';
+      const trimmed = String(value || '').trim();
+      if (!trimmed || seen.has(trimmed)) return;
+      seen.add(trimmed);
+      keys.push(trimmed);
+    });
+
+    return keys;
+  };
+
+  const resolveApiKeysForModels = useCallback(async () => {
+    if (apiKeysCache.current.length) {
+      return apiKeysCache.current;
+    }
+
+    const configKeys = normalizeApiKeyList(config?.apiKeys);
+    if (configKeys.length) {
+      apiKeysCache.current = configKeys;
+      return configKeys;
+    }
+
+    try {
+      const list = await apiKeysApi.list();
+      const normalized = normalizeApiKeyList(list);
+      if (normalized.length) {
+        apiKeysCache.current = normalized;
+      }
+      return normalized;
+    } catch (err) {
+      console.warn('Auto loading API keys for models failed:', err);
+      return [];
+    }
+  }, [config?.apiKeys]);
+
+  const fetchModels = async ({ forceRefresh = false }: { forceRefresh?: boolean } = {}) => {
+    if (auth.connectionStatus !== 'connected') {
+      setModelStatus({
+        type: 'warning',
+        message: t('notification.connection_required')
+      });
+      return;
+    }
+
+    if (!auth.apiBase) {
+      showNotification(t('notification.connection_required'), 'warning');
+      return;
+    }
+
+    if (forceRefresh) {
+      apiKeysCache.current = [];
+    }
+
+    setModelStatus({ type: 'muted', message: t('system_info.models_loading') });
+    try {
+      const apiKeys = await resolveApiKeysForModels();
+      const primaryKey = apiKeys[0];
+      const list = await fetchModelsFromStore(auth.apiBase, primaryKey, forceRefresh);
+      const hasModels = list.length > 0;
+      setModelStatus({
+        type: hasModels ? 'success' : 'warning',
+        message: hasModels ? t('system_info.models_count', { count: list.length }) : t('system_info.models_empty')
+      });
+    } catch (err: any) {
+      const message = `${t('system_info.models_error')}: ${err?.message || ''}`;
+      setModelStatus({ type: 'error', message });
+    }
+  };
+
+  useEffect(() => {
+    fetchConfig().catch(() => {
+      // ignore
+    });
+  }, [fetchConfig]);
+
+  useEffect(() => {
+    fetchModels();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [auth.connectionStatus, auth.apiBase]);
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.pageTitle}>{t('system_info.title')}</h1>
+      <div className={styles.content}>
+      <Card
+        title={t('system_info.connection_status_title')}
+        extra={
+          <Button variant="secondary" size="sm" onClick={() => fetchConfig(undefined, true)}>
+            {t('common.refresh')}
+          </Button>
+        }
+      >
+        <div className="grid cols-2">
+          <div className="stat-card">
+            <div className="stat-label">{t('connection.server_address')}</div>
+            <div className="stat-value">{auth.apiBase || '-'}</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-label">{t('footer.api_version')}</div>
+            <div className="stat-value">{auth.serverVersion || t('system_info.version_unknown')}</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-label">{t('footer.build_date')}</div>
+            <div className="stat-value">
+              {auth.serverBuildDate ? new Date(auth.serverBuildDate).toLocaleString() : t('system_info.version_unknown')}
+            </div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-label">{t('connection.status')}</div>
+            <div className="stat-value">{t(`common.${auth.connectionStatus}_status` as any)}</div>
+          </div>
+        </div>
+      </Card>
+
+      <Card title={t('system_info.quick_links_title')}>
+        <p className={styles.sectionDescription}>{t('system_info.quick_links_desc')}</p>
+        <div className={styles.quickLinks}>
+          <a
+            href="https://github.com/router-for-me/CLIProxyAPI"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.linkCard}
+          >
+            <div className={`${styles.linkIcon} ${styles.github}`}>
+              <IconGithub size={22} />
+            </div>
+            <div className={styles.linkContent}>
+              <div className={styles.linkTitle}>
+                {t('system_info.link_main_repo')}
+                <IconExternalLink size={14} />
+              </div>
+              <div className={styles.linkDesc}>{t('system_info.link_main_repo_desc')}</div>
+            </div>
+          </a>
+
+          <a
+            href="https://github.com/router-for-me/Cli-Proxy-API-Management-Center"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.linkCard}
+          >
+            <div className={`${styles.linkIcon} ${styles.github}`}>
+              <IconCode size={22} />
+            </div>
+            <div className={styles.linkContent}>
+              <div className={styles.linkTitle}>
+                {t('system_info.link_webui_repo')}
+                <IconExternalLink size={14} />
+              </div>
+              <div className={styles.linkDesc}>{t('system_info.link_webui_repo_desc')}</div>
+            </div>
+          </a>
+
+          <a
+            href="https://help.router-for.me/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.linkCard}
+          >
+            <div className={`${styles.linkIcon} ${styles.docs}`}>
+              <IconBookOpen size={22} />
+            </div>
+            <div className={styles.linkContent}>
+              <div className={styles.linkTitle}>
+                {t('system_info.link_docs')}
+                <IconExternalLink size={14} />
+              </div>
+              <div className={styles.linkDesc}>{t('system_info.link_docs_desc')}</div>
+            </div>
+          </a>
+        </div>
+      </Card>
+
+      <Card
+        title={t('system_info.models_title')}
+        extra={
+          <Button variant="secondary" size="sm" onClick={() => fetchModels({ forceRefresh: true })} loading={modelsLoading}>
+            {t('common.refresh')}
+          </Button>
+        }
+      >
+        <p className={styles.sectionDescription}>{t('system_info.models_desc')}</p>
+        {modelStatus && <div className={`status-badge ${modelStatus.type}`}>{modelStatus.message}</div>}
+        {modelsError && <div className="error-box">{modelsError}</div>}
+        {modelsLoading ? (
+          <div className="hint">{t('common.loading')}</div>
+        ) : models.length === 0 ? (
+          <div className="hint">{t('system_info.models_empty')}</div>
+        ) : (
+          <div className="item-list">
+            {groupedModels.map((group) => (
+              <div key={group.id} className="item-row">
+                <div className="item-meta">
+                  <div className="item-title">{group.label}</div>
+                  <div className="item-subtitle">{t('system_info.models_count', { count: group.items.length })}</div>
+                </div>
+                <div className={styles.modelTags}>
+                  {group.items.map((model) => (
+                    <span
+                      key={`${model.name}-${model.alias ?? 'default'}`}
+                      className={styles.modelTag}
+                      title={model.description || ''}
+                    >
+                      <span className={styles.modelName}>{model.name}</span>
+                      {model.alias && <span className={styles.modelAlias}>{model.alias}</span>}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/UsagePage.module.scss
+++ b/src/pages/UsagePage.module.scss
@@ -0,0 +1,785 @@
+@use '../styles/variables' as *;
+@use '../styles/mixins' as *;
+
+.container {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  position: relative;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.errorBox {
+  padding: 10px;
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--error-color);
+  border-radius: $radius-sm;
+  color: var(--error-color);
+  font-size: 12px;
+}
+
+.hint {
+  color: var(--text-secondary);
+  font-size: 12px;
+  text-align: center;
+  padding: 16px;
+}
+
+.loadingOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(243, 244, 246, 0.75);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+:global([data-theme='dark']) .loadingOverlay {
+  background: rgba(25, 25, 25, 0.72);
+}
+
+.loadingOverlayContent {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: $radius-lg;
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  box-shadow: var(--shadow-lg);
+}
+
+.loadingOverlaySpinner {
+  border-color: rgba(59, 130, 246, 0.25);
+  border-top-color: var(--primary-color);
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
+}
+
+.loadingOverlayText {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+// Stats Grid
+.statsGrid {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.statCard {
+  --accent: #3b82f6;
+  --accent-soft: rgba(59, 130, 246, 0.18);
+  --accent-border: rgba(59, 130, 246, 0.35);
+
+  grid-column: span 4;
+  position: relative;
+  padding: 18px;
+  background:
+    radial-gradient(120% 140% at 12% 0%, var(--accent-soft) 0%, rgba(0, 0, 0, 0) 62%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
+    var(--bg-primary);
+  border-radius: $radius-lg;
+  border: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 176px;
+  box-shadow: var(--shadow-lg);
+  transition: transform $transition-fast, box-shadow $transition-fast, border-color $transition-fast;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 3px;
+    width: 100%;
+    background: linear-gradient(90deg, var(--accent), rgba(0, 0, 0, 0));
+    opacity: 0.95;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: var(--accent-border);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
+  }
+
+  @include tablet {
+    grid-column: span 6;
+  }
+
+  @include mobile {
+    grid-column: auto;
+    min-height: 168px;
+  }
+}
+
+.statCard:nth-child(-n + 2) {
+  grid-column: span 6;
+
+  .statValue {
+    font-size: 32px;
+  }
+}
+
+@include mobile {
+  .statCard:nth-child(-n + 2) {
+    grid-column: auto;
+
+    .statValue {
+      font-size: 28px;
+    }
+  }
+}
+
+.statCardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.statLabelGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.statIconBadge {
+  width: 34px;
+  height: 34px;
+  border-radius: $radius-md;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 13px;
+  background: var(--accent);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
+  flex-shrink: 0;
+
+  svg {
+    display: block;
+  }
+}
+
+.statHeader {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.statIcon {
+  font-size: 18px;
+}
+
+.statLabel {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.statValue {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--text-primary);
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+}
+
+.statValueRow {
+  display: flex;
+  gap: $spacing-lg;
+}
+
+.statValueSmall {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.statValueLabel {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.statValueNum {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.statMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.statSuccess {
+  color: var(--success-color, #22c55e);
+}
+
+.statFailure {
+  color: var(--danger-color, #ef4444);
+}
+
+.statNeutral {
+  color: var(--text-secondary);
+}
+
+.statMetaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.statMetaItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.statMetaDot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background-color: var(--text-secondary);
+}
+
+.statSubtle {
+  color: var(--text-tertiary);
+}
+
+.statTrend {
+  margin-top: auto;
+  background: var(--bg-tertiary);
+  border-radius: $radius-md;
+  padding: 8px;
+  height: 58px;
+  border: 1px solid var(--border-color);
+}
+
+.statTrendPlaceholder {
+  width: 100%;
+  height: 100%;
+  background: var(--bg-secondary);
+  border-radius: $radius-md;
+}
+
+.sparkline {
+  width: 100%;
+  height: 100% !important;
+}
+
+.statHint {
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+// API List (80%比例)
+.apiList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.apiItem {
+  background-color: var(--bg-secondary);
+  border-radius: $radius-sm;
+  border: 1px solid var(--border-color);
+  overflow: hidden;
+}
+
+.apiHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--bg-tertiary);
+  }
+}
+
+.apiInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  flex: 1;
+}
+
+.apiEndpoint {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 13px;
+  word-break: break-all;
+}
+
+.apiStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+}
+
+.apiBadge {
+  font-size: 11px;
+  color: var(--text-secondary);
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  padding: 2px 8px;
+  border-radius: $radius-full;
+}
+
+.expandIcon {
+  color: var(--text-secondary);
+  font-size: 12px;
+  margin-left: 6px;
+}
+
+.apiModels {
+  padding: 10px;
+  padding-top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  border-top: 1px solid var(--border-color);
+  margin-top: 0;
+  padding-top: 10px;
+}
+
+.modelRow {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 10px;
+  padding: 8px 10px;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  font-size: 12px;
+
+  @include mobile {
+    grid-template-columns: 1fr;
+    gap: 3px;
+  }
+}
+
+.modelName {
+  color: var(--text-primary);
+  font-weight: 500;
+  word-break: break-all;
+}
+
+.modelStat {
+  color: var(--text-secondary);
+  text-align: right;
+
+  @include mobile {
+    text-align: left;
+  }
+}
+
+// Table (80%比例)
+.tableWrapper {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+
+  th, td {
+    padding: 10px 12px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  th {
+    font-weight: 600;
+    color: var(--text-tertiary);
+    background-color: var(--bg-secondary);
+    white-space: nowrap;
+  }
+
+  td {
+    color: var(--text-primary);
+  }
+
+  tbody tr:hover {
+    background-color: var(--bg-tertiary);
+  }
+}
+
+.modelCell {
+  font-weight: 500;
+  max-width: 240px;
+  word-break: break-all;
+}
+
+// Pricing Section (80%比例)
+.pricingSection {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.priceForm {
+  padding: 10px;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-sm;
+  border: 1px solid var(--border-color);
+}
+
+.formRow {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.formField {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: 1;
+  min-width: 120px;
+
+  label {
+    font-size: 10px;
+    color: var(--text-secondary);
+    font-weight: 500;
+  }
+
+  // 确保 Input 组件的 form-group 包装器不影响布局
+  :global(.form-group) {
+    margin: 0;
+
+    > label {
+      display: none; // 隐藏 Input 自带的 label，使用外层的
+    }
+  }
+
+  :global(.input) {
+    height: 40px;
+    box-sizing: border-box;
+  }
+}
+
+.select {
+  padding: 10px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: pointer;
+  height: 40px;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  }
+}
+
+.pricesList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.pricesTitle {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.pricesGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.priceItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-sm;
+  border: 1px solid var(--border-color);
+  gap: 10px;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.priceInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  flex: 1;
+}
+
+.priceModel {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 11px;
+  word-break: break-all;
+}
+
+.priceMeta {
+  display: flex;
+  gap: 10px;
+  font-size: 10px;
+  color: var(--text-secondary);
+
+  @include mobile {
+    flex-direction: column;
+    gap: 3px;
+  }
+}
+
+.priceActions {
+  display: flex;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+// Chart Section (80%比例)
+.chartSection {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chartControls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.chartWrapper {
+  padding: 14px;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-lg;
+  border: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chartLegend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  align-items: center;
+  min-width: 0;
+
+  @include mobile {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 4px;
+  }
+}
+
+.legendItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 240px;
+  padding: 4px 10px;
+  border-radius: $radius-full;
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  font-size: 12px;
+  color: var(--text-secondary);
+
+  @include mobile {
+    max-width: 180px;
+  }
+}
+
+.legendDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  flex-shrink: 0;
+}
+
+.legendLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chartArea {
+  height: 280px;
+
+  @include mobile {
+    height: 320px;
+  }
+}
+
+.chartScroller {
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+
+  // Chart.js 默认会设置 canvas 的 touch-action: none，导致移动端无法横向滚动
+  :global(canvas) {
+    touch-action: pan-x pan-y !important;
+  }
+}
+
+.chartCanvas {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.periodButtons {
+  display: flex;
+  gap: 6px;
+}
+
+.chartsGrid {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: minmax(0, 1fr);
+
+  > * {
+    min-width: 0;
+  }
+
+  @include desktop {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.detailsGrid {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: minmax(0, 1fr);
+
+  > * {
+    min-width: 0;
+  }
+
+  @include desktop {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.chartLineHeader {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.chartLineList {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.chartLineItem {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+
+  @include mobile {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+    gap: 8px;
+  }
+}
+
+.chartLineLabel {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 600;
+  min-width: 64px;
+}
+
+.chartLineCount {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.chartLineHint {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin: 10px 0 0 0;
+}
--- a/src/pages/UsagePage.tsx
+++ b/src/pages/UsagePage.tsx
--- a/src/router/ProtectedRoute.tsx
+++ b/src/router/ProtectedRoute.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useState, type ReactElement } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuthStore } from '@/stores';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+
+export function ProtectedRoute({ children }: { children: ReactElement }) {
+  const location = useLocation();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const managementKey = useAuthStore((state) => state.managementKey);
+  const apiBase = useAuthStore((state) => state.apiBase);
+  const checkAuth = useAuthStore((state) => state.checkAuth);
+  const [checking, setChecking] = useState(false);
+
+  useEffect(() => {
+    const tryRestore = async () => {
+      if (!isAuthenticated && managementKey && apiBase) {
+        setChecking(true);
+        try {
+          await checkAuth();
+        } finally {
+          setChecking(false);
+        }
+      }
+    };
+    tryRestore();
+  }, [apiBase, isAuthenticated, managementKey, checkAuth]);
+
+  if (checking) {
+    return (
+      <div className="main-content">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace state={{ from: location }} />;
+  }
+
+  return children;
+}
--- a/src/services/api/ampcode.ts
+++ b/src/services/api/ampcode.ts
@@ -0,0 +1,37 @@
+/**
+ * Amp CLI Integration (ampcode) 相关 API
+ */
+
+import { apiClient } from './client';
+import { normalizeAmpcodeConfig, normalizeAmpcodeModelMappings } from './transformers';
+import type { AmpcodeConfig, AmpcodeModelMapping } from '@/types';
+
+export const ampcodeApi = {
+  async getAmpcode(): Promise<AmpcodeConfig> {
+    const data = await apiClient.get('/ampcode');
+    return normalizeAmpcodeConfig(data) ?? {};
+  },
+
+  updateUpstreamUrl: (url: string) => apiClient.put('/ampcode/upstream-url', { value: url }),
+  clearUpstreamUrl: () => apiClient.delete('/ampcode/upstream-url'),
+
+  updateUpstreamApiKey: (apiKey: string) => apiClient.put('/ampcode/upstream-api-key', { value: apiKey }),
+  clearUpstreamApiKey: () => apiClient.delete('/ampcode/upstream-api-key'),
+
+  async getModelMappings(): Promise<AmpcodeModelMapping[]> {
+    const data = await apiClient.get('/ampcode/model-mappings');
+    const list = data?.['model-mappings'] ?? data?.modelMappings ?? data?.items ?? data;
+    return normalizeAmpcodeModelMappings(list);
+  },
+
+  saveModelMappings: (mappings: AmpcodeModelMapping[]) =>
+    apiClient.put('/ampcode/model-mappings', { value: mappings }),
+  patchModelMappings: (mappings: AmpcodeModelMapping[]) =>
+    apiClient.patch('/ampcode/model-mappings', { value: mappings }),
+  clearModelMappings: () => apiClient.delete('/ampcode/model-mappings'),
+  deleteModelMappings: (fromList: string[]) =>
+    apiClient.delete('/ampcode/model-mappings', { data: { value: fromList } }),
+
+  updateForceModelMappings: (enabled: boolean) => apiClient.put('/ampcode/force-model-mappings', { value: enabled })
+};
+
--- a/src/services/api/apiKeys.ts
+++ b/src/services/api/apiKeys.ts
@@ -0,0 +1,19 @@
+/**
+ * API 密钥管理
+ */
+
+import { apiClient } from './client';
+
+export const apiKeysApi = {
+  async list(): Promise<string[]> {
+    const data = await apiClient.get('/api-keys');
+    const keys = (data && (data['api-keys'] ?? data.apiKeys)) as unknown;
+    return Array.isArray(keys) ? (keys as string[]) : [];
+  },
+
+  replace: (keys: string[]) => apiClient.put('/api-keys', keys),
+
+  update: (index: number, value: string) => apiClient.patch('/api-keys', { index, value }),
+
+  delete: (index: number) => apiClient.delete(`/api-keys?index=${index}`)
+};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Supra4E8C	03bf58671e	fix(logs): improve responsive layout for logs page on mobile and small screens	2025-12-27 17:07:31 +08:00
Supra4E8C	cb6b810d6d	perf(providers,auth-files): cache status bar data and add auto-refresh	2025-12-27 15:26:38 +08:00
Supra4E8C	408e6e5872	feat(auth-files): add visual status bar for auth file health monitoring	2025-12-27 15:12:38 +08:00
Supra4E8C	b3808add0f	feat(providers): add visual status bar for API key health monitoring	2025-12-27 15:02:32 +08:00
Supra4E8C	0b2e6efe28	fix(logs): keep log panel scroll within viewport	2025-12-27 14:42:10 +08:00
Supra4E8C	8ca6d31a26	feat(oauth): add vertex json login via vertex/import	2025-12-27 08:02:46 +08:00
Supra4E8C	66c6073bbc	feat(usage): add usage stats export/import actions	2025-12-27 00:49:41 +08:00
Supra4E8C	2dd3f233d3	feat(logs): add long-press request log download and hints	2025-12-27 00:30:18 +08:00
Supra4E8C	7a65e03ad3	fix(layout): prevent footer gap on non-scroll pages	2025-12-26 23:53:13 +08:00
Supra4E8C	589a5bad4c	fix(oauth): use resolvedTheme for provider icons	2025-12-26 18:54:16 +08:00
Supra4E8C	bcaa0c8545	Merge branch 'main' of https://github.com/router-for-me/Cli-Proxy-API-Management-Center	2025-12-26 18:42:47 +08:00
Supra4E8C	312a06a8b8	fix(logs): clarify error request logs list behavior	2025-12-26 18:42:41 +08:00
Supra4E8C	24861dabd2	Merge pull request #29 from XYenon/feat/auto-theme-mode feat: add auto theme mode (follow system preference)	2025-12-26 18:04:40 +08:00
Supra4E8C	ea1bdc3ac1	fix(logs): make error log panel scrollable	2025-12-26 17:52:23 +08:00
Supra4E8C	46701b40ad	fix(layout): restore scroll and set panel heights	2025-12-26 17:37:49 +08:00
XYenon	c9fc22bae5	fix: use resolvedTheme instead of theme for dark mode detection When theme is set to 'auto', checking theme === 'dark' returns false even when the system preference is dark mode. This caused charts and custom styles to use light mode colors in a dark UI. Fixed by using resolvedTheme which correctly resolves to 'light' or 'dark' based on system preference when in auto mode. Fixes the issue reported in PR #29 review.	2025-12-26 00:19:04 +08:00
Supra4E8C	ff9bd8a33b	fix(ai-providers): allow empty Claude base URL	2025-12-25 23:55:31 +08:00
Supra4E8C	d0c376fc31	fix(layout): restore full-height panels on mobile/HiDPI	2025-12-25 23:33:52 +08:00
Supra4E8C	d09db34c34	Merge pull request #28 from notdp/main feat(oauth): add provider icons to oauth login cards	2025-12-25 20:57:51 +08:00
dp	9dd37245bd	feat(icons): convert png to svg and add icons to ai providers page	2025-12-25 20:48:12 +08:00
Supra4E8C	834ba43231	fix: ConfigPage.module.scss LogPage.moudle.scss	2025-12-25 01:09:00 +08:00
Supra4E8C	684502c8b6	fix: layout.scss	2025-12-24 23:39:40 +08:00
hkfires	0aee78c072	fix(logs): improve request id and status code parsing	2025-12-24 22:46:08 +08:00
hkfires	8780ea7ec5	fix(logs): wrap long log messages	2025-12-24 15:38:11 +08:00
hkfires	40fe33aeae	fix(config): optimize layout for full height	2025-12-24 12:45:30 +08:00
hkfires	2a94be08fa	fix(logs): optimize layout for full height	2025-12-24 12:38:57 +08:00
hkfires	0758cfe08a	feat(logs): implement tabbed view for logs and error files	2025-12-24 11:45:14 +08:00
hkfires	02a01e5afc	feat(logs): add request id parsing and refactor row layout	2025-12-24 10:46:33 +08:00
XYenon	961cc802b2	fix: address PR review feedback - Use unique ID prefix for clipPath to avoid duplicate ID issues - Add cleanup function to initializeTheme to prevent memory leak - Change tooltip to show action description instead of current theme name	2025-12-24 00:18:44 +08:00
XYenon	5f7df33469	feat: add auto theme mode (follow system preference) - Add 'auto' to Theme type - Implement cycleTheme (light -> dark -> auto) - Add autoTheme icon (sun with half-filled center) - Listen to system theme changes in auto mode Also includes some Prettier formatting fixes.	2025-12-24 00:02:59 +08:00
dp	39847fa56d	feat(oauth): add provider icons to oauth login cards	2025-12-23 14:05:35 +08:00
Supra4E8C	561e06503c	feat: update README.md README_CN.md	2025-12-22 23:20:31 +08:00
Supra4E8C	94962158ef	feat(settings): move request logging toggle behind hidden entry	2025-12-22 22:41:50 +08:00
Supra4E8C	68974ffc68	feat(ai-providers): add prefix editing for provider configs	2025-12-21 23:46:39 +08:00
Supra4E8C	f8ed787f92	fix(splash): prevent login flicker on startup	2025-12-21 20:22:22 +08:00
Supra4E8C	dea106cf47	fix(splash): preserve logo aspect ratio	2025-12-21 16:58:14 +08:00
Supra4E8C	76ef1b68af	fix(dashboard): improve stats loading and i18n date formatting	2025-12-21 16:54:17 +08:00
Supra4E8C	39a003bdd4	refactor(dashboard): simplify stats and add available models card	2025-12-21 16:27:28 +08:00
Supra4E8C	b1426ccefc	feat(dashboard): enhance dashboard with provider breakdown and usage stats	2025-12-21 16:06:33 +08:00
Supra4E8C	a9df58cba7	feat(dashboard): add dashboard page with stats and splash screen	2025-12-21 16:05:09 +08:00
Supra4E8C	f6563490a6	fix(webui): normalize gemini endpoint and oauth callback status	2025-12-21 10:40:04 +08:00
Supra4E8C	18c1ba6c3c	feat(ampcode): remove localhost-only management toggle	2025-12-20 18:32:32 +08:00
Supra4E8C	c2627cac3e	fix: release auto write	2025-12-20 18:17:40 +08:00
Supra4E8C	df472119e7	feat: add commit-based release notes, usage loading spinner, and 60s logs timeout	2025-12-20 12:34:45 +08:00
Supra4E8C	10f2262753	fix(ai-providers): gate Claude models input and refine excluded tag styles	2025-12-19 23:54:26 +08:00
Supra4E8C	39d86d133a	feat(oauth): add callback URL submission and require Gemini CLI project ID	2025-12-19 18:04:14 +08:00
Supra4E8C	ddbd7d00bd	fix	2025-12-18 17:49:59 +08:00
Supra4E8C	e44beb541f	feat	2025-12-18 12:36:17 +08:00
Supra4E8C	aecd5875d6	feat(usage): add loading overlay and 60s API timeout	2025-12-18 01:03:12 +08:00
Supra4E8C	ec4b5ab46a	feat: add quick links section to System page	2025-12-17 18:16:59 +08:00
Supra4E8C	cd6c142324	fix: fix log page timestamp display and optimize AuthFiles layout - Add formatUnixTimestamp utility to auto-detect timestamp precision (s/ms/μs/ns) - Fix incorrect file modification time display in logs page - Remove fixed height constraint from AuthFilesPage model list	2025-12-17 18:03:25 +08:00
Supra4E8C	0ebf62b564	fix: usage layout	2025-12-17 12:14:35 +08:00
Supra4E8C	16f3442a11	fix: refactor usage	2025-12-17 00:35:02 +08:00
Supra4E8C	3328e686ee	fix: ip address in the log is displayed incorrectly	2025-12-16 23:32:49 +08:00
Supra4E8C	f60bdb0a8e	fix: change the dark mode color	2025-12-16 23:10:17 +08:00
Supra4E8C	5eed3e787b	Delete .claude/settings.local.json	2025-12-15 23:39:40 +08:00
Supra4E8C	5ebc845a1f	Delete CLEAR_STORAGE.html	2025-12-15 23:39:14 +08:00
Supra4E8C	03c1cd1dc8	fix: Preparations before release	2025-12-15 23:22:08 +08:00
Supra4E8C	db6d5ca4b5	feat: A timeout failure was provided for the model test of OpenAI compatible providers	2025-12-15 23:02:33 +08:00
Supra4E8C	8d606aa456	fix(ui): optimize mobile layout for header and settings page	2025-12-15 18:53:03 +08:00
Supra4E8C	a993299cb5	fix:Continue from the previous one	2025-12-15 17:48:23 +08:00
Supra4E8C	8bcd172c5a	fix(auth): add singleton pattern to restoreSession and unify config fetch	2025-12-15 17:47:32 +08:00
Supra4E8C	4d898b3e20	feat(logs): redesign LogsPage with structured log parsing and virtual scrolling - Add log line parser to extract timestamp, level, status code, latency, IP, HTTP method, and path - Implement virtual scrolling with load-more on scroll-up to handle large log files efficiently - Replace monolithic pre block with structured grid layout for better readability - Add visual badges for log levels and HTTP status codes with color-coded severity - Add IconRefreshCw icon component - Update ToggleSwitch to accept ReactNode as label - Fix fetchConfig calls to use default parameters consistently - Add request deduplication in useConfigStore to prevent duplicate /config API calls - Add i18n keys for load_more_hint and hidden_lines	2025-12-15 17:37:09 +08:00
Supra4E8C	f17329b0ff	feat(layout): add logout button to header Add a logout icon and button to the main layout header, allowing users to log out directly from the navigation bar.	2025-12-15 01:37:21 +08:00
Supra4E8C	2757d82007	feat: improve iFlow cookie auth UX with duplicate config handling - Add 409 conflict handling for duplicate iFlow config files - Add key creation hint in cookie login section - Move extra actions button after delete button for consistency - Improve OAuth status badge display logic (hide when idle) - Add config toggle enable/disable i18n translations - Adjust item-actions spacing from sm to md	2025-12-15 01:19:57 +08:00
Supra4E8C	340c1f1ae5	fix(i18n): correct interpolation syntax and add missing translation keys - Fix i18next interpolation from {var} to {{var}} format in en.json - Add gemini_base_url_label translation key for better form labeling - Add virtual auth file and model list related translations - Adjust UsagePage title font size to 28px for consistency	2025-12-14 23:44:25 +08:00
Supra4E8C	09c17c03b9	feat: unify page layout with consistent page titles and structure - Add page title (h1) to all main pages for consistent hierarchy - Wrap page content in container/content div structure - Handle 404 error for unsupported OAuth excluded models API - Add cache price input field in usage page model pricing - Add upgrade required i18n messages for older CPA versions - Import mixins in page-level SCSS modules	2025-12-14 20:05:59 +08:00
Supra4E8C	9d648e3404	feat: add cache token pricing support in usage calculation - Add cache price field to ModelPrice interface - Support both cached_tokens and cache_tokens fields for compatibility - Separate prompt, cache, and completion pricing in cost calculation - Deduct cached tokens from input tokens before prompt pricing - Refactor getApiStats/getModelStats to reuse calculateCost function - Update i18n labels for model pricing	2025-12-14 18:50:37 +08:00
Supra4E8C	e615979757	Merge pull request #22 from AoaoMH/feature/auth-model-check feat: add model list viewer for auth file cards	2025-12-14 18:06:25 +08:00
Supra4E8C	ea2ce4047f	feat: improve iFlow cookie auth UX with duplicate config handling - Add 409 conflict handling for duplicate iFlow config files - Add key creation hint in cookie login section - Move extra actions button after delete button for consistency - Improve OAuth status badge display logic (hide when idle) - Add config toggle enable/disable i18n translations - Adjust item-actions spacing from sm to md	2025-12-14 18:04:26 +08:00
Test	2a87a4d82a	feat: Add 404 judgment; Virtual authentication files also support obtaining model lists; Chinese support for virtual authentication file i18n;	2025-12-14 17:19:51 +08:00
Test	abf9b5f8c9	feat: add model list viewer for auth file cards	2025-12-14 15:17:00 +08:00
Supra4E8C	aea1ceb6be	feat: Added disabling features for some of the AI providers	2025-12-14 12:21:54 +08:00
Supra4E8C	20a69a25bc	feat:log update	2025-12-14 01:51:23 +08:00
Supra4E8C	e0584af365	feat: add Ampcode (Amp CLI Integration) support with configuration UI and i18n - Add ampcodeApi service for upstream URL, API key, and model mappings management - Implement Ampcode configuration modal in AiProvidersPage - Add complete i18n translations for Ampcode features (en and zh-CN) - Enhance UsagePage with mobile-responsive chart improvements and legend display - Optimize chart rendering for smaller screens - Improve page layout styles (SystemPage, AiProvidersPage alignment)	2025-12-14 00:31:05 +08:00
Supra4E8C	c4034c6467	Update README.md	2025-12-13 17:27:00 +08:00
Supra4E8C	ccc82e5802	fix: refine AI providers and auth files styling and layout alignment - Remove inset box-shadow from stat badges for cleaner appearance - Add modelCountLabel style for consistent model count display - Refactor model count layout in AiProvidersPage - Add openaiTestButton style for proper button height alignment - Add item-actions flexbox utility style to layout.scss	2025-12-13 17:15:37 +08:00
Supra4E8C	13d1804e66	feat: improve Settings page retry config UI and enhance excludedModels API support - Reorganize retry settings into separate Card for better visual hierarchy - Move retry update button inline with input field via rightElement - Add excluded-models serialization in provider key configuration - Add excluded-models normalization support in API transformers with fallback parsing	2025-12-13 16:30:20 +08:00
Supra4E8C	62486534e4	feat: add excluded models support for Codex/Claude providers and fix header alignment - Add excludedModels field to ProviderKeyConfig type for Codex and Claude providers - Add excluded models textarea input in Codex/Claude edit modal - Display excluded models badges in Codex and Claude provider cards - Fix header connection status badge vertical alignment with IP address - Update dark theme to use pure black color scheme	2025-12-13 02:20:08 +08:00
Supra4E8C	da9469c5aa	feat: add models cache store and fix search placeholder truncation - Add useModelsStore with 30s cache for model list to reduce API calls - Refactor SystemPage to use cached models from store - Shorten ConfigPage search placeholder to prevent text truncation	2025-12-13 01:35:08 +08:00
Supra4E8C	a7b77ffa25	feat:update icon	2025-12-13 00:51:01 +08:00
Supra4E8C	bcf82252ea	feat: add notification animations and improve UI across pages Add enter/exit animations to NotificationContainer with smooth slide effects Refactor ConfigPage search bar to float over editor with improved UX Enhance AuthFilesPage type badges with proper light/dark theme color support Fix grid layout in AuthFilesPage to use consistent 3-column layout Update icon button sizing and loading state handlin Update i18n translations for search functionality	2025-12-13 00:46:07 +08:00
Supra4E8C	7c0a2280a4	feat: implement versioning system by extracting version from environment, git tags, or package.json, and display app version in MainLayout; enhance ConfigPage with search functionality and CodeMirror integration for YAML editing	2025-12-12 19:10:09 +08:00
Supra4E8C	bae7ff8752	feat: enhance AiProvidersPage with OpenAI model discovery functionality, improve localization for model selection messages, and update styles for better user experience	2025-12-12 18:53:51 +08:00
Supra4E8C	2a57055f81	feat: introduce ModelInputList component for managing model entries in AiProvidersPage, enhance MainLayout with header action icons, and improve styling for success and failure statistics across pages	2025-12-12 17:58:23 +08:00
Supra4E8C	ad92f0c2ed	feat: add success and failure statistics display to AiProvidersPage, refactor data retrieval methods for better clarity and consistency	2025-12-11 12:34:05 +08:00
Supra4E8C	d425332eb0	feat: enhance AiProvidersPage with key statistics loading, improve layout styles, and update AuthFilesPage for better visual representation of success and failure stats	2025-12-11 12:24:29 +08:00
Supra4E8C	3c1a600994	feat: improve AuthFilesPage styles by enhancing input component dimensions, adjusting filterItem widths for better layout, and ensuring consistent box-sizing across elements	2025-12-11 01:27:40 +08:00
Supra4E8C	673ab15ad4	feat: update document title for clarity, add logo image, enhance OAuthPage with iFlow cookie authentication feature, and improve localization for remote access messages	2025-12-11 01:18:32 +08:00
Supra4E8C	95218676db	feat: update document title and favicon in main.tsx, remove isLocalhost check from OAuthPage for cleaner logic, and enhance overall user experience	2025-12-11 00:17:52 +08:00
Supra4E8C	defa633f92	refactor: remove isLocalhost check from MainLayout, update UsagePage styles for improved layout and spacing, and adjust layout.scss for better sidebar toggle appearance	2025-12-10 23:49:01 +08:00
Supra4E8C	841dfa8a61	feat: add INLINE_LOGO_JPEG to MainLayout for branding, enhance layout styles in UsagePage for improved spacing and responsiveness, and update layout.scss for better logo handling and alignment	2025-12-10 22:56:47 +08:00
Supra4E8C	bf5f34be0d	feat: enhance AuthFilesPage with improved layout and styling, add filter and pagination features, and implement detailed file statistics and actions for better user interaction	2025-12-10 12:31:40 +08:00
Supra4E8C	e8d918ba98	refactor: simplify AiProvidersPage by removing unused delete confirmation text and enhance brand header styles for better layout and responsiveness	2025-12-10 02:02:18 +08:00
Supra4E8C	c71af9a8a5	feat: enhance MainLayout with header height management using useLayoutEffect, improve AiProvidersPage by removing priority field, and update UsagePage with dynamic stats cards and sparkline charts for better data visualization	2025-12-10 01:42:21 +08:00
Supra4E8C	d8f540cdb1	fix: adjust sidebar positioning in layout.scss for improved responsiveness and visual consistency	2025-12-09 19:07:52 +08:00
Supra4E8C	18b1adb4e2	feat: enhance MainLayout with brand name expansion feature, sidebar toggle improvements, and responsive design adjustments for better user experience	2025-12-09 19:04:40 +08:00
Supra4E8C	5d5334afb1	refactor: remove README and REFACTOR_PROGRESS files; enhance MainLayout with sidebar icons and improved navigation item display	2025-12-09 01:46:58 +08:00
Supra4E8C	2ca662e971	refactor: update button styles and layout in MainLayout for improved UI consistency and accessibility	2025-12-09 01:05:56 +08:00
Supra4E8C	e417d3c771	feat: refactor MainLayout component to implement sidebar collapse functionality, enhance navigation item display, and improve layout responsiveness	2025-12-09 00:59:40 +08:00
Supra4E8C	b6765b074e	feat: enhance logging functionality with incremental loading, improved error handling, and UI updates for better user experience	2025-12-09 00:35:17 +08:00
Supra4E8C	9d7db57c6a	feat: update SCSS imports to use new Sass module system, enhance SystemPage with model tags display and API key handling, and improve model fetching logic with better error handling and notifications	2025-12-08 20:20:47 +08:00
Supra4E8C	450964fb1a	feat: initialize new React application structure with TypeScript, ESLint, and Prettier configurations, while removing legacy files and adding new components and pages for enhanced functionality	2025-12-07 11:32:31 +08:00
				`@@ -0,0 +1 @@`
				<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"></path></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="32" height="32" viewBox="0 0 32 32"><defs><filter id="master_svg0_278_51503" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1" height="1"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="1.3333334922790527"/><feComposite in2="SourceAlpha" operator="in" result="effect1_foregroundBlur"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_foregroundBlur" result="shape"/></filter><linearGradient x1="0.07353696972131729" y1="0.12899449467658997" x2="0.9907095821060244" y2="0.9383787344260006" id="master_svg1_93_40276"><stop offset="0%" stop-color="#5C5CFF" stop-opacity="1"/><stop offset="100%" stop-color="#AE5CFF" stop-opacity="1"/></linearGradient></defs><g><g filter="url(#master_svg0_278_51503)"><rect x="0" y="0" width="32" height="32" rx="16" fill="#F0F2F5" fill-opacity="0"/></g><g><g><path d="M31.843111328125,14.751C31.315411328125,7.18121,25.497411328125,1.04691,17.966011328125,0.119698C10.434711328125,-0.807512,3.302541328125,3.73244,0.954596328125,10.9482C0.345662328125,12.8248,1.732821328125,14.751,3.705641328125,14.751C4.950051328125,14.7517,6.055631328125,13.9569,6.451401328125,12.7772C7.497331328125,9.65101,10.504411328125,3.91401,18.482011328125,3.91401Q29.445911328125,3.91401,31.843111328125,14.751ZM9.127681328125,17.3314L9.127681328125,13.0862Q9.127681328125,13.0022,9.144081328125,12.9198Q9.160481328125,12.8373,9.192641328125,12.7597Q9.224801328125,12.682,9.271501328125,12.6122Q9.318191328125,12.5423,9.377621328125,12.4828Q9.437051328125,12.4234,9.506931328125,12.3767Q9.576811328125,12.33,9.654461328125,12.2979Q9.732111328125,12.2657,9.814541328125,12.2493Q9.896971328125,12.2329,9.981021328125,12.2329L11.049211328125,12.2329Q11.133211328125,12.2329,11.215711328125,12.2493Q11.298111328125,12.2657,11.375811328125,12.2979Q11.453411328125,12.33,11.523311328125,12.3767Q11.593211328125,12.4234,11.652611328125,12.4828Q11.712011328125,12.5423,11.758711328125,12.6122Q11.805411328125,12.682,11.837611328125,12.7597Q11.869711328125,12.8373,11.886111328125,12.9198Q11.902511328125,13.0022,11.902511328125,13.0862L11.902511328125,17.3314Q11.902511328125,17.4154,11.886111328125,17.4978Q11.869711328125,17.5803,11.837611328125,17.6579Q11.805411328125,17.7356,11.758711328125,17.8055Q11.712011328125,17.8753,11.652611328125,17.9348Q11.593211328125,17.9942,11.523311328125,18.0409Q11.453411328125,18.0876,11.375811328125,18.1197Q11.298111328125,18.1519,11.215711328125,18.1683Q11.133211328125,18.1847,11.049211328125,18.1847L9.981021328125,18.1847Q9.896971328125,18.1847,9.814541328125,18.1683Q9.732111328125,18.1519,9.654461328125,18.1197Q9.576811328125,18.0876,9.506931328125,18.0409Q9.437051328125,17.9942,9.377621328125,17.9348Q9.318191328125,17.8753,9.271501328125,17.8055Q9.224801328125,17.7356,9.192641328125,17.6579Q9.160481328125,17.5803,9.144081328125,17.4978Q9.127681328125,17.4154,9.127681328125,17.3314ZM17.273611328125,17.3295C17.272611328125,17.8015,17.654911328125,18.1847,18.126911328125,18.1847L19.408411328125,18.1847C19.879011328125,18.1847,20.260711328125,17.8038,20.261811328125,17.3332L20.266411328125,15.2107L20.266411328125,15.2069L20.261811328125,13.0844C20.260711328125,12.6138,19.879011328125,12.2329,19.408411328125,12.2329L18.126911328125,12.2329C17.654911328125,12.2329,17.272611328125,12.6161,17.273611328125,13.0881L17.278211328125,15.2069L17.278211328125,15.2107L17.273611328125,17.3295ZM13.574711328125,28.0523C21.552211328125,28.0523,24.559311328125,22.3153,25.605811328125,19.1897C26.001411328125,18.0098,27.107111328125,17.215,28.351511328125,17.2158C30.323811328125,17.2158,31.711511328125,19.1416,31.102611328125,21.0181C30.552411328125,22.7189,29.716211328125,24.3134,28.629811328125,25.733L30.137611328125,30.2235L24.775211328125,29.3432C14.645911328125,36.0484,1.048779328125,29.3346,0.214111328125,17.2158Q2.611231328125,28.0523,13.574711328125,28.0523Z" fill-rule="evenodd" fill="url(#master_svg1_93_40276)" fill-opacity="1"/></g></g></g></svg>
				`@@ -0,0 +1 @@`
				<svg fill="#ffffff" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path></svg>
				`@@ -0,0 +1 @@`
				<svg fill="#000000" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path></svg>