fix(splash): preserve logo aspect ratio

- 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

.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: '^_' }],
+  },
+};

.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:

.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?

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "always"
+}

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.

LICENSE

@@ -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.

README.md

@@ -1,209 +1,190 @@
-# Cli-Proxy-API-Management-Center
-This is a modern web interface for managing the CLI Proxy API.
+# CLI Proxy API Management Center
+
+A modern React-based WebUI for managing the CLI Proxy API, completely refactored with a modern tech stack for enhanced maintainability, type safety, and user experience.
 
 [中文文档](README_CN.md)
 
-Main Project:
-https://github.com/router-for-me/CLIProxyAPI
+**Main Project**: https://github.com/router-for-me/CLIProxyAPI
+**Example URL**: https://remote.router-for.me/
+**Minimum Required Version**: ≥ 6.3.0 (recommended ≥ 6.5.0)
 
-Example URL:
-https://remote.router-for.me/
-
-Minimum required version: ≥ 6.0.0
-Recommended version: ≥ 6.2.32
-
-Since version 6.0.19, the WebUI has been rolled into the main program. You can access it by going to `/management.html` on the external port after firing up the main project.
+Since 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
 
-### Authentication Management
-- Supports management key authentication
-- Configurable API base address
-- Real-time connection status detection
-- Auto-login with saved credentials
-- Language and theme switching
+### Core Capabilities
 
-### Basic Settings
-- **Debug Mode**: Enable/disable debugging
-- **Proxy Settings**: Configure proxy server URL
-- **Request Retries**: Set the number of request retries
-- **Quota Management**: Configure behavior when the quota is exceeded
-  - Auto-switch project when quota exceeded
-  - Switch to preview models when quota exceeded
+- **Login & Authentication**: Auto-detects current address (manual override supported), encrypted auto-login with secure localStorage, session persistence
+- **Basic Settings**: Debug mode, proxy URL, request retries with custom config, quota fallback (auto-switch project/preview models), usage statistics toggle, request logging & file logging, WebSocket `/ws/*` authentication
+- **API Keys Management**: Manage proxy auth keys with add/edit/delete operations
+- **AI Providers**: Configure Gemini/Codex/Claude settings, OpenAI-compatible providers with custom base URLs/headers/proxy/model aliases, Vertex AI credential import from service-account JSON
+- **Auth Files & OAuth**: Upload/download/search/paginate JSON credentials; type filters (Qwen/Gemini/GeminiCLI/AIStudio/Claude/Codex/Antigravity/iFlow/Vertex/Empty); bulk delete; OAuth/Device flows for multiple providers
+- **Logs Viewer**: Real-time log viewer with auto-refresh, download and clear capabilities (appears when logging-to-file is enabled)
+- **Usage Analytics**: Overview cards, hourly/daily toggles, interactive charts with multiple model lines, per-API statistics table
+- **Config Management**: In-browser YAML editor for `/config.yaml` with syntax highlighting, reload/save functionality
+- **System Information**: Connection status, config cache, server version/build date, UI version in footer
 
-### API Key Management
-- **Proxy Service Authentication Key**: Manage API keys for the proxy service
-- **Gemini API**: Manage Google Gemini generative language API keys
-- **Codex API**: Manage OpenAI Codex API configuration
-- **Claude API**: Manage Anthropic Claude API configuration
-- **OpenAI-Compatible Providers**: Manage OpenAI-compatible third-party providers
+### User Experience
 
-### Authentication File Management
-- Upload authentication JSON files
-- Download existing authentication files
-- Delete single or all authentication files
-- Display file details
-
-### Usage Statistics
-- **Real-time Analytics**: Track API usage with interactive charts
-- **Request Trends**: Visualize request patterns by hour/day
-- **Token Usage**: Monitor token consumption over time
-- **API Details**: Detailed statistics for each API endpoint
-- **Success/Failure Rates**: Track API reliability metrics
-
-### System Information
-- **Connection Status**: Real-time connection monitoring
-- **Configuration Status**: Track configuration loading state
-- **Server Information**: Display server address and management key
-- **Last Update**: Show when data was last refreshed
-
-
-## How to Use
-
-### 1. Using After CLI Proxy API Program Launch (Recommended)
-Once the CLI Proxy API program is up and running, you can access the WebUI at `http://your-server-IP:8317/management.html`.
-
-### 2. Direct Use
-Simply open the `index.html` file directly in your browser to use it.
-
-### 3. Use a Local Server
-
-#### Option A: Using Node.js (npm)
-```bash
-# Install dependencies
-npm install
-
-# Start the server on the default port (3000)
-npm start
-```
-
-#### Option B: Using Python
-```bash
-# Python 3.x
-python -m http.server 8000
-
-```
-
-Then open `http://localhost:8000` in your browser.
-
-### 3. Configure Connection
-1. Open the management interface.
-2. On the login screen, enter:
-   - **Remote Address**: The current version automatically picks up the remote address from where you're connecting. But you can also set your own address if you prefer.
-   - **Management Key**: Your management key
-3. Click the "Connect" button.
-4. Once connected successfully, all features will be available.
-
-## Interface Description
-
-### Navigation Menu
-- **Basic Settings**: Basic configurations like debugging, proxy, retries, etc.
-- **API Keys**: Management of keys for various API services.
-- **AI Providers**: Configuration for AI service providers.
-- **Auth Files**: Upload and download management for authentication files.
-- **Usage Stats**: Real-time analytics and usage statistics with interactive charts.
-- **System Info**: Connection status and system information.
-
-### Login Interface
-- **Auto-connection**: Automatically attempts to connect using saved credentials
-- **Custom Connection**: Manual configuration of API base address
-- **Current Address Detection**: Automatically detects and uses current access address
-- **Language Switching**: Support for multiple languages (English/Chinese)
-- **Theme Switching**: Light and dark theme support
-
-## Feature Highlights
-
-### Modern UI
-- Responsive design, supports all screen sizes
-- Beautiful gradient colors and shadow effects
-- Smooth animations and transition effects
-- Intuitive icons and status indicators
-- Dark/Light theme support with system preference detection
-- Mobile-friendly sidebar with overlay
-
-### Real-time Updates
-- Configuration changes take effect immediately
-- Real-time status feedback
-- Automatic data refresh
-- Live usage statistics with interactive charts
-- Real-time connection status monitoring
-
-### Security Features
-- Masked display for keys
-- Secure credential storage
-- Auto-login with encrypted local storage
-
-### Responsive Design
-- Perfectly adapts to desktop and mobile devices
-- Adaptive layout with collapsible sidebar
-- Touch-friendly interactions
-- Mobile menu with overlay
-
-### Analytics & Monitoring
-- Interactive charts powered by Chart.js
-- Real-time usage statistics
-- Request trend visualization
-- Token consumption tracking
-- API performance metrics
+- **Responsive Design**: Full mobile support with collapsible sidebar
+- **Theme System**: Light/dark mode with persistent preference
+- **Internationalization**: English and Simplified Chinese (zh-CN) with seamless switching
+- **Real-time Feedback**: Toast notifications for all operations
+- **Security**: Masked secrets, encrypted local storage
 
 ## Tech Stack
 
-- **Frontend**: Plain HTML, CSS, JavaScript (ES6+)
-- **Styling**: CSS3 + Flexbox/Grid with CSS Variables
-- **Icons**: Font Awesome 6.4.0
-- **Charts**: Chart.js for interactive data visualization
-- **Fonts**: Segoe UI system font
-- **API**: RESTful API calls with automatic authentication
-- **Internationalization**: Custom i18n system with English/Chinese support
-- **Theme System**: CSS custom properties for dynamic theming
-- **Storage**: LocalStorage for user preferences and credentials
+- **Frontend Framework**: React 19 with TypeScript
+- **Build Tool**: Vite 7 with single-file output ([vite-plugin-singlefile](https://github.com/nicknisi/vite-plugin-singlefile))
+- **State Management**: [Zustand](https://github.com/pmndrs/zustand) for global stores
+- **Routing**: React Router 7 with HashRouter
+- **HTTP Client**: Axios with interceptors for auth & error handling
+- **Internationalization**: i18next + react-i18next
+- **Styling**: SCSS with CSS Modules, CSS Variables for theming
+- **Charts**: Chart.js + react-chartjs-2
+- **Code Editor**: @uiw/react-codemirror with YAML support
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ (LTS recommended)
+- npm 9+
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
+cd Cli-Proxy-API-Management-Center
+
+# Install dependencies
+npm install
+```
+
+### Development
+
+```bash
+npm run dev          # Start Vite dev server (default: http://localhost:5173)
+```
+
+### Build
+
+```bash
+npm run build        # TypeScript check + Vite production build
+```
+
+The build outputs a single `dist/index.html` file with all assets inlined.
+
+### Other Commands
+
+```bash
+npm run preview      # Preview production build locally
+npm run lint         # ESLint with strict mode (--max-warnings 0)
+npm run format       # Prettier formatting for src/**/*.{ts,tsx,css,scss}
+npm run type-check   # TypeScript type checking only (tsc --noEmit)
+```
+
+## Usage
+
+### Access Methods
+
+1. **Integrated with CLI Proxy API (Recommended)**
+   After starting the CLI Proxy API service, visit `http://your-server:8317/management.html`
+
+2. **Standalone (Built file)**
+   Open the built `dist/index.html` directly in a browser, or host it on any static file server
+
+3. **Development Server**
+   Run `npm run dev` and open `http://localhost:5173`
+
+### Initial Configuration
+
+1. The login page auto-detects the current address; you can modify it if needed
+2. Enter your management key
+3. Click Connect to authenticate
+4. Credentials are encrypted and saved locally for auto-login
+
+> **Tip**: The Logs navigation item appears only after enabling "Logging to file" in Basic Settings.
+
+## Project Structure
+
+```
+├── src/
+│   ├── components/
+│   │   ├── common/           # Shared components (NotificationContainer)
+│   │   ├── layout/           # App shell (MainLayout with sidebar)
+│   │   └── ui/               # Reusable UI primitives (Button, Input, Modal, etc.)
+│   ├── hooks/                # Custom hooks (useApi, useDebounce, usePagination, etc.)
+│   ├── i18n/
+│   │   ├── locales/          # Translation files (zh-CN.json, en.json)
+│   │   └── index.ts          # i18next configuration
+│   ├── pages/                # Route page components with co-located .module.scss
+│   ├── router/               # ProtectedRoute wrapper
+│   ├── services/
+│   │   ├── api/              # API layer (client.ts singleton, feature modules)
+│   │   └── storage/          # Secure storage utilities
+│   ├── stores/               # Zustand stores (auth, config, theme, language, notification)
+│   ├── styles/               # Global SCSS (variables, mixins, themes, components)
+│   ├── types/                # TypeScript type definitions
+│   ├── utils/                # Utility functions (constants, format, validation, etc.)
+│   ├── App.tsx               # Root component with routing
+│   └── main.tsx              # Entry point
+├── dist/                     # Build output (single-file bundle)
+├── vite.config.ts            # Vite configuration
+├── tsconfig.json             # TypeScript configuration
+└── package.json
+```
+
+### Key Architecture Patterns
+
+- **Path Alias**: Use `@/` to import from `src/` (configured in vite.config.ts and tsconfig.json)
+- **API Client**: Singleton `apiClient` in `src/services/api/client.ts` with auth interceptors
+- **State Management**: Zustand stores with localStorage persistence for auth/theme/language
+- **Styling**: SCSS variables auto-injected; CSS Modules for component-scoped styles
+- **Build Output**: Single-file bundle for easy distribution (all assets inlined)
 
 ## 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.
+
+1. Confirm 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 allows the connection
 
 ### Data Not Updating
-1. Click the "Refresh All" button.
-2. Check your network connection.
-3. Check the browser's console for any error messages.
 
-## Development Information
+1. Click the "Refresh All" button in the header
+2. Check your network connection
+3. Open browser DevTools console for error details
 
-### File Structure
-```
-webui/
-├── index.html          # Main page with responsive layout
-├── styles.css          # Stylesheet with theme support
-├── app.js              # Application logic and API management
-├── i18n.js             # Internationalization support (EN/CN)
-├── package.json        # Project configuration
-├── build.js            # Build script for production
-├── bundle-entry.js     # Entry point for bundling
-├── build-scripts/      # Build utilities
-│   └── prepare-html.js # HTML preparation script
-├── logo.jpg            # Application logo
-├── LICENSE             # MIT License
-├── README.md           # English documentation
-├── README_CN.md        # Chinese documentation
-└── BUILD_RELEASE.md    # Build and release notes
-```
+### Logs & Config Editor
 
-### API Calls
-All API calls are handled through the `makeRequest` method of the `ManagerAPI` class, which includes:
-- Automatic addition of authentication headers
-- Error handling
-- JSON response parsing
+- **Logs**: Requires server-side logging-to-file enabled; 404 indicates old server version or logging disabled
+- **Config Editor**: Requires `/config.yaml` endpoint; ensure valid YAML syntax before saving
 
-### State Management
-- API address and key are saved in local storage
-- Connection status is maintained in memory
-- Real-time data refresh mechanism
+### Usage Statistics
+
+- If charts are empty, enable "Usage statistics" in settings; data resets on server restart
 
 ## Contributing
-We welcome Issues and Pull Requests to improve this project! We encourage more developers to contribute to the enhancement of this WebUI!
+
+We welcome Issues and Pull Requests! Please follow these guidelines:
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes with clear messages
+4. Push to your branch
+5. Open a Pull Request
+
+### Development Guidelines
+
+- Run `npm run lint` and `npm run type-check` before committing
+- Follow existing code patterns and naming conventions
+- Use TypeScript strict mode
+- Write meaningful commit messages
+
+## License
 
 This project is licensed under the MIT License.

README_CN.md

@@ -1,208 +1,190 @@
-# Cli-Proxy-API-Management-Center
-这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
+# CLI Proxy API 管理中心
 
-主项目
-https://github.com/router-for-me/CLIProxyAPI
+用于管理 CLI Proxy API 的现代化 React Web 界面，采用全新技术栈重构，提供更好的可维护性、类型安全性和用户体验。
 
-示例网站:
-https://remote.router-for.me/
+[English](README.md)
 
-最低可用版本 ≥ 6.0.0
+**主项目**: https://github.com/router-for-me/CLIProxyAPI
+**示例地址**: https://remote.router-for.me/
+**最低版本要求**: ≥ 6.3.0（推荐 ≥ 6.5.0）
 
-推荐版本 ≥ 6.2.32
-
-自6.0.19起WebUI已经集成在主程序中 可以通过主项目开启的外部端口的`/management.html`访问
+自 6.0.19 版本起，WebUI 已集成到主程序中，启动服务后可通过 `/management.html` 访问。
 
 ## 功能特点
 
-### 认证管理
-- 支持管理密钥认证
-- 可配置 API 基础地址
-- 实时连接状态检测
-- 自动登录保存的凭据
-- 语言和主题切换
+### 核心功能
 
-### 基础设置
-- **调试模式**: 开启/关闭调试功能
-- **代理设置**: 配置代理服务器 URL
-- **请求重试**: 设置请求重试次数
-- **配额管理**: 配置超出配额时的行为
-  - 超出配额时自动切换项目
-  - 超出配额时切换到预览模型
+- **登录与认证**: 自动检测当前地址（支持手动修改），加密自动登录，会话持久化
+- **基础设置**: 调试模式、代理 URL、请求重试配置、配额溢出自动切换项目/预览模型、使用统计开关、请求日志与文件日志、WebSocket `/ws/*` 鉴权
+- **API 密钥管理**: 管理代理认证密钥，支持添加/编辑/删除操作
+- **AI 提供商**: 配置 Gemini/Codex/Claude，OpenAI 兼容提供商（自定义 Base URL/Headers/代理/模型别名），Vertex AI 服务账号 JSON 导入
+- **认证文件与 OAuth**: 上传/下载/搜索/分页 JSON 凭据；类型筛选（Qwen/Gemini/GeminiCLI/AIStudio/Claude/Codex/Antigravity/iFlow/Vertex/Empty）；批量删除；多提供商 OAuth/设备码流程
+- **日志查看**: 实时日志查看，支持自动刷新、下载和清空（启用"写入日志文件"后显示）
+- **使用统计**: 概览卡片、小时/天切换、多模型交互式图表、按 API 统计表格
+- **配置管理**: 内置 YAML 编辑器，支持 `/config.yaml` 语法高亮、重载/保存
+- **系统信息**: 连接状态、配置缓存、服务器版本/构建时间、底栏显示 UI 版本
 
-### API 密钥管理
-- **代理服务认证密钥**: 管理用于代理服务的 API 密钥
-- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥
-- **Codex API**: 管理 OpenAI Codex API 配置
-- **Claude API**: 管理 Anthropic Claude API 配置
-- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商
+### 用户体验
 
-### 认证文件管理
-- 上传认证 JSON 文件
-- 下载现有认证文件
-- 删除单个或所有认证文件
-- 显示文件详细信息
-
-### 使用统计
-- **实时分析**: 通过交互式图表跟踪 API 使用情况
-- **请求趋势**: 按小时/天可视化请求模式
-- **Token 使用**: 监控 Token 消耗随时间变化
-- **API 详情**: 每个 API 端点的详细统计
-- **成功率/失败率**: 跟踪 API 可靠性指标
-
-### 系统信息
-- **连接状态**: 实时连接监控
-- **配置状态**: 跟踪配置加载状态
-- **服务器信息**: 显示服务器地址和管理密钥
-- **最后更新**: 显示数据最后刷新时间
-
-
-## 使用方法
-
-### 1. 在CLI Proxy API程序启动后使用 （推荐）
-在启动了CLI Proxy API程序后 访问`http://您的服务器IP:8317/management.html`使用
-
-### 2. 直接使用
-直接用浏览器打开 `index.html` 文件即可使用。
-
-### 3. 使用本地服务器
-
-#### 方法A：使用 Node.js (npm)
-```bash
-# 安装依赖
-npm install
-
-# 使用默认端口(3000）
-npm start
-```
-
-#### 方法B：使用 Python
-```bash
-# Python 3.x
-python -m http.server 8000
-
-```
-
-然后在浏览器中打开 `http://localhost:8000`。
-
-### 3. 配置连接
-1. 打开管理界面
-2. 在登录界面上输入：
-   - **远程地址**: 现版本远程地址将会自动从您的访问地址中获取 当然您也可以自定义
-   - **管理密钥**: 您的管理密钥
-3. 点击"连接"按钮
-4. 连接成功后即可使用所有功能
-
-## 界面说明
-
-### 导航菜单
-- **基础设置**: 调试、代理、重试等基本配置
-- **API 密钥**: 各种 API 服务的密钥管理
-- **AI 提供商**: AI 服务提供商配置
-- **认证文件**: 认证文件的上传下载管理
-- **使用统计**: 实时分析和使用统计，包含交互式图表
-- **系统信息**: 连接状态和系统信息
-
-### 登录界面
-- **自动连接**: 使用保存的凭据自动尝试连接
-- **自定义连接**: 手动配置 API 基础地址
-- **当前地址检测**: 自动检测并使用当前访问地址
-- **语言切换**: 支持多种语言（英文/中文）
-- **主题切换**: 支持明暗主题
-
-## 特性亮点
-
-### 现代化 UI
-- 响应式设计，支持各种屏幕尺寸
-- 美观的渐变色彩和阴影效果
-- 流畅的动画和过渡效果
-- 直观的图标和状态指示
-- 明暗主题支持，自动检测系统偏好
-- 移动端友好的侧边栏和遮罩
-
-### 实时更新
-- 配置更改立即生效
-- 实时状态反馈
-- 自动数据刷新
-- 实时使用统计和交互式图表
-- 实时连接状态监控
-
-### 安全特性
-- 密钥遮蔽显示
-- 安全凭据存储
-- 加密本地存储自动登录
-
-### 响应式设计
-- 完美适配桌面和移动设备
-- 自适应布局，可折叠侧边栏
-- 触摸友好的交互
-- 移动端菜单和遮罩
-
-### 分析与监控
-- Chart.js 驱动的交互式图表
-- 实时使用统计
-- 请求趋势可视化
-- Token 消耗跟踪
-- API 性能指标
+- **响应式设计**: 完整移动端支持，可折叠侧边栏
+- **主题系统**: 明/暗模式切换，偏好持久化
+- **国际化**: 简体中文和英文，无缝切换
+- **实时反馈**: 所有操作的消息通知
+- **安全性**: 密钥遮蔽、加密本地存储
 
 ## 技术栈
 
-- **前端**: 纯 HTML、CSS、JavaScript (ES6+)
-- **样式**: CSS3 + Flexbox/Grid，支持 CSS 变量
-- **图标**: Font Awesome 6.4.0
-- **图表**: Chart.js 交互式数据可视化
-- **字体**: Segoe UI 系统字体
-- **API**: RESTful API 调用，自动认证
-- **国际化**: 自定义 i18n 系统，支持中英文
-- **主题系统**: CSS 自定义属性动态主题
-- **存储**: LocalStorage 用户偏好和凭据存储
+- **前端框架**: React 19 + TypeScript
+- **构建工具**: Vite 7，单文件输出（[vite-plugin-singlefile](https://github.com/nicknisi/vite-plugin-singlefile)）
+- **状态管理**: [Zustand](https://github.com/pmndrs/zustand)
+- **路由**: React Router 7 (HashRouter)
+- **HTTP 客户端**: Axios，带认证和错误处理拦截器
+- **国际化**: i18next + react-i18next
+- **样式**: SCSS + CSS Modules，CSS 变量主题
+- **图表**: Chart.js + react-chartjs-2
+- **代码编辑器**: @uiw/react-codemirror（YAML 支持）
+
+## 快速开始
+
+### 环境要求
+
+- Node.js 18+（推荐 LTS 版本）
+- npm 9+
+
+### 安装
+
+```bash
+# 克隆仓库
+git clone https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
+cd Cli-Proxy-API-Management-Center
+
+# 安装依赖
+npm install
+```
+
+### 开发
+
+```bash
+npm run dev          # 启动 Vite 开发服务器（默认: http://localhost:5173）
+```
+
+### 构建
+
+```bash
+npm run build        # TypeScript 检查 + Vite 生产构建
+```
+
+构建输出单个 `dist/index.html` 文件，所有资源已内联。
+
+### 其他命令
+
+```bash
+npm run preview      # 本地预览生产构建
+npm run lint         # ESLint 严格模式（--max-warnings 0）
+npm run format       # Prettier 格式化 src/**/*.{ts,tsx,css,scss}
+npm run type-check   # 仅 TypeScript 类型检查（tsc --noEmit）
+```
+
+## 使用方法
+
+### 访问方式
+
+1. **与 CLI Proxy API 集成使用（推荐）**
+   启动 CLI Proxy API 服务后，访问 `http://您的服务器:8317/management.html`
+
+2. **独立使用（构建后文件）**
+   直接在浏览器打开构建的 `dist/index.html`，或部署到任意静态文件服务器
+
+3. **开发服务器**
+   运行 `npm run dev` 后打开 `http://localhost:5173`
+
+### 初始配置
+
+1. 登录页会自动检测当前地址，可根据需要修改
+2. 输入管理密钥
+3. 点击连接进行认证
+4. 凭据会加密保存到本地，下次自动登录
+
+> **提示**: 只有在"基础设置"中启用"写入日志文件"后，才会显示"日志查看"导航项。
+
+## 项目结构
+
+```
+├── src/
+│   ├── components/
+│   │   ├── common/           # 公共组件（NotificationContainer）
+│   │   ├── layout/           # 应用外壳（MainLayout 侧边栏布局）
+│   │   └── ui/               # 可复用 UI 组件（Button、Input、Modal 等）
+│   ├── hooks/                # 自定义 Hooks（useApi、useDebounce、usePagination 等）
+│   ├── i18n/
+│   │   ├── locales/          # 翻译文件（zh-CN.json、en.json）
+│   │   └── index.ts          # i18next 配置
+│   ├── pages/                # 路由页面组件，配套 .module.scss 样式
+│   ├── router/               # ProtectedRoute 路由守卫
+│   ├── services/
+│   │   ├── api/              # API 层（client.ts 单例，功能模块）
+│   │   └── storage/          # 安全存储工具
+│   ├── stores/               # Zustand 状态管理（auth、config、theme、language、notification）
+│   ├── styles/               # 全局 SCSS（variables、mixins、themes、components）
+│   ├── types/                # TypeScript 类型定义
+│   ├── utils/                # 工具函数（constants、format、validation 等）
+│   ├── App.tsx               # 根组件与路由
+│   └── main.tsx              # 入口文件
+├── dist/                     # 构建输出（单文件打包）
+├── vite.config.ts            # Vite 配置
+├── tsconfig.json             # TypeScript 配置
+└── package.json
+```
+
+### 核心架构模式
+
+- **路径别名**: 使用 `@/` 导入 `src/` 目录（在 vite.config.ts 和 tsconfig.json 中配置）
+- **API 客户端**: `src/services/api/client.ts` 单例，带认证拦截器
+- **状态管理**: Zustand stores，auth/theme/language 持久化到 localStorage
+- **样式**: SCSS 变量自动注入；CSS Modules 实现组件作用域样式
+- **构建输出**: 单文件打包，便于分发（所有资源内联）
 
 ## 故障排除
 
 ### 连接问题
+
 1. 确认 CLI Proxy API 服务正在运行
 2. 检查 API 地址是否正确
 3. 验证管理密钥是否有效
 4. 确认防火墙设置允许连接
 
 ### 数据不更新
-1. 点击"刷新全部"按钮
+
+1. 点击顶栏的"刷新全部"按钮
 2. 检查网络连接
-3. 查看浏览器控制台错误信息
+3. 打开浏览器开发者工具控制台查看错误信息
 
-## 开发说明
+### 日志与配置编辑
 
-### 文件结构
-```
-webui/
-├── index.html          # 主页面，响应式布局
-├── styles.css          # 样式文件，支持主题
-├── app.js              # 应用逻辑和 API 管理
-├── i18n.js             # 国际化支持（中英文）
-├── package.json        # 项目配置
-├── build.js            # 生产环境构建脚本
-├── bundle-entry.js     # 打包入口文件
-├── build-scripts/      # 构建工具
-│   └── prepare-html.js # HTML 准备脚本
-├── logo.jpg            # 应用图标
-├── LICENSE             # MIT 许可证
-├── README.md           # 英文文档
-├── README_CN.md        # 中文文档
-└── BUILD_RELEASE.md    # 构建和发布说明
-```
+- **日志**: 需要服务端启用写文件日志；返回 404 说明服务器版本过旧或未启用日志
+- **配置编辑**: 依赖 `/config.yaml` 接口；保存前请确保 YAML 语法正确
 
-### API 调用
-所有 API 调用都通过 `ManagerAPI` 类的 `makeRequest` 方法处理，包含：
-- 自动添加认证头
-- 错误处理
-- JSON 响应解析
+### 使用统计
 
-### 状态管理
-- 本地存储保存 API 地址和密钥
-- 内存中维护连接状态
-- 实时数据刷新机制
+- 若图表为空，请在设置中启用"使用统计"；数据在服务重启后会清空
 
 ## 贡献
-欢迎提交 Issue 和 Pull Request 来改进这个项目！我们欢迎更多的大佬来对这个WebUI进行更新！
 
-本项目采用MIT许可
+欢迎提交 Issue 和 Pull Request！请遵循以下指南：
+
+1. Fork 本仓库
+2. 创建功能分支（`git checkout -b feature/amazing-feature`）
+3. 提交更改，使用清晰的提交信息
+4. 推送到分支
+5. 开启 Pull Request
+
+### 开发规范
+
+- 提交前运行 `npm run lint` 和 `npm run type-check`
+- 遵循现有代码模式和命名规范
+- 使用 TypeScript 严格模式
+- 编写有意义的提交信息
+
+## 许可证
+
+本项目采用 MIT 许可证。

app.js

@@ -1,704 +0,0 @@
-// 模块导入
-import { themeModule } from './src/modules/theme.js';
-import { navigationModule } from './src/modules/navigation.js';
-import { languageModule } from './src/modules/language.js';
-import { loginModule } from './src/modules/login.js';
-import { configEditorModule } from './src/modules/config-editor.js';
-import { logsModule } from './src/modules/logs.js';
-import { apiKeysModule } from './src/modules/api-keys.js';
-import { authFilesModule } from './src/modules/auth-files.js';
-import { oauthModule } from './src/modules/oauth.js';
-import { usageModule } from './src/modules/usage.js';
-import { settingsModule } from './src/modules/settings.js';
-import { aiProvidersModule } from './src/modules/ai-providers.js';
-
-// 工具函数导入
-import { escapeHtml } from './src/utils/html.js';
-import { maskApiKey } from './src/utils/string.js';
-import { normalizeArrayResponse } from './src/utils/array.js';
-import { debounce } from './src/utils/dom.js';
-import {
-    CACHE_EXPIRY_MS,
-    MAX_LOG_LINES,
-    DEFAULT_AUTH_FILES_PAGE_SIZE,
-    MIN_AUTH_FILES_PAGE_SIZE,
-    MAX_AUTH_FILES_PAGE_SIZE,
-    OAUTH_CARD_IDS,
-    STORAGE_KEY_AUTH_FILES_PAGE_SIZE,
-    NOTIFICATION_DURATION_MS
-} from './src/utils/constants.js';
-
-// 核心服务导入
-import { createErrorHandler } from './src/core/error-handler.js';
-import { connectionModule } from './src/core/connection.js';
-import { ApiClient } from './src/core/api-client.js';
-import { ConfigService } from './src/core/config-service.js';
-import { createEventBus } from './src/core/event-bus.js';
-
-// CLI Proxy API 管理界面 JavaScript
-class CLIProxyManager {
-    constructor() {
-        // 事件总线
-        this.events = createEventBus();
-
-        // API 客户端（规范化基础地址、封装请求）
-        this.apiClient = new ApiClient({
-            onVersionUpdate: (headers) => this.updateVersionFromHeaders(headers)
-        });
-        const detectedBase = this.detectApiBaseFromLocation();
-        this.apiClient.setApiBase(detectedBase);
-        this.apiBase = this.apiClient.apiBase;
-        this.apiUrl = this.apiClient.apiUrl;
-        this.managementKey = '';
-        this.isConnected = false;
-        this.isLoggedIn = false;
-        this.uiVersion = null;
-        this.serverVersion = null;
-        this.serverBuildDate = null;
-
-        // 配置缓存 - 改为分段缓存（交由 ConfigService 管理）
-        this.cacheExpiry = CACHE_EXPIRY_MS;
-        this.configService = new ConfigService({
-            apiClient: this.apiClient,
-            cacheExpiry: this.cacheExpiry
-        });
-        this.configCache = this.configService.cache;
-        this.cacheTimestamps = this.configService.cacheTimestamps;
-
-        // 状态更新定时器
-        this.statusUpdateTimer = null;
-        this.lastConnectionStatusEmitted = null;
-        this.isGlobalRefreshInProgress = false;
-
-        this.registerCoreEventHandlers();
-
-        // 日志自动刷新定时器
-        this.logsRefreshTimer = null;
-
-        // 当前展示的日志行
-        this.displayedLogLines = [];
-        this.maxDisplayLogLines = MAX_LOG_LINES;
-
-        // 日志时间戳（用于增量加载）
-        this.latestLogTimestamp = null;
-
-        // Auth file filter state cache
-        this.currentAuthFileFilter = 'all';
-        this.cachedAuthFiles = [];
-        this.authFilesPagination = {
-            pageSize: DEFAULT_AUTH_FILES_PAGE_SIZE,
-            currentPage: 1,
-            totalPages: 1
-        };
-        this.authFileStatsCache = {};
-        this.authFileSearchQuery = '';
-        this.authFilesPageSizeKey = STORAGE_KEY_AUTH_FILES_PAGE_SIZE;
-        this.loadAuthFilePreferences();
-
-        // Vertex AI credential import state
-        this.vertexImportState = {
-            file: null,
-            loading: false,
-            result: null
-        };
-
-        // 主题管理
-        this.currentTheme = 'light';
-
-        // 配置文件编辑器状态
-        this.configYamlCache = '';
-        this.isConfigEditorDirty = false;
-        this.configEditorElements = {
-            textarea: null,
-            editorInstance: null,
-            saveBtn: null,
-            reloadBtn: null,
-            statusEl: null
-        };
-        this.lastConfigFetchUrl = null;
-        this.lastEditorConnectionState = null;
-
-        // 初始化错误处理器
-        this.errorHandler = createErrorHandler((message, type) => this.showNotification(message, type));
-
-        this.init();
-    }
-
-    loadAuthFilePreferences() {
-        try {
-            if (typeof localStorage === 'undefined') {
-                return;
-            }
-            const savedPageSize = parseInt(localStorage.getItem(this.authFilesPageSizeKey), 10);
-            if (Number.isFinite(savedPageSize)) {
-                this.authFilesPagination.pageSize = this.normalizeAuthFilesPageSize(savedPageSize);
-            }
-        } catch (error) {
-            console.warn('Failed to restore auth file preferences:', error);
-        }
-    }
-
-    normalizeAuthFilesPageSize(value) {
-        const defaultSize = DEFAULT_AUTH_FILES_PAGE_SIZE;
-        const minSize = MIN_AUTH_FILES_PAGE_SIZE;
-        const maxSize = MAX_AUTH_FILES_PAGE_SIZE;
-        const parsed = parseInt(value, 10);
-        if (!Number.isFinite(parsed) || parsed <= 0) {
-            return defaultSize;
-        }
-        return Math.min(maxSize, Math.max(minSize, parsed));
-    }
-
-    init() {
-        this.initUiVersion();
-        this.initializeTheme();
-        this.registerCoreEventHandlers();
-        this.registerSettingsListeners();
-        this.registerUsageListeners();
-        if (typeof this.registerLogsListeners === 'function') {
-            this.registerLogsListeners();
-        }
-        if (typeof this.registerConfigEditorListeners === 'function') {
-            this.registerConfigEditorListeners();
-        }
-        this.checkLoginStatus();
-        this.bindEvents();
-        this.setupNavigation();
-        this.setupLanguageSwitcher();
-        this.setupThemeSwitcher();
-        this.setupConfigEditor();
-        this.updateConfigEditorAvailability();
-        // loadSettings 将在登录成功后调用
-        this.updateLoginConnectionInfo();
-        // 检查主机名，如果不是 localhost 或 127.0.0.1，则隐藏 OAuth 登录框
-        this.checkHostAndHideOAuth();
-        if (typeof this.registerAuthFilesListeners === 'function') {
-            this.registerAuthFilesListeners();
-        }
-    }
-
-    registerCoreEventHandlers() {
-        if (!this.events || typeof this.events.on !== 'function') {
-            return;
-        }
-        this.events.on('config:refresh-requested', async (event) => {
-            const detail = event?.detail || {};
-            const forceRefresh = detail.forceRefresh !== false;
-            // 避免并发触发导致重复请求
-            if (this.isGlobalRefreshInProgress) {
-                return;
-            }
-            await this.runGlobalRefresh(forceRefresh);
-        });
-    }
-
-    async runGlobalRefresh(forceRefresh = false) {
-        this.isGlobalRefreshInProgress = true;
-        try {
-            await this.loadAllData(forceRefresh);
-        } finally {
-            this.isGlobalRefreshInProgress = false;
-        }
-    }
-
-    // 检查主机名并隐藏 OAuth 登录框
-    checkHostAndHideOAuth() {
-        const hostname = window.location.hostname;
-        const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1';
-
-        if (!isLocalhost) {
-            // 隐藏所有 OAuth 登录卡片
-            OAUTH_CARD_IDS.forEach(cardId => {
-                const card = document.getElementById(cardId);
-                if (card) {
-                    card.style.display = 'none';
-                }
-            });
-
-            // 如果找不到具体的卡片 ID，尝试通过类名查找
-            const oauthCardElements = document.querySelectorAll('.card');
-            oauthCardElements.forEach(card => {
-                const cardText = card.textContent || '';
-                if (cardText.includes('Codex OAuth') ||
-                    cardText.includes('Anthropic OAuth') ||
-                    cardText.includes('Gemini CLI OAuth') ||
-                    cardText.includes('Qwen OAuth') ||
-                    cardText.includes('iFlow OAuth')) {
-                    card.style.display = 'none';
-                }
-            });
-
-            console.log(`当前主机名: ${hostname}，已隐藏 OAuth 登录框`);
-        }
-    }
-
-    // 检查登录状态
-    // 处理登录表单提交
-    // 事件绑定
-    bindEvents() {
-        // 登录相关（安全绑定）
-        const loginSubmit = document.getElementById('login-submit');
-        const logoutBtn = document.getElementById('logout-btn');
-
-        if (loginSubmit) {
-            loginSubmit.addEventListener('click', () => this.handleLogin());
-        }
-        if (logoutBtn) {
-            logoutBtn.addEventListener('click', () => this.logout());
-        }
-
-        // 密钥可见性切换事件
-        this.setupKeyVisibilityToggle();
-
-        // 主页面元素（延迟绑定，在显示主页面时绑定）
-        this.bindMainPageEvents();
-    }
-
-    // 设置密钥可见性切换
-    setupKeyVisibilityToggle() {
-        const toggleButtons = document.querySelectorAll('.toggle-key-visibility');
-        toggleButtons.forEach(button => {
-            button.addEventListener('click', () => this.toggleLoginKeyVisibility(button));
-        });
-    }
-
-    // 绑定主页面事件
-    bindMainPageEvents() {
-        // 连接状态检查
-        const connectionStatus = document.getElementById('connection-status');
-        const refreshAll = document.getElementById('refresh-all');
-
-        if (connectionStatus) {
-            connectionStatus.addEventListener('click', () => this.checkConnectionStatus());
-        }
-        if (refreshAll) {
-            refreshAll.addEventListener('click', () => this.refreshAllData());
-        }
-
-        // 基础设置
-        const debugToggle = document.getElementById('debug-toggle');
-        const updateProxy = document.getElementById('update-proxy');
-        const clearProxy = document.getElementById('clear-proxy');
-        const updateRetry = document.getElementById('update-retry');
-        const switchProjectToggle = document.getElementById('switch-project-toggle');
-        const switchPreviewToggle = document.getElementById('switch-preview-model-toggle');
-        const usageStatisticsToggle = document.getElementById('usage-statistics-enabled-toggle');
-        const requestLogToggle = document.getElementById('request-log-toggle');
-        const wsAuthToggle = document.getElementById('ws-auth-toggle');
-
-        if (debugToggle) {
-            debugToggle.addEventListener('change', (e) => this.updateDebug(e.target.checked));
-        }
-        if (updateProxy) {
-            updateProxy.addEventListener('click', () => this.updateProxyUrl());
-        }
-        if (clearProxy) {
-            clearProxy.addEventListener('click', () => this.clearProxyUrl());
-        }
-        if (updateRetry) {
-            updateRetry.addEventListener('click', () => this.updateRequestRetry());
-        }
-        if (switchProjectToggle) {
-            switchProjectToggle.addEventListener('change', (e) => this.updateSwitchProject(e.target.checked));
-        }
-        if (switchPreviewToggle) {
-            switchPreviewToggle.addEventListener('change', (e) => this.updateSwitchPreviewModel(e.target.checked));
-        }
-        if (usageStatisticsToggle) {
-            usageStatisticsToggle.addEventListener('change', (e) => this.updateUsageStatisticsEnabled(e.target.checked));
-        }
-        if (requestLogToggle) {
-            requestLogToggle.addEventListener('change', (e) => this.updateRequestLog(e.target.checked));
-        }
-        if (wsAuthToggle) {
-            wsAuthToggle.addEventListener('change', (e) => this.updateWsAuth(e.target.checked));
-        }
-
-        // 日志记录设置
-        const loggingToFileToggle = document.getElementById('logging-to-file-toggle');
-        if (loggingToFileToggle) {
-            loggingToFileToggle.addEventListener('change', (e) => this.updateLoggingToFile(e.target.checked));
-        }
-
-        // 日志查看
-        const refreshLogs = document.getElementById('refresh-logs');
-        const downloadLogs = document.getElementById('download-logs');
-        const clearLogs = document.getElementById('clear-logs');
-        const logsAutoRefreshToggle = document.getElementById('logs-auto-refresh-toggle');
-
-        if (refreshLogs) {
-            refreshLogs.addEventListener('click', () => this.refreshLogs());
-        }
-        if (downloadLogs) {
-            downloadLogs.addEventListener('click', () => this.downloadLogs());
-        }
-        if (clearLogs) {
-            clearLogs.addEventListener('click', () => this.clearLogs());
-        }
-        if (logsAutoRefreshToggle) {
-            logsAutoRefreshToggle.addEventListener('change', (e) => this.toggleLogsAutoRefresh(e.target.checked));
-        }
-
-        // API 密钥管理
-        const addApiKey = document.getElementById('add-api-key');
-        const addGeminiKey = document.getElementById('add-gemini-key');
-        const addCodexKey = document.getElementById('add-codex-key');
-        const addClaudeKey = document.getElementById('add-claude-key');
-        const addOpenaiProvider = document.getElementById('add-openai-provider');
-
-        if (addApiKey) {
-            addApiKey.addEventListener('click', () => this.showAddApiKeyModal());
-        }
-        if (addGeminiKey) {
-            addGeminiKey.addEventListener('click', () => this.showAddGeminiKeyModal());
-        }
-        if (addCodexKey) {
-            addCodexKey.addEventListener('click', () => this.showAddCodexKeyModal());
-        }
-        if (addClaudeKey) {
-            addClaudeKey.addEventListener('click', () => this.showAddClaudeKeyModal());
-        }
-        if (addOpenaiProvider) {
-            addOpenaiProvider.addEventListener('click', () => this.showAddOpenAIProviderModal());
-        }
-
-
-        // 认证文件管理
-        const uploadAuthFile = document.getElementById('upload-auth-file');
-        const deleteAllAuthFiles = document.getElementById('delete-all-auth-files');
-        const authFileInput = document.getElementById('auth-file-input');
-
-        if (uploadAuthFile) {
-            uploadAuthFile.addEventListener('click', () => this.uploadAuthFile());
-        }
-        if (deleteAllAuthFiles) {
-            deleteAllAuthFiles.addEventListener('click', () => this.deleteAllAuthFiles());
-        }
-        if (authFileInput) {
-            authFileInput.addEventListener('change', (e) => this.handleFileUpload(e));
-        }
-        this.bindAuthFilesPaginationEvents();
-        this.bindAuthFilesSearchControl();
-        this.bindAuthFilesPageSizeControl();
-        this.syncAuthFileControls();
-
-        // Vertex AI credential import
-        const vertexSelectFile = document.getElementById('vertex-select-file');
-        const vertexFileInput = document.getElementById('vertex-file-input');
-        const vertexImportBtn = document.getElementById('vertex-import-btn');
-
-        if (vertexSelectFile) {
-            vertexSelectFile.addEventListener('click', () => this.openVertexFilePicker());
-        }
-        if (vertexFileInput) {
-            vertexFileInput.addEventListener('change', (e) => this.handleVertexFileSelection(e));
-        }
-        if (vertexImportBtn) {
-            vertexImportBtn.addEventListener('click', () => this.importVertexCredential());
-        }
-        this.updateVertexFileDisplay();
-        this.updateVertexImportButtonState();
-        this.renderVertexImportResult(this.vertexImportState.result);
-
-        // Codex OAuth
-        const codexOauthBtn = document.getElementById('codex-oauth-btn');
-        const codexOpenLink = document.getElementById('codex-open-link');
-        const codexCopyLink = document.getElementById('codex-copy-link');
-
-        if (codexOauthBtn) {
-            codexOauthBtn.addEventListener('click', () => this.startCodexOAuth());
-        }
-        if (codexOpenLink) {
-            codexOpenLink.addEventListener('click', () => this.openCodexLink());
-        }
-        if (codexCopyLink) {
-            codexCopyLink.addEventListener('click', () => this.copyCodexLink());
-        }
-
-        // Anthropic OAuth
-        const anthropicOauthBtn = document.getElementById('anthropic-oauth-btn');
-        const anthropicOpenLink = document.getElementById('anthropic-open-link');
-        const anthropicCopyLink = document.getElementById('anthropic-copy-link');
-
-        if (anthropicOauthBtn) {
-            anthropicOauthBtn.addEventListener('click', () => this.startAnthropicOAuth());
-        }
-        if (anthropicOpenLink) {
-            anthropicOpenLink.addEventListener('click', () => this.openAnthropicLink());
-        }
-        if (anthropicCopyLink) {
-            anthropicCopyLink.addEventListener('click', () => this.copyAnthropicLink());
-        }
-
-        // Gemini CLI OAuth
-        const geminiCliOauthBtn = document.getElementById('gemini-cli-oauth-btn');
-        const geminiCliOpenLink = document.getElementById('gemini-cli-open-link');
-        const geminiCliCopyLink = document.getElementById('gemini-cli-copy-link');
-
-        if (geminiCliOauthBtn) {
-            geminiCliOauthBtn.addEventListener('click', () => this.startGeminiCliOAuth());
-        }
-        if (geminiCliOpenLink) {
-            geminiCliOpenLink.addEventListener('click', () => this.openGeminiCliLink());
-        }
-        if (geminiCliCopyLink) {
-            geminiCliCopyLink.addEventListener('click', () => this.copyGeminiCliLink());
-        }
-
-        // Qwen OAuth
-        const qwenOauthBtn = document.getElementById('qwen-oauth-btn');
-        const qwenOpenLink = document.getElementById('qwen-open-link');
-        const qwenCopyLink = document.getElementById('qwen-copy-link');
-
-        if (qwenOauthBtn) {
-            qwenOauthBtn.addEventListener('click', () => this.startQwenOAuth());
-        }
-        if (qwenOpenLink) {
-            qwenOpenLink.addEventListener('click', () => this.openQwenLink());
-        }
-        if (qwenCopyLink) {
-            qwenCopyLink.addEventListener('click', () => this.copyQwenLink());
-        }
-
-        // iFlow OAuth
-        const iflowOauthBtn = document.getElementById('iflow-oauth-btn');
-        const iflowOpenLink = document.getElementById('iflow-open-link');
-        const iflowCopyLink = document.getElementById('iflow-copy-link');
-
-        if (iflowOauthBtn) {
-            iflowOauthBtn.addEventListener('click', () => this.startIflowOAuth());
-        }
-        if (iflowOpenLink) {
-            iflowOpenLink.addEventListener('click', () => this.openIflowLink());
-        }
-        if (iflowCopyLink) {
-            iflowCopyLink.addEventListener('click', () => this.copyIflowLink());
-        }
-
-        // 使用统计
-        const refreshUsageStats = document.getElementById('refresh-usage-stats');
-        const requestsHourBtn = document.getElementById('requests-hour-btn');
-        const requestsDayBtn = document.getElementById('requests-day-btn');
-        const tokensHourBtn = document.getElementById('tokens-hour-btn');
-        const tokensDayBtn = document.getElementById('tokens-day-btn');
-        const chartLineSelects = document.querySelectorAll('.chart-line-select');
-
-        if (refreshUsageStats) {
-            refreshUsageStats.addEventListener('click', () => this.loadUsageStats());
-        }
-        if (requestsHourBtn) {
-            requestsHourBtn.addEventListener('click', () => this.switchRequestsPeriod('hour'));
-        }
-        if (requestsDayBtn) {
-            requestsDayBtn.addEventListener('click', () => this.switchRequestsPeriod('day'));
-        }
-        if (tokensHourBtn) {
-            tokensHourBtn.addEventListener('click', () => this.switchTokensPeriod('hour'));
-        }
-        if (tokensDayBtn) {
-            tokensDayBtn.addEventListener('click', () => this.switchTokensPeriod('day'));
-        }
-        if (chartLineSelects.length) {
-            chartLineSelects.forEach(select => {
-                select.addEventListener('change', (event) => {
-                    const index = Number.parseInt(select.getAttribute('data-line-index'), 10);
-                    this.handleChartLineSelectionChange(Number.isNaN(index) ? -1 : index, event.target.value);
-                });
-            });
-        }
-
-        // 模态框
-        const closeBtn = document.querySelector('.close');
-        if (closeBtn) {
-            closeBtn.addEventListener('click', () => this.closeModal());
-        }
-
-        // 移动端菜单按钮
-        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
-        const sidebarOverlay = document.getElementById('sidebar-overlay');
-        const sidebar = document.getElementById('sidebar');
-
-        if (mobileMenuBtn) {
-            mobileMenuBtn.addEventListener('click', () => this.toggleMobileSidebar());
-        }
-
-        if (sidebarOverlay) {
-            sidebarOverlay.addEventListener('click', () => this.closeMobileSidebar());
-        }
-
-        // 侧边栏收起/展开按钮（桌面端）
-        const sidebarToggleBtnDesktop = document.getElementById('sidebar-toggle-btn-desktop');
-        if (sidebarToggleBtnDesktop) {
-            sidebarToggleBtnDesktop.addEventListener('click', () => this.toggleSidebar());
-        }
-
-        // 从本地存储恢复侧边栏状态
-        this.restoreSidebarState();
-
-        // 监听窗口大小变化
-        window.addEventListener('resize', () => {
-            const sidebar = document.getElementById('sidebar');
-            const layout = document.getElementById('layout-container');
-
-            if (window.innerWidth <= 1024) {
-                // 移动端：移除收起状态
-                if (sidebar && layout) {
-                    sidebar.classList.remove('collapsed');
-                    layout.classList.remove('sidebar-collapsed');
-                }
-            } else {
-                // 桌面端：恢复保存的状态
-                this.restoreSidebarState();
-            }
-        });
-
-        // 点击侧边栏导航项时在移动端关闭侧边栏
-        const navItems = document.querySelectorAll('.nav-item');
-        navItems.forEach(item => {
-            item.addEventListener('click', () => {
-                if (window.innerWidth <= 1024) {
-                    this.closeMobileSidebar();
-                }
-            });
-        });
-    }
-
-
-    // 显示通知
-    showNotification(message, type = 'info') {
-        const notification = document.getElementById('notification');
-        notification.textContent = message;
-        notification.className = `notification ${type}`;
-        notification.classList.add('show');
-
-        setTimeout(() => {
-            notification.classList.remove('show');
-        }, NOTIFICATION_DURATION_MS);
-    }
-
-    // 密钥可见性切换
-    toggleKeyVisibility() {
-        const keyInput = document.getElementById('management-key');
-        const toggleButton = document.getElementById('toggle-key-visibility');
-
-        if (keyInput.type === 'password') {
-            keyInput.type = 'text';
-            toggleButton.innerHTML = '<i class="fas fa-eye-slash"></i>';
-        } else {
-            keyInput.type = 'password';
-            toggleButton.innerHTML = '<i class="fas fa-eye"></i>';
-        }
-    }
-
-    // ===== 使用统计相关方法 =====
-
-    // 使用统计状态
-    requestsChart = null;
-    tokensChart = null;
-    currentUsageData = null;
-    chartLineSelections = ['none', 'none', 'none'];
-    chartLineSelectIds = ['chart-line-select-0', 'chart-line-select-1', 'chart-line-select-2'];
-    chartLineStyles = [
-        { borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' },
-        { borderColor: '#a855f7', backgroundColor: 'rgba(168, 85, 247, 0.15)' },
-        { borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.15)' }
-    ];
-
-    showModal() {
-        const modal = document.getElementById('modal');
-        if (modal) {
-            modal.style.display = 'block';
-        }
-    }
-
-    // 关闭模态框
-    closeModal() {
-        document.getElementById('modal').style.display = 'none';
-        if (typeof this.closeOpenAIModelDiscovery === 'function') {
-            this.closeOpenAIModelDiscovery();
-        }
-    }
-
-}
-
-Object.assign(
-    CLIProxyManager.prototype,
-    themeModule,
-    navigationModule,
-    languageModule,
-    loginModule,
-    configEditorModule,
-    logsModule,
-    apiKeysModule,
-    authFilesModule,
-    oauthModule,
-    usageModule,
-    settingsModule,
-    aiProvidersModule,
-    connectionModule
-);
-
-// 将工具函数绑定到原型上，供模块使用
-CLIProxyManager.prototype.escapeHtml = escapeHtml;
-CLIProxyManager.prototype.maskApiKey = maskApiKey;
-CLIProxyManager.prototype.normalizeArrayResponse = normalizeArrayResponse;
-CLIProxyManager.prototype.debounce = debounce;
-
-// 全局管理器实例
-let manager;
-
-// 尝试自动加载根目录 Logo（支持多种常见文件名/扩展名）
-function setupSiteLogo() {
-    const img = document.getElementById('site-logo');
-    const loginImg = document.getElementById('login-logo');
-    if (!img && !loginImg) return;
-
-    const inlineLogo = typeof window !== 'undefined' ? window.__INLINE_LOGO__ : null;
-    if (inlineLogo) {
-        if (img) {
-            img.src = inlineLogo;
-            img.style.display = 'inline-block';
-        }
-        if (loginImg) {
-            loginImg.src = inlineLogo;
-            loginImg.style.display = 'inline-block';
-        }
-        return;
-    }
-
-    const candidates = [
-        '../logo.svg', '../logo.png', '../logo.jpg', '../logo.jpeg', '../logo.webp', '../logo.gif',
-        'logo.svg', 'logo.png', 'logo.jpg', 'logo.jpeg', 'logo.webp', 'logo.gif',
-        '/logo.svg', '/logo.png', '/logo.jpg', '/logo.jpeg', '/logo.webp', '/logo.gif'
-    ];
-    let idx = 0;
-    const tryNext = () => {
-        if (idx >= candidates.length) return;
-        const test = new Image();
-        test.onload = () => {
-            if (img) {
-                img.src = test.src;
-                img.style.display = 'inline-block';
-            }
-            if (loginImg) {
-                loginImg.src = test.src;
-                loginImg.style.display = 'inline-block';
-            }
-        };
-        test.onerror = () => {
-            idx++;
-            tryNext();
-        };
-        test.src = candidates[idx];
-    };
-    tryNext();
-}
-
-// 页面加载完成后初始化
-document.addEventListener('DOMContentLoaded', () => {
-    // 初始化国际化
-    i18n.init();
-
-    setupSiteLogo();
-    manager = new CLIProxyManager();
-});

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');

build.cjs

@@ -1,223 +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>`;
-        if (html.includes('</body>')) {
-            html = html.replace('</body>', `${logoScript}\n</body>`);
-        } else {
-            html += `\n${logoScript}`;
-        }
-    } else {
-        console.warn('未找到可内联的 Logo 文件，将保持运行时加载。');
-    }
-
-    const outputPath = path.join(distDir, 'index.html');
-    fs.writeFileSync(outputPath, html, 'utf8');
-
-    console.log('构建完成: dist/index.html');
-}
-
-try {
-    build();
-} catch (error) {
-    console.error('构建失败:', error);
-    process.exit(1);
-}
-
-

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';
-    }
-});

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: '^_' }],
+    },
+  },
+);

package.json

@@ -1,31 +1,45 @@
 {
-  "name": "cli-proxy-api-webui",
-  "version": "1.0.0",
-  "description": "CLI Proxy API 管理界面",
-  "main": "index.html",
+  "name": "cli-proxy-webui-react",
+  "private": true,
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "start": "npx serve .",
-    "dev": "npx serve . -l 3090",
-    "build": "node build.cjs",
-    "lint": "echo '使用浏览器开发者工具检查代码'"
+    "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"
   },
-  "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"
+    "@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"
   }
 }

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;
+}

src/App.tsx

@@ -0,0 +1,79 @@
+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';
+
+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 isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+
+  const [showSplash, setShowSplash] = useState(true);
+
+  useEffect(() => {
+    initializeTheme();
+    restoreSession();
+  }, [initializeTheme, restoreSession]);
+
+  useEffect(() => {
+    setLanguage(language);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // 仅用于首屏同步 i18n 语言
+
+  const handleSplashFinish = useCallback(() => {
+    setShowSplash(false);
+  }, []);
+
+  // 仅在已认证时显示闪屏
+  if (showSplash && isAuthenticated) {
+    return <SplashScreen onFinish={handleSplashFinish} duration={1500} />;
+  }
+
+  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;

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>

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>
+  );
+}

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;
+  }
+}

src/components/common/SplashScreen.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
+import './SplashScreen.scss';
+
+interface SplashScreenProps {
+  onFinish: () => void;
+  duration?: number;
+}
+
+export function SplashScreen({ onFinish, duration = 1500 }: SplashScreenProps) {
+  const [fadeOut, setFadeOut] = useState(false);
+
+  useEffect(() => {
+    const fadeTimer = setTimeout(() => {
+      setFadeOut(true);
+    }, duration - 400);
+
+    const finishTimer = setTimeout(() => {
+      onFinish();
+    }, duration);
+
+    return () => {
+      clearTimeout(fadeTimer);
+      clearTimeout(finishTimer);
+    };
+  }, [duration, 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>
+  );
+}

src/components/layout/MainLayout.tsx

@@ -0,0 +1,384 @@
+import { ReactNode, SVGProps, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+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 { 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>
+	  ),
+	  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 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 theme = useThemeStore((state) => state.theme);
+  const toggleTheme = useThemeStore((state) => state.toggleTheme);
+  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 brandCollapseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const headerRef = useRef<HTMLElement | null>(null);
+
+  const fullBrandName = 'CLI Proxy API Management Center';
+  const abbrBrandName = t('title.abbr');
+
+  // 将顶栏高度写入 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);
+      }
+    };
+  }, []);
+
+  const handleBrandClick = useCallback(() => {
+    if (!brandExpanded) {
+      setBrandExpanded(true);
+      // 点击展开后，5秒后再次收起
+      if (brandCollapseTimer.current) {
+        clearTimeout(brandCollapseTimer.current);
+      }
+      brandCollapseTimer.current = setTimeout(() => {
+        setBrandExpanded(false);
+      }, 5000);
+    }
+  }, [brandExpanded]);
+
+  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={toggleTheme} title={t('theme.switch')}>
+              {theme === 'dark' ? headerIcons.sun : headerIcons.moon}
+            </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">
+          <main className="main-content">
+            <Outlet />
+          </main>
+
+          <footer className="footer">
+            <span>
+              {t('footer.api_version')}: {serverVersion || t('system_info.version_unknown')}
+            </span>
+            <span>
+              {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>
+    </div>
+  );
+}

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>
+  );
+}

src/components/ui/Card.tsx

@@ -0,0 +1,20 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+
+interface CardProps {
+  title?: ReactNode;
+  extra?: ReactNode;
+}
+
+export function Card({ title, extra, children }: PropsWithChildren<CardProps>) {
+  return (
+    <div className="card">
+      {(title || extra) && (
+        <div className="card-header">
+          <div className="title">{title}</div>
+          {extra}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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"
+    />
+  );
+}

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>
+  );
+}

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>
+  );
+}

src/components/ui/ToggleSwitch.tsx

@@ -0,0 +1,24 @@
+import type { ChangeEvent, ReactNode } from 'react';
+
+interface ToggleSwitchProps {
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  label?: ReactNode;
+  disabled?: boolean;
+}
+
+export function ToggleSwitch({ checked, onChange, label, disabled = false }: ToggleSwitchProps) {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked);
+  };
+
+  return (
+    <label className="switch">
+      <input type="checkbox" checked={checked} onChange={handleChange} disabled={disabled} />
+      <span className="track">
+        <span className="thumb" />
+      </span>
+      {label && <span className="label">{label}</span>}
+    </label>
+  );
+}

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>
+  );
+}

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;
-    }
-}

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;
-    }
-}

src/core/connection.js

@@ -1,364 +0,0 @@
-// 连接与配置缓存核心模块
-// 提供 API 基础地址规范化、请求封装、配置缓存以及统一数据加载能力
-
-import { STATUS_UPDATE_INTERVAL_MS, DEFAULT_API_PORT } from '../utils/constants.js';
-import { secureStorage } from '../utils/secure-storage.js';
-
-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();
-        }
-    },
-
-    // 渲染底栏的版本与构建时间
-    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';
-        }
-    },
-
-    // 清空版本信息（例如登出时）
-    resetVersionInfo() {
-        this.serverVersion = null;
-        this.serverBuildDate = null;
-        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;
-    },
-
-    // API 请求方法
-    async makeRequest(endpoint, options = {}) {
-        try {
-            return await this.apiClient.request(endpoint, options);
-        } catch (error) {
-            console.error('API请求失败:', error);
-            throw error;
-        }
-    },
-
-    // 测试连接（简化版，用于内部调用）
-    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';
-        }
-
-        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) {
-            this.configYamlCache = '';
-        }
-    },
-
-    // 启动状态更新定时器
-    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);
-
-            if (this.events && typeof this.events.emit === 'function') {
-                this.events.emit('data:config-loaded', {
-                    config,
-                    usageData,
-                    keyStats,
-                    forceRefresh
-                });
-            }
-
-            console.log('配置加载完成，使用缓存:', !forceRefresh && this.isCacheValid());
-        } catch (error) {
-            console.error('加载配置失败:', error);
-        }
-    },
-
-    // 从配置对象更新所有设置 —— 委派给 settings 模块，保持兼容旧调用
-    async updateSettingsFromConfig(config, keyStats = null) {
-        if (typeof this.applySettingsFromConfig === 'function') {
-            return this.applySettingsFromConfig(config, keyStats);
-        }
-    },
-
-    detectApiBaseFromLocation() {
-        try {
-            const { protocol, hostname, port } = window.location;
-            const normalizedPort = port ? `:${port}` : '';
-            return this.normalizeBase(`${protocol}//${hostname}${normalizedPort}`);
-        } catch (error) {
-            console.warn('无法从当前地址检测 API 基础地址，使用默认设置', error);
-            return this.normalizeBase(this.apiBase || `http://localhost:${DEFAULT_API_PORT}`);
-        }
-    }
-};

src/core/error-handler.js

@@ -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
-    });
-}

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 };
-}

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';

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 };
+}

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;
+}

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]);
+}

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];
+}

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;
+}

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
+  };
+}

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;

src/i18n/locales/en.json

@@ -0,0 +1,759 @@
+{
+  "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",
+    "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_enable": "Enable request logging",
+    "ws_auth_title": "WebSocket Authentication",
+    "ws_auth_enable": "Require auth for /ws/*"
+  },
+  "api_keys": {
+    "title": "API Keys Management",
+    "proxy_auth_title": "Proxy Service Authentication Keys",
+    "add_button": "Add Key",
+    "empty_title": "No API Keys",
+    "empty_desc": "Click the button above to add the first key",
+    "item_title": "API Key",
+    "add_modal_title": "Add API Key",
+    "add_modal_key_label": "API Key:",
+    "add_modal_key_placeholder": "Please enter API key",
+    "edit_modal_title": "Edit API Key",
+    "edit_modal_key_label": "API Key:",
+    "delete_confirm": "Are you sure you want to delete this API key?"
+  },
+  "ai_providers": {
+    "title": "AI Providers Configuration",
+    "gemini_title": "Gemini API Keys",
+    "gemini_add_button": "Add Key",
+    "gemini_empty_title": "No Gemini Keys",
+    "gemini_empty_desc": "Click the button above to add the first key",
+    "gemini_item_title": "Gemini Key",
+    "gemini_add_modal_title": "Add Gemini API Key",
+    "gemini_add_modal_key_label": "API Keys:",
+    "gemini_add_modal_key_placeholder": "Enter Gemini API key",
+    "gemini_add_modal_key_hint": "Add keys one by one and optionally specify a Base URL.",
+    "gemini_keys_add_btn": "Add Key",
+    "gemini_base_url_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",
+    "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 AI Credential Import",
+    "description": "Upload a Google service account JSON to store it as auth-dir/vertex-<project>.json using the same rules as the CLI vertex-import helper.",
+    "location_label": "Region (optional)",
+    "location_placeholder": "us-central1",
+    "location_hint": "Leave empty to use the default region us-central1.",
+    "file_label": "Service account key JSON",
+    "file_hint": "Only Google Cloud service account key JSON files are accepted.",
+    "file_placeholder": "No file selected",
+    "choose_file": "Choose File",
+    "import_button": "Import Vertex Credential",
+    "file_required": "Select a .json credential file first",
+    "success": "Vertex credential imported successfully",
+    "result_title": "Credential saved",
+    "result_project": "Project ID",
+    "result_email": "Service account",
+    "result_location": "Region",
+    "result_file": "Persisted file"
+  },
+  "oauth_excluded": {
+    "title": "OAuth Excluded Models",
+    "description": "Per-provider exclusions are shown as cards; click edit to adjust. Wildcards * are supported and the scope follows the auth file filter.",
+    "add": "Add Exclusion",
+    "add_title": "Add provider exclusion",
+    "edit_title": "Edit exclusions for {{provider}}",
+    "refresh": "Refresh",
+    "refreshing": "Refreshing...",
+    "provider_label": "Provider",
+    "provider_auto": "Follow current filter",
+    "provider_placeholder": "e.g. gemini-cli",
+    "provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
+    "models_label": "Models to exclude",
+    "models_placeholder": "gpt-4.1-mini\n*-preview",
+    "models_hint": "Separate by commas or new lines; saving an empty list removes that provider. * wildcards are supported.",
+    "save": "Save/Update",
+    "saving": "Saving...",
+    "save_success": "Excluded models updated",
+    "save_failed": "Failed to update excluded models",
+    "delete": "Delete Provider",
+    "delete_confirm": "Delete the exclusion list for {{provider}}?",
+    "delete_success": "Exclusion list removed",
+    "delete_failed": "Failed to delete exclusion list",
+    "deleting": "Deleting...",
+    "no_models": "No excluded models",
+    "model_count": "{{count}} models excluded",
+    "list_empty_all": "No exclusions yet—use “Add Exclusion” to create one.",
+    "list_empty_filtered": "No exclusions in this scope; click “Add Exclusion” to add.",
+    "disconnected": "Connect to the server to view exclusions",
+    "load_failed": "Failed to load exclusion list",
+    "provider_required": "Please enter a provider first",
+    "scope_all": "Scope: All providers",
+    "scope_provider": "Scope: {{provider}}",
+    "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",
+    "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_empty": "No error request log files found",
+    "error_logs_load_error": "Failed to load error log list",
+    "error_logs_size": "Size",
+    "error_logs_modified": "Last modified",
+    "error_logs_download": "Download",
+    "error_log_download_success": "Error log downloaded successfully",
+    "empty_title": "No Logs Available",
+    "empty_desc": "When \"Enable logging to file\" is enabled, logs will be displayed here",
+    "log_content": "Log Content",
+    "loading": "Loading logs...",
+    "load_error": "Failed to load logs",
+    "clear_confirm": "Are you sure you want to clear all logs? This action cannot be undone!",
+    "clear_success": "Logs cleared successfully",
+    "download_success": "Logs downloaded successfully",
+    "auto_refresh": "Auto Refresh",
+    "auto_refresh_enabled": "Auto refresh enabled",
+    "auto_refresh_disabled": "Auto refresh disabled",
+    "load_more_hint": "Scroll up to load more",
+    "hidden_lines": "Hidden: {{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"
+  }
+}

src/i18n/locales/zh-CN.json

@@ -0,0 +1,759 @@
+{
+  "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": "地址",
+    "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_enable": "启用请求日志",
+    "ws_auth_title": "WebSocket 鉴权",
+    "ws_auth_enable": "启用 /ws/* 鉴权"
+  },
+  "api_keys": {
+    "title": "API 密钥管理",
+    "proxy_auth_title": "代理服务认证密钥",
+    "add_button": "添加密钥",
+    "empty_title": "暂无API密钥",
+    "empty_desc": "点击上方按钮添加第一个密钥",
+    "item_title": "API密钥",
+    "add_modal_title": "添加API密钥",
+    "add_modal_key_label": "API密钥:",
+    "add_modal_key_placeholder": "请输入API密钥",
+    "edit_modal_title": "编辑API密钥",
+    "edit_modal_key_label": "API密钥:",
+    "delete_confirm": "确定要删除这个API密钥吗？"
+  },
+  "ai_providers": {
+    "title": "AI 提供商配置",
+    "gemini_title": "Gemini API 密钥",
+    "gemini_add_button": "添加密钥",
+    "gemini_empty_title": "暂无Gemini密钥",
+    "gemini_empty_desc": "点击上方按钮添加第一个密钥",
+    "gemini_item_title": "Gemini密钥",
+    "gemini_add_modal_title": "添加Gemini API密钥",
+    "gemini_add_modal_key_label": "API密钥",
+    "gemini_add_modal_key_placeholder": "输入 Gemini API 密钥",
+    "gemini_add_modal_key_hint": "逐条输入密钥，可同时指定可选 Base URL。",
+    "gemini_keys_add_btn": "添加密钥",
+    "gemini_base_url_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}} 个模型",
+    "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 AI 凭证导入",
+    "description": "上传 Google 服务账号 JSON，使用 CLI vertex-import 同步规则写入 auth-dir/vertex-<project>.json。",
+    "location_label": "目标区域 (可选)",
+    "location_placeholder": "us-central1",
+    "location_hint": "留空表示使用默认区域 us-central1。",
+    "file_label": "服务账号密钥 JSON",
+    "file_hint": "仅支持 Google Cloud service account key JSON 文件，私钥会自动规范化。",
+    "file_placeholder": "尚未选择文件",
+    "choose_file": "选择文件",
+    "import_button": "导入 Vertex 凭证",
+    "file_required": "请先选择 .json 凭证文件",
+    "success": "Vertex 凭证导入成功",
+    "result_title": "凭证已保存",
+    "result_project": "项目 ID",
+    "result_email": "服务账号",
+    "result_location": "区域",
+    "result_file": "存储文件"
+  },
+  "oauth_excluded": {
+    "title": "OAuth 排除列表",
+    "description": "按提供商分列展示，点击卡片编辑或删除；支持 * 通配符，范围跟随上方的配置文件过滤标签。",
+    "add": "新增排除",
+    "add_title": "新增提供商排除列表",
+    "edit_title": "编辑 {{provider}} 的排除列表",
+    "refresh": "刷新",
+    "refreshing": "刷新中...",
+    "provider_label": "提供商",
+    "provider_auto": "跟随当前过滤",
+    "provider_placeholder": "例如 gemini-cli / openai",
+    "provider_hint": "默认选中当前筛选的提供商，也可直接输入或选择其他名称。",
+    "models_label": "排除的模型",
+    "models_placeholder": "gpt-4.1-mini\n*-preview",
+    "models_hint": "逗号或换行分隔；留空保存将删除该提供商记录；支持 * 通配符。",
+    "save": "保存/更新",
+    "saving": "正在保存...",
+    "save_success": "排除列表已更新",
+    "save_failed": "更新排除列表失败",
+    "delete": "删除提供商",
+    "delete_confirm": "确定要删除 {{provider}} 的排除列表吗？",
+    "delete_success": "已删除该提供商的排除列表",
+    "delete_failed": "删除排除列表失败",
+    "deleting": "正在删除...",
+    "no_models": "未配置排除模型",
+    "model_count": "排除 {{count}} 个模型",
+    "list_empty_all": "暂无任何提供商的排除列表，点击“新增排除”创建。",
+    "list_empty_filtered": "当前筛选下没有排除项，点击“新增排除”添加。",
+    "disconnected": "请先连接服务器以查看排除列表",
+    "load_failed": "加载排除列表失败",
+    "provider_required": "请先填写提供商名称",
+    "scope_all": "当前范围：全局（显示所有提供商）",
+    "scope_provider": "当前范围：{{provider}}",
+    "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": "刷新",
+    "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_empty": "暂无错误请求日志文件",
+    "error_logs_load_error": "加载错误日志列表失败",
+    "error_logs_size": "大小",
+    "error_logs_modified": "最后修改",
+    "error_logs_download": "下载",
+    "error_log_download_success": "错误日志下载成功",
+    "empty_title": "暂无日志记录",
+    "empty_desc": "当启用\"日志记录到文件\"功能后，日志将显示在这里",
+    "log_content": "日志内容",
+    "loading": "正在加载日志...",
+    "load_error": "加载日志失败",
+    "clear_confirm": "确定要清空所有日志吗？此操作不可恢复！",
+    "clear_success": "日志已清空",
+    "download_success": "日志下载成功",
+    "auto_refresh": "自动刷新",
+    "auto_refresh_enabled": "自动刷新已开启",
+    "auto_refresh_disabled": "自动刷新已关闭",
+    "load_more_hint": "向上滚动加载更多",
+    "hidden_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": "作者"
+  }
+}

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;
+  }
+}

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>
+);

src/modules/api-keys.js

@@ -1,380 +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;
-        }
-
-        container.innerHTML = 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-item">
-                <div class="item-content">
-                    <div class="item-title">${i18n.t('api_keys.item_title')} #${index + 1}</div>
-                    <div class="item-value">${maskedDisplay}</div>
-                </div>
-                <div class="item-actions">
-                    <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('');
-
-        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) {
-        const result = {
-            ...original,
-            'api-key': apiKey,
-            'base-url': baseUrl || '',
-            'proxy-url': proxyUrl || ''
-        };
-        this.applyHeadersToConfig(result, headers);
-        return result;
-    },
-
-    // 显示添加API密钥模态框
-    showAddApiKeyModal() {
-        const modal = document.getElementById('modal');
-        const modalBody = document.getElementById('modal-body');
-
-        modalBody.innerHTML = `
-            <h3>${i18n.t('api_keys.add_modal_title')}</h3>
-            <div class="form-group">
-                <label for="new-api-key">${i18n.t('api_keys.add_modal_key_label')}</label>
-                <input type="text" id="new-api-key" placeholder="${i18n.t('api_keys.add_modal_key_placeholder')}">
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.addApiKey()">${i18n.t('common.add')}</button>
-            </div>
-        `;
-
-        modal.style.display = 'block';
-    },
-
-    // 添加API密钥
-    async addApiKey() {
-        const newKey = document.getElementById('new-api-key').value.trim();
-
-        if (!newKey) {
-            this.showNotification(`${i18n.t('notification.please_enter')} ${i18n.t('notification.api_key')}`, 'error');
-            return;
-        }
-
-        try {
-            const data = await this.makeRequest('/api-keys');
-            const currentKeys = data['api-keys'] || [];
-            currentKeys.push(newKey);
-
-            await this.makeRequest('/api-keys', {
-                method: 'PUT',
-                body: JSON.stringify(currentKeys)
-            });
-
-            this.clearCache('api-keys'); // 仅清除 api-keys 段缓存
-            this.closeModal();
-            this.loadApiKeys();
-            this.showNotification(i18n.t('notification.api_key_added'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.add_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    // 编辑API密钥
-    editApiKey(index, currentKey) {
-        const modal = document.getElementById('modal');
-        const modalBody = document.getElementById('modal-body');
-
-        modalBody.innerHTML = `
-            <h3>${i18n.t('api_keys.edit_modal_title')}</h3>
-            <div class="form-group">
-                <label for="edit-api-key">${i18n.t('api_keys.edit_modal_key_label')}</label>
-                <input type="text" id="edit-api-key" value="${currentKey}">
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
-                <button class="btn btn-primary" onclick="manager.updateApiKey(${index})">${i18n.t('common.update')}</button>
-            </div>
-        `;
-
-        modal.style.display = 'block';
-    },
-
-    // 更新API密钥
-    async updateApiKey(index) {
-        const newKey = document.getElementById('edit-api-key').value.trim();
-
-        if (!newKey) {
-            this.showNotification(`${i18n.t('notification.please_enter')} ${i18n.t('notification.api_key')}`, 'error');
-            return;
-        }
-
-        try {
-            await this.makeRequest('/api-keys', {
-                method: 'PATCH',
-                body: JSON.stringify({ index, value: newKey })
-            });
-
-            this.clearCache('api-keys'); // 仅清除 api-keys 段缓存
-            this.closeModal();
-            this.loadApiKeys();
-            this.showNotification(i18n.t('notification.api_key_updated'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.update_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    // 删除API密钥
-    async deleteApiKey(index) {
-        if (!confirm(i18n.t('api_keys.delete_confirm'))) return;
-
-        try {
-            await this.makeRequest(`/api-keys?index=${index}`, { method: 'DELETE' });
-            this.clearCache('api-keys'); // 仅清除 api-keys 段缓存
-            this.loadApiKeys();
-            this.showNotification(i18n.t('notification.api_key_deleted'), 'success');
-        } catch (error) {
-            this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    bindApiKeyListEvents(container = null) {
-        if (this.apiKeyListEventsBound) {
-            return;
-        }
-        const listContainer = container || document.getElementById('api-keys-list');
-        if (!listContainer) return;
-
-        listContainer.addEventListener('click', (event) => {
-            const button = event.target.closest('[data-action][data-index]');
-            if (!button || !listContainer.contains(button)) return;
-
-            const action = button.dataset.action;
-            const index = Number(button.dataset.index);
-            if (!Number.isFinite(index)) return;
-
-            switch (action) {
-                case 'edit-api-key': {
-                    const rawKey = button.dataset.key || '';
-                    let decodedKey = '';
-                    try {
-                        decodedKey = decodeURIComponent(rawKey);
-                    } catch (e) {
-                        decodedKey = rawKey;
-                    }
-                    this.editApiKey(index, decodedKey);
-                    break;
-                }
-                case 'delete-api-key':
-                    this.deleteApiKey(index);
-                    break;
-                default:
-                    break;
-            }
-        });
-
-        this.apiKeyListEventsBound = true;
-    }
-};

src/modules/config-editor.js

@@ -1,273 +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.setSize('100%', '100%');
-            editorInstance.on('change', () => {
-                this.isConfigEditorDirty = true;
-                this.updateConfigEditorStatus('info', i18n.t('config_management.status_dirty'));
-            });
-
-            this.configEditorElements.editorInstance = editorInstance;
-        } else {
-            textarea.addEventListener('input', () => {
-                this.isConfigEditorDirty = true;
-                this.updateConfigEditorStatus('info', i18n.t('config_management.status_dirty'));
-            });
-        }
-
-        saveBtn.addEventListener('click', () => this.saveConfigFile());
-        reloadBtn.addEventListener('click', () => this.loadConfigFileEditor(true));
-
-        this.refreshConfigEditor();
-    },
-
-    updateConfigEditorAvailability() {
-        const { textarea, editorInstance, saveBtn, reloadBtn } = this.configEditorElements || {};
-        if ((!textarea && !editorInstance) || !saveBtn || !reloadBtn) {
-            return;
-        }
-
-        const disabled = !this.isConnected;
-        if (editorInstance) {
-            editorInstance.setOption('readOnly', disabled ? 'nocursor' : false);
-            const wrapper = editorInstance.getWrapperElement();
-            if (wrapper) {
-                wrapper.classList.toggle('cm-readonly', disabled);
-            }
-        } else if (textarea) {
-            textarea.disabled = disabled;
-        }
-
-        saveBtn.disabled = disabled;
-        reloadBtn.disabled = disabled;
-
-        if (disabled) {
-            this.updateConfigEditorStatus('info', i18n.t('config_management.status_disconnected'));
-        }
-
-        this.refreshConfigEditor();
-        this.lastEditorConnectionState = this.isConnected;
-    },
-
-    refreshConfigEditor() {
-        const instance = this.configEditorElements && this.configEditorElements.editorInstance;
-        if (instance && typeof instance.refresh === 'function') {
-            setTimeout(() => instance.refresh(), 0);
-        }
-    },
-
-    updateConfigEditorStatus(type, message) {
-        const statusEl = (this.configEditorElements && this.configEditorElements.statusEl) || document.getElementById('config-editor-status');
-        if (!statusEl) {
-            return;
-        }
-
-        statusEl.textContent = message;
-        statusEl.classList.remove('success', 'error');
-
-        if (type === 'success') {
-            statusEl.classList.add('success');
-        } else if (type === 'error') {
-            statusEl.classList.add('error');
-        }
-    },
-
-    async loadConfigFileEditor(forceRefresh = false) {
-        const { textarea, editorInstance, reloadBtn } = this.configEditorElements || {};
-        if (!textarea && !editorInstance) {
-            return;
-        }
-
-        if (!this.isConnected) {
-            this.updateConfigEditorStatus('info', i18n.t('config_management.status_disconnected'));
-            return;
-        }
-
-        if (reloadBtn) {
-            reloadBtn.disabled = true;
-        }
-        this.updateConfigEditorStatus('info', i18n.t('config_management.status_loading'));
-
-        try {
-            const yamlText = await this.fetchConfigFile(forceRefresh);
-
-            if (editorInstance) {
-                editorInstance.setValue(yamlText || '');
-                if (typeof editorInstance.markClean === 'function') {
-                    editorInstance.markClean();
-                }
-            } else if (textarea) {
-                textarea.value = yamlText || '';
-            }
-
-            this.isConfigEditorDirty = false;
-            this.updateConfigEditorStatus('success', i18n.t('config_management.status_loaded'));
-            this.refreshConfigEditor();
-        } catch (error) {
-            console.error('加载配置文件失败:', error);
-            this.updateConfigEditorStatus('error', `${i18n.t('config_management.status_load_failed')}: ${error.message}`);
-        } finally {
-            if (reloadBtn) {
-                reloadBtn.disabled = !this.isConnected;
-            }
-        }
-    },
-
-    async fetchConfigFile(forceRefresh = false) {
-        if (!forceRefresh && this.configYamlCache) {
-            return this.configYamlCache;
-        }
-
-        const requestUrl = '/config.yaml';
-
-        try {
-            const response = await this.apiClient.requestRaw(requestUrl, {
-                method: 'GET',
-                headers: {
-                    'Accept': 'application/yaml'
-                }
-            });
-
-            if (!response.ok) {
-                const errorText = await response.text().catch(() => '');
-                const message = errorText || `HTTP ${response.status}`;
-                throw new Error(message);
-            }
-
-            const contentType = response.headers.get('content-type') || '';
-            if (!/yaml/i.test(contentType)) {
-                throw new Error(i18n.t('config_management.error_yaml_not_supported'));
-            }
-
-            const text = await response.text();
-            this.lastConfigFetchUrl = requestUrl;
-            this.configYamlCache = text;
-            return text;
-        } catch (error) {
-            throw error instanceof Error ? error : new Error(String(error));
-        }
-    },
-
-    async saveConfigFile() {
-        const { textarea, editorInstance, saveBtn, reloadBtn } = this.configEditorElements || {};
-        if ((!textarea && !editorInstance) || !saveBtn) {
-            return;
-        }
-
-        if (!this.isConnected) {
-            this.updateConfigEditorStatus('error', i18n.t('config_management.status_disconnected'));
-            return;
-        }
-
-        const yamlText = editorInstance ? editorInstance.getValue() : (textarea ? textarea.value : '');
-
-        saveBtn.disabled = true;
-        if (reloadBtn) {
-            reloadBtn.disabled = true;
-        }
-        this.updateConfigEditorStatus('info', i18n.t('config_management.status_saving'));
-
-        try {
-            await this.writeConfigFile('/config.yaml', yamlText);
-            this.lastConfigFetchUrl = '/config.yaml';
-            this.configYamlCache = yamlText;
-            this.isConfigEditorDirty = false;
-            if (editorInstance && typeof editorInstance.markClean === 'function') {
-                editorInstance.markClean();
-            }
-            this.showNotification(i18n.t('config_management.save_success'), 'success');
-            this.updateConfigEditorStatus('success', i18n.t('config_management.status_saved'));
-            this.clearCache();
-            if (this.events && typeof this.events.emit === 'function') {
-                this.events.emit('config:refresh-requested', { forceRefresh: true });
-            }
-        } catch (error) {
-            const errorMessage = `${i18n.t('config_management.status_save_failed')}: ${error.message}`;
-            this.updateConfigEditorStatus('error', errorMessage);
-            this.showNotification(errorMessage, 'error');
-            this.isConfigEditorDirty = true;
-        } finally {
-            saveBtn.disabled = !this.isConnected;
-            if (reloadBtn) {
-                reloadBtn.disabled = !this.isConnected;
-            }
-        }
-    },
-
-    async writeConfigFile(endpoint, yamlText) {
-        const response = await this.apiClient.requestRaw(endpoint, {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/yaml',
-                'Accept': 'application/json, text/plain, */*'
-            },
-            body: yamlText
-        });
-
-        if (!response.ok) {
-            const contentType = response.headers.get('content-type') || '';
-            let errorText = '';
-            if (contentType.includes('application/json')) {
-                const data = await response.json().catch(() => ({}));
-                errorText = data.message || data.error || '';
-            } else {
-                errorText = await response.text().catch(() => '');
-            }
-            throw new Error(errorText || `HTTP ${response.status}`);
-        }
-
-        const contentType = response.headers.get('content-type') || '';
-        if (contentType.includes('application/json')) {
-            const data = await response.json().catch(() => null);
-            if (data && data.ok === false) {
-                throw new Error(data.message || data.error || 'Server rejected the update');
-            }
-        }
-    },
-
-    registerConfigEditorListeners() {
-        if (!this.events || typeof this.events.on !== 'function') {
-            return;
-        }
-        this.events.on('data:config-loaded', async (event) => {
-            const detail = event?.detail || {};
-            try {
-                await this.loadConfigFileEditor(detail.forceRefresh || false);
-                this.refreshConfigEditor();
-            } catch (error) {
-                console.error('加载配置文件失败:', error);
-            }
-        });
-    }
-};

src/modules/language.js

@@ -1,36 +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.updateThemeButtons();
-        this.updateConnectionStatus();
-
-        if (this.isLoggedIn && this.isConnected && this.events && typeof this.events.emit === 'function') {
-            this.events.emit('config:refresh-requested', { forceRefresh: true });
-        }
-
-        // 简单释放锁，避免短时间内的重复触发
-        setTimeout(() => {
-            this.isLanguageRefreshInProgress = false;
-        }, 500);
-    }
-};

src/modules/login.js

@@ -1,271 +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.updateLoginConnectionInfo();
-    },
-
-    showMainPage() {
-        document.getElementById('login-page').style.display = 'none';
-        document.getElementById('main-page').style.display = 'block';
-        this.isLoggedIn = true;
-        this.updateConnectionInfo();
-    },
-
-    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 });
-
-        localStorage.removeItem('isLoggedIn');
-        secureStorage.removeItem('managementKey');
-
-        this.showLoginPage();
-    },
-
-    async handleLogin() {
-        const apiBaseInput = document.getElementById('login-api-base');
-        const managementKeyInput = document.getElementById('login-management-key');
-        const managementKey = managementKeyInput ? managementKeyInput.value.trim() : '';
-
-        if (!managementKey) {
-            this.showLoginError(i18n.t('login.error_required'));
-            return;
-        }
-
-        if (apiBaseInput && apiBaseInput.value.trim()) {
-            this.setApiBase(apiBaseInput.value.trim());
-        }
-
-        const submitBtn = document.getElementById('login-submit');
-        const originalText = submitBtn ? submitBtn.innerHTML : '';
-
-        try {
-            if (submitBtn) {
-                submitBtn.innerHTML = `<div class=\"loading\"></div> ${i18n.t('login.submitting')}`;
-                submitBtn.disabled = true;
-            }
-            this.hideLoginError();
-
-            this.setManagementKey(managementKey);
-
-            await this.login(this.apiBase, this.managementKey);
-        } catch (error) {
-            this.showLoginError(`${i18n.t('login.error_title')}: ${error.message}`);
-        } finally {
-            if (submitBtn) {
-                submitBtn.innerHTML = originalText;
-                submitBtn.disabled = false;
-            }
-        }
-    },
-
-    toggleLoginKeyVisibility(button) {
-        const inputGroup = button.closest('.input-group');
-        const keyInput = inputGroup.querySelector('input[type=\"password\"], input[type=\"text\"]');
-
-        if (keyInput.type === 'password') {
-            keyInput.type = 'text';
-            button.innerHTML = '<i class=\"fas fa-eye-slash\"></i>';
-        } else {
-            keyInput.type = 'password';
-            button.innerHTML = '<i class=\"fas fa-eye\"></i>';
-        }
-    },
-
-    showLoginError(message) {
-        const errorDiv = document.getElementById('login-error');
-        const errorMessage = document.getElementById('login-error-message');
-
-        errorMessage.textContent = message;
-        errorDiv.style.display = 'flex';
-    },
-
-    hideLoginError() {
-        const errorDiv = document.getElementById('login-error');
-        errorDiv.style.display = 'none';
-    },
-
-    updateConnectionInfo() {
-        const apiUrlElement = document.getElementById('display-api-url');
-        const statusElement = document.getElementById('display-connection-status');
-
-        if (apiUrlElement) {
-            apiUrlElement.textContent = this.apiBase || '-';
-        }
-
-        if (statusElement) {
-            let statusHtml = '';
-            if (this.isConnected) {
-                statusHtml = `<span class=\"status-indicator connected\"><i class=\"fas fa-circle\"></i> ${i18n.t('common.connected')}</span>`;
-            } else {
-                statusHtml = `<span class=\"status-indicator disconnected\"><i class=\"fas fa-circle\"></i> ${i18n.t('common.disconnected')}</span>`;
-            }
-            statusElement.innerHTML = statusHtml;
-        }
-    },
-
-    loadLoginSettings() {
-        const savedBase = secureStorage.getItem('apiBase');
-        const savedKey = secureStorage.getItem('managementKey');
-        const loginKeyInput = document.getElementById('login-management-key');
-        const apiBaseInput = document.getElementById('login-api-base');
-
-        if (savedBase) {
-            this.setApiBase(savedBase);
-        } else {
-            this.setApiBase(this.detectApiBaseFromLocation());
-        }
-
-        if (apiBaseInput) {
-            apiBaseInput.value = this.apiBase || '';
-        }
-
-        if (loginKeyInput && savedKey) {
-            loginKeyInput.value = savedKey;
-        }
-        this.setManagementKey(savedKey || '', { persist: false });
-
-        this.setupLoginAutoSave();
-    },
-
-    setupLoginAutoSave() {
-        const loginKeyInput = document.getElementById('login-management-key');
-        const apiBaseInput = document.getElementById('login-api-base');
-        const resetButton = document.getElementById('login-reset-api-base');
-
-        const saveKey = (val) => {
-            const trimmed = val.trim();
-            if (trimmed) {
-                this.setManagementKey(trimmed);
-            }
-        };
-        const saveKeyDebounced = this.debounce(saveKey, 500);
-
-        if (loginKeyInput) {
-            loginKeyInput.addEventListener('change', (e) => saveKey(e.target.value));
-            loginKeyInput.addEventListener('input', (e) => saveKeyDebounced(e.target.value));
-        }
-
-        if (apiBaseInput) {
-            const persistBase = (val) => {
-                const normalized = this.normalizeBase(val);
-                if (normalized) {
-                    this.setApiBase(normalized);
-                }
-            };
-            const persistBaseDebounced = this.debounce(persistBase, 500);
-
-            apiBaseInput.addEventListener('change', (e) => persistBase(e.target.value));
-            apiBaseInput.addEventListener('input', (e) => persistBaseDebounced(e.target.value));
-        }
-
-        if (resetButton) {
-            resetButton.addEventListener('click', () => {
-                const detected = this.detectApiBaseFromLocation();
-                this.setApiBase(detected);
-                if (apiBaseInput) {
-                    apiBaseInput.value = detected;
-                }
-            });
-        }
-
-        this.updateLoginConnectionInfo();
-    },
-
-    updateLoginConnectionInfo() {
-        const connectionUrlElement = document.getElementById('login-connection-url');
-        const customInput = document.getElementById('login-api-base');
-        if (connectionUrlElement) {
-            connectionUrlElement.textContent = this.apiBase || '-';
-        }
-        if (customInput && customInput !== document.activeElement) {
-            customInput.value = this.apiBase || '';
-        }
-    }
-};

src/modules/logs.js

@@ -1,434 +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';
-            if (incremental && this.latestLogTimestamp) {
-                url += `?after=${this.latestLogTimestamp}`;
-            }
-
-            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) {
-                    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>';
-                    this.latestLogTimestamp = null;
-                }
-            } else if (!incremental) {
-                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>';
-                this.latestLogTimestamp = null;
-            }
-        } catch (error) {
-            console.error('加载日志失败:', error);
-            if (!incremental) {
-                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;
-
-        if (!lines || lines.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 filteredLines = lines.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.displayedLogLines = displayedLines.slice();
-
-        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) {
-            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;
-
-        this.displayedLogLines = this.displayedLogLines.concat(filteredNewLines);
-        if (this.displayedLogLines.length > this.maxDisplayLogLines) {
-            this.displayedLogLines = this.displayedLogLines.slice(this.displayedLogLines.length - this.maxDisplayLogLines);
-        }
-
-        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) {
-            logsTextElement.scrollTop = logsTextElement.scrollHeight;
-        }
-    },
-
-    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 downloadLogs() {
-        try {
-            const response = await this.makeRequest('/logs', {
-                method: 'GET'
-            });
-
-            if (response && response.lines && response.lines.length > 0) {
-                const logsText = response.lines.join('\n');
-                const blob = new Blob([logsText], { type: 'text/plain' });
-                const url = window.URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `cli-proxy-api-logs-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.log`;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                window.URL.revokeObjectURL(url);
-                this.showNotification(i18n.t('logs.download_success'), 'success');
-            } else {
-                this.showNotification(i18n.t('logs.empty_title'), 'info');
-            }
-        } catch (error) {
-            console.error('下载日志失败:', error);
-            this.showNotification(`${i18n.t('notification.download_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    async clearLogs() {
-        if (!confirm(i18n.t('logs.clear_confirm'))) {
-            return;
-        }
-
-        try {
-            const response = await this.makeRequest('/logs', {
-                method: 'DELETE'
-            });
-
-            if (response && response.status === 'ok') {
-                const removedCount = response.removed || 0;
-                const message = `${i18n.t('logs.clear_success')} (${i18n.t('logs.removed')}: ${removedCount} ${i18n.t('logs.lines')})`;
-                this.showNotification(message, 'success');
-            } else {
-                this.showNotification(i18n.t('logs.clear_success'), 'success');
-            }
-
-            this.latestLogTimestamp = null;
-            await this.refreshLogs(false);
-        } catch (error) {
-            console.error('清空日志失败:', error);
-            this.showNotification(`${i18n.t('notification.delete_failed')}: ${error.message}`, 'error');
-        }
-    },
-
-    toggleLogsAutoRefresh(enabled) {
-        if (enabled) {
-            if (this.logsRefreshTimer) {
-                clearInterval(this.logsRefreshTimer);
-            }
-            this.logsRefreshTimer = setInterval(() => {
-                const logsSection = document.getElementById('logs');
-                if (logsSection && logsSection.classList.contains('active')) {
-                    this.refreshLogs(true);
-                }
-            }, 5000);
-            this.showNotification(i18n.t('logs.auto_refresh_enabled'), 'success');
-        } else {
-            if (this.logsRefreshTimer) {
-                clearInterval(this.logsRefreshTimer);
-                this.logsRefreshTimer = null;
-            }
-            this.showNotification(i18n.t('logs.auto_refresh_disabled'), 'info');
-        }
-    },
-
-    registerLogsListeners() {
-        if (!this.events || typeof this.events.on !== 'function') {
-            return;
-        }
-        this.events.on('connection:status-changed', (event) => {
-            const detail = event?.detail || {};
-            if (detail.isConnected) {
-                // 仅在日志页激活时刷新，避免非日志页面触发请求
-                const logsSection = document.getElementById('logs');
-                if (logsSection && logsSection.classList.contains('active')) {
-                    this.refreshLogs(false);
-                }
-            } else {
-                this.latestLogTimestamp = null;
-            }
-        });
-        this.events.on('navigation:section-activated', (event) => {
-            const detail = event?.detail || {};
-            if (detail.sectionId === 'logs' && this.isConnected) {
-                this.refreshLogs(false);
-            }
-        });
-    }
-};

src/modules/navigation.js

@@ -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');
-                    }
-                }
-            }
-        }
-    }
-};

src/modules/oauth.js

@@ -1,738 +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 = '';
-        }
-    },
-
-    // ===== Gemini CLI OAuth 相关方法 =====
-
-    // 开始 Gemini CLI OAuth 流程
-    async startGeminiCliOAuth() {
-        try {
-            const response = await this.makeRequest('/gemini-cli-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('gemini-cli-oauth-url');
-            const content = document.getElementById('gemini-cli-oauth-content');
-            const status = document.getElementById('gemini-cli-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.gemini_cli_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startGeminiCliOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.gemini_cli_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 Gemini CLI 授权链接
-    openGeminiCliLink() {
-        const urlInput = document.getElementById('gemini-cli-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Gemini CLI 授权链接
-    async copyGeminiCliLink() {
-        const urlInput = document.getElementById('gemini-cli-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 Gemini CLI OAuth 状态
-    startGeminiCliOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('gemini-cli-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetGeminiCliOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.gemini_cli_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.gemini_cli_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.gemini_cli_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetGeminiCliOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.gemini_cli_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('gemini-cli-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.gemini_cli_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.gemini_cli_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetGeminiCliOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Gemini CLI OAuth UI 到初始状态
-    resetGeminiCliOAuthUI() {
-        const urlInput = document.getElementById('gemini-cli-oauth-url');
-        const content = document.getElementById('gemini-cli-oauth-content');
-        const status = document.getElementById('gemini-cli-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== Qwen OAuth 相关方法 =====
-
-    // 开始 Qwen OAuth 流程
-    async startQwenOAuth() {
-        try {
-            const response = await this.makeRequest('/qwen-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('qwen-oauth-url');
-            const content = document.getElementById('qwen-oauth-content');
-            const status = document.getElementById('qwen-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.qwen_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startQwenOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.qwen_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 Qwen 授权链接
-    openQwenLink() {
-        const urlInput = document.getElementById('qwen-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 Qwen 授权链接
-    async copyQwenLink() {
-        const urlInput = document.getElementById('qwen-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 Qwen OAuth 状态
-    startQwenOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('qwen-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetQwenOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.qwen_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.qwen_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.qwen_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetQwenOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.qwen_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('qwen-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.qwen_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.qwen_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetQwenOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 Qwen OAuth UI 到初始状态
-    resetQwenOAuthUI() {
-        const urlInput = document.getElementById('qwen-oauth-url');
-        const content = document.getElementById('qwen-oauth-content');
-        const status = document.getElementById('qwen-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    },
-
-    // ===== iFlow OAuth 相关方法 =====
-
-    // 开始 iFlow OAuth 流程
-    async startIflowOAuth() {
-        try {
-            const response = await this.makeRequest('/iflow-auth-url?is_webui=1');
-            const authUrl = response.url;
-            const state = this.extractStateFromUrl(authUrl);
-
-            // 显示授权链接
-            const urlInput = document.getElementById('iflow-oauth-url');
-            const content = document.getElementById('iflow-oauth-content');
-            const status = document.getElementById('iflow-oauth-status');
-
-            if (urlInput) {
-                urlInput.value = authUrl;
-            }
-            if (content) {
-                content.style.display = 'block';
-            }
-            if (status) {
-                status.textContent = i18n.t('auth_login.iflow_oauth_status_waiting');
-                status.style.color = 'var(--warning-text)';
-            }
-
-            // 开始轮询认证状态
-            this.startIflowOAuthPolling(state);
-
-        } catch (error) {
-            this.showNotification(`${i18n.t('auth_login.iflow_oauth_start_error')} ${error.message}`, 'error');
-        }
-    },
-
-    // 打开 iFlow 授权链接
-    openIflowLink() {
-        const urlInput = document.getElementById('iflow-oauth-url');
-        if (urlInput && urlInput.value) {
-            window.open(urlInput.value, '_blank');
-        }
-    },
-
-    // 复制 iFlow 授权链接
-    async copyIflowLink() {
-        const urlInput = document.getElementById('iflow-oauth-url');
-        if (urlInput && urlInput.value) {
-            try {
-                await navigator.clipboard.writeText(urlInput.value);
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            } catch (error) {
-                // 降级方案：使用传统的复制方法
-                urlInput.select();
-                document.execCommand('copy');
-                this.showNotification(i18n.t('notification.link_copied'), 'success');
-            }
-        }
-    },
-
-    // 开始轮询 iFlow OAuth 状态
-    startIflowOAuthPolling(state) {
-        if (!state) {
-            this.showNotification(i18n.t('auth_login.missing_state'), 'error');
-            return;
-        }
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
-                const status = response.status;
-                const statusElement = document.getElementById('iflow-oauth-status');
-
-                if (status === 'ok') {
-                    // 认证成功
-                    clearInterval(pollInterval);
-                    // 隐藏授权链接相关内容，恢复到初始状态
-                    this.resetIflowOAuthUI();
-                    // 显示成功通知
-                    this.showNotification(i18n.t('auth_login.iflow_oauth_status_success'), 'success');
-                    // 刷新认证文件列表
-                    this.loadAuthFiles();
-                } else if (status === 'error') {
-                    // 认证失败
-                    clearInterval(pollInterval);
-                    const errorMessage = response.error || 'Unknown error';
-                    // 显示错误信息
-                    if (statusElement) {
-                        statusElement.textContent = `${i18n.t('auth_login.iflow_oauth_status_error')} ${errorMessage}`;
-                        statusElement.style.color = 'var(--error-text)';
-                    }
-                    this.showNotification(`${i18n.t('auth_login.iflow_oauth_status_error')} ${errorMessage}`, 'error');
-                    // 3秒后重置UI，让用户能够重新开始
-                    setTimeout(() => {
-                        this.resetIflowOAuthUI();
-                    }, 3000);
-                } else if (status === 'wait') {
-                    // 继续等待
-                    if (statusElement) {
-                        statusElement.textContent = i18n.t('auth_login.iflow_oauth_status_waiting');
-                        statusElement.style.color = 'var(--warning-text)';
-                    }
-                }
-            } catch (error) {
-                clearInterval(pollInterval);
-                const statusElement = document.getElementById('iflow-oauth-status');
-                if (statusElement) {
-                    statusElement.textContent = `${i18n.t('auth_login.iflow_oauth_polling_error')} ${error.message}`;
-                    statusElement.style.color = 'var(--error-text)';
-                }
-                this.showNotification(`${i18n.t('auth_login.iflow_oauth_polling_error')} ${error.message}`, 'error');
-                // 3秒后重置UI，让用户能够重新开始
-                setTimeout(() => {
-                    this.resetIflowOAuthUI();
-                }, 3000);
-            }
-        }, 2000); // 每2秒轮询一次
-
-        // 设置超时，5分钟后停止轮询
-        setTimeout(() => {
-            clearInterval(pollInterval);
-        }, 5 * 60 * 1000);
-    },
-
-    // 重置 iFlow OAuth UI 到初始状态
-    resetIflowOAuthUI() {
-        const urlInput = document.getElementById('iflow-oauth-url');
-        const content = document.getElementById('iflow-oauth-content');
-        const status = document.getElementById('iflow-oauth-status');
-
-        // 清空并隐藏授权链接输入框
-        if (urlInput) {
-            urlInput.value = '';
-        }
-
-        // 隐藏整个授权链接内容区域
-        if (content) {
-            content.style.display = 'none';
-        }
-
-        // 清空状态显示
-        if (status) {
-            status.textContent = '';
-            status.style.color = '';
-            status.className = '';
-        }
-    }
-};
-

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
-};

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());
-        }
-    }
-};

src/modules/usage.js

@@ -1,758 +0,0 @@
-// 获取API密钥的统计信息
-export async function getKeyStats(usageData = null) {
-    try {
-        let usage = usageData;
-        if (!usage) {
-            const response = await this.makeRequest('/usage');
-            usage = response?.usage || null;
-        }
-
-        if (!usage) {
-            return { bySource: {}, byAuthIndex: {} };
-        }
-
-        const sourceStats = {};
-        const authIndexStats = {};
-        const ensureBucket = (bucket, key) => {
-            if (!bucket[key]) {
-                bucket[key] = { success: 0, failure: 0 };
-            }
-            return bucket[key];
-        };
-        const normalizeAuthIndex = (value) => {
-            if (typeof value === 'number' && Number.isFinite(value)) {
-                return value.toString();
-            }
-            if (typeof value === 'string') {
-                const trimmed = value.trim();
-                return trimmed ? trimmed : null;
-            }
-            return null;
-        };
-        const apis = usage.apis || {};
-
-        Object.values(apis).forEach(apiEntry => {
-            const models = apiEntry.models || {};
-
-            Object.values(models).forEach(modelEntry => {
-                const details = modelEntry.details || [];
-
-                details.forEach(detail => {
-                    const source = detail.source;
-                    const authIndexKey = normalizeAuthIndex(detail?.auth_index);
-                    const isFailed = detail.failed === true;
-
-                    if (source) {
-                        const bucket = ensureBucket(sourceStats, source);
-                        if (isFailed) {
-                            bucket.failure += 1;
-                        } else {
-                            bucket.success += 1;
-                        }
-                    }
-
-                    if (authIndexKey) {
-                        const bucket = ensureBucket(authIndexStats, authIndexKey);
-                        if (isFailed) {
-                            bucket.failure += 1;
-                        } else {
-                            bucket.success += 1;
-                        }
-                    }
-                });
-            });
-        });
-
-        return {
-            bySource: sourceStats,
-            byAuthIndex: authIndexStats
-        };
-    } catch (error) {
-        console.error('获取统计信息失败:', error);
-        return { bySource: {}, byAuthIndex: {} };
-    }
-}
-
-// 加载使用统计
-export async function loadUsageStats(usageData = null) {
-    try {
-        let usage = usageData;
-        // 如果没有传入usage数据，则调用API获取
-        if (!usage) {
-            const response = await this.makeRequest('/usage');
-            usage = response?.usage || null;
-        }
-        this.currentUsageData = usage;
-
-        if (!usage) {
-            throw new Error('usage payload missing');
-        }
-
-        // 更新概览卡片
-        this.updateUsageOverview(usage);
-        this.updateChartLineSelectors(usage);
-
-        // 读取当前图表周期
-        const requestsHourActive = document.getElementById('requests-hour-btn')?.classList.contains('active');
-        const tokensHourActive = document.getElementById('tokens-hour-btn')?.classList.contains('active');
-        const requestsPeriod = requestsHourActive ? 'hour' : 'day';
-        const tokensPeriod = tokensHourActive ? 'hour' : 'day';
-
-        // 初始化图表（使用当前周期）
-        this.initializeRequestsChart(requestsPeriod);
-        this.initializeTokensChart(tokensPeriod);
-
-        // 更新API详细统计表格
-        this.updateApiStatsTable(usage);
-
-    } catch (error) {
-        console.error('加载使用统计失败:', error);
-        this.currentUsageData = null;
-        this.updateChartLineSelectors(null);
-
-        // 清空概览数据
-        ['total-requests', 'success-requests', 'failed-requests', 'total-tokens'].forEach(id => {
-            const el = document.getElementById(id);
-            if (el) el.textContent = '-';
-        });
-
-        // 清空图表
-        if (this.requestsChart) {
-            this.requestsChart.destroy();
-            this.requestsChart = null;
-        }
-        if (this.tokensChart) {
-            this.tokensChart.destroy();
-            this.tokensChart = null;
-        }
-
-        const tableElement = document.getElementById('api-stats-table');
-        if (tableElement) {
-            tableElement.innerHTML = `<div class="no-data-message">${i18n.t('usage_stats.loading_error')}: ${error.message}</div>`;
-        }
-    }
-}
-
-// 更新使用统计概览
-export function updateUsageOverview(data) {
-    const safeData = data || {};
-    document.getElementById('total-requests').textContent = safeData.total_requests ?? 0;
-    document.getElementById('success-requests').textContent = safeData.success_count ?? 0;
-    document.getElementById('failed-requests').textContent = safeData.failure_count ?? 0;
-    document.getElementById('total-tokens').textContent = safeData.total_tokens ?? 0;
-}
-
-export function getModelNamesFromUsage(usage) {
-    if (!usage) {
-        return [];
-    }
-    const apis = usage.apis || {};
-    const names = new Set();
-    Object.values(apis).forEach(apiEntry => {
-        const models = apiEntry.models || {};
-        Object.keys(models).forEach(modelName => {
-            if (modelName) {
-                names.add(modelName);
-            }
-        });
-    });
-    return Array.from(names).sort((a, b) => a.localeCompare(b));
-}
-
-export function updateChartLineSelectors(usage) {
-    const modelNames = this.getModelNamesFromUsage(usage);
-    const selectors = this.chartLineSelectIds
-        .map(id => document.getElementById(id))
-        .filter(Boolean);
-
-    if (!selectors.length) {
-        this.chartLineSelections = ['none', 'none', 'none'];
-        return;
-    }
-
-    const optionsFragment = () => {
-        const fragment = document.createDocumentFragment();
-        const hiddenOption = document.createElement('option');
-        hiddenOption.value = 'none';
-        hiddenOption.textContent = i18n.t('usage_stats.chart_line_hidden');
-        fragment.appendChild(hiddenOption);
-        modelNames.forEach(name => {
-            const option = document.createElement('option');
-            option.value = name;
-            option.textContent = name;
-            fragment.appendChild(option);
-        });
-        return fragment;
-    };
-
-    const hasModels = modelNames.length > 0;
-    selectors.forEach(select => {
-        select.innerHTML = '';
-        select.appendChild(optionsFragment());
-        select.disabled = !hasModels;
-    });
-
-    if (!hasModels) {
-        this.chartLineSelections = ['none', 'none', 'none'];
-        selectors.forEach(select => {
-            select.value = 'none';
-        });
-        return;
-    }
-
-    const nextSelections = Array.isArray(this.chartLineSelections)
-        ? [...this.chartLineSelections]
-        : ['none', 'none', 'none'];
-
-    const validNames = new Set(modelNames);
-    let hasActiveSelection = false;
-    for (let i = 0; i < nextSelections.length; i++) {
-        const selection = nextSelections[i];
-        if (selection && selection !== 'none' && !validNames.has(selection)) {
-            nextSelections[i] = 'none';
-        }
-        if (nextSelections[i] !== 'none') {
-            hasActiveSelection = true;
-        }
-    }
-
-    if (!hasActiveSelection) {
-        modelNames.slice(0, nextSelections.length).forEach((name, index) => {
-            nextSelections[index] = name;
-        });
-    }
-
-    this.chartLineSelections = nextSelections;
-    selectors.forEach((select, index) => {
-        const value = this.chartLineSelections[index] || 'none';
-        select.value = value;
-    });
-}
-
-export function handleChartLineSelectionChange(index, value) {
-    if (!Array.isArray(this.chartLineSelections)) {
-        this.chartLineSelections = ['none', 'none', 'none'];
-    }
-    if (index < 0 || index >= this.chartLineSelections.length) {
-        return;
-    }
-    const normalized = value || 'none';
-    if (this.chartLineSelections[index] === normalized) {
-        return;
-    }
-    this.chartLineSelections[index] = normalized;
-    this.refreshChartsForSelections();
-}
-
-export function refreshChartsForSelections() {
-    if (!this.currentUsageData) {
-        return;
-    }
-    const requestsHourActive = document.getElementById('requests-hour-btn')?.classList.contains('active');
-    const tokensHourActive = document.getElementById('tokens-hour-btn')?.classList.contains('active');
-    const requestsPeriod = requestsHourActive ? 'hour' : 'day';
-    const tokensPeriod = tokensHourActive ? 'hour' : 'day';
-
-    if (this.requestsChart) {
-        this.requestsChart.data = this.getRequestsChartData(requestsPeriod);
-        this.requestsChart.update();
-    } else {
-        this.initializeRequestsChart(requestsPeriod);
-    }
-
-    if (this.tokensChart) {
-        this.tokensChart.data = this.getTokensChartData(tokensPeriod);
-        this.tokensChart.update();
-    } else {
-        this.initializeTokensChart(tokensPeriod);
-    }
-}
-
-export function getActiveChartLineSelections() {
-    if (!Array.isArray(this.chartLineSelections)) {
-        this.chartLineSelections = ['none', 'none', 'none'];
-    }
-    return this.chartLineSelections
-        .map((value, index) => ({ model: value, index }))
-        .filter(item => item.model && item.model !== 'none');
-}
-
-// 收集所有请求明细，供图表等复用
-export function collectUsageDetailsFromUsage(usage) {
-    if (!usage) {
-        return [];
-    }
-    const apis = usage.apis || {};
-    const details = [];
-    Object.values(apis).forEach(apiEntry => {
-        const models = apiEntry.models || {};
-        Object.entries(models).forEach(([modelName, modelEntry]) => {
-            const modelDetails = Array.isArray(modelEntry.details) ? modelEntry.details : [];
-            modelDetails.forEach(detail => {
-                if (detail && detail.timestamp) {
-                    details.push({
-                        ...detail,
-                        __modelName: modelName
-                    });
-                }
-            });
-        });
-    });
-    return details;
-}
-
-export function collectUsageDetails() {
-    return this.collectUsageDetailsFromUsage(this.currentUsageData);
-}
-
-export function createHourlyBucketMeta() {
-    const hourMs = 60 * 60 * 1000;
-    const now = new Date();
-    const currentHour = new Date(now);
-    currentHour.setMinutes(0, 0, 0);
-
-    const earliestBucket = new Date(currentHour);
-    earliestBucket.setHours(earliestBucket.getHours() - 23);
-    const earliestTime = earliestBucket.getTime();
-    const labels = [];
-    for (let i = 0; i < 24; i++) {
-        const bucketStart = earliestTime + i * hourMs;
-        labels.push(this.formatHourLabel(new Date(bucketStart)));
-    }
-
-    return {
-        labels,
-        earliestTime,
-        bucketSize: hourMs,
-        lastBucketTime: earliestTime + (labels.length - 1) * hourMs
-    };
-}
-
-export function buildHourlySeriesByModel(metric = 'requests') {
-    const meta = this.createHourlyBucketMeta();
-    const details = this.collectUsageDetails();
-    const dataByModel = new Map();
-    let hasData = false;
-
-    if (!details.length) {
-        return { labels: meta.labels, dataByModel, hasData };
-    }
-
-    details.forEach(detail => {
-        const timestamp = Date.parse(detail.timestamp);
-        if (Number.isNaN(timestamp)) {
-            return;
-        }
-
-        const normalized = new Date(timestamp);
-        normalized.setMinutes(0, 0, 0);
-        const bucketStart = normalized.getTime();
-        if (bucketStart < meta.earliestTime || bucketStart > meta.lastBucketTime) {
-            return;
-        }
-
-        const bucketIndex = Math.floor((bucketStart - meta.earliestTime) / meta.bucketSize);
-        if (bucketIndex < 0 || bucketIndex >= meta.labels.length) {
-            return;
-        }
-
-        const modelName = detail.__modelName || 'Unknown';
-        if (!dataByModel.has(modelName)) {
-            dataByModel.set(modelName, new Array(meta.labels.length).fill(0));
-        }
-
-        const bucketValues = dataByModel.get(modelName);
-        if (metric === 'tokens') {
-            bucketValues[bucketIndex] += this.extractTotalTokens(detail);
-        } else {
-            bucketValues[bucketIndex] += 1;
-        }
-        hasData = true;
-    });
-
-    return { labels: meta.labels, dataByModel, hasData };
-}
-
-export function buildDailySeriesByModel(metric = 'requests') {
-    const details = this.collectUsageDetails();
-    const valuesByModel = new Map();
-    const labelsSet = new Set();
-    let hasData = false;
-
-    if (!details.length) {
-        return { labels: [], dataByModel: new Map(), hasData };
-    }
-
-    details.forEach(detail => {
-        const timestamp = Date.parse(detail.timestamp);
-        if (Number.isNaN(timestamp)) {
-            return;
-        }
-        const dayLabel = this.formatDayLabel(new Date(timestamp));
-        if (!dayLabel) {
-            return;
-        }
-
-        const modelName = detail.__modelName || 'Unknown';
-        if (!valuesByModel.has(modelName)) {
-            valuesByModel.set(modelName, new Map());
-        }
-        const modelDayMap = valuesByModel.get(modelName);
-        const increment = metric === 'tokens' ? this.extractTotalTokens(detail) : 1;
-        modelDayMap.set(dayLabel, (modelDayMap.get(dayLabel) || 0) + increment);
-        labelsSet.add(dayLabel);
-        hasData = true;
-    });
-
-    const labels = Array.from(labelsSet).sort();
-    const dataByModel = new Map();
-    valuesByModel.forEach((dayMap, modelName) => {
-        const series = labels.map(label => dayMap.get(label) || 0);
-        dataByModel.set(modelName, series);
-    });
-
-    return { labels, dataByModel, hasData };
-}
-
-export function buildChartDataForMetric(period = 'day', metric = 'requests') {
-    const baseSeries = period === 'hour'
-        ? this.buildHourlySeriesByModel(metric)
-        : this.buildDailySeriesByModel(metric);
-
-    const labels = baseSeries?.labels || [];
-    const dataByModel = baseSeries?.dataByModel || new Map();
-    const activeSelections = this.getActiveChartLineSelections();
-    const datasets = activeSelections.map(selection => {
-        const values = dataByModel.get(selection.model) || new Array(labels.length).fill(0);
-        const style = this.chartLineStyles[selection.index] || this.chartLineStyles[0];
-        return {
-            label: selection.model,
-            data: values,
-            borderColor: style.borderColor,
-            backgroundColor: style.backgroundColor,
-            fill: false,
-            tension: 0.35,
-            pointBackgroundColor: style.borderColor,
-            pointBorderColor: '#ffffff',
-            pointBorderWidth: 2,
-            pointRadius: values.some(v => v > 0) ? 4 : 3
-        };
-    });
-
-    return { labels, datasets };
-}
-
-// 统一格式化小时标签
-export function formatHourLabel(date) {
-    if (!(date instanceof Date)) {
-        return '';
-    }
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    const hour = date.getHours().toString().padStart(2, '0');
-    return `${month}-${day} ${hour}:00`;
-}
-
-export function formatDayLabel(date) {
-    if (!(date instanceof Date)) {
-        return '';
-    }
-    const year = date.getFullYear();
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    return `${year}-${month}-${day}`;
-}
-
-export function extractTotalTokens(detail) {
-    const tokens = detail?.tokens || {};
-    if (typeof tokens.total_tokens === 'number') {
-        return tokens.total_tokens;
-    }
-    const tokenKeys = ['input_tokens', 'output_tokens', 'reasoning_tokens', 'cached_tokens'];
-    return tokenKeys.reduce((sum, key) => {
-        const value = tokens[key];
-        return sum + (typeof value === 'number' ? value : 0);
-    }, 0);
-}
-
-// 初始化图表
-export function initializeCharts() {
-    const requestsHourActive = document.getElementById('requests-hour-btn')?.classList.contains('active');
-    const tokensHourActive = document.getElementById('tokens-hour-btn')?.classList.contains('active');
-    this.initializeRequestsChart(requestsHourActive ? 'hour' : 'day');
-    this.initializeTokensChart(tokensHourActive ? 'hour' : 'day');
-}
-
-// 初始化请求趋势图表
-export function initializeRequestsChart(period = 'day') {
-    const ctx = document.getElementById('requests-chart');
-    if (!ctx) return;
-
-    // 销毁现有图表
-    if (this.requestsChart) {
-        this.requestsChart.destroy();
-    }
-
-    const data = this.getRequestsChartData(period);
-
-    this.requestsChart = new Chart(ctx, {
-        type: 'line',
-        data: data,
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            interaction: {
-                mode: 'index',
-                intersect: false
-            },
-            plugins: {
-                legend: {
-                    display: true,
-                    position: 'top',
-                    align: 'start',
-                    labels: {
-                        usePointStyle: true
-                    }
-                }
-            },
-            scales: {
-                x: {
-                    title: {
-                        display: true,
-                        text: i18n.t(period === 'hour' ? 'usage_stats.by_hour' : 'usage_stats.by_day')
-                    }
-                },
-                y: {
-                    beginAtZero: true,
-                    title: {
-                        display: true,
-                        text: i18n.t('usage_stats.requests_count')
-                    }
-                }
-            },
-            elements: {
-                line: {
-                    tension: 0.35,
-                    borderWidth: 2
-                },
-                point: {
-                    borderWidth: 2,
-                    radius: 4
-                }
-            }
-        }
-    });
-}
-
-// 初始化Token使用趋势图表
-export function initializeTokensChart(period = 'day') {
-    const ctx = document.getElementById('tokens-chart');
-    if (!ctx) return;
-
-    // 销毁现有图表
-    if (this.tokensChart) {
-        this.tokensChart.destroy();
-    }
-
-    const data = this.getTokensChartData(period);
-
-    this.tokensChart = new Chart(ctx, {
-        type: 'line',
-        data: data,
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            interaction: {
-                mode: 'index',
-                intersect: false
-            },
-            plugins: {
-                legend: {
-                    display: true,
-                    position: 'top',
-                    align: 'start',
-                    labels: {
-                        usePointStyle: true
-                    }
-                }
-            },
-            scales: {
-                x: {
-                    title: {
-                        display: true,
-                        text: i18n.t(period === 'hour' ? 'usage_stats.by_hour' : 'usage_stats.by_day')
-                    }
-                },
-                y: {
-                    beginAtZero: true,
-                    title: {
-                        display: true,
-                        text: i18n.t('usage_stats.tokens_count')
-                    }
-                }
-            },
-            elements: {
-                line: {
-                    tension: 0.35,
-                    borderWidth: 2
-                },
-                point: {
-                    borderWidth: 2,
-                    radius: 4
-                }
-            }
-        }
-    });
-}
-
-// 获取请求图表数据
-export function getRequestsChartData(period) {
-    if (!this.currentUsageData) {
-        return { labels: [], datasets: [] };
-    }
-    return this.buildChartDataForMetric(period, 'requests');
-}
-
-// 获取Token图表数据
-export function getTokensChartData(period) {
-    if (!this.currentUsageData) {
-        return { labels: [], datasets: [] };
-    }
-    return this.buildChartDataForMetric(period, 'tokens');
-}
-
-// 切换请求图表时间周期
-export function switchRequestsPeriod(period) {
-    // 更新按钮状态
-    document.getElementById('requests-hour-btn').classList.toggle('active', period === 'hour');
-    document.getElementById('requests-day-btn').classList.toggle('active', period === 'day');
-
-    // 更新图表数据
-    if (this.requestsChart) {
-        const newData = this.getRequestsChartData(period);
-        this.requestsChart.data = newData;
-        this.requestsChart.options.scales.x.title.text = i18n.t(period === 'hour' ? 'usage_stats.by_hour' : 'usage_stats.by_day');
-        this.requestsChart.update();
-    }
-}
-
-// 切换Token图表时间周期
-export function switchTokensPeriod(period) {
-    // 更新按钮状态
-    document.getElementById('tokens-hour-btn').classList.toggle('active', period === 'hour');
-    document.getElementById('tokens-day-btn').classList.toggle('active', period === 'day');
-
-    // 更新图表数据
-    if (this.tokensChart) {
-        const newData = this.getTokensChartData(period);
-        this.tokensChart.data = newData;
-        this.tokensChart.options.scales.x.title.text = i18n.t(period === 'hour' ? 'usage_stats.by_hour' : 'usage_stats.by_day');
-        this.tokensChart.update();
-    }
-}
-
-// 更新API详细统计表格
-export function updateApiStatsTable(data) {
-    const container = document.getElementById('api-stats-table');
-    if (!container) return;
-
-    const apis = data.apis || {};
-
-    if (Object.keys(apis).length === 0) {
-        container.innerHTML = `<div class="no-data-message">${i18n.t('usage_stats.no_data')}</div>`;
-        return;
-    }
-
-    let tableHtml = `
-        <table class="stats-table">
-            <thead>
-                <tr>
-                    <th>${i18n.t('usage_stats.api_endpoint')}</th>
-                    <th>${i18n.t('usage_stats.requests_count')}</th>
-                    <th>${i18n.t('usage_stats.tokens_count')}</th>
-                    <th>${i18n.t('usage_stats.success_rate')}</th>
-                    <th>${i18n.t('usage_stats.models')}</th>
-                </tr>
-            </thead>
-            <tbody>
-    `;
-
-    Object.entries(apis).forEach(([endpoint, apiData]) => {
-        const totalRequests = apiData.total_requests || 0;
-        const successCount = apiData.success_count ?? null;
-        const successRate = successCount !== null && totalRequests > 0
-            ? Math.round((successCount / totalRequests) * 100)
-            : null;
-
-        // 构建模型详情
-        let modelsHtml = '';
-        if (apiData.models && Object.keys(apiData.models).length > 0) {
-            modelsHtml = '<div class="model-details">';
-            Object.entries(apiData.models).forEach(([modelName, modelData]) => {
-                const modelRequests = modelData.total_requests ?? 0;
-                const modelTokens = modelData.total_tokens ?? 0;
-                modelsHtml += `
-                    <div class="model-item">
-                        <span class="model-name">${modelName}</span>
-                        <span>${modelRequests} 请求 / ${modelTokens} tokens</span>
-                    </div>
-                `;
-            });
-            modelsHtml += '</div>';
-        }
-
-        tableHtml += `
-            <tr>
-                <td>${endpoint}</td>
-                <td>${totalRequests}</td>
-                <td>${apiData.total_tokens || 0}</td>
-                <td>${successRate !== null ? successRate + '%' : '-'}</td>
-                <td>${modelsHtml || '-'}</td>
-            </tr>
-        `;
-    });
-
-    tableHtml += '</tbody></table>';
-    container.innerHTML = tableHtml;
-}
-
-export const usageModule = {
-    getKeyStats,
-    loadUsageStats,
-    updateUsageOverview,
-    getModelNamesFromUsage,
-    updateChartLineSelectors,
-    handleChartLineSelectionChange,
-    refreshChartsForSelections,
-    getActiveChartLineSelections,
-    collectUsageDetailsFromUsage,
-    collectUsageDetails,
-    createHourlyBucketMeta,
-    buildHourlySeriesByModel,
-    buildDailySeriesByModel,
-    buildChartDataForMetric,
-    formatHourLabel,
-    formatDayLabel,
-    extractTotalTokens,
-    initializeCharts,
-    initializeRequestsChart,
-    initializeTokensChart,
-    getRequestsChartData,
-    getTokensChartData,
-    switchRequestsPeriod,
-    switchTokensPeriod,
-    updateApiStatsTable,
-    registerUsageListeners
-};
-
-// 订阅全局事件，基于配置加载结果渲染使用统计
-export function registerUsageListeners() {
-    if (!this.events || typeof this.events.on !== 'function') {
-        return;
-    }
-    this.events.on('data:config-loaded', (event) => {
-        const detail = event?.detail || {};
-        const usageData = detail.usageData || null;
-        this.loadUsageStats(usageData);
-    });
-}

src/pages/AiProvidersPage.module.scss

@@ -0,0 +1,428 @@
+@use '../styles/variables' as *;
+@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-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;
+}
+
+// 暗色主题适配
+: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);
+  }
+}

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;
+  }
+}

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>
+  );
+}

src/pages/AuthFilesPage.module.scss

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

src/pages/AuthFilesPage.tsx

@@ -0,0 +1,954 @@
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { IconBot, IconDownload, IconInfo, IconTrash2 } from '@/components/ui/icons';
+import { useAuthStore, useNotificationStore, useThemeStore } from '@/stores';
+import { authFilesApi, usageApi } from '@/services/api';
+import { apiClient } from '@/services/api/client';
+import type { AuthFileItem } from '@/types';
+import type { KeyStats, KeyStatBucket } from '@/utils/usage';
+import { formatFileSize } from '@/utils/format';
+import styles from './AuthFilesPage.module.scss';
+
+type ThemeColors = { bg: string; text: string; border?: string };
+type TypeColorSet = { light: ThemeColors; dark?: ThemeColors };
+
+// 标签类型颜色配置（对齐重构前 styles.css 的 file-type-badge 颜色）
+const TYPE_COLORS: Record<string, TypeColorSet> = {
+  qwen: {
+    light: { bg: '#e8f5e9', text: '#2e7d32' },
+    dark: { bg: '#1b5e20', text: '#81c784' }
+  },
+  gemini: {
+    light: { bg: '#e3f2fd', text: '#1565c0' },
+    dark: { bg: '#0d47a1', text: '#64b5f6' }
+  },
+  'gemini-cli': {
+    light: { bg: '#e7efff', text: '#1e4fa3' },
+    dark: { bg: '#1c3f73', text: '#a8c7ff' }
+  },
+  aistudio: {
+    light: { bg: '#f0f2f5', text: '#2f343c' },
+    dark: { bg: '#373c42', text: '#cfd3db' }
+  },
+  claude: {
+    light: { bg: '#fce4ec', text: '#c2185b' },
+    dark: { bg: '#880e4f', text: '#f48fb1' }
+  },
+  codex: {
+    light: { bg: '#fff3e0', text: '#ef6c00' },
+    dark: { bg: '#e65100', text: '#ffb74d' }
+  },
+  antigravity: {
+    light: { bg: '#e0f7fa', text: '#006064' },
+    dark: { bg: '#004d40', text: '#80deea' }
+  },
+  iflow: {
+    light: { bg: '#f3e5f5', text: '#7b1fa2' },
+    dark: { bg: '#4a148c', text: '#ce93d8' }
+  },
+  empty: {
+    light: { bg: '#f5f5f5', text: '#616161' },
+    dark: { bg: '#424242', text: '#bdbdbd' }
+  },
+  unknown: {
+    light: { bg: '#f0f0f0', text: '#666666', border: '1px dashed #999999' },
+    dark: { bg: '#3a3a3a', text: '#aaaaaa', border: '1px dashed #666666' }
+  }
+};
+
+interface ExcludedFormState {
+  provider: string;
+  modelsText: string;
+}
+
+// 标准化 auth_index 值（与 usage.ts 中的 normalizeAuthIndex 保持一致）
+function normalizeAuthIndexValue(value: unknown): string | null {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value.toString();
+  }
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    return trimmed ? trimmed : null;
+  }
+  return null;
+}
+
+function isRuntimeOnlyAuthFile(file: AuthFileItem): boolean {
+  const raw = file['runtime_only'] ?? file.runtimeOnly;
+  if (typeof raw === 'boolean') return raw;
+  if (typeof raw === 'string') return raw.trim().toLowerCase() === 'true';
+  return false;
+}
+
+// 解析认证文件的统计数据
+function resolveAuthFileStats(
+  file: AuthFileItem,
+  stats: KeyStats
+): KeyStatBucket {
+  const defaultStats: KeyStatBucket = { success: 0, failure: 0 };
+  const rawFileName = file?.name || '';
+
+  // 兼容 auth_index 和 authIndex 两种字段名（API 返回的是 auth_index）
+  const rawAuthIndex = file['auth_index'] ?? file.authIndex;
+  const authIndexKey = normalizeAuthIndexValue(rawAuthIndex);
+
+  // 尝试根据 authIndex 匹配
+  if (authIndexKey && stats.byAuthIndex?.[authIndexKey]) {
+    return stats.byAuthIndex[authIndexKey];
+  }
+
+  // 尝试根据 source (文件名) 匹配
+  if (rawFileName && stats.bySource?.[rawFileName]) {
+    const fromName = stats.bySource[rawFileName];
+    if (fromName.success > 0 || fromName.failure > 0) {
+      return fromName;
+    }
+  }
+
+  // 尝试去掉扩展名后匹配
+  if (rawFileName) {
+    const nameWithoutExt = rawFileName.replace(/\.[^/.]+$/, '');
+    if (nameWithoutExt && nameWithoutExt !== rawFileName) {
+      const fromNameWithoutExt = stats.bySource?.[nameWithoutExt];
+      if (fromNameWithoutExt && (fromNameWithoutExt.success > 0 || fromNameWithoutExt.failure > 0)) {
+        return fromNameWithoutExt;
+      }
+    }
+  }
+
+  return defaultStats;
+}
+
+export function AuthFilesPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const theme = useThemeStore((state) => state.theme);
+
+  const [files, setFiles] = useState<AuthFileItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [filter, setFilter] = useState<'all' | string>('all');
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(9);
+  const [uploading, setUploading] = useState(false);
+  const [deleting, setDeleting] = useState<string | null>(null);
+  const [deletingAll, setDeletingAll] = useState(false);
+  const [keyStats, setKeyStats] = useState<KeyStats>({ bySource: {}, byAuthIndex: {} });
+
+  // 详情弹窗相关
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<AuthFileItem | null>(null);
+
+  // 模型列表弹窗相关
+  const [modelsModalOpen, setModelsModalOpen] = useState(false);
+  const [modelsLoading, setModelsLoading] = useState(false);
+  const [modelsList, setModelsList] = useState<{ id: string; display_name?: string; type?: string }[]>([]);
+  const [modelsFileName, setModelsFileName] = useState('');
+  const [modelsFileType, setModelsFileType] = useState('');
+  const [modelsError, setModelsError] = useState<'unsupported' | null>(null);
+
+  // OAuth 排除模型相关
+  const [excluded, setExcluded] = useState<Record<string, string[]>>({});
+  const [excludedError, setExcludedError] = useState<'unsupported' | null>(null);
+  const [excludedModalOpen, setExcludedModalOpen] = useState(false);
+  const [excludedForm, setExcludedForm] = useState<ExcludedFormState>({ provider: '', modelsText: '' });
+  const [savingExcluded, setSavingExcluded] = useState(false);
+
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const excludedUnsupportedRef = useRef(false);
+
+  const disableControls = connectionStatus !== 'connected';
+
+  // 格式化修改时间
+  const formatModified = (item: AuthFileItem): string => {
+    const raw = item['modtime'] ?? item.modified;
+    if (!raw) return '-';
+    const asNumber = Number(raw);
+    const date =
+      Number.isFinite(asNumber) && !Number.isNaN(asNumber)
+        ? new Date(asNumber < 1e12 ? asNumber * 1000 : asNumber)
+        : new Date(String(raw));
+    return Number.isNaN(date.getTime()) ? '-' : date.toLocaleString();
+  };
+
+  // 加载文件列表
+  const loadFiles = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await authFilesApi.list();
+      setFiles(data?.files || []);
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : t('notification.refresh_failed');
+      setError(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  // 加载 key 统计
+  const loadKeyStats = useCallback(async () => {
+    try {
+      const stats = await usageApi.getKeyStats();
+      setKeyStats(stats);
+    } catch {
+      // 静默失败
+    }
+  }, []);
+
+  // 加载 OAuth 排除列表
+  const loadExcluded = useCallback(async () => {
+    try {
+      const res = await authFilesApi.getOauthExcludedModels();
+      excludedUnsupportedRef.current = false;
+      setExcluded(res || {});
+      setExcludedError(null);
+    } catch (err: unknown) {
+      const status =
+        typeof err === 'object' && err !== null && 'status' in err
+          ? (err as { status?: unknown }).status
+          : undefined;
+
+      if (status === 404) {
+        setExcluded({});
+        setExcludedError('unsupported');
+        if (!excludedUnsupportedRef.current) {
+          excludedUnsupportedRef.current = true;
+          showNotification(t('oauth_excluded.upgrade_required'), 'warning');
+        }
+        return;
+      }
+      // 静默失败
+    }
+  }, [showNotification, t]);
+
+  useEffect(() => {
+    loadFiles();
+    loadKeyStats();
+    loadExcluded();
+  }, [loadFiles, loadKeyStats, loadExcluded]);
+
+  // 提取所有存在的类型
+  const existingTypes = useMemo(() => {
+    const types = new Set<string>(['all']);
+    files.forEach((file) => {
+      if (file.type) {
+        types.add(file.type);
+      }
+    });
+    return Array.from(types);
+  }, [files]);
+
+  // 过滤和搜索
+  const filtered = useMemo(() => {
+    return files.filter((item) => {
+      const matchType = filter === 'all' || item.type === filter;
+      const term = search.trim().toLowerCase();
+      const matchSearch =
+        !term ||
+        item.name.toLowerCase().includes(term) ||
+        (item.type || '').toString().toLowerCase().includes(term) ||
+        (item.provider || '').toString().toLowerCase().includes(term);
+      return matchType && matchSearch;
+    });
+  }, [files, filter, search]);
+
+  // 分页计算
+  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const start = (currentPage - 1) * pageSize;
+  const pageItems = filtered.slice(start, start + pageSize);
+
+  // 统计信息
+  const totalSize = useMemo(() => files.reduce((sum, item) => sum + (item.size || 0), 0), [files]);
+
+  // 点击上传
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  // 处理文件上传（支持多选）
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const fileList = event.target.files;
+    if (!fileList || fileList.length === 0) return;
+
+    const filesToUpload = Array.from(fileList);
+    const validFiles: File[] = [];
+    const invalidFiles: string[] = [];
+
+    filesToUpload.forEach((file) => {
+      if (file.name.endsWith('.json')) {
+        validFiles.push(file);
+      } else {
+        invalidFiles.push(file.name);
+      }
+    });
+
+    if (invalidFiles.length > 0) {
+      showNotification(t('auth_files.upload_error_json'), 'error');
+    }
+
+    if (validFiles.length === 0) {
+      event.target.value = '';
+      return;
+    }
+
+    setUploading(true);
+    let successCount = 0;
+    const failed: { name: string; message: string }[] = [];
+
+    for (const file of validFiles) {
+      try {
+        await authFilesApi.upload(file);
+        successCount++;
+      } catch (err: unknown) {
+        const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+        failed.push({ name: file.name, message: errorMessage });
+      }
+    }
+
+    if (successCount > 0) {
+      const suffix = validFiles.length > 1 ? ` (${successCount}/${validFiles.length})` : '';
+      showNotification(`${t('auth_files.upload_success')}${suffix}`, failed.length ? 'warning' : 'success');
+      await loadFiles();
+      await loadKeyStats();
+    }
+
+    if (failed.length > 0) {
+      const details = failed.map((item) => `${item.name}: ${item.message}`).join('; ');
+      showNotification(`${t('notification.upload_failed')}: ${details}`, 'error');
+    }
+
+    setUploading(false);
+    event.target.value = '';
+  };
+
+  // 删除单个文件
+  const handleDelete = async (name: string) => {
+    if (!window.confirm(`${t('auth_files.delete_confirm')} "${name}" ?`)) return;
+    setDeleting(name);
+    try {
+      await authFilesApi.deleteFile(name);
+      showNotification(t('auth_files.delete_success'), 'success');
+      setFiles((prev) => prev.filter((item) => item.name !== name));
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : '';
+      showNotification(`${t('notification.delete_failed')}: ${errorMessage}`, 'error');
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  // 删除全部（根据筛选类型）
+  const handleDeleteAll = async () => {
+    const isFiltered = filter !== 'all';
+    const typeLabel = isFiltered ? getTypeLabel(filter) : t('auth_files.filter_all');
+    const confirmMessage = isFiltered
+      ? t('auth_files.delete_filtered_confirm', { type: typeLabel })
+      : t('auth_files.delete_all_confirm');
+
+    if (!window.confirm(confirmMessage)) return;
+
+    setDeletingAll(true);
+    try {
+      if (!isFiltered) {
+        // 删除全部
+        await authFilesApi.deleteAll();
+        showNotification(t('auth_files.delete_all_success'), 'success');
+        setFiles((prev) => prev.filter((file) => isRuntimeOnlyAuthFile(file)));
+      } else {
+        // 删除筛选类型的文件
+        const filesToDelete = files.filter(
+          (f) => f.type === filter && !isRuntimeOnlyAuthFile(f)
+        );
+
+        if (filesToDelete.length === 0) {
+          showNotification(t('auth_files.delete_filtered_none', { type: typeLabel }), 'info');
+          setDeletingAll(false);
+          return;
+        }
+
+        let success = 0;
+        let failed = 0;
+        const deletedNames: string[] = [];
+
+        for (const file of filesToDelete) {
+          try {
+            await authFilesApi.deleteFile(file.name);
+            success++;
+            deletedNames.push(file.name);
+          } catch {
+            failed++;
+          }
+        }
+
+        setFiles((prev) => prev.filter((f) => !deletedNames.includes(f.name)));
+
+        if (failed === 0) {
+          showNotification(
+            t('auth_files.delete_filtered_success', { count: success, type: typeLabel }),
+            'success'
+          );
+        } else {
+          showNotification(
+            t('auth_files.delete_filtered_partial', { success, failed, type: typeLabel }),
+            'warning'
+          );
+        }
+        setFilter('all');
+      }
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : '';
+      showNotification(`${t('notification.delete_failed')}: ${errorMessage}`, 'error');
+    } finally {
+      setDeletingAll(false);
+    }
+  };
+
+  // 下载文件
+  const handleDownload = async (name: string) => {
+    try {
+      const response = await apiClient.getRaw(`/auth-files/download?name=${encodeURIComponent(name)}`, {
+        responseType: 'blob'
+      });
+      const blob = new Blob([response.data]);
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = name;
+      a.click();
+      window.URL.revokeObjectURL(url);
+      showNotification(t('auth_files.download_success'), 'success');
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : '';
+      showNotification(`${t('notification.download_failed')}: ${errorMessage}`, 'error');
+    }
+  };
+
+  // 显示详情弹窗
+  const showDetails = (file: AuthFileItem) => {
+    setSelectedFile(file);
+    setDetailModalOpen(true);
+  };
+
+  // 显示模型列表
+  const showModels = async (item: AuthFileItem) => {
+    setModelsFileName(item.name);
+    setModelsFileType(item.type || '');
+    setModelsList([]);
+    setModelsError(null);
+    setModelsModalOpen(true);
+    setModelsLoading(true);
+    try {
+      const models = await authFilesApi.getModelsForAuthFile(item.name);
+      setModelsList(models);
+    } catch (err) {
+      // 检测是否是 API 不支持的错误 (404 或特定错误消息)
+      const errorMessage = err instanceof Error ? err.message : '';
+      if (errorMessage.includes('404') || errorMessage.includes('not found') || errorMessage.includes('Not Found')) {
+        setModelsError('unsupported');
+      } else {
+        showNotification(`${t('notification.load_failed')}: ${errorMessage}`, 'error');
+      }
+    } finally {
+      setModelsLoading(false);
+    }
+  };
+
+  // 检查模型是否被 OAuth 排除
+  const isModelExcluded = (modelId: string, providerType: string): boolean => {
+    const excludedModels = excluded[providerType] || [];
+    return excludedModels.some(pattern => {
+      if (pattern.includes('*')) {
+        // 支持通配符匹配
+        const regex = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$', 'i');
+        return regex.test(modelId);
+      }
+      return pattern.toLowerCase() === modelId.toLowerCase();
+    });
+  };
+
+  // 获取类型标签显示文本
+  const getTypeLabel = (type: string): string => {
+    const key = `auth_files.filter_${type}`;
+    const translated = t(key);
+    if (translated !== key) return translated;
+    if (type.toLowerCase() === 'iflow') return 'iFlow';
+    return type.charAt(0).toUpperCase() + type.slice(1);
+  };
+
+  // 获取类型颜色
+  const getTypeColor = (type: string): ThemeColors => {
+    const set = TYPE_COLORS[type] || TYPE_COLORS.unknown;
+    return theme === 'dark' && set.dark ? set.dark : set.light;
+  };
+
+  // OAuth 排除相关方法
+  const openExcludedModal = (provider?: string) => {
+    const models = provider ? excluded[provider] : [];
+    setExcludedForm({
+      provider: provider || '',
+      modelsText: Array.isArray(models) ? models.join('\n') : ''
+    });
+    setExcludedModalOpen(true);
+  };
+
+  const saveExcludedModels = async () => {
+    const provider = excludedForm.provider.trim();
+    if (!provider) {
+      showNotification(t('oauth_excluded.provider_required'), 'error');
+      return;
+    }
+    const models = excludedForm.modelsText
+      .split(/[\n,]+/)
+      .map((item) => item.trim())
+      .filter(Boolean);
+    setSavingExcluded(true);
+    try {
+      if (models.length) {
+        await authFilesApi.saveOauthExcludedModels(provider, models);
+      } else {
+        await authFilesApi.deleteOauthExcludedEntry(provider);
+      }
+      await loadExcluded();
+      showNotification(t('oauth_excluded.save_success'), 'success');
+      setExcludedModalOpen(false);
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : '';
+      showNotification(`${t('oauth_excluded.save_failed')}: ${errorMessage}`, 'error');
+    } finally {
+      setSavingExcluded(false);
+    }
+  };
+
+  const deleteExcluded = async (provider: string) => {
+    if (!window.confirm(t('oauth_excluded.delete_confirm', { provider }))) return;
+    try {
+      await authFilesApi.deleteOauthExcludedEntry(provider);
+      await loadExcluded();
+      showNotification(t('oauth_excluded.delete_success'), 'success');
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : '';
+      showNotification(`${t('oauth_excluded.delete_failed')}: ${errorMessage}`, 'error');
+    }
+  };
+
+  // 渲染标签筛选器
+  const renderFilterTags = () => (
+    <div className={styles.filterTags}>
+      {existingTypes.map((type) => {
+        const isActive = filter === type;
+        const color = type === 'all' ? { bg: 'var(--bg-tertiary)', text: 'var(--text-primary)' } : getTypeColor(type);
+        const activeTextColor = theme === 'dark' ? '#111827' : '#fff';
+        return (
+          <button
+            key={type}
+            className={`${styles.filterTag} ${isActive ? styles.filterTagActive : ''}`}
+            style={{
+              backgroundColor: isActive ? color.text : color.bg,
+              color: isActive ? activeTextColor : color.text,
+              borderColor: color.text
+            }}
+            onClick={() => {
+              setFilter(type);
+              setPage(1);
+            }}
+          >
+            {getTypeLabel(type)}
+          </button>
+        );
+      })}
+    </div>
+  );
+
+  // 渲染单个认证文件卡片
+  const renderFileCard = (item: AuthFileItem) => {
+      const fileStats = resolveAuthFileStats(item, keyStats);
+    const isRuntimeOnly = isRuntimeOnlyAuthFile(item);
+    const typeColor = getTypeColor(item.type || 'unknown');
+
+    return (
+      <div key={item.name} className={styles.fileCard}>
+        <div className={styles.cardHeader}>
+          <span
+            className={styles.typeBadge}
+            style={{
+              backgroundColor: typeColor.bg,
+              color: typeColor.text,
+              ...(typeColor.border ? { border: typeColor.border } : {})
+            }}
+          >
+            {getTypeLabel(item.type || 'unknown')}
+          </span>
+          <span className={styles.fileName}>{item.name}</span>
+        </div>
+
+        <div className={styles.cardMeta}>
+          <span>{t('auth_files.file_size')}: {item.size ? formatFileSize(item.size) : '-'}</span>
+          <span>{t('auth_files.file_modified')}: {formatModified(item)}</span>
+        </div>
+
+        <div className={styles.cardStats}>
+          <span className={`${styles.statPill} ${styles.statSuccess}`}>
+            {t('stats.success')}: {fileStats.success}
+          </span>
+          <span className={`${styles.statPill} ${styles.statFailure}`}>
+            {t('stats.failure')}: {fileStats.failure}
+          </span>
+        </div>
+
+        <div className={styles.cardActions}>
+          {isRuntimeOnly ? (
+            <div className={styles.virtualBadge}>{t('auth_files.type_virtual') || '虚拟认证文件'}</div>
+          ) : (
+            <>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => showModels(item)}
+                className={styles.iconButton}
+                title={t('auth_files.models_button', { defaultValue: '模型' })}
+                disabled={disableControls}
+              >
+                <IconBot className={styles.actionIcon} size={16} />
+              </Button>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => showDetails(item)}
+                className={styles.iconButton}
+                title={t('common.info', { defaultValue: '关于' })}
+                disabled={disableControls}
+              >
+                <IconInfo className={styles.actionIcon} size={16} />
+              </Button>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => handleDownload(item.name)}
+                className={styles.iconButton}
+                title={t('auth_files.download_button')}
+                disabled={disableControls}
+              >
+                <IconDownload className={styles.actionIcon} size={16} />
+              </Button>
+              <Button
+                variant="danger"
+                size="sm"
+                onClick={() => handleDelete(item.name)}
+                className={styles.iconButton}
+                title={t('auth_files.delete_button')}
+                disabled={disableControls || deleting === item.name}
+              >
+                {deleting === item.name ? (
+                  <LoadingSpinner size={14} />
+                ) : (
+                  <IconTrash2 className={styles.actionIcon} size={16} />
+                )}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.pageHeader}>
+        <h1 className={styles.pageTitle}>{t('auth_files.title')}</h1>
+        <p className={styles.description}>{t('auth_files.description')}</p>
+      </div>
+
+      <Card
+        title={t('auth_files.title_section')}
+        extra={
+          <div className={styles.headerActions}>
+            <Button variant="secondary" size="sm" onClick={() => { loadFiles(); loadKeyStats(); }} disabled={loading}>
+              {t('common.refresh')}
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleDeleteAll}
+              disabled={disableControls || loading || deletingAll}
+              loading={deletingAll}
+            >
+              {filter === 'all' ? t('auth_files.delete_all_button') : `${t('common.delete')} ${getTypeLabel(filter)}`}
+            </Button>
+            <Button size="sm" onClick={handleUploadClick} disabled={disableControls || uploading} loading={uploading}>
+              {t('auth_files.upload_button')}
+            </Button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".json,application/json"
+              multiple
+              style={{ display: 'none' }}
+              onChange={handleFileChange}
+            />
+          </div>
+        }
+      >
+        {error && <div className={styles.errorBox}>{error}</div>}
+
+        {/* 筛选区域 */}
+        <div className={styles.filterSection}>
+          {renderFilterTags()}
+
+          <div className={styles.filterControls}>
+            <div className={styles.filterItem}>
+              <label>{t('auth_files.search_label')}</label>
+              <Input
+                value={search}
+                onChange={(e) => {
+                  setSearch(e.target.value);
+                  setPage(1);
+                }}
+                placeholder={t('auth_files.search_placeholder')}
+              />
+            </div>
+            <div className={styles.filterItem}>
+              <label>{t('auth_files.page_size_label')}</label>
+              <select
+                className={styles.pageSizeSelect}
+                value={pageSize}
+                onChange={(e) => {
+                  setPageSize(Number(e.target.value) || 9);
+                  setPage(1);
+                }}
+              >
+                <option value={6}>6</option>
+                <option value={9}>9</option>
+                <option value={12}>12</option>
+                <option value={18}>18</option>
+                <option value={24}>24</option>
+              </select>
+            </div>
+            <div className={styles.filterItem}>
+              <label>{t('common.info')}</label>
+              <div className={styles.statsInfo}>
+                {files.length} {t('auth_files.files_count')} · {formatFileSize(totalSize)}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 卡片网格 */}
+        {loading ? (
+          <div className={styles.hint}>{t('common.loading')}</div>
+        ) : pageItems.length === 0 ? (
+          <EmptyState title={t('auth_files.search_empty_title')} description={t('auth_files.search_empty_desc')} />
+        ) : (
+          <div className={styles.fileGrid}>
+            {pageItems.map(renderFileCard)}
+          </div>
+        )}
+
+        {/* 分页 */}
+        {!loading && filtered.length > pageSize && (
+          <div className={styles.pagination}>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => setPage(Math.max(1, currentPage - 1))}
+              disabled={currentPage <= 1}
+            >
+              {t('auth_files.pagination_prev')}
+            </Button>
+            <div className={styles.pageInfo}>
+              {t('auth_files.pagination_info', {
+                current: currentPage,
+                total: totalPages,
+                count: filtered.length
+              })}
+            </div>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => setPage(Math.min(totalPages, currentPage + 1))}
+              disabled={currentPage >= totalPages}
+            >
+              {t('auth_files.pagination_next')}
+            </Button>
+          </div>
+        )}
+      </Card>
+
+      {/* OAuth 排除列表卡片 */}
+      <Card
+        title={t('oauth_excluded.title')}
+        extra={
+          <Button
+            size="sm"
+            onClick={() => openExcludedModal()}
+            disabled={disableControls || excludedError === 'unsupported'}
+          >
+            {t('oauth_excluded.add')}
+          </Button>
+        }
+      >
+        {excludedError === 'unsupported' ? (
+          <EmptyState
+            title={t('oauth_excluded.upgrade_required_title')}
+            description={t('oauth_excluded.upgrade_required_desc')}
+          />
+        ) : Object.keys(excluded).length === 0 ? (
+          <EmptyState title={t('oauth_excluded.list_empty_all')} />
+        ) : (
+          <div className={styles.excludedList}>
+            {Object.entries(excluded).map(([provider, models]) => (
+              <div key={provider} className={styles.excludedItem}>
+                <div className={styles.excludedInfo}>
+                  <div className={styles.excludedProvider}>{provider}</div>
+                  <div className={styles.excludedModels}>
+                    {models?.length
+                      ? t('oauth_excluded.model_count', { count: models.length })
+                      : t('oauth_excluded.no_models')}
+                  </div>
+                </div>
+                <div className={styles.excludedActions}>
+                  <Button variant="secondary" size="sm" onClick={() => openExcludedModal(provider)}>
+                    {t('common.edit')}
+                  </Button>
+                  <Button variant="danger" size="sm" onClick={() => deleteExcluded(provider)}>
+                    {t('oauth_excluded.delete')}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+
+      {/* 详情弹窗 */}
+      <Modal
+        open={detailModalOpen}
+        onClose={() => setDetailModalOpen(false)}
+        title={selectedFile?.name || t('auth_files.title_section')}
+        footer={
+          <>
+            <Button variant="secondary" onClick={() => setDetailModalOpen(false)}>
+              {t('common.close')}
+            </Button>
+            <Button
+              onClick={() => {
+                if (selectedFile) {
+                  const text = JSON.stringify(selectedFile, null, 2);
+                  navigator.clipboard.writeText(text).then(() => {
+                    showNotification(t('notification.link_copied'), 'success');
+                  });
+                }
+              }}
+            >
+              {t('common.copy')}
+            </Button>
+          </>
+        }
+      >
+        {selectedFile && (
+          <div className={styles.detailContent}>
+            <pre className={styles.jsonContent}>{JSON.stringify(selectedFile, null, 2)}</pre>
+          </div>
+        )}
+      </Modal>
+
+      {/* 模型列表弹窗 */}
+      <Modal
+        open={modelsModalOpen}
+        onClose={() => setModelsModalOpen(false)}
+        title={t('auth_files.models_title', { defaultValue: '支持的模型' }) + ` - ${modelsFileName}`}
+        footer={
+          <Button variant="secondary" onClick={() => setModelsModalOpen(false)}>
+            {t('common.close')}
+          </Button>
+        }
+      >
+        {modelsLoading ? (
+          <div className={styles.hint}>{t('auth_files.models_loading', { defaultValue: '正在加载模型列表...' })}</div>
+        ) : modelsError === 'unsupported' ? (
+          <EmptyState
+            title={t('auth_files.models_unsupported', { defaultValue: '当前版本不支持此功能' })}
+            description={t('auth_files.models_unsupported_desc', { defaultValue: '请更新 CLI Proxy API 到最新版本后重试' })}
+          />
+        ) : modelsList.length === 0 ? (
+          <EmptyState
+            title={t('auth_files.models_empty', { defaultValue: '该凭证暂无可用模型' })}
+            description={t('auth_files.models_empty_desc', { defaultValue: '该认证凭证可能尚未被服务器加载或没有绑定任何模型' })}
+          />
+        ) : (
+          <div className={styles.modelsList}>
+            {modelsList.map((model) => {
+              const isExcluded = isModelExcluded(model.id, modelsFileType);
+              return (
+                <div
+                  key={model.id}
+                  className={`${styles.modelItem} ${isExcluded ? styles.modelItemExcluded : ''}`}
+                  onClick={() => {
+                    navigator.clipboard.writeText(model.id);
+                    showNotification(t('notification.link_copied', { defaultValue: '已复制到剪贴板' }), 'success');
+                  }}
+                  title={isExcluded ? t('auth_files.models_excluded_hint', { defaultValue: '此模型已被 OAuth 排除' }) : t('common.copy', { defaultValue: '点击复制' })}
+                >
+                  <span className={styles.modelId}>{model.id}</span>
+                  {model.display_name && model.display_name !== model.id && (
+                    <span className={styles.modelDisplayName}>{model.display_name}</span>
+                  )}
+                  {model.type && (
+                    <span className={styles.modelType}>{model.type}</span>
+                  )}
+                  {isExcluded && (
+                    <span className={styles.modelExcludedBadge}>{t('auth_files.models_excluded_badge', { defaultValue: '已排除' })}</span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </Modal>
+
+      {/* OAuth 排除弹窗 */}
+      <Modal
+        open={excludedModalOpen}
+        onClose={() => setExcludedModalOpen(false)}
+        title={t('oauth_excluded.add_title')}
+        footer={
+          <>
+            <Button variant="secondary" onClick={() => setExcludedModalOpen(false)} disabled={savingExcluded}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={saveExcludedModels} loading={savingExcluded}>
+              {t('oauth_excluded.save')}
+            </Button>
+          </>
+        }
+      >
+        <Input
+          label={t('oauth_excluded.provider_label')}
+          placeholder={t('oauth_excluded.provider_placeholder')}
+          value={excludedForm.provider}
+          onChange={(e) => setExcludedForm((prev) => ({ ...prev, provider: e.target.value }))}
+        />
+        <div className={styles.formGroup}>
+          <label>{t('oauth_excluded.models_label')}</label>
+          <textarea
+            className={styles.textarea}
+            rows={4}
+            placeholder={t('oauth_excluded.models_placeholder')}
+            value={excludedForm.modelsText}
+            onChange={(e) => setExcludedForm((prev) => ({ ...prev, modelsText: e.target.value }))}
+          />
+          <div className={styles.hint}>{t('oauth_excluded.models_hint')}</div>
+        </div>
+      </Modal>
+    </div>
+  );
+}

src/pages/ConfigPage.module.scss

@@ -0,0 +1,221 @@
+@use '../styles/mixins' as *;
+
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-md 0;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.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%;
+  height: 500px;
+  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});
+    }
+
+    .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);
+      }
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  gap: $spacing-sm;
+  justify-content: flex-end;
+
+  @include mobile {
+    justify-content: stretch;
+
+    button {
+      flex: 1;
+    }
+  }
+}

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 theme = useThemeStore((state) => state.theme);
+
+  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>
+        <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={theme === 'dark' ? 'dark' : 'light'}
+              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>
+  );
+}

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;
+  }
+}

src/pages/DashboardPage.tsx

@@ -0,0 +1,321 @@
+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}</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.request_log_enable')}</span>
+              <span className={`${styles.configValue} ${config.requestLog ? styles.enabled : styles.disabled}`}>
+                {config.requestLog ? 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>
+  );
+}

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;
+}

src/pages/LoginPage.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { 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]);
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      const redirect = (location.state as any)?.from?.pathname || '/';
+      navigate(redirect, { replace: true });
+    }
+  }, [isAuthenticated, navigate, location.state]);
+
+  const handleUseCurrent = () => {
+    setApiBase(detectedBase);
+  };
+
+  const handleSubmit = async () => {
+    if (!managementKey.trim()) {
+      setError(t('login.error_required'));
+      return;
+    }
+
+    const baseToUse = apiBase ? normalizeApiBase(apiBase) : detectedBase;
+    setLoading(true);
+    setError('');
+    try {
+      await login({ apiBase: baseToUse, managementKey: managementKey.trim() });
+      showNotification(t('common.connected_status'), 'success');
+      navigate('/', { replace: true });
+    } catch (err: any) {
+      const message = err?.message || t('login.error_invalid');
+      setError(message);
+      showNotification(`${t('notification.login_failed')}: ${message}`, 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <div className="login-header">
+          <div className="title">{t('title.login')}</div>
+          <div className="subtitle">{t('login.subtitle')}</div>
+        </div>
+
+        <div className="connection-box">
+          <div className="label">{t('login.connection_current')}</div>
+          <div className="value">{apiBase || detectedBase}</div>
+          <div className="hint">{t('login.connection_auto_hint')}</div>
+        </div>
+
+        <div className="toggle-advanced">
+          <input
+            id="custom-connection-toggle"
+            type="checkbox"
+            checked={showCustomBase}
+            onChange={(e) => setShowCustomBase(e.target.checked)}
+          />
+          <label htmlFor="custom-connection-toggle">{t('login.custom_connection_label')}</label>
+        </div>
+
+        {showCustomBase && (
+          <Input
+            label={t('login.custom_connection_label')}
+            placeholder={t('login.custom_connection_placeholder')}
+            value={apiBase}
+            onChange={(e) => setApiBase(e.target.value)}
+            hint={t('login.custom_connection_hint')}
+          />
+        )}
+
+        <Input
+          label={t('login.management_key_label')}
+          placeholder={t('login.management_key_placeholder')}
+          type={showKey ? 'text' : 'password'}
+          value={managementKey}
+          onChange={(e) => setManagementKey(e.target.value)}
+          rightElement={
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              onClick={() => setShowKey((prev) => !prev)}
+              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>
+  );
+}

src/pages/LogsPage.module.scss

@@ -0,0 +1,313 @@
+@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;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  flex-wrap: wrap;
+
+  @include mobile {
+    align-items: flex-start;
+  }
+}
+
+.filters {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+  margin-bottom: $spacing-md;
+
+  :global(.form-group) {
+    margin: 0;
+  }
+}
+
+.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;
+  max-height: 620px;
+  overflow: auto;
+  position: relative;
+}
+
+.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;
+}
+
+.loadMoreCount {
+  color: var(--text-tertiary);
+  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 mobile {
+    grid-template-columns: 1fr;
+    gap: $spacing-xs;
+  }
+}
+
+.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-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.rowMeta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  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%;
+  }
+}
+
+.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%;
+  }
+}
+
+.message {
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}

src/pages/LogsPage.tsx

@@ -0,0 +1,851 @@
+import { useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Input } from '@/components/ui/Input';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import {
+  IconDownload,
+  IconEyeOff,
+  IconRefreshCw,
+  IconSearch,
+  IconTimer,
+  IconTrash2,
+  IconX,
+} from '@/components/ui/icons';
+import { useNotificationStore, useAuthStore } from '@/stores';
+import { logsApi } from '@/services/api/logs';
+import { MANAGEMENT_API_PREFIX } from '@/utils/constants';
+import { formatUnixTimestamp } from '@/utils/format';
+import styles from './LogsPage.module.scss';
+
+interface ErrorLogItem {
+  name: string;
+  size?: number;
+  modified?: number;
+}
+
+type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+
+type LogState = {
+  buffer: string[];
+  visibleFrom: number;
+};
+
+// 初始只渲染最近 100 行，滚动到顶部再逐步加载更多（避免一次性渲染过多导致卡顿）
+const INITIAL_DISPLAY_LINES = 100;
+const LOAD_MORE_LINES = 200;
+const MAX_BUFFER_LINES = 10000;
+const LOAD_MORE_THRESHOLD_PX = 72;
+
+const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD'] as const;
+type HttpMethod = (typeof HTTP_METHODS)[number];
+const HTTP_METHOD_REGEX = new RegExp(`\\b(${HTTP_METHODS.join('|')})\\b`);
+
+const LOG_TIMESTAMP_REGEX = /^\[?(\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?)\]?/;
+const LOG_LEVEL_REGEX = /^\[?(trace|debug|info|warn|warning|error|fatal)\]?(?=\s|\[|$)\s*/i;
+const LOG_SOURCE_REGEX = /^\[([^\]]+)\]/;
+const LOG_LATENCY_REGEX = /\b(\d+(?:\.\d+)?)(?:\s*)(µs|us|ms|s)\b/i;
+const LOG_IPV4_REGEX = /\b(?:\d{1,3}\.){3}\d{1,3}\b/;
+const LOG_IPV6_REGEX = /\b(?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}\b/i;
+const LOG_TIME_OF_DAY_REGEX = /^\d{1,2}:\d{2}:\d{2}(?:\.\d{1,3})?$/;
+const GIN_TIMESTAMP_SEGMENT_REGEX =
+  /^\[GIN\]\s+(\d{4})\/(\d{2})\/(\d{2})\s*-\s*(\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?)\s*$/;
+
+const HTTP_STATUS_PATTERNS: RegExp[] = [
+  /\|\s*([1-5]\d{2})\s*\|/,
+  /\b([1-5]\d{2})\s*-/,
+  new RegExp(`\\b(?:${HTTP_METHODS.join('|')})\\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,
+];
+
+const detectHttpStatusCode = (text: string): number | undefined => {
+  for (const pattern of HTTP_STATUS_PATTERNS) {
+    const match = text.match(pattern);
+    if (!match) continue;
+    const code = Number.parseInt(match[1], 10);
+    if (!Number.isFinite(code)) continue;
+    if (code >= 100 && code <= 599) return code;
+  }
+  return undefined;
+};
+
+const extractIp = (text: string): string | undefined => {
+  const ipv4Match = text.match(LOG_IPV4_REGEX);
+  if (ipv4Match) return ipv4Match[0];
+
+  const ipv6Match = text.match(LOG_IPV6_REGEX);
+  if (!ipv6Match) return undefined;
+
+  const candidate = ipv6Match[0];
+
+  // Avoid treating time strings like "12:34:56" as IPv6 addresses.
+  if (LOG_TIME_OF_DAY_REGEX.test(candidate)) return undefined;
+
+  // If no compression marker is present, a valid IPv6 address must contain 8 hextets.
+  if (!candidate.includes('::') && candidate.split(':').length !== 8) return undefined;
+
+  return candidate;
+};
+
+const normalizeTimestampToSeconds = (value: string): string => {
+  const trimmed = value.trim();
+  const match = trimmed.match(/^(\d{4}-\d{2}-\d{2})[ T](\d{2}:\d{2}:\d{2})/);
+  if (!match) return trimmed;
+  return `${match[1]} ${match[2]}`;
+};
+
+type ParsedLogLine = {
+  raw: string;
+  timestamp?: string;
+  level?: LogLevel;
+  source?: string;
+  statusCode?: number;
+  latency?: string;
+  ip?: string;
+  method?: HttpMethod;
+  path?: string;
+  message: string;
+};
+
+const extractLogLevel = (value: string): LogLevel | undefined => {
+  const normalized = value.trim().toLowerCase();
+  if (normalized === 'warning') return 'warn';
+  if (normalized === 'warn') return 'warn';
+  if (normalized === 'info') return 'info';
+  if (normalized === 'error') return 'error';
+  if (normalized === 'fatal') return 'fatal';
+  if (normalized === 'debug') return 'debug';
+  if (normalized === 'trace') return 'trace';
+  return undefined;
+};
+
+const inferLogLevel = (line: string): LogLevel | undefined => {
+  const lowered = line.toLowerCase();
+  if (/\bfatal\b/.test(lowered)) return 'fatal';
+  if (/\berror\b/.test(lowered)) return 'error';
+  if (/\bwarn(?:ing)?\b/.test(lowered) || line.includes('警告')) return 'warn';
+  if (/\binfo\b/.test(lowered)) return 'info';
+  if (/\bdebug\b/.test(lowered)) return 'debug';
+  if (/\btrace\b/.test(lowered)) return 'trace';
+  return undefined;
+};
+
+const extractHttpMethodAndPath = (text: string): { method?: HttpMethod; path?: string } => {
+  const match = text.match(HTTP_METHOD_REGEX);
+  if (!match) return {};
+
+  const method = match[1] as HttpMethod;
+  const index = match.index ?? 0;
+  const after = text.slice(index + match[0].length).trim();
+  const path = after ? after.split(/\s+/)[0] : undefined;
+  return { method, path };
+};
+
+const parseLogLine = (raw: string): ParsedLogLine => {
+  let remaining = raw.trim();
+
+  let timestamp: string | undefined;
+  const tsMatch = remaining.match(LOG_TIMESTAMP_REGEX);
+  if (tsMatch) {
+    timestamp = tsMatch[1];
+    remaining = remaining.slice(tsMatch[0].length).trim();
+  }
+
+  let level: LogLevel | undefined;
+  const lvlMatch = remaining.match(LOG_LEVEL_REGEX);
+  if (lvlMatch) {
+    level = extractLogLevel(lvlMatch[1]);
+    remaining = remaining.slice(lvlMatch[0].length).trim();
+  }
+
+  let source: string | undefined;
+  const sourceMatch = remaining.match(LOG_SOURCE_REGEX);
+  if (sourceMatch) {
+    source = sourceMatch[1];
+    remaining = remaining.slice(sourceMatch[0].length).trim();
+  }
+
+  let statusCode: number | undefined;
+  let latency: string | undefined;
+  let ip: string | undefined;
+  let method: HttpMethod | undefined;
+  let path: string | undefined;
+  let message = remaining;
+
+  if (remaining.includes('|')) {
+    const segments = remaining
+      .split('|')
+      .map((segment) => segment.trim())
+      .filter(Boolean);
+    const consumed = new Set<number>();
+
+    const ginIndex = segments.findIndex((segment) => GIN_TIMESTAMP_SEGMENT_REGEX.test(segment));
+    if (ginIndex >= 0) {
+      const match = segments[ginIndex].match(GIN_TIMESTAMP_SEGMENT_REGEX);
+      if (match) {
+        const ginTimestamp = `${match[1]}-${match[2]}-${match[3]} ${match[4]}`;
+        const normalizedGin = normalizeTimestampToSeconds(ginTimestamp);
+        const normalizedParsed = timestamp ? normalizeTimestampToSeconds(timestamp) : undefined;
+
+        if (!timestamp) {
+          timestamp = ginTimestamp;
+          consumed.add(ginIndex);
+        } else if (normalizedParsed === normalizedGin) {
+          consumed.add(ginIndex);
+        }
+      }
+    }
+
+    // status code
+    const statusIndex = segments.findIndex((segment) => /^\d{3}\b/.test(segment));
+    if (statusIndex >= 0) {
+      const match = segments[statusIndex].match(/^(\d{3})\b/);
+      if (match) {
+        const code = Number.parseInt(match[1], 10);
+        if (code >= 100 && code <= 599) {
+          statusCode = code;
+          consumed.add(statusIndex);
+        }
+      }
+    }
+
+    // latency
+    const latencyIndex = segments.findIndex((segment) => LOG_LATENCY_REGEX.test(segment));
+    if (latencyIndex >= 0) {
+      const match = segments[latencyIndex].match(LOG_LATENCY_REGEX);
+      if (match) {
+        latency = `${match[1]}${match[2]}`;
+        consumed.add(latencyIndex);
+      }
+    }
+
+    // ip
+    const ipIndex = segments.findIndex((segment) => Boolean(extractIp(segment)));
+    if (ipIndex >= 0) {
+      const extracted = extractIp(segments[ipIndex]);
+      if (extracted) {
+        ip = extracted;
+        consumed.add(ipIndex);
+      }
+    }
+
+    // method + path
+    const methodIndex = segments.findIndex((segment) => {
+      const { method: parsedMethod } = extractHttpMethodAndPath(segment);
+      return Boolean(parsedMethod);
+    });
+    if (methodIndex >= 0) {
+      const parsed = extractHttpMethodAndPath(segments[methodIndex]);
+      method = parsed.method;
+      path = parsed.path;
+      consumed.add(methodIndex);
+    }
+
+    message = segments.filter((_, index) => !consumed.has(index)).join(' | ');
+  } else {
+    statusCode = detectHttpStatusCode(remaining);
+
+    const latencyMatch = remaining.match(LOG_LATENCY_REGEX);
+    if (latencyMatch) latency = `${latencyMatch[1]}${latencyMatch[2]}`;
+
+    ip = extractIp(remaining);
+
+    const parsed = extractHttpMethodAndPath(remaining);
+    method = parsed.method;
+    path = parsed.path;
+  }
+
+  if (!level) level = inferLogLevel(raw);
+
+  if (message) {
+    const match = message.match(GIN_TIMESTAMP_SEGMENT_REGEX);
+    if (match) {
+      const ginTimestamp = `${match[1]}-${match[2]}-${match[3]} ${match[4]}`;
+      if (!timestamp) timestamp = ginTimestamp;
+      if (normalizeTimestampToSeconds(timestamp) === normalizeTimestampToSeconds(ginTimestamp)) {
+        message = '';
+      }
+    }
+  }
+
+  return {
+    raw,
+    timestamp,
+    level,
+    source,
+    statusCode,
+    latency,
+    ip,
+    method,
+    path,
+    message,
+  };
+};
+
+const getErrorMessage = (err: unknown): string => {
+  if (err instanceof Error) return err.message;
+  if (typeof err === 'string') return err;
+  if (typeof err !== 'object' || err === null) return '';
+  if (!('message' in err)) return '';
+
+  const message = (err as { message?: unknown }).message;
+  return typeof message === 'string' ? message : '';
+};
+
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      textarea.style.left = '-9999px';
+      textarea.style.top = '0';
+      document.body.appendChild(textarea);
+      textarea.focus();
+      textarea.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(textarea);
+      return ok;
+    } catch {
+      return false;
+    }
+  }
+};
+
+export function LogsPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+
+  const [logState, setLogState] = useState<LogState>({ buffer: [], visibleFrom: 0 });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const deferredSearchQuery = useDeferredValue(searchQuery);
+  const [hideManagementLogs, setHideManagementLogs] = useState(false);
+  const [errorLogs, setErrorLogs] = useState<ErrorLogItem[]>([]);
+  const [loadingErrors, setLoadingErrors] = useState(false);
+
+  const logViewerRef = useRef<HTMLDivElement | null>(null);
+  const pendingScrollToBottomRef = useRef(false);
+  const pendingPrependScrollRef = useRef<{ scrollHeight: number; scrollTop: number } | null>(null);
+
+  // 保存最新时间戳用于增量获取
+  const latestTimestampRef = useRef<number>(0);
+
+  const disableControls = connectionStatus !== 'connected';
+
+  const isNearBottom = (node: HTMLDivElement | null) => {
+    if (!node) return true;
+    const threshold = 24;
+    return node.scrollHeight - node.scrollTop - node.clientHeight <= threshold;
+  };
+
+  const scrollToBottom = () => {
+    const node = logViewerRef.current;
+    if (!node) return;
+    node.scrollTop = node.scrollHeight;
+  };
+
+  const loadLogs = async (incremental = false) => {
+    if (connectionStatus !== 'connected') {
+      setLoading(false);
+      return;
+    }
+
+    if (!incremental) {
+      setLoading(true);
+    }
+    setError('');
+
+    try {
+      pendingScrollToBottomRef.current = !incremental || isNearBottom(logViewerRef.current);
+
+      const params =
+        incremental && latestTimestampRef.current > 0 ? { after: latestTimestampRef.current } : {};
+      const data = await logsApi.fetchLogs(params);
+
+      // 更新时间戳
+      if (data['latest-timestamp']) {
+        latestTimestampRef.current = data['latest-timestamp'];
+      }
+
+      const newLines = Array.isArray(data.lines) ? data.lines : [];
+
+      if (incremental && newLines.length > 0) {
+        // 增量更新：追加新日志并限制缓冲区大小（避免内存与渲染膨胀）
+        setLogState((prev) => {
+          const prevRenderedCount = prev.buffer.length - prev.visibleFrom;
+          const combined = [...prev.buffer, ...newLines];
+          const dropCount = Math.max(combined.length - MAX_BUFFER_LINES, 0);
+          const buffer = dropCount > 0 ? combined.slice(dropCount) : combined;
+          let visibleFrom = Math.max(prev.visibleFrom - dropCount, 0);
+
+          // 若用户停留在底部（跟随最新日志），则保持“渲染窗口”大小不变，避免无限增长
+          if (pendingScrollToBottomRef.current) {
+            visibleFrom = Math.max(buffer.length - prevRenderedCount, 0);
+          }
+
+          return { buffer, visibleFrom };
+        });
+      } else if (!incremental) {
+        // 全量加载：默认只渲染最后 100 行，向上滚动再展开更多
+        const buffer = newLines.slice(-MAX_BUFFER_LINES);
+        const visibleFrom = Math.max(buffer.length - INITIAL_DISPLAY_LINES, 0);
+        setLogState({ buffer, visibleFrom });
+      }
+    } catch (err: unknown) {
+      console.error('Failed to load logs:', err);
+      if (!incremental) {
+        setError(getErrorMessage(err) || t('logs.load_error'));
+      }
+    } finally {
+      if (!incremental) {
+        setLoading(false);
+      }
+    }
+  };
+
+  const clearLogs = async () => {
+    if (!window.confirm(t('logs.clear_confirm'))) return;
+    try {
+      await logsApi.clearLogs();
+      setLogState({ buffer: [], visibleFrom: 0 });
+      latestTimestampRef.current = 0;
+      showNotification(t('logs.clear_success'), 'success');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(
+        `${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
+    }
+  };
+
+  const downloadLogs = () => {
+    const text = logState.buffer.join('\n');
+    const blob = new Blob([text], { type: 'text/plain' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'logs.txt';
+    a.click();
+    window.URL.revokeObjectURL(url);
+    showNotification(t('logs.download_success'), 'success');
+  };
+
+  const loadErrorLogs = async () => {
+    if (connectionStatus !== 'connected') {
+      setLoadingErrors(false);
+      return;
+    }
+
+    setLoadingErrors(true);
+    try {
+      const res = await logsApi.fetchErrorLogs();
+      // API 返回 { files: [...] }
+      setErrorLogs(Array.isArray(res.files) ? res.files : []);
+    } catch (err: unknown) {
+      console.error('Failed to load error logs:', err);
+      // 静默失败,不影响主日志显示
+      setErrorLogs([]);
+    } finally {
+      setLoadingErrors(false);
+    }
+  };
+
+  const downloadErrorLog = async (name: string) => {
+    try {
+      const response = await logsApi.downloadErrorLog(name);
+      const blob = new Blob([response.data], { type: 'text/plain' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = name;
+      a.click();
+      window.URL.revokeObjectURL(url);
+      showNotification(t('logs.error_log_download_success'), 'success');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(
+        `${t('notification.download_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (connectionStatus === 'connected') {
+      latestTimestampRef.current = 0;
+      loadLogs(false);
+      loadErrorLogs();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connectionStatus]);
+
+  useEffect(() => {
+    if (!autoRefresh || connectionStatus !== 'connected') {
+      return;
+    }
+    const id = window.setInterval(() => {
+      loadLogs(true);
+    }, 8000);
+    return () => window.clearInterval(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoRefresh, connectionStatus]);
+
+  useEffect(() => {
+    if (!pendingScrollToBottomRef.current) return;
+    if (loading) return;
+    if (!logViewerRef.current) return;
+
+    scrollToBottom();
+    pendingScrollToBottomRef.current = false;
+  }, [loading, logState.buffer, logState.visibleFrom]);
+
+  const visibleLines = useMemo(
+    () => logState.buffer.slice(logState.visibleFrom),
+    [logState.buffer, logState.visibleFrom]
+  );
+
+  const trimmedSearchQuery = deferredSearchQuery.trim();
+  const isSearching = trimmedSearchQuery.length > 0;
+  const baseLines = isSearching ? logState.buffer : visibleLines;
+
+  const { filteredLines, removedCount } = useMemo(() => {
+    let working = baseLines;
+    let removed = 0;
+
+    if (hideManagementLogs) {
+      const next: string[] = [];
+      for (const line of working) {
+        if (line.includes(MANAGEMENT_API_PREFIX)) {
+          removed += 1;
+        } else {
+          next.push(line);
+        }
+      }
+      working = next;
+    }
+
+    if (trimmedSearchQuery) {
+      const queryLowered = trimmedSearchQuery.toLowerCase();
+      const next: string[] = [];
+      for (const line of working) {
+        if (line.toLowerCase().includes(queryLowered)) {
+          next.push(line);
+        } else {
+          removed += 1;
+        }
+      }
+      working = next;
+    }
+
+    return { filteredLines: working, removedCount: removed };
+  }, [baseLines, hideManagementLogs, trimmedSearchQuery]);
+
+  const parsedVisibleLines = useMemo(
+    () => filteredLines.map((line) => parseLogLine(line)),
+    [filteredLines]
+  );
+
+  const canLoadMore = !isSearching && logState.visibleFrom > 0;
+
+  const handleLogScroll = () => {
+    const node = logViewerRef.current;
+    if (!node) return;
+    if (isSearching) return;
+    if (!canLoadMore) return;
+    if (pendingPrependScrollRef.current) return;
+    if (node.scrollTop > LOAD_MORE_THRESHOLD_PX) return;
+
+    pendingPrependScrollRef.current = {
+      scrollHeight: node.scrollHeight,
+      scrollTop: node.scrollTop,
+    };
+    setLogState((prev) => ({
+      ...prev,
+      visibleFrom: Math.max(prev.visibleFrom - LOAD_MORE_LINES, 0),
+    }));
+  };
+
+  useLayoutEffect(() => {
+    const node = logViewerRef.current;
+    const pending = pendingPrependScrollRef.current;
+    if (!node || !pending) return;
+
+    const delta = node.scrollHeight - pending.scrollHeight;
+    node.scrollTop = pending.scrollTop + delta;
+    pendingPrependScrollRef.current = null;
+  }, [logState.visibleFrom]);
+
+  const copyLogLine = async (raw: string) => {
+    const ok = await copyToClipboard(raw);
+    if (ok) {
+      showNotification(t('logs.copy_success', { defaultValue: 'Copied to clipboard' }), 'success');
+    } else {
+      showNotification(t('logs.copy_failed', { defaultValue: 'Copy failed' }), 'error');
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.pageTitle}>{t('logs.title')}</h1>
+      <div className={styles.content}>
+        <Card
+          title={t('logs.log_content')}
+          extra={
+            <div className={styles.toolbar}>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => loadLogs(false)}
+                disabled={disableControls || loading}
+                className={styles.actionButton}
+              >
+                <span className={styles.buttonContent}>
+                  <IconRefreshCw size={16} />
+                  {t('logs.refresh_button')}
+                </span>
+              </Button>
+              <ToggleSwitch
+                checked={autoRefresh}
+                onChange={(value) => setAutoRefresh(value)}
+                disabled={disableControls}
+                label={
+                  <span className={styles.switchLabel}>
+                    <IconTimer size={16} />
+                    {t('logs.auto_refresh')}
+                  </span>
+                }
+              />
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={downloadLogs}
+                disabled={logState.buffer.length === 0}
+                className={styles.actionButton}
+              >
+                <span className={styles.buttonContent}>
+                  <IconDownload size={16} />
+                  {t('logs.download_button')}
+                </span>
+              </Button>
+              <Button
+                variant="danger"
+                size="sm"
+                onClick={clearLogs}
+                disabled={disableControls}
+                className={styles.actionButton}
+              >
+                <span className={styles.buttonContent}>
+                  <IconTrash2 size={16} />
+                  {t('logs.clear_button')}
+                </span>
+              </Button>
+            </div>
+          }
+        >
+          {error && <div className="error-box">{error}</div>}
+
+          <div className={styles.filters}>
+            <div className={styles.searchWrapper}>
+              <Input
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={t('logs.search_placeholder')}
+                className={styles.searchInput}
+                rightElement={
+                  searchQuery ? (
+                    <button
+                      type="button"
+                      className={styles.searchClear}
+                      onClick={() => setSearchQuery('')}
+                      title="Clear"
+                      aria-label="Clear"
+                    >
+                      <IconX size={16} />
+                    </button>
+                  ) : (
+                    <IconSearch size={16} className={styles.searchIcon} />
+                  )
+                }
+              />
+            </div>
+
+            <ToggleSwitch
+              checked={hideManagementLogs}
+              onChange={setHideManagementLogs}
+              label={
+                <span className={styles.switchLabel}>
+                  <IconEyeOff size={16} />
+                  {t('logs.hide_management_logs', { prefix: MANAGEMENT_API_PREFIX })}
+                </span>
+              }
+            />
+
+            <div className={styles.filterStats}>
+              <span>
+                {parsedVisibleLines.length} {t('logs.lines')}
+              </span>
+              {removedCount > 0 && (
+                <span className={styles.removedCount}>
+                  {t('logs.removed')} {removedCount}
+                </span>
+              )}
+            </div>
+          </div>
+
+          {loading ? (
+            <div className="hint">{t('logs.loading')}</div>
+          ) : logState.buffer.length > 0 && parsedVisibleLines.length > 0 ? (
+            <div ref={logViewerRef} className={styles.logPanel} onScroll={handleLogScroll}>
+              {canLoadMore && (
+                <div className={styles.loadMoreBanner}>
+                  <span>{t('logs.load_more_hint')}</span>
+                  <span className={styles.loadMoreCount}>
+                    {t('logs.hidden_lines', { count: logState.visibleFrom })}
+                  </span>
+                </div>
+              )}
+              <div className={styles.logList}>
+                {parsedVisibleLines.map((line, index) => {
+                  const rowClassNames = [styles.logRow];
+                  if (line.level === 'warn') rowClassNames.push(styles.rowWarn);
+                  if (line.level === 'error' || line.level === 'fatal')
+                    rowClassNames.push(styles.rowError);
+                  return (
+                    <div
+                      key={`${logState.visibleFrom + index}-${line.raw}`}
+                      className={rowClassNames.join(' ')}
+                      onDoubleClick={() => {
+                        void copyLogLine(line.raw);
+                      }}
+                      title={t('logs.double_click_copy_hint', {
+                        defaultValue: 'Double-click to copy',
+                      })}
+                    >
+                      <div className={styles.timestamp}>{line.timestamp || ''}</div>
+                      <div className={styles.rowMain}>
+                        <div className={styles.rowMeta}>
+                          {line.level && (
+                            <span
+                              className={[
+                                styles.badge,
+                                line.level === 'info' ? styles.levelInfo : '',
+                                line.level === 'warn' ? styles.levelWarn : '',
+                                line.level === 'error' || line.level === 'fatal'
+                                  ? styles.levelError
+                                  : '',
+                                line.level === 'debug' ? styles.levelDebug : '',
+                                line.level === 'trace' ? styles.levelTrace : '',
+                              ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            >
+                              {line.level.toUpperCase()}
+                            </span>
+                          )}
+
+                          {line.source && (
+                            <span className={styles.source} title={line.source}>
+                              {line.source}
+                            </span>
+                          )}
+
+                          {typeof line.statusCode === 'number' && (
+                            <span
+                              className={[
+                                styles.badge,
+                                styles.statusBadge,
+                                line.statusCode >= 200 && line.statusCode < 300
+                                  ? styles.statusSuccess
+                                  : line.statusCode >= 300 && line.statusCode < 400
+                                    ? styles.statusInfo
+                                    : line.statusCode >= 400 && line.statusCode < 500
+                                      ? styles.statusWarn
+                                      : styles.statusError,
+                              ].join(' ')}
+                            >
+                              {line.statusCode}
+                            </span>
+                          )}
+
+                          {line.latency && <span className={styles.pill}>{line.latency}</span>}
+                          {line.ip && <span className={styles.pill}>{line.ip}</span>}
+
+                          {line.method && (
+                            <span className={[styles.badge, styles.methodBadge].join(' ')}>
+                              {line.method}
+                            </span>
+                          )}
+                          {line.path && (
+                            <span className={styles.path} title={line.path}>
+                              {line.path}
+                            </span>
+                          )}
+                        </div>
+                        {line.message && <div className={styles.message}>{line.message}</div>}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ) : logState.buffer.length > 0 ? (
+            <EmptyState
+              title={t('logs.search_empty_title')}
+              description={t('logs.search_empty_desc')}
+            />
+          ) : (
+            <EmptyState title={t('logs.empty_title')} description={t('logs.empty_desc')} />
+          )}
+        </Card>
+
+        <Card
+          title={t('logs.error_logs_modal_title')}
+          extra={
+            <Button variant="secondary" size="sm" onClick={loadErrorLogs} loading={loadingErrors}>
+              {t('common.refresh')}
+            </Button>
+          }
+        >
+          {errorLogs.length === 0 ? (
+            <div className="hint">{t('logs.error_logs_empty')}</div>
+          ) : (
+            <div className="item-list">
+              {errorLogs.map((item) => (
+                <div key={item.name} className="item-row">
+                  <div className="item-meta">
+                    <div className="item-title">{item.name}</div>
+                    <div className="item-subtitle">
+                      {item.size ? `${(item.size / 1024).toFixed(1)} KB` : ''}{' '}
+                      {item.modified ? formatUnixTimestamp(item.modified) : ''}
+                    </div>
+                  </div>
+                  <div className="item-actions">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => downloadErrorLog(item.name)}
+                    >
+                      {t('logs.error_logs_download')}
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}

src/pages/OAuthPage.module.scss

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

src/pages/OAuthPage.tsx

@@ -0,0 +1,377 @@
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useNotificationStore } from '@/stores';
+import { oauthApi, type OAuthProvider, type IFlowCookieAuthResponse } from '@/services/api/oauth';
+import styles from './OAuthPage.module.scss';
+
+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';
+}
+
+const PROVIDERS: { id: OAuthProvider; titleKey: string; hintKey: string; urlLabelKey: string }[] = [
+  { id: 'codex', titleKey: 'auth_login.codex_oauth_title', hintKey: 'auth_login.codex_oauth_hint', urlLabelKey: 'auth_login.codex_oauth_url_label' },
+  { id: 'anthropic', titleKey: 'auth_login.anthropic_oauth_title', hintKey: 'auth_login.anthropic_oauth_hint', urlLabelKey: 'auth_login.anthropic_oauth_url_label' },
+  { id: 'antigravity', titleKey: 'auth_login.antigravity_oauth_title', hintKey: 'auth_login.antigravity_oauth_hint', urlLabelKey: 'auth_login.antigravity_oauth_url_label' },
+  { id: 'gemini-cli', titleKey: 'auth_login.gemini_cli_oauth_title', hintKey: 'auth_login.gemini_cli_oauth_hint', urlLabelKey: 'auth_login.gemini_cli_oauth_url_label' },
+  { id: 'qwen', titleKey: 'auth_login.qwen_oauth_title', hintKey: 'auth_login.qwen_oauth_hint', urlLabelKey: 'auth_login.qwen_oauth_url_label' },
+  { id: 'iflow', titleKey: 'auth_login.iflow_oauth_title', hintKey: 'auth_login.iflow_oauth_hint', urlLabelKey: 'auth_login.iflow_oauth_url_label' }
+];
+
+const CALLBACK_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
+
+export function OAuthPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const [states, setStates] = useState<Record<OAuthProvider, ProviderState>>({} as Record<OAuthProvider, ProviderState>);
+  const [iflowCookie, setIflowCookie] = useState<IFlowCookieState>({ cookie: '', loading: false });
+  const timers = useRef<Record<string, number>>({});
+
+  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');
+    }
+  };
+
+  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={t(provider.titleKey)}
+                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>
+          );
+        })}
+
+        {/* iFlow Cookie 登录 */}
+        <Card
+          title={t('auth_login.iflow_cookie_title')}
+          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>
+  );
+}

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;
+  }
+}

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>
+  );
+}

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%;
+  }
+}

src/pages/SettingsPage.tsx

@@ -0,0 +1,345 @@
+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'
+  | 'requestLog'
+  | 'loggingToFile'
+  | 'wsAuth';
+
+export function SettingsPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [loading, setLoading] = useState(true);
+  const [proxyValue, setProxyValue] = useState('');
+  const [retryValue, setRetryValue] = useState(0);
+  const [pending, setPending] = useState<Record<PendingKey, boolean>>({} as Record<PendingKey, boolean>);
+  const [error, setError] = useState('');
+
+  const disableControls = connectionStatus !== 'connected';
+
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      setError('');
+      try {
+        const data = (await fetchConfig()) as Config;
+        setProxyValue(data?.proxyUrl ?? '');
+        setRetryValue(typeof data?.requestRetry === 'number' ? data.requestRetry : 0);
+      } catch (err: any) {
+        setError(err?.message || t('notification.refresh_failed'));
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    load();
+  }, [fetchConfig, t]);
+
+  useEffect(() => {
+    if (config) {
+      setProxyValue(config.proxyUrl ?? '');
+      if (typeof config.requestRetry === 'number') {
+        setRetryValue(config.requestRetry);
+      }
+    }
+  }, [config?.proxyUrl, config?.requestRetry]);
+
+  const setPendingFlag = (key: PendingKey, value: boolean) => {
+    setPending((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const toggleSetting = async (
+    section: PendingKey,
+    rawKey: 'debug' | 'usage-statistics-enabled' | 'request-log' | 'logging-to-file' | 'ws-auth',
+    value: boolean,
+    updater: (val: boolean) => Promise<any>,
+    successMessage: string
+  ) => {
+    const previous = (() => {
+      switch (rawKey) {
+        case 'debug':
+          return config?.debug ?? false;
+        case 'usage-statistics-enabled':
+          return config?.usageStatisticsEnabled ?? false;
+        case 'request-log':
+          return config?.requestLog ?? false;
+        case 'logging-to-file':
+          return config?.loggingToFile ?? false;
+        case 'ws-auth':
+          return config?.wsAuth ?? false;
+        default:
+          return false;
+      }
+    })();
+
+    setPendingFlag(section, true);
+    updateConfigValue(rawKey, value);
+
+    try {
+      await updater(value);
+      clearCache(rawKey);
+      showNotification(successMessage, 'success');
+    } catch (err: any) {
+      updateConfigValue(rawKey, previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag(section, false);
+    }
+  };
+
+  const handleProxyUpdate = async () => {
+    const previous = config?.proxyUrl ?? '';
+    setPendingFlag('proxy', true);
+    updateConfigValue('proxy-url', proxyValue);
+    try {
+      await configApi.updateProxyUrl(proxyValue.trim());
+      clearCache('proxy-url');
+      showNotification(t('notification.proxy_updated'), 'success');
+    } catch (err: any) {
+      setProxyValue(previous);
+      updateConfigValue('proxy-url', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('proxy', false);
+    }
+  };
+
+  const handleProxyClear = async () => {
+    const previous = config?.proxyUrl ?? '';
+    setPendingFlag('proxy', true);
+    updateConfigValue('proxy-url', '');
+    try {
+      await configApi.clearProxyUrl();
+      clearCache('proxy-url');
+      setProxyValue('');
+      showNotification(t('notification.proxy_cleared'), 'success');
+    } catch (err: any) {
+      setProxyValue(previous);
+      updateConfigValue('proxy-url', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('proxy', false);
+    }
+  };
+
+  const handleRetryUpdate = async () => {
+    const previous = config?.requestRetry ?? 0;
+    const parsed = Number(retryValue);
+    if (!Number.isFinite(parsed) || parsed < 0) {
+      showNotification(t('login.error_invalid'), 'error');
+      setRetryValue(previous);
+      return;
+    }
+    setPendingFlag('retry', true);
+    updateConfigValue('request-retry', parsed);
+    try {
+      await configApi.updateRequestRetry(parsed);
+      clearCache('request-retry');
+      showNotification(t('notification.retry_updated'), 'success');
+    } catch (err: any) {
+      setRetryValue(previous);
+      updateConfigValue('request-retry', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('retry', false);
+    }
+  };
+
+  const quotaSwitchProject = config?.quotaExceeded?.switchProject ?? false;
+  const quotaSwitchPreview = config?.quotaExceeded?.switchPreviewModel ?? false;
+
+  return (
+    <div className={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.request_log_enable')}
+            checked={config?.requestLog ?? false}
+            disabled={disableControls || pending.requestLog || loading}
+            onChange={(value) =>
+              toggleSetting(
+                'requestLog',
+                'request-log',
+                value,
+                configApi.updateRequestLog,
+                t('notification.request_log_updated')
+              )
+            }
+          />
+
+          <ToggleSwitch
+            label={t('basic_settings.logging_to_file_enable')}
+            checked={config?.loggingToFile ?? false}
+            disabled={disableControls || pending.loggingToFile || loading}
+            onChange={(value) =>
+              toggleSetting(
+                'loggingToFile',
+                'logging-to-file',
+                value,
+                configApi.updateLoggingToFile,
+                t('notification.logging_to_file_updated')
+              )
+            }
+          />
+
+          <ToggleSwitch
+            label={t('basic_settings.ws_auth_enable')}
+            checked={config?.wsAuth ?? false}
+            disabled={disableControls || pending.wsAuth || loading}
+            onChange={(value) =>
+              toggleSetting(
+                'wsAuth',
+                'ws-auth',
+                value,
+                configApi.updateWsAuth,
+                t('notification.ws_auth_updated')
+              )
+            }
+          />
+        </div>
+      </Card>
+
+      <Card title={t('basic_settings.proxy_title')}>
+        <Input
+          label={t('basic_settings.proxy_url_label')}
+          placeholder={t('basic_settings.proxy_url_placeholder')}
+          value={proxyValue}
+          onChange={(e) => setProxyValue(e.target.value)}
+          disabled={disableControls || loading}
+        />
+        <div style={{ display: 'flex', gap: 12 }}>
+          <Button variant="secondary" onClick={handleProxyClear} disabled={disableControls || pending.proxy || loading}>
+            {t('basic_settings.proxy_clear')}
+          </Button>
+          <Button onClick={handleProxyUpdate} loading={pending.proxy} disabled={disableControls || loading}>
+            {t('basic_settings.proxy_update')}
+          </Button>
+        </div>
+      </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>
+  );
+}

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;
+}

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>
+  );
+}

src/pages/UsagePage.module.scss

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

src/pages/UsagePage.tsx

@@ -0,0 +1,943 @@
+import { useEffect, useState, useCallback, useMemo, type CSSProperties } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  type ChartOptions
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { IconDiamond, IconDollarSign, IconSatellite, IconTimer, IconTrendingUp } from '@/components/ui/icons';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useThemeStore } from '@/stores';
+import { usageApi } from '@/services/api/usage';
+import {
+  formatTokensInMillions,
+  formatPerMinuteValue,
+  formatUsd,
+  calculateTokenBreakdown,
+  calculateRecentPerMinuteRates,
+  calculateTotalCost,
+  getModelNamesFromUsage,
+  getApiStats,
+  getModelStats,
+  loadModelPrices,
+  saveModelPrices,
+  buildChartData,
+  collectUsageDetails,
+  extractTotalTokens,
+  type ModelPrice
+} from '@/utils/usage';
+import styles from './UsagePage.module.scss';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+interface UsagePayload {
+  total_requests?: number;
+  success_count?: number;
+  failure_count?: number;
+  total_tokens?: number;
+  apis?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+export function UsagePage() {
+  const { t } = useTranslation();
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const theme = useThemeStore((state) => state.theme);
+  const isDark = theme === 'dark';
+
+  const [usage, setUsage] = useState<UsagePayload | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [modelPrices, setModelPrices] = useState<Record<string, ModelPrice>>({});
+
+  // Model price form state
+  const [selectedModel, setSelectedModel] = useState('');
+  const [promptPrice, setPromptPrice] = useState('');
+  const [completionPrice, setCompletionPrice] = useState('');
+  const [cachePrice, setCachePrice] = useState('');
+
+  // Expanded sections
+  const [expandedApis, setExpandedApis] = useState<Set<string>>(new Set());
+
+  // Chart state
+  const [requestsPeriod, setRequestsPeriod] = useState<'hour' | 'day'>('day');
+  const [tokensPeriod, setTokensPeriod] = useState<'hour' | 'day'>('day');
+  const [chartLines, setChartLines] = useState<string[]>(['all']);
+  const MAX_CHART_LINES = 9;
+
+  const loadUsage = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await usageApi.getUsage();
+      const payload = data?.usage ?? data;
+      setUsage(payload);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : t('usage_stats.loading_error');
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  useEffect(() => {
+    loadUsage();
+    setModelPrices(loadModelPrices());
+  }, [loadUsage]);
+
+  // Calculate derived data
+  const tokenBreakdown = usage ? calculateTokenBreakdown(usage) : { cachedTokens: 0, reasoningTokens: 0 };
+  const rateStats = usage
+    ? calculateRecentPerMinuteRates(30, usage)
+    : { rpm: 0, tpm: 0, windowMinutes: 30, requestCount: 0, tokenCount: 0 };
+  const totalCost = usage ? calculateTotalCost(usage, modelPrices) : 0;
+  const modelNames = usage ? getModelNamesFromUsage(usage) : [];
+  const apiStats = usage ? getApiStats(usage, modelPrices) : [];
+  const modelStats = usage ? getModelStats(usage, modelPrices) : [];
+  const hasPrices = Object.keys(modelPrices).length > 0;
+
+  // Build chart data
+  const requestsChartData = useMemo(() => {
+    if (!usage) return { labels: [], datasets: [] };
+    return buildChartData(usage, requestsPeriod, 'requests', chartLines);
+  }, [usage, requestsPeriod, chartLines]);
+
+  const tokensChartData = useMemo(() => {
+    if (!usage) return { labels: [], datasets: [] };
+    return buildChartData(usage, tokensPeriod, 'tokens', chartLines);
+  }, [usage, tokensPeriod, chartLines]);
+
+  const sparklineOptions = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: { legend: { display: false }, tooltip: { enabled: false } },
+      scales: { x: { display: false }, y: { display: false } },
+      elements: { line: { tension: 0.45 }, point: { radius: 0 } }
+    }),
+    []
+  );
+
+  const buildLastHourSeries = useCallback(
+    (metric: 'requests' | 'tokens'): { labels: string[]; data: number[] } => {
+      if (!usage) return { labels: [], data: [] };
+      const details = collectUsageDetails(usage);
+      if (!details.length) return { labels: [], data: [] };
+
+      const windowMinutes = 60;
+      const now = Date.now();
+      const windowStart = now - windowMinutes * 60 * 1000;
+      const buckets = new Array(windowMinutes).fill(0);
+
+      details.forEach(detail => {
+        const timestamp = Date.parse(detail.timestamp);
+        if (Number.isNaN(timestamp) || timestamp < windowStart) {
+          return;
+        }
+        const minuteIndex = Math.min(
+          windowMinutes - 1,
+          Math.floor((timestamp - windowStart) / 60000)
+        );
+        const increment = metric === 'tokens' ? extractTotalTokens(detail) : 1;
+        buckets[minuteIndex] += increment;
+      });
+
+      const labels = buckets.map((_, idx) => {
+        const date = new Date(windowStart + (idx + 1) * 60000);
+        const h = date.getHours().toString().padStart(2, '0');
+        const m = date.getMinutes().toString().padStart(2, '0');
+        return `${h}:${m}`;
+      });
+
+      return { labels, data: buckets };
+    },
+    [usage]
+  );
+
+  const buildSparkline = useCallback(
+    (series: { labels: string[]; data: number[] }, color: string, backgroundColor: string) => {
+      if (loading || !series?.data?.length) {
+        return null;
+      }
+      const sliceStart = Math.max(series.data.length - 60, 0);
+      const labels = series.labels.slice(sliceStart);
+      const points = series.data.slice(sliceStart);
+      return {
+        data: {
+          labels,
+          datasets: [
+            {
+              data: points,
+              borderColor: color,
+              backgroundColor,
+              fill: true,
+              tension: 0.45,
+              pointRadius: 0,
+              borderWidth: 2
+            }
+          ]
+        }
+      };
+    },
+    [loading]
+  );
+
+  const requestsSparkline = useMemo(
+    () => buildSparkline(buildLastHourSeries('requests'), '#3b82f6', 'rgba(59, 130, 246, 0.18)'),
+    [buildLastHourSeries, buildSparkline]
+  );
+  const tokensSparkline = useMemo(
+    () => buildSparkline(buildLastHourSeries('tokens'), '#8b5cf6', 'rgba(139, 92, 246, 0.18)'),
+    [buildLastHourSeries, buildSparkline]
+  );
+  const rpmSparkline = useMemo(
+    () => buildSparkline(buildLastHourSeries('requests'), '#22c55e', 'rgba(34, 197, 94, 0.18)'),
+    [buildLastHourSeries, buildSparkline]
+  );
+  const tpmSparkline = useMemo(
+    () => buildSparkline(buildLastHourSeries('tokens'), '#f97316', 'rgba(249, 115, 22, 0.18)'),
+    [buildLastHourSeries, buildSparkline]
+  );
+  const costSparkline = useMemo(
+    () => buildSparkline(buildLastHourSeries('tokens'), '#f59e0b', 'rgba(245, 158, 11, 0.18)'),
+    [buildLastHourSeries, buildSparkline]
+  );
+
+  const buildChartOptions = useCallback(
+    (period: 'hour' | 'day', labels: string[]): ChartOptions<'line'> => {
+      const pointRadius = isMobile && period === 'hour' ? 0 : isMobile ? 2 : 4;
+      const tickFontSize = isMobile ? 10 : 12;
+      const maxTickLabelCount = isMobile ? (period === 'hour' ? 8 : 6) : period === 'hour' ? 12 : 10;
+      const gridColor = isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(17, 24, 39, 0.06)';
+      const axisBorderColor = isDark ? 'rgba(255, 255, 255, 0.10)' : 'rgba(17, 24, 39, 0.10)';
+      const tickColor = isDark ? 'rgba(255, 255, 255, 0.72)' : 'rgba(17, 24, 39, 0.72)';
+      const tooltipBg = isDark ? 'rgba(17, 24, 39, 0.92)' : 'rgba(255, 255, 255, 0.98)';
+      const tooltipTitle = isDark ? '#ffffff' : '#111827';
+      const tooltipBody = isDark ? 'rgba(255, 255, 255, 0.86)' : '#374151';
+      const tooltipBorder = isDark ? 'rgba(255, 255, 255, 0.10)' : 'rgba(17, 24, 39, 0.10)';
+
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: {
+          mode: 'index',
+          intersect: false
+        },
+        plugins: {
+          legend: { display: false },
+          tooltip: {
+            backgroundColor: tooltipBg,
+            titleColor: tooltipTitle,
+            bodyColor: tooltipBody,
+            borderColor: tooltipBorder,
+            borderWidth: 1,
+            padding: 10,
+            displayColors: true,
+            usePointStyle: true
+          }
+        },
+        scales: {
+          x: {
+            grid: {
+              color: gridColor,
+              drawTicks: false
+            },
+            border: {
+              color: axisBorderColor
+            },
+            ticks: {
+              color: tickColor,
+              font: { size: tickFontSize },
+              maxRotation: isMobile ? 0 : 45,
+              minRotation: isMobile ? 0 : 0,
+              autoSkip: true,
+              maxTicksLimit: maxTickLabelCount,
+              callback: (value) => {
+                const index = typeof value === 'number' ? value : Number(value);
+                const raw =
+                  Number.isFinite(index) && labels[index] ? labels[index] : typeof value === 'string' ? value : '';
+
+                if (period === 'hour') {
+                  const [md, time] = raw.split(' ');
+                  if (!time) return raw;
+                  if (time.startsWith('00:')) {
+                    return md ? [md, time] : time;
+                  }
+                  return time;
+                }
+
+                if (isMobile) {
+                  const parts = raw.split('-');
+                  if (parts.length === 3) {
+                    return `${parts[1]}-${parts[2]}`;
+                  }
+                }
+                return raw;
+              }
+            }
+          },
+          y: {
+            beginAtZero: true,
+            grid: {
+              color: gridColor
+            },
+            border: {
+              color: axisBorderColor
+            },
+            ticks: {
+              color: tickColor,
+              font: { size: tickFontSize }
+            }
+          }
+        },
+        elements: {
+          line: {
+            tension: 0.35,
+            borderWidth: isMobile ? 1.5 : 2
+          },
+          point: {
+            borderWidth: 2,
+            radius: pointRadius,
+            hoverRadius: 4
+          }
+        }
+      };
+    },
+    [isDark, isMobile]
+  );
+
+  const requestsChartOptions = useMemo(
+    () => buildChartOptions(requestsPeriod, requestsChartData.labels),
+    [buildChartOptions, requestsPeriod, requestsChartData.labels]
+  );
+
+  const tokensChartOptions = useMemo(
+    () => buildChartOptions(tokensPeriod, tokensChartData.labels),
+    [buildChartOptions, tokensPeriod, tokensChartData.labels]
+  );
+
+  const getHourChartMinWidth = useCallback(
+    (labelCount: number) => {
+      if (!isMobile || labelCount <= 0) return undefined;
+      // 24 小时标签在移动端需要更宽的画布，避免 X 轴与点位过度挤压
+      const perPoint = 56;
+      const minWidth = Math.min(labelCount * perPoint, 3000);
+      return `${minWidth}px`;
+    },
+    [isMobile]
+  );
+
+  // Chart line management
+  const handleAddChartLine = () => {
+    if (chartLines.length >= MAX_CHART_LINES) return;
+    const unusedModel = modelNames.find(m => !chartLines.includes(m));
+    if (unusedModel) {
+      setChartLines([...chartLines, unusedModel]);
+    } else {
+      setChartLines([...chartLines, 'all']);
+    }
+  };
+
+  const handleRemoveChartLine = (index: number) => {
+    if (chartLines.length <= 1) return;
+    const newLines = [...chartLines];
+    newLines.splice(index, 1);
+    setChartLines(newLines);
+  };
+
+  const handleChartLineChange = (index: number, value: string) => {
+    const newLines = [...chartLines];
+    newLines[index] = value;
+    setChartLines(newLines);
+  };
+
+  // Handle model price save
+  const handleSavePrice = () => {
+    if (!selectedModel) return;
+    const prompt = parseFloat(promptPrice) || 0;
+    const completion = parseFloat(completionPrice) || 0;
+    const cache = cachePrice.trim() === '' ? prompt : parseFloat(cachePrice) || 0;
+    const newPrices = { ...modelPrices, [selectedModel]: { prompt, completion, cache } };
+    setModelPrices(newPrices);
+    saveModelPrices(newPrices);
+    setSelectedModel('');
+    setPromptPrice('');
+    setCompletionPrice('');
+    setCachePrice('');
+  };
+
+  // Handle model price delete
+  const handleDeletePrice = (model: string) => {
+    const newPrices = { ...modelPrices };
+    delete newPrices[model];
+    setModelPrices(newPrices);
+    saveModelPrices(newPrices);
+  };
+
+  // Handle edit price
+  const handleEditPrice = (model: string) => {
+    const price = modelPrices[model];
+    setSelectedModel(model);
+    setPromptPrice(price?.prompt?.toString() || '');
+    setCompletionPrice(price?.completion?.toString() || '');
+    setCachePrice(price?.cache?.toString() || '');
+  };
+
+  // Toggle API expansion
+  const toggleApiExpand = (endpoint: string) => {
+    setExpandedApis(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(endpoint)) {
+        newSet.delete(endpoint);
+      } else {
+        newSet.add(endpoint);
+      }
+      return newSet;
+    });
+  };
+
+  const statsCards = [
+    {
+      key: 'requests',
+      label: t('usage_stats.total_requests'),
+      icon: <IconSatellite size={16} />,
+      accent: '#3b82f6',
+      accentSoft: 'rgba(59, 130, 246, 0.18)',
+      accentBorder: 'rgba(59, 130, 246, 0.35)',
+      value: loading ? '-' : (usage?.total_requests ?? 0).toLocaleString(),
+      meta: (
+        <>
+          <span className={styles.statMetaItem}>
+            <span className={styles.statMetaDot} style={{ backgroundColor: '#10b981' }} />
+            {t('usage_stats.success_requests')}: {loading ? '-' : (usage?.success_count ?? 0)}
+          </span>
+          <span className={styles.statMetaItem}>
+            <span className={styles.statMetaDot} style={{ backgroundColor: '#ef4444' }} />
+            {t('usage_stats.failed_requests')}: {loading ? '-' : (usage?.failure_count ?? 0)}
+          </span>
+        </>
+      ),
+      trend: requestsSparkline
+    },
+    {
+      key: 'tokens',
+      label: t('usage_stats.total_tokens'),
+      icon: <IconDiamond size={16} />,
+      accent: '#8b5cf6',
+      accentSoft: 'rgba(139, 92, 246, 0.18)',
+      accentBorder: 'rgba(139, 92, 246, 0.35)',
+      value: loading ? '-' : formatTokensInMillions(usage?.total_tokens ?? 0),
+      meta: (
+        <>
+          <span className={styles.statMetaItem}>
+            {t('usage_stats.cached_tokens')}: {loading ? '-' : formatTokensInMillions(tokenBreakdown.cachedTokens)}
+          </span>
+          <span className={styles.statMetaItem}>
+            {t('usage_stats.reasoning_tokens')}: {loading ? '-' : formatTokensInMillions(tokenBreakdown.reasoningTokens)}
+          </span>
+        </>
+      ),
+      trend: tokensSparkline
+    },
+    {
+      key: 'rpm',
+      label: t('usage_stats.rpm_30m'),
+      icon: <IconTimer size={16} />,
+      accent: '#22c55e',
+      accentSoft: 'rgba(34, 197, 94, 0.18)',
+      accentBorder: 'rgba(34, 197, 94, 0.32)',
+      value: loading ? '-' : formatPerMinuteValue(rateStats.rpm),
+      meta: (
+        <span className={styles.statMetaItem}>
+          {t('usage_stats.total_requests')}: {loading ? '-' : rateStats.requestCount.toLocaleString()}
+        </span>
+      ),
+      trend: rpmSparkline
+    },
+    {
+      key: 'tpm',
+      label: t('usage_stats.tpm_30m'),
+      icon: <IconTrendingUp size={16} />,
+      accent: '#f97316',
+      accentSoft: 'rgba(249, 115, 22, 0.18)',
+      accentBorder: 'rgba(249, 115, 22, 0.32)',
+      value: loading ? '-' : formatPerMinuteValue(rateStats.tpm),
+      meta: (
+        <span className={styles.statMetaItem}>
+          {t('usage_stats.total_tokens')}: {loading ? '-' : formatTokensInMillions(rateStats.tokenCount)}
+        </span>
+      ),
+      trend: tpmSparkline
+    },
+    {
+      key: 'cost',
+      label: t('usage_stats.total_cost'),
+      icon: <IconDollarSign size={16} />,
+      accent: '#f59e0b',
+      accentSoft: 'rgba(245, 158, 11, 0.18)',
+      accentBorder: 'rgba(245, 158, 11, 0.32)',
+      value: loading ? '-' : hasPrices ? formatUsd(totalCost) : '--',
+      meta: (
+        <>
+          <span className={styles.statMetaItem}>
+            {t('usage_stats.total_tokens')}: {loading ? '-' : formatTokensInMillions(usage?.total_tokens ?? 0)}
+          </span>
+          {!hasPrices && (
+            <span className={`${styles.statMetaItem} ${styles.statSubtle}`}>
+              {t('usage_stats.cost_need_price')}
+            </span>
+          )}
+        </>
+      ),
+      trend: hasPrices ? costSparkline : null
+    }
+  ];
+
+  return (
+    <div className={styles.container}>
+      {loading && !usage && (
+        <div className={styles.loadingOverlay} aria-busy="true">
+          <div className={styles.loadingOverlayContent}>
+            <LoadingSpinner size={28} className={styles.loadingOverlaySpinner} />
+            <span className={styles.loadingOverlayText}>{t('common.loading')}</span>
+          </div>
+        </div>
+      )}
+      <div className={styles.header}>
+        <h1 className={styles.pageTitle}>{t('usage_stats.title')}</h1>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={loadUsage}
+          disabled={loading}
+        >
+          {loading ? t('common.loading') : t('usage_stats.refresh')}
+        </Button>
+      </div>
+
+      {error && <div className={styles.errorBox}>{error}</div>}
+
+      {/* Stats Overview Cards */}
+      <div className={styles.statsGrid}>
+        {statsCards.map(card => (
+          <div
+            key={card.key}
+            className={styles.statCard}
+            style={
+              {
+                '--accent': card.accent,
+                '--accent-soft': card.accentSoft,
+                '--accent-border': card.accentBorder
+              } as CSSProperties
+            }
+          >
+            <div className={styles.statCardHeader}>
+              <div className={styles.statLabelGroup}>
+                <span className={styles.statLabel}>{card.label}</span>
+              </div>
+              <span className={styles.statIconBadge}>
+                {card.icon}
+              </span>
+            </div>
+            <div className={styles.statValue}>{card.value}</div>
+            {card.meta && <div className={styles.statMetaRow}>{card.meta}</div>}
+            <div className={styles.statTrend}>
+              {card.trend ? (
+                <Line className={styles.sparkline} data={card.trend.data} options={sparklineOptions} />
+              ) : (
+                <div className={styles.statTrendPlaceholder}></div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Chart Line Selection */}
+      <Card
+        title={t('usage_stats.chart_line_actions_label')}
+        extra={
+          <div className={styles.chartLineHeader}>
+            <span className={styles.chartLineCount}>
+              {chartLines.length}/{MAX_CHART_LINES}
+            </span>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleAddChartLine}
+              disabled={chartLines.length >= MAX_CHART_LINES}
+            >
+              {t('usage_stats.chart_line_add')}
+            </Button>
+          </div>
+        }
+      >
+        <div className={styles.chartLineList}>
+          {chartLines.map((line, index) => (
+            <div key={index} className={styles.chartLineItem}>
+              <span className={styles.chartLineLabel}>
+                {t(`usage_stats.chart_line_label_${index + 1}`)}
+              </span>
+              <select
+                value={line}
+                onChange={(e) => handleChartLineChange(index, e.target.value)}
+                className={styles.select}
+              >
+                <option value="all">{t('usage_stats.chart_line_all')}</option>
+                {modelNames.map((name) => (
+                  <option key={name} value={name}>{name}</option>
+                ))}
+              </select>
+              {chartLines.length > 1 && (
+                <Button
+                  variant="danger"
+                  size="sm"
+                  onClick={() => handleRemoveChartLine(index)}
+                >
+                  {t('usage_stats.chart_line_delete')}
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+        <p className={styles.chartLineHint}>{t('usage_stats.chart_line_hint')}</p>
+      </Card>
+
+      <div className={styles.chartsGrid}>
+        {/* Requests Chart */}
+        <Card
+          title={t('usage_stats.requests_trend')}
+          extra={
+            <div className={styles.periodButtons}>
+              <Button
+                variant={requestsPeriod === 'hour' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setRequestsPeriod('hour')}
+              >
+                {t('usage_stats.by_hour')}
+              </Button>
+              <Button
+                variant={requestsPeriod === 'day' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setRequestsPeriod('day')}
+              >
+                {t('usage_stats.by_day')}
+              </Button>
+            </div>
+          }
+        >
+          {loading ? (
+            <div className={styles.hint}>{t('common.loading')}</div>
+          ) : requestsChartData.labels.length > 0 ? (
+            <div className={styles.chartWrapper}>
+              <div className={styles.chartLegend} aria-label="Chart legend">
+                {requestsChartData.datasets.map((dataset, index) => (
+                  <div
+                    key={`${dataset.label}-${index}`}
+                    className={styles.legendItem}
+                    title={dataset.label}
+                  >
+                    <span className={styles.legendDot} style={{ backgroundColor: dataset.borderColor }} />
+                    <span className={styles.legendLabel}>{dataset.label}</span>
+                  </div>
+                ))}
+              </div>
+              <div className={styles.chartArea}>
+                <div className={styles.chartScroller}>
+                  <div
+                    className={styles.chartCanvas}
+                    style={
+                      requestsPeriod === 'hour'
+                        ? { minWidth: getHourChartMinWidth(requestsChartData.labels.length) }
+                        : undefined
+                    }
+                  >
+                    <Line data={requestsChartData} options={requestsChartOptions} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+          )}
+        </Card>
+
+        {/* Tokens Chart */}
+        <Card
+          title={t('usage_stats.tokens_trend')}
+          extra={
+            <div className={styles.periodButtons}>
+              <Button
+                variant={tokensPeriod === 'hour' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setTokensPeriod('hour')}
+              >
+                {t('usage_stats.by_hour')}
+              </Button>
+              <Button
+                variant={tokensPeriod === 'day' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setTokensPeriod('day')}
+              >
+                {t('usage_stats.by_day')}
+              </Button>
+            </div>
+          }
+        >
+          {loading ? (
+            <div className={styles.hint}>{t('common.loading')}</div>
+          ) : tokensChartData.labels.length > 0 ? (
+            <div className={styles.chartWrapper}>
+              <div className={styles.chartLegend} aria-label="Chart legend">
+                {tokensChartData.datasets.map((dataset, index) => (
+                  <div
+                    key={`${dataset.label}-${index}`}
+                    className={styles.legendItem}
+                    title={dataset.label}
+                  >
+                    <span className={styles.legendDot} style={{ backgroundColor: dataset.borderColor }} />
+                    <span className={styles.legendLabel}>{dataset.label}</span>
+                  </div>
+                ))}
+              </div>
+              <div className={styles.chartArea}>
+                <div className={styles.chartScroller}>
+                  <div
+                    className={styles.chartCanvas}
+                    style={
+                      tokensPeriod === 'hour'
+                        ? { minWidth: getHourChartMinWidth(tokensChartData.labels.length) }
+                        : undefined
+                    }
+                  >
+                    <Line data={tokensChartData} options={tokensChartOptions} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+          )}
+        </Card>
+      </div>
+
+      <div className={styles.detailsGrid}>
+        {/* API Key Statistics */}
+        <Card title={t('usage_stats.api_details')}>
+          {loading ? (
+            <div className={styles.hint}>{t('common.loading')}</div>
+          ) : apiStats.length > 0 ? (
+            <div className={styles.apiList}>
+              {apiStats.map((api) => (
+                <div key={api.endpoint} className={styles.apiItem}>
+                  <div
+                    className={styles.apiHeader}
+                    onClick={() => toggleApiExpand(api.endpoint)}
+                  >
+                    <div className={styles.apiInfo}>
+                      <span className={styles.apiEndpoint}>{api.endpoint}</span>
+                      <div className={styles.apiStats}>
+                        <span className={styles.apiBadge}>
+                          {t('usage_stats.requests_count')}: {api.totalRequests}
+                        </span>
+                        <span className={styles.apiBadge}>
+                          Tokens: {formatTokensInMillions(api.totalTokens)}
+                        </span>
+                        {hasPrices && api.totalCost > 0 && (
+                          <span className={styles.apiBadge}>
+                            {t('usage_stats.total_cost')}: {formatUsd(api.totalCost)}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <span className={styles.expandIcon}>
+                      {expandedApis.has(api.endpoint) ? '▼' : '▶'}
+                    </span>
+                  </div>
+                  {expandedApis.has(api.endpoint) && (
+                    <div className={styles.apiModels}>
+                      {Object.entries(api.models).map(([model, stats]) => (
+                        <div key={model} className={styles.modelRow}>
+                          <span className={styles.modelName}>{model}</span>
+                          <span className={styles.modelStat}>{stats.requests} {t('usage_stats.requests_count')}</span>
+                          <span className={styles.modelStat}>{formatTokensInMillions(stats.tokens)}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+          )}
+        </Card>
+
+        {/* Model Statistics */}
+        <Card title={t('usage_stats.models')}>
+          {loading ? (
+            <div className={styles.hint}>{t('common.loading')}</div>
+          ) : modelStats.length > 0 ? (
+            <div className={styles.tableWrapper}>
+              <table className={styles.table}>
+                <thead>
+                  <tr>
+                    <th>{t('usage_stats.model_name')}</th>
+                    <th>{t('usage_stats.requests_count')}</th>
+                    <th>{t('usage_stats.tokens_count')}</th>
+                    {hasPrices && <th>{t('usage_stats.total_cost')}</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {modelStats.map((stat) => (
+                    <tr key={stat.model}>
+                      <td className={styles.modelCell}>{stat.model}</td>
+                      <td>{stat.requests.toLocaleString()}</td>
+                      <td>{formatTokensInMillions(stat.tokens)}</td>
+                      {hasPrices && <td>{stat.cost > 0 ? formatUsd(stat.cost) : '--'}</td>}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+          )}
+        </Card>
+      </div>
+
+      {/* Model Pricing Configuration */}
+      <Card title={t('usage_stats.model_price_settings')}>
+        <div className={styles.pricingSection}>
+          {/* Price Form */}
+          <div className={styles.priceForm}>
+            <div className={styles.formRow}>
+              <div className={styles.formField}>
+                <label>{t('usage_stats.model_name')}</label>
+                <select
+                  value={selectedModel}
+                  onChange={(e) => {
+                    setSelectedModel(e.target.value);
+                    const price = modelPrices[e.target.value];
+                    if (price) {
+                      setPromptPrice(price.prompt.toString());
+                      setCompletionPrice(price.completion.toString());
+                      setCachePrice(price.cache.toString());
+                    } else {
+                      setPromptPrice('');
+                      setCompletionPrice('');
+                      setCachePrice('');
+                    }
+                  }}
+                  className={styles.select}
+                >
+                  <option value="">{t('usage_stats.model_price_select_placeholder')}</option>
+                  {modelNames.map((name) => (
+                    <option key={name} value={name}>{name}</option>
+                  ))}
+                </select>
+              </div>
+              <div className={styles.formField}>
+                <label>{t('usage_stats.model_price_prompt')} ($/1M)</label>
+                <Input
+                  type="number"
+                  value={promptPrice}
+                  onChange={(e) => setPromptPrice(e.target.value)}
+                  placeholder="0.00"
+                  step="0.0001"
+                />
+              </div>
+              <div className={styles.formField}>
+                <label>{t('usage_stats.model_price_completion')} ($/1M)</label>
+                <Input
+                  type="number"
+                  value={completionPrice}
+                  onChange={(e) => setCompletionPrice(e.target.value)}
+                  placeholder="0.00"
+                  step="0.0001"
+                />
+              </div>
+              <div className={styles.formField}>
+                <label>{t('usage_stats.model_price_cache')} ($/1M)</label>
+                <Input
+                  type="number"
+                  value={cachePrice}
+                  onChange={(e) => setCachePrice(e.target.value)}
+                  placeholder="0.00"
+                  step="0.0001"
+                />
+              </div>
+              <Button
+                variant="primary"
+                onClick={handleSavePrice}
+                disabled={!selectedModel}
+              >
+                {t('common.save')}
+              </Button>
+            </div>
+          </div>
+
+          {/* Saved Prices List */}
+          <div className={styles.pricesList}>
+            <h4 className={styles.pricesTitle}>{t('usage_stats.saved_prices')}</h4>
+            {Object.keys(modelPrices).length > 0 ? (
+              <div className={styles.pricesGrid}>
+                {Object.entries(modelPrices).map(([model, price]) => (
+                  <div key={model} className={styles.priceItem}>
+                    <div className={styles.priceInfo}>
+                      <span className={styles.priceModel}>{model}</span>
+                      <div className={styles.priceMeta}>
+                        <span>{t('usage_stats.model_price_prompt')}: ${price.prompt.toFixed(4)}/1M</span>
+                        <span>{t('usage_stats.model_price_completion')}: ${price.completion.toFixed(4)}/1M</span>
+                        <span>{t('usage_stats.model_price_cache')}: ${price.cache.toFixed(4)}/1M</span>
+                      </div>
+                    </div>
+                    <div className={styles.priceActions}>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => handleEditPrice(model)}
+                      >
+                        {t('common.edit')}
+                      </Button>
+                      <Button
+                        variant="danger"
+                        size="sm"
+                        onClick={() => handleDeletePrice(model)}
+                      >
+                        {t('common.delete')}
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className={styles.hint}>{t('usage_stats.model_price_empty')}</div>
+            )}
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

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;
+}

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 })
+};
+

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}`)
+};

src/services/api/authFiles.ts

@@ -0,0 +1,39 @@
+/**
+ * 认证文件与 OAuth 排除模型相关 API
+ */
+
+import { apiClient } from './client';
+import type { AuthFilesResponse } from '@/types/authFile';
+
+export const authFilesApi = {
+  list: () => apiClient.get<AuthFilesResponse>('/auth-files'),
+
+  upload: (file: File) => {
+    const formData = new FormData();
+    formData.append('file', file, file.name);
+    return apiClient.postForm('/auth-files', formData);
+  },
+
+  deleteFile: (name: string) => apiClient.delete(`/auth-files?name=${encodeURIComponent(name)}`),
+
+  deleteAll: () => apiClient.delete('/auth-files', { params: { all: true } }),
+
+  // OAuth 排除模型
+  async getOauthExcludedModels(): Promise<Record<string, string[]>> {
+    const data = await apiClient.get('/oauth-excluded-models');
+    const payload = (data && (data['oauth-excluded-models'] ?? data.items ?? data)) as any;
+    return payload && typeof payload === 'object' ? payload : {};
+  },
+
+  saveOauthExcludedModels: (provider: string, models: string[]) =>
+    apiClient.patch('/oauth-excluded-models', { provider, models }),
+
+  deleteOauthExcludedEntry: (provider: string) =>
+    apiClient.delete(`/oauth-excluded-models?provider=${encodeURIComponent(provider)}`),
+
+  // 获取认证凭证支持的模型
+  async getModelsForAuthFile(name: string): Promise<{ id: string; display_name?: string; type?: string; owned_by?: string }[]> {
+    const data = await apiClient.get(`/auth-files/models?name=${encodeURIComponent(name)}`);
+    return (data && Array.isArray(data['models'])) ? data['models'] : [];
+  }
+};

src/services/api/client.ts

@@ -0,0 +1,219 @@
+/**
+ * Axios API 客户端
+ * 替代原项目 src/core/api-client.js
+ */
+
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import type { ApiClientConfig, ApiError } from '@/types';
+import {
+  BUILD_DATE_HEADER_KEYS,
+  MANAGEMENT_API_PREFIX,
+  REQUEST_TIMEOUT_MS,
+  VERSION_HEADER_KEYS
+} from '@/utils/constants';
+
+class ApiClient {
+  private instance: AxiosInstance;
+  private apiBase: string = '';
+  private managementKey: string = '';
+
+  constructor() {
+    this.instance = axios.create({
+      timeout: REQUEST_TIMEOUT_MS,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+
+    this.setupInterceptors();
+  }
+
+  /**
+   * 设置 API 配置
+   */
+  setConfig(config: ApiClientConfig): void {
+    this.apiBase = this.normalizeApiBase(config.apiBase);
+    this.managementKey = config.managementKey;
+
+    if (config.timeout) {
+      this.instance.defaults.timeout = config.timeout;
+    } else {
+      this.instance.defaults.timeout = REQUEST_TIMEOUT_MS;
+    }
+  }
+
+  /**
+   * 规范化 API Base URL
+   */
+  private normalizeApiBase(base: string): string {
+    let normalized = base.trim();
+
+    // 移除尾部的 /v0/management
+    normalized = normalized.replace(/\/?v0\/management\/?$/i, '');
+
+    // 移除尾部斜杠
+    normalized = normalized.replace(/\/+$/, '');
+
+    // 添加协议
+    if (!/^https?:\/\//i.test(normalized)) {
+      normalized = `http://${normalized}`;
+    }
+
+    return `${normalized}${MANAGEMENT_API_PREFIX}`;
+  }
+
+  private readHeader(headers: Record<string, any>, keys: string[]): string | null {
+    const normalized = Object.fromEntries(
+      Object.entries(headers || {}).map(([key, value]) => [key.toLowerCase(), value as string | undefined])
+    );
+    for (const key of keys) {
+      const match = normalized[key.toLowerCase()];
+      if (match) return match;
+    }
+    return null;
+  }
+
+  /**
+   * 设置请求/响应拦截器
+   */
+  private setupInterceptors(): void {
+    // 请求拦截器
+    this.instance.interceptors.request.use(
+      (config) => {
+        // 设置 baseURL
+        config.baseURL = this.apiBase;
+        if (config.url) {
+          // Normalize deprecated Gemini endpoint to the current path.
+          config.url = config.url.replace(/\/generative-language-api-key\b/g, '/gemini-api-key');
+        }
+
+        // 添加认证头
+        if (this.managementKey) {
+          config.headers.Authorization = `Bearer ${this.managementKey}`;
+        }
+
+        return config;
+      },
+      (error) => Promise.reject(this.handleError(error))
+    );
+
+    // 响应拦截器
+    this.instance.interceptors.response.use(
+      (response) => {
+        const headers = response.headers as Record<string, string | undefined>;
+        const version = this.readHeader(headers, VERSION_HEADER_KEYS);
+        const buildDate = this.readHeader(headers, BUILD_DATE_HEADER_KEYS);
+
+        // 触发版本更新事件（后续通过 store 处理）
+        if (version || buildDate) {
+          window.dispatchEvent(
+            new CustomEvent('server-version-update', {
+              detail: { version: version || null, buildDate: buildDate || null }
+            })
+          );
+        }
+
+        return response;
+      },
+      (error) => Promise.reject(this.handleError(error))
+    );
+  }
+
+  /**
+   * 错误处理
+   */
+  private handleError(error: any): ApiError {
+    if (axios.isAxiosError(error)) {
+      const responseData = error.response?.data as any;
+      const message = responseData?.error || responseData?.message || error.message || 'Request failed';
+      const apiError = new Error(message) as ApiError;
+      apiError.name = 'ApiError';
+      apiError.status = error.response?.status;
+      apiError.code = error.code;
+      apiError.details = responseData;
+      apiError.data = responseData;
+
+      // 401 未授权 - 触发登出事件
+      if (error.response?.status === 401) {
+        window.dispatchEvent(new Event('unauthorized'));
+      }
+
+      return apiError;
+    }
+
+    const fallback = new Error(error?.message || 'Unknown error occurred') as ApiError;
+    fallback.name = 'ApiError';
+    return fallback;
+  }
+
+  /**
+   * GET 请求
+   */
+  async get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.get<T>(url, config);
+    return response.data;
+  }
+
+  /**
+   * POST 请求
+   */
+  async post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.post<T>(url, data, config);
+    return response.data;
+  }
+
+  /**
+   * PUT 请求
+   */
+  async put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.put<T>(url, data, config);
+    return response.data;
+  }
+
+  /**
+   * PATCH 请求
+   */
+  async patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.patch<T>(url, data, config);
+    return response.data;
+  }
+
+  /**
+   * DELETE 请求
+   */
+  async delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.delete<T>(url, config);
+    return response.data;
+  }
+
+  /**
+   * 获取原始响应（用于下载等场景）
+   */
+  async getRaw(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> {
+    return this.instance.get(url, config);
+  }
+
+  /**
+   * 发送 FormData
+   */
+  async postForm<T = any>(url: string, formData: FormData, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.post<T>(url, formData, {
+      ...config,
+      headers: {
+        ...(config?.headers || {}),
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+    return response.data;
+  }
+
+  /**
+   * 保留对 axios.request 的访问，便于下载等场景
+   */
+  async requestRaw(config: AxiosRequestConfig): Promise<AxiosResponse> {
+    return this.instance.request(config);
+  }
+}
+
+// 导出单例
+export const apiClient = new ApiClient();

src/services/api/config.ts

@@ -0,0 +1,75 @@
+/**
+ * 配置相关 API
+ */
+
+import { apiClient } from './client';
+import type { Config } from '@/types';
+import { normalizeConfigResponse } from './transformers';
+
+export const configApi = {
+  /**
+   * 获取配置（会进行字段规范化）
+   */
+  async getConfig(): Promise<Config> {
+    const raw = await apiClient.get('/config');
+    return normalizeConfigResponse(raw);
+  },
+
+  /**
+   * 获取原始配置（不做转换）
+   */
+  getRawConfig: () => apiClient.get('/config'),
+
+  /**
+   * 更新 Debug 模式
+   */
+  updateDebug: (enabled: boolean) => apiClient.put('/debug', { value: enabled }),
+
+  /**
+   * 更新代理 URL
+   */
+  updateProxyUrl: (proxyUrl: string) => apiClient.put('/proxy-url', { value: proxyUrl }),
+
+  /**
+   * 清除代理 URL
+   */
+  clearProxyUrl: () => apiClient.delete('/proxy-url'),
+
+  /**
+   * 更新重试次数
+   */
+  updateRequestRetry: (retryCount: number) => apiClient.put('/request-retry', { value: retryCount }),
+
+  /**
+   * 配额回退：切换项目
+   */
+  updateSwitchProject: (enabled: boolean) =>
+    apiClient.put('/quota-exceeded/switch-project', { value: enabled }),
+
+  /**
+   * 配额回退：切换预览模型
+   */
+  updateSwitchPreviewModel: (enabled: boolean) =>
+    apiClient.put('/quota-exceeded/switch-preview-model', { value: enabled }),
+
+  /**
+   * 使用统计开关
+   */
+  updateUsageStatistics: (enabled: boolean) =>
+    apiClient.put('/usage-statistics-enabled', { value: enabled }),
+
+  /**
+   * 请求日志开关
+   */
+  updateRequestLog: (enabled: boolean) => apiClient.put('/request-log', { value: enabled }),
+
+  /**
+   * 写日志到文件开关
+   */
+  updateLoggingToFile: (enabled: boolean) => apiClient.put('/logging-to-file', { value: enabled }),
+
+  /**
+   * WebSocket 鉴权开关
+   */
+  updateWsAuth: (enabled: boolean) => apiClient.put('/ws-auth', { value: enabled }),
+};

src/services/api/configFile.ts

@@ -0,0 +1,27 @@
+/**
+ * 配置文件相关 API（/config.yaml）
+ */
+
+import { apiClient } from './client';
+
+export const configFileApi = {
+  async fetchConfigYaml(): Promise<string> {
+    const response = await apiClient.getRaw('/config.yaml', {
+      responseType: 'text',
+      headers: { Accept: 'application/yaml, text/yaml, text/plain' }
+    });
+    const data = response.data as any;
+    if (typeof data === 'string') return data;
+    if (data === undefined || data === null) return '';
+    return String(data);
+  },
+
+  async saveConfigYaml(content: string): Promise<void> {
+    await apiClient.put('/config.yaml', content, {
+      headers: {
+        'Content-Type': 'application/yaml',
+        Accept: 'application/json, text/plain, */*'
+      }
+    });
+  }
+};

src/services/api/index.ts

@@ -0,0 +1,13 @@
+export * from './client';
+export * from './config';
+export * from './configFile';
+export * from './apiKeys';
+export * from './ampcode';
+export * from './providers';
+export * from './authFiles';
+export * from './oauth';
+export * from './usage';
+export * from './logs';
+export * from './version';
+export * from './models';
+export * from './transformers';

src/services/api/logs.ts

@@ -0,0 +1,42 @@
+/**
+ * 日志相关 API
+ */
+
+import { apiClient } from './client';
+import { LOGS_TIMEOUT_MS } from '@/utils/constants';
+
+export interface LogsQuery {
+  after?: number;
+}
+
+export interface LogsResponse {
+  lines: string[];
+  'line-count': number;
+  'latest-timestamp': number;
+}
+
+export interface ErrorLogFile {
+  name: string;
+  size?: number;
+  modified?: number;
+}
+
+export interface ErrorLogsResponse {
+  files?: ErrorLogFile[];
+}
+
+export const logsApi = {
+  fetchLogs: (params: LogsQuery = {}): Promise<LogsResponse> =>
+    apiClient.get('/logs', { params, timeout: LOGS_TIMEOUT_MS }),
+
+  clearLogs: () => apiClient.delete('/logs'),
+
+  fetchErrorLogs: (): Promise<ErrorLogsResponse> =>
+    apiClient.get('/request-error-logs', { timeout: LOGS_TIMEOUT_MS }),
+
+  downloadErrorLog: (filename: string) =>
+    apiClient.getRaw(`/request-error-logs/${encodeURIComponent(filename)}`, {
+      responseType: 'blob',
+      timeout: LOGS_TIMEOUT_MS
+    }),
+};

src/services/api/models.ts

@@ -0,0 +1,43 @@
+/**
+ * 可用模型获取
+ */
+
+import axios from 'axios';
+import { normalizeModelList } from '@/utils/models';
+
+const normalizeBaseUrl = (baseUrl: string): string => {
+  let normalized = String(baseUrl || '').trim();
+  if (!normalized) return '';
+  normalized = normalized.replace(/\/?v0\/management\/?$/i, '');
+  normalized = normalized.replace(/\/+$/g, '');
+  if (!/^https?:\/\//i.test(normalized)) {
+    normalized = `http://${normalized}`;
+  }
+  return normalized;
+};
+
+const buildModelsEndpoint = (baseUrl: string): string => {
+  const normalized = normalizeBaseUrl(baseUrl);
+  if (!normalized) return '';
+  return normalized.endsWith('/v1') ? `${normalized}/models` : `${normalized}/v1/models`;
+};
+
+export const modelsApi = {
+  async fetchModels(baseUrl: string, apiKey?: string, headers: Record<string, string> = {}) {
+    const endpoint = buildModelsEndpoint(baseUrl);
+    if (!endpoint) {
+      throw new Error('Invalid base url');
+    }
+
+    const resolvedHeaders = { ...headers };
+    if (apiKey) {
+      resolvedHeaders.Authorization = `Bearer ${apiKey}`;
+    }
+
+    const response = await axios.get(endpoint, {
+      headers: Object.keys(resolvedHeaders).length ? resolvedHeaders : undefined
+    });
+    const payload = response.data?.data ?? response.data?.models ?? response.data;
+    return normalizeModelList(payload, { dedupe: true });
+  }
+};

src/services/api/oauth.ts

@@ -0,0 +1,68 @@
+/**
+ * OAuth 与设备码登录相关 API
+ */
+
+import { apiClient } from './client';
+
+export type OAuthProvider =
+  | 'codex'
+  | 'anthropic'
+  | 'antigravity'
+  | 'gemini-cli'
+  | 'qwen'
+  | 'iflow';
+
+export interface OAuthStartResponse {
+  url: string;
+  state?: string;
+}
+
+export interface OAuthCallbackResponse {
+  status: 'ok';
+}
+
+export interface IFlowCookieAuthResponse {
+  status: 'ok' | 'error';
+  error?: string;
+  saved_path?: string;
+  email?: string;
+  expired?: string;
+  type?: string;
+}
+
+const WEBUI_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
+const CALLBACK_PROVIDER_MAP: Partial<Record<OAuthProvider, string>> = {
+  'gemini-cli': 'gemini'
+};
+
+export const oauthApi = {
+  startAuth: (provider: OAuthProvider, options?: { projectId?: string }) => {
+    const params: Record<string, string | boolean> = {};
+    if (WEBUI_SUPPORTED.includes(provider)) {
+      params.is_webui = true;
+    }
+    if (provider === 'gemini-cli' && options?.projectId) {
+      params.project_id = options.projectId;
+    }
+    return apiClient.get<OAuthStartResponse>(`/${provider}-auth-url`, {
+      params: Object.keys(params).length ? params : undefined
+    });
+  },
+
+  getAuthStatus: (state: string) =>
+    apiClient.get<{ status: 'ok' | 'wait' | 'error'; error?: string }>(`/get-auth-status`, {
+      params: { state }
+    }),
+
+  submitCallback: (provider: OAuthProvider, redirectUrl: string) => {
+    const callbackProvider = CALLBACK_PROVIDER_MAP[provider] ?? provider;
+    return apiClient.post<OAuthCallbackResponse>('/oauth-callback', {
+      provider: callbackProvider,
+      redirect_url: redirectUrl
+    });
+  },
+
+  /** iFlow cookie 认证 */
+  iflowCookieAuth: (cookie: string) =>
+    apiClient.post<IFlowCookieAuthResponse>('/iflow-auth-url', { cookie })
+};

src/services/api/providers.ts

@@ -0,0 +1,155 @@
+/**
+ * AI 提供商相关 API
+ */
+
+import { apiClient } from './client';
+import {
+  normalizeGeminiKeyConfig,
+  normalizeOpenAIProvider,
+  normalizeProviderKeyConfig
+} from './transformers';
+import type {
+  GeminiKeyConfig,
+  OpenAIProviderConfig,
+  ProviderKeyConfig,
+  ApiKeyEntry,
+  ModelAlias
+} from '@/types';
+
+const serializeHeaders = (headers?: Record<string, string>) => (headers && Object.keys(headers).length ? headers : undefined);
+
+const serializeModelAliases = (models?: ModelAlias[]) =>
+  Array.isArray(models)
+    ? models
+        .map((model) => {
+          if (!model?.name) return null;
+          const payload: Record<string, any> = { name: model.name };
+          if (model.alias && model.alias !== model.name) {
+            payload.alias = model.alias;
+          }
+          if (model.priority !== undefined) {
+            payload.priority = model.priority;
+          }
+          if (model.testModel) {
+            payload['test-model'] = model.testModel;
+          }
+          return payload;
+        })
+        .filter(Boolean)
+    : undefined;
+
+const serializeApiKeyEntry = (entry: ApiKeyEntry) => {
+  const payload: Record<string, any> = { 'api-key': entry.apiKey };
+  if (entry.proxyUrl) payload['proxy-url'] = entry.proxyUrl;
+  const headers = serializeHeaders(entry.headers);
+  if (headers) payload.headers = headers;
+  return payload;
+};
+
+const serializeProviderKey = (config: ProviderKeyConfig) => {
+  const payload: Record<string, any> = { 'api-key': config.apiKey };
+  if (config.baseUrl) payload['base-url'] = config.baseUrl;
+  if (config.proxyUrl) payload['proxy-url'] = config.proxyUrl;
+  const headers = serializeHeaders(config.headers);
+  if (headers) payload.headers = headers;
+  const models = serializeModelAliases(config.models);
+  if (models && models.length) payload.models = models;
+  if (config.excludedModels && config.excludedModels.length) {
+    payload['excluded-models'] = config.excludedModels;
+  }
+  return payload;
+};
+
+const serializeGeminiKey = (config: GeminiKeyConfig) => {
+  const payload: Record<string, any> = { 'api-key': config.apiKey };
+  if (config.baseUrl) payload['base-url'] = config.baseUrl;
+  const headers = serializeHeaders(config.headers);
+  if (headers) payload.headers = headers;
+  if (config.excludedModels && config.excludedModels.length) {
+    payload['excluded-models'] = config.excludedModels;
+  }
+  return payload;
+};
+
+const serializeOpenAIProvider = (provider: OpenAIProviderConfig) => {
+  const payload: Record<string, any> = {
+    name: provider.name,
+    'base-url': provider.baseUrl,
+    'api-key-entries': Array.isArray(provider.apiKeyEntries)
+      ? provider.apiKeyEntries.map((entry) => serializeApiKeyEntry(entry))
+      : []
+  };
+  const headers = serializeHeaders(provider.headers);
+  if (headers) payload.headers = headers;
+  const models = serializeModelAliases(provider.models);
+  if (models && models.length) payload.models = models;
+  if (provider.priority !== undefined) payload.priority = provider.priority;
+  if (provider.testModel) payload['test-model'] = provider.testModel;
+  return payload;
+};
+
+export const providersApi = {
+  async getGeminiKeys(): Promise<GeminiKeyConfig[]> {
+    const data = await apiClient.get('/gemini-api-key');
+    const list = (data && (data['gemini-api-key'] ?? data.items ?? data)) as any;
+    if (!Array.isArray(list)) return [];
+    return list.map((item) => normalizeGeminiKeyConfig(item)).filter(Boolean) as GeminiKeyConfig[];
+  },
+
+  saveGeminiKeys: (configs: GeminiKeyConfig[]) =>
+    apiClient.put('/gemini-api-key', configs.map((item) => serializeGeminiKey(item))),
+
+  updateGeminiKey: (index: number, value: GeminiKeyConfig) =>
+    apiClient.patch('/gemini-api-key', { index, value: serializeGeminiKey(value) }),
+
+  deleteGeminiKey: (apiKey: string) =>
+    apiClient.delete(`/gemini-api-key?api-key=${encodeURIComponent(apiKey)}`),
+
+  async getCodexConfigs(): Promise<ProviderKeyConfig[]> {
+    const data = await apiClient.get('/codex-api-key');
+    const list = (data && (data['codex-api-key'] ?? data.items ?? data)) as any;
+    if (!Array.isArray(list)) return [];
+    return list.map((item) => normalizeProviderKeyConfig(item)).filter(Boolean) as ProviderKeyConfig[];
+  },
+
+  saveCodexConfigs: (configs: ProviderKeyConfig[]) =>
+    apiClient.put('/codex-api-key', configs.map((item) => serializeProviderKey(item))),
+
+  updateCodexConfig: (index: number, value: ProviderKeyConfig) =>
+    apiClient.patch('/codex-api-key', { index, value: serializeProviderKey(value) }),
+
+  deleteCodexConfig: (apiKey: string) =>
+    apiClient.delete(`/codex-api-key?api-key=${encodeURIComponent(apiKey)}`),
+
+  async getClaudeConfigs(): Promise<ProviderKeyConfig[]> {
+    const data = await apiClient.get('/claude-api-key');
+    const list = (data && (data['claude-api-key'] ?? data.items ?? data)) as any;
+    if (!Array.isArray(list)) return [];
+    return list.map((item) => normalizeProviderKeyConfig(item)).filter(Boolean) as ProviderKeyConfig[];
+  },
+
+  saveClaudeConfigs: (configs: ProviderKeyConfig[]) =>
+    apiClient.put('/claude-api-key', configs.map((item) => serializeProviderKey(item))),
+
+  updateClaudeConfig: (index: number, value: ProviderKeyConfig) =>
+    apiClient.patch('/claude-api-key', { index, value: serializeProviderKey(value) }),
+
+  deleteClaudeConfig: (apiKey: string) =>
+    apiClient.delete(`/claude-api-key?api-key=${encodeURIComponent(apiKey)}`),
+
+  async getOpenAIProviders(): Promise<OpenAIProviderConfig[]> {
+    const data = await apiClient.get('/openai-compatibility');
+    const list = (data && (data['openai-compatibility'] ?? data.items ?? data)) as any;
+    if (!Array.isArray(list)) return [];
+    return list.map((item) => normalizeOpenAIProvider(item)).filter(Boolean) as OpenAIProviderConfig[];
+  },
+
+  saveOpenAIProviders: (providers: OpenAIProviderConfig[]) =>
+    apiClient.put('/openai-compatibility', providers.map((item) => serializeOpenAIProvider(item))),
+
+  updateOpenAIProvider: (index: number, value: OpenAIProviderConfig) =>
+    apiClient.patch('/openai-compatibility', { index, value: serializeOpenAIProvider(value) }),
+
+  deleteOpenAIProvider: (name: string) =>
+    apiClient.delete(`/openai-compatibility?name=${encodeURIComponent(name)}`)
+};