feat(ai-providers): add prefix editing for provider configs

- 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,27 +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
-.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 许可证。

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

@@ -1,166 +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);
-}
-
-function loadLogoDataUrl() {
-    for (const candidate of logoCandidates) {
-        const filePath = path.join(projectRoot, candidate);
-        if (!fs.existsSync(filePath)) continue;
-
-        const ext = path.extname(candidate).toLowerCase();
-        const mime = logoMimeMap[ext];
-        if (!mime) {
-            console.warn(`未知 Logo 文件类型，跳过内联: ${candidate}`);
-            continue;
-        }
-
-        const buffer = readBinary(filePath);
-        const base64 = buffer.toString('base64');
-        return `data:${mime};base64,${base64}`;
-    }
-    return null;
-}
-
-function build() {
-    ensureDistDir();
-
-    let html = readFile(sourceFiles.html);
-    const css = escapeForStyle(readFile(sourceFiles.css));
-    const i18n = escapeForScript(readFile(sourceFiles.i18n));
-    const app = escapeForScript(readFile(sourceFiles.app));
-    
-    // 获取版本号并替换
-    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>`
-    );
-
-    html = html.replace(
-        '<script src="app.js"></script>',
-        `<script>
-${app}
-</script>`
-    );
-
-    const logoDataUrl = loadLogoDataUrl();
-    if (logoDataUrl) {
-        const logoScript = `<script>window.__INLINE_LOGO__ = "${logoDataUrl}";</script>`;
-        if (html.includes('</body>')) {
-            html = html.replace('</body>', `${logoScript}\n</body>`);
-        } else {
-            html += `\n${logoScript}`;
-        }
-    } else {
-        console.warn('未找到可内联的 Logo 文件，将保持运行时加载。');
-    }
-
-    const outputPath = path.join(distDir, 'index.html');
-    fs.writeFileSync(outputPath, html, 'utf8');
-
-    console.log('构建完成: dist/index.html');
-}
-
-try {
-    build();
-} catch (error) {
-    console.error('构建失败:', error);
-    process.exit(1);
-}
-
-

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

index.html

@@ -1,980 +1,13 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title data-i18n="title.login">CLI Proxy API Management Center</title>
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/yaml/yaml.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/closebrackets.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/comment/comment.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
-    <script src="i18n.js"></script>
-</head>
-
-<body>
-    <!-- 自动登录加载页面 -->
-    <div id="auto-login-loading" class="login-container" style="display: none;">
-        <div class="login-card">
-            <div class="auto-login-content">
-                <div class="loading-spinner">
-                    <div class="spinner"></div>
-                </div>
-                <h2 data-i18n="auto_login.title">正在自动登录...</h2>
-                <p data-i18n="auto_login.message">正在使用本地保存的连接信息尝试连接服务器</p>
-            </div>
-        </div>
-    </div>
-
-    <!-- 登录页面 -->
-    <div id="login-page" class="login-container">
-        <div class="login-card">
-            <div class="login-header">
-                <div class="login-header-top">
-                    <h1 class="login-title">
-                        <img id="login-logo" alt="Logo" style="display:none" />
-                        <span data-i18n="title.login">CLI Proxy API Management Center</span>
-                    </h1>
-                    <div class="header-controls">
-                        <div class="language-switcher">
-                            <button id="language-toggle" class="btn btn-secondary language-btn">
-                                <i class="fas fa-globe"></i>
-                                <span data-i18n="language.switch">语言</span>
-                            </button>
-                        </div>
-                        <div class="theme-switcher">
-                            <button id="theme-toggle" class="btn btn-secondary theme-btn">
-                                <i class="fas fa-moon"></i>
-                                <span data-i18n="theme.switch">主题</span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="login-body">
-                <div class="login-connection-info">
-                    <div class="connection-summary">
-                        <i class="fas fa-link"></i>
-                        <div>
-                            <h3 data-i18n="login.connection_title">连接地址</h3>
-                            <p class="connection-url">
-                                <span data-i18n="login.connection_current">当前地址</span>
-                                <span class="connection-url-separator">:</span>
-                                <span id="login-connection-url">-</span>
-                            </p>
-                        </div>
-                    </div>
-                    <p class="form-hint" data-i18n="login.connection_auto_hint">系统将自动使用当前访问地址进行连接</p>
-                </div>
-
-                <form class="login-form">
-                    <div class="form-group">
-                        <label for="login-api-base" data-i18n="login.custom_connection_label">自定义连接地址:</label>
-                        <div class="input-group">
-                            <input type="text" id="login-api-base" data-i18n-placeholder="login.custom_connection_placeholder">
-                            <button type="button" id="login-reset-api-base"
-                                class="btn btn-secondary connection-reset-btn">
-                                <i class="fas fa-location-arrow"></i>
-                                <span data-i18n="login.use_current_address">使用当前地址</span>
-                            </button>
-                        </div>
-                        <p class="form-hint" data-i18n="login.custom_connection_hint">默认使用当前访问地址，若需要可手动输入其他地址。</p>
-                    </div>
-
-                    <div class="form-group">
-                        <label for="login-management-key" data-i18n="login.management_key_label">管理密钥:</label>
-                        <div class="input-group">
-                            <input type="password" id="login-management-key" data-i18n-placeholder="login.management_key_placeholder" required>
-                            <button type="button" class="btn btn-secondary toggle-key-visibility">
-                                <i class="fas fa-eye"></i>
-                            </button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-
-            <!-- 连接按钮 -->
-            <div class="form-actions">
-                <button type="button" id="login-submit" class="btn btn-primary login-btn">
-                    <i class="fas fa-plug"></i> <span data-i18n="login.connect_button">Connect</span>
-                </button>
-            </div>
-
-            <div id="login-error" class="login-error" style="display: none;">
-                <i class="fas fa-exclamation-triangle"></i>
-                <span id="login-error-message"></span>
-            </div>
-        </div>
-    </div>
-
-    <!-- 主页面 -->
-    <div id="main-page" style="display: none;">
-        <!-- 顶部导航栏 -->
-        <div class="top-navbar">
-            <div class="top-navbar-left">
-                <button class="mobile-menu-btn" id="mobile-menu-btn">
-                    <i class="fas fa-bars"></i>
-                </button>
-                <button class="sidebar-toggle-btn-desktop" id="sidebar-toggle-btn-desktop" data-i18n-title="sidebar.toggle_collapse">
-                    <i class="fas fa-bars"></i>
-                </button>
-                <div class="top-navbar-brand">
-                    <img id="site-logo" class="top-navbar-brand-logo" alt="Logo" style="display:none" />
-                    <span class="top-navbar-brand-text" data-i18n="title.main">CLI Proxy API Management Center</span>
-                </div>
-            </div>
-            <div class="top-navbar-actions">
-                <div class="header-controls">
-                    <div class="language-switcher">
-                        <button id="language-toggle-main" class="btn btn-secondary language-btn">
-                            <i class="fas fa-globe"></i>
-                        </button>
-                    </div>
-                    <div class="theme-switcher">
-                        <button id="theme-toggle-main" class="btn btn-secondary theme-btn">
-                            <i class="fas fa-moon"></i>
-                        </button>
-                    </div>
-                </div>
-                <button id="connection-status" class="btn btn-secondary">
-                    <i class="fas fa-circle"></i> <span data-i18n="header.check_connection">检查连接</span>
-                </button>
-                <button id="refresh-all" class="btn btn-primary">
-                    <i class="fas fa-sync-alt"></i>
-                </button>
-                <button id="logout-btn" class="btn btn-danger">
-                    <i class="fas fa-sign-out-alt"></i>
-                </button>
-            </div>
-        </div>
-
-        <div class="layout" id="layout-container">
-            <!-- 侧边栏 -->
-            <nav class="sidebar" id="sidebar">
-                <!-- 导航菜单 -->
-                <ul class="nav-menu">
-                    <li data-i18n-tooltip="nav.basic_settings"><a href="#basic-settings" class="nav-item active"
-                            data-section="basic-settings">
-                            <i class="fas fa-sliders-h"></i> <span data-i18n="nav.basic_settings">基础设置</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.api_keys"><a href="#api-keys" class="nav-item" data-section="api-keys">
-                            <i class="fas fa-key"></i> <span data-i18n="nav.api_keys">API 密钥</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.ai_providers"><a href="#ai-providers" class="nav-item" data-section="ai-providers">
-                            <i class="fas fa-robot"></i> <span data-i18n="nav.ai_providers">AI 提供商</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.auth_files"><a href="#auth-files" class="nav-item" data-section="auth-files">
-                            <i class="fas fa-file-alt"></i> <span data-i18n="nav.auth_files">认证文件</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.usage_stats"><a href="#usage-stats" class="nav-item" data-section="usage-stats">
-                            <i class="fas fa-chart-line"></i> <span data-i18n="nav.usage_stats">使用统计</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.config_management"><a href="#config-management" class="nav-item" data-section="config-management">
-                            <i class="fas fa-cog"></i> <span data-i18n="nav.config_management">配置管理</span>
-                        </a></li>
-                    <li id="logs-nav-item" data-i18n-tooltip="nav.logs" style="display: none;"><a href="#logs" class="nav-item" data-section="logs">
-                            <i class="fas fa-scroll"></i> <span data-i18n="nav.logs">日志查看</span>
-                        </a></li>
-                    <li data-i18n-tooltip="nav.system_info"><a href="#system-info" class="nav-item" data-section="system-info">
-                            <i class="fas fa-info-circle"></i> <span data-i18n="nav.system_info">系统信息</span>
-                        </a></li>
-                </ul>
-            </nav>
-
-            <!-- 侧边栏遮罩（移动端） -->
-            <div class="sidebar-overlay" id="sidebar-overlay"></div>
-
-            <!-- 主内容包装器 -->
-            <div class="main-wrapper" id="main-wrapper">
-                <!-- 主内容区域 -->
-                <div class="main-content">
-                    <!-- 内容区域 -->
-                    <div class="content-area">
-                        <!-- 基础设置 -->
-                        <section id="basic-settings" class="content-section active">
-                            <h2 data-i18n="basic_settings.title">基础设置</h2>
-
-                            <!-- Debug 设置 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-bug"></i> <span
-                                            data-i18n="basic_settings.debug_title">调试模式</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="debug-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label" data-i18n="basic_settings.debug_enable">启用调试模式</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 代理设置 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-network-wired"></i> <span
-                                            data-i18n="basic_settings.proxy_title">代理设置</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="form-group">
-                                        <label for="proxy-url" data-i18n="basic_settings.proxy_url_label">代理
-                                            URL:</label>
-                                        <div class="input-group">
-                                            <input type="text" id="proxy-url" data-i18n-placeholder="basic_settings.proxy_url_placeholder">
-                                            <button id="update-proxy" class="btn btn-primary"
-                                                data-i18n="basic_settings.proxy_update">更新</button>
-                                            <button id="clear-proxy" class="btn btn-danger"
-                                                data-i18n="basic_settings.proxy_clear">清空</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 请求重试设置 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-redo"></i> <span
-                                            data-i18n="basic_settings.retry_title">请求重试</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="form-group">
-                                        <label for="request-retry"
-                                            data-i18n="basic_settings.retry_count_label">重试次数:</label>
-                                        <div class="input-group">
-                                            <input type="number" id="request-retry" min="0" max="10" value="3">
-                                            <button id="update-retry" class="btn btn-primary"
-                                                data-i18n="basic_settings.retry_update">更新</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 配额超出行为 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-exclamation-triangle"></i> <span
-                                            data-i18n="basic_settings.quota_title">配额超出行为</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="switch-project-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.quota_switch_project">自动切换项目</span>
-                                    </div>
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="switch-preview-model-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.quota_switch_preview">切换到预览模型</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 使用统计设置 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-chart-bar"></i> <span
-                                            data-i18n="basic_settings.usage_statistics_title">使用统计</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="usage-statistics-enabled-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.usage_statistics_enable">启用使用统计</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 日志记录设置 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-file-alt"></i> <span
-                                            data-i18n="basic_settings.logging_title">日志记录</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="logging-to-file-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.logging_to_file_enable">启用日志记录到文件</span>
-                                    </div>
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="request-log-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.request_log_enable">启用请求日志</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- WebSocket 鉴权 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-shield-alt"></i> <span
-                                            data-i18n="basic_settings.ws_auth_title">WebSocket 鉴权</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="toggle-group">
-                                        <label class="toggle-switch">
-                                            <input type="checkbox" id="ws-auth-toggle">
-                                            <span class="slider"></span>
-                                        </label>
-                                        <span class="toggle-label"
-                                            data-i18n="basic_settings.ws_auth_enable">启用 /ws/* 鉴权</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                        </section>
-
-                        <!-- API 密钥管理 -->
-                        <section id="api-keys" class="content-section">
-                            <h2 data-i18n="api_keys.title">API 密钥管理</h2>
-
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-key"></i> <span
-                                            data-i18n="api_keys.proxy_auth_title">代理服务认证密钥</span></h3>
-                                    <button id="add-api-key" class="btn btn-primary">
-                                        <i class="fas fa-plus"></i> <span data-i18n="api_keys.add_button">添加密钥</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="api-keys-list" class="key-list"></div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- AI 提供商 -->
-                        <section id="ai-providers" class="content-section">
-                            <h2 data-i18n="ai_providers.title">AI 提供商配置</h2>
-
-                            <!-- Gemini API Keys -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fab fa-google"></i> <span data-i18n="ai_providers.gemini_title">Gemini
-                                            API 密钥</span></h3>
-                                    <button id="add-gemini-key" class="btn btn-primary">
-                                        <i class="fas fa-plus"></i> <span
-                                            data-i18n="ai_providers.gemini_add_button">添加密钥</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="gemini-keys-list" class="key-list"></div>
-                                </div>
-                            </div>
-
-                            <!-- Codex API Keys -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-code"></i> <span data-i18n="ai_providers.codex_title">Codex API
-                                            配置</span></h3>
-                                    <button id="add-codex-key" class="btn btn-primary">
-                                        <i class="fas fa-plus"></i> <span
-                                            data-i18n="ai_providers.codex_add_button">添加配置</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="codex-keys-list" class="provider-list"></div>
-                                </div>
-                            </div>
-
-                            <!-- Claude API Keys -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-brain"></i> <span data-i18n="ai_providers.claude_title">Claude
-                                            API 配置</span></h3>
-                                    <button id="add-claude-key" class="btn btn-primary">
-                                        <i class="fas fa-plus"></i> <span
-                                            data-i18n="ai_providers.claude_add_button">添加配置</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="claude-keys-list" class="provider-list"></div>
-                                </div>
-                            </div>
-
-                            <!-- OpenAI 兼容提供商 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-plug"></i> <span data-i18n="ai_providers.openai_title">OpenAI
-                                            兼容提供商</span></h3>
-                                    <button id="add-openai-provider" class="btn btn-primary">
-                                        <i class="fas fa-plus"></i> <span
-                                            data-i18n="ai_providers.openai_add_button">添加提供商</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="openai-providers-list" class="provider-list"></div>
-                                </div>
-                            </div>
-
-                            <!-- Vertex AI Credential Import -->
-                            <div class="card" id="vertex-import-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-cloud-upload-alt"></i> <span data-i18n="vertex_import.title">Vertex AI 凭证导入</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" data-i18n="vertex_import.description">
-                                        上传 Google 服务账号 JSON 并保存为 vertex-<project>.json。
-                                    </p>
-                                    <div class="form-group">
-                                        <label for="vertex-location" data-i18n="vertex_import.location_label">区域 (可选)</label>
-                                        <input type="text" id="vertex-location" data-i18n-placeholder="vertex_import.location_placeholder" value="us-central1">
-                                        <p class="form-hint" data-i18n="vertex_import.location_hint">留空则使用默认 us-central1。</p>
-                                    </div>
-                                    <div class="form-group">
-                                        <label data-i18n="vertex_import.file_label">服务账号密钥 JSON</label>
-                                        <div class="input-group">
-                                            <input type="text" id="vertex-file-display" readonly data-i18n-placeholder="vertex_import.file_placeholder" placeholder="尚未选择文件">
-                                            <input type="file" id="vertex-file-input" accept=".json" style="display: none;">
-                                            <button type="button" id="vertex-select-file" class="btn btn-secondary">
-                                                <i class="fas fa-file-upload"></i> <span data-i18n="vertex_import.choose_file">选择文件</span>
-                                            </button>
-                                        </div>
-                                        <p class="form-hint" data-i18n="vertex_import.file_hint">仅支持 Google Cloud service account JSON。</p>
-                                    </div>
-                                    <div class="form-actions vertex-import-actions">
-                                        <button type="button" id="vertex-import-btn" class="btn btn-primary" disabled>
-                                            <i class="fas fa-cloud-upload-alt"></i> <span data-i18n="vertex_import.import_button">导入 Vertex 凭证</span>
-                                        </button>
-                                    </div>
-                                    <div id="vertex-import-result" class="vertex-import-result" style="display: none;">
-                                        <div class="vertex-import-result-header">
-                                            <i class="fas fa-check-circle"></i>
-                                            <span data-i18n="vertex_import.result_title">凭证已保存</span>
-                                        </div>
-                                        <ul>
-                                            <li><span data-i18n="vertex_import.result_project">项目 ID</span>: <code id="vertex-result-project">-</code></li>
-                                            <li><span data-i18n="vertex_import.result_email">服务账号</span>: <code id="vertex-result-email">-</code></li>
-                                            <li><span data-i18n="vertex_import.result_location">区域</span>: <code id="vertex-result-location">-</code></li>
-                                            <li><span data-i18n="vertex_import.result_file">存储文件</span>: <code id="vertex-result-file">-</code></li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- 认证文件管理 -->
-                        <section id="auth-files" class="content-section">
-                            <h2 data-i18n="auth_files.title">认证文件管理</h2>
-
-                            <div class="card" style="margin-bottom: 20px;">
-                                <div class="card-content">
-                                    <p class="form-hint" data-i18n="auth_files.description">
-                                        这里管理 Qwen 和 Gemini 的认证配置文件。上传 JSON 格式的认证文件以启用相应的 AI 服务。
-                                    </p>
-                                </div>
-                            </div>
-
-                            <!-- 认证文件 -->
-                            <div class="card">
-                                <div class="card-header card-header-with-filter">
-                                    <div class="header-left">
-                                        <h3><i class="fas fa-file-alt"></i> <span
-                                                data-i18n="auth_files.title_section">认证文件</span></h3>
-                                        <!-- 类型筛选 -->
-                                        <div class="auth-file-filter">
-                                            <button class="filter-btn active" data-type="all" data-i18n-text="auth_files.filter_all">All</button>
-                                            <button class="filter-btn" data-type="qwen" data-i18n-text="auth_files.filter_qwen">Qwen</button>
-                                            <button class="filter-btn" data-type="gemini" data-i18n-text="auth_files.filter_gemini">Gemini</button>
-                                            <button class="filter-btn" data-type="gemini-cli" data-i18n-text="auth_files.filter_gemini-cli">GeminiCLI</button>
-                                            <button class="filter-btn" data-type="aistudio" data-i18n-text="auth_files.filter_aistudio">AIStudio</button>
-                                            <button class="filter-btn" data-type="claude" data-i18n-text="auth_files.filter_claude">Claude</button>
-                                            <button class="filter-btn" data-type="codex" data-i18n-text="auth_files.filter_codex">Codex</button>
-                                            <button class="filter-btn" data-type="iflow" data-i18n-text="auth_files.filter_iflow">iFlow</button>
-                                            <button class="filter-btn" data-type="vertex" data-i18n-text="auth_files.filter_vertex">Vertex</button>
-                                            <button class="filter-btn" data-type="empty" data-i18n-text="auth_files.filter_empty">Empty</button>
-                                        </div>
-                                    </div>
-                                    <div class="header-actions">
-                                        <button id="upload-auth-file" class="btn btn-primary">
-                                            <i class="fas fa-upload"></i> <span
-                                                data-i18n="auth_files.upload_button">上传文件</span>
-                                        </button>
-                                        <button id="delete-all-auth-files" class="btn btn-danger">
-                                            <i class="fas fa-trash"></i> <span
-                                                data-i18n="auth_files.delete_all_button">删除全部</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="card-content">
-                                    <div id="auth-files-list" class="file-list file-grid"></div>
-                                    <input type="file" id="auth-file-input" accept=".json" style="display: none;">
-                                </div>
-                            </div>
-
-                            <!-- Codex OAuth -->
-                            <div class="card" id="codex-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-code"></i> <span data-i18n="auth_login.codex_oauth_title">Codex
-                                            OAuth</span></h3>
-                                    <button id="codex-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.codex_oauth_button">开始 Codex 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.codex_oauth_hint">
-                                        通过 OAuth 流程登录 Codex 服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div id="codex-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.codex_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                        <input type="text" id="codex-oauth-url" readonly>
-                                                <button id="codex-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.codex_open_link">打开链接</span>
-                                                </button>
-                                                <button id="codex-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.codex_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="codex-oauth-status" class="form-hint" style="margin-top: 10px;"></div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Anthropic OAuth -->
-                            <div class="card" id="anthropic-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-brain"></i> <span
-                                            data-i18n="auth_login.anthropic_oauth_title">Anthropic OAuth</span></h3>
-                                    <button id="anthropic-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.anthropic_oauth_button">开始 Anthropic 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.anthropic_oauth_hint">
-                                        通过 OAuth 流程登录 Anthropic (Claude) 服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div id="anthropic-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.anthropic_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                                <input type="text" id="anthropic-oauth-url" readonly>
-                                                <button id="anthropic-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.anthropic_open_link">打开链接</span>
-                                                </button>
-                                                <button id="anthropic-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.anthropic_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="anthropic-oauth-status" class="form-hint" style="margin-top: 10px;">
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Gemini CLI OAuth -->
-                            <div class="card" id="gemini-cli-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fab fa-google"></i> <span
-                                            data-i18n="auth_login.gemini_cli_oauth_title">Gemini CLI OAuth</span></h3>
-                                    <button id="gemini-cli-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.gemini_cli_oauth_button">开始 Gemini CLI 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.gemini_cli_oauth_hint">
-                                        通过 OAuth 流程登录 Google Gemini CLI 服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div class="form-group" style="margin-bottom: 20px;">
-                                        <label for="gemini-cli-project-id"
-                                            data-i18n="auth_login.gemini_cli_project_id_label">Google Cloud 项目 ID
-                                            (可选):</label>
-                                        <input type="text" id="gemini-cli-project-id"
-                                            data-i18n-placeholder="auth_login.gemini_cli_project_id_placeholder">
-                            <div class="form-hint" data-i18n="auth_login.gemini_cli_project_id_hint">
-                                如果指定了项目 ID，将使用该项目的认证信息。
-                            </div>
-                                    </div>
-                                    <div id="gemini-cli-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.gemini_cli_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                                <input type="text" id="gemini-cli-oauth-url" readonly>
-                                                <button id="gemini-cli-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.gemini_cli_open_link">打开链接</span>
-                                                </button>
-                                                <button id="gemini-cli-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.gemini_cli_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="gemini-cli-oauth-status" class="form-hint" style="margin-top: 10px;">
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Qwen OAuth -->
-                            <div class="card" id="qwen-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-robot"></i> <span data-i18n="auth_login.qwen_oauth_title">Qwen
-                                            OAuth</span></h3>
-                                    <button id="qwen-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.qwen_oauth_button">开始 Qwen 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.qwen_oauth_hint">
-                                        通过设备授权流程登录 Qwen 服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div id="qwen-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.qwen_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                                <input type="text" id="qwen-oauth-url" readonly>
-                                                <button id="qwen-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.qwen_open_link">打开链接</span>
-                                                </button>
-                                                <button id="qwen-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.qwen_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="qwen-oauth-status" class="form-hint" style="margin-top: 10px;"></div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- iFlow OAuth -->
-                            <div class="card" id="iflow-oauth-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-stream"></i> <span
-                                            data-i18n="auth_login.iflow_oauth_title">iFlow OAuth</span></h3>
-                                    <button id="iflow-oauth-btn" class="btn btn-primary">
-                                        <i class="fas fa-sign-in-alt"></i> <span
-                                            data-i18n="auth_login.iflow_oauth_button">开始 iFlow 登录</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" style="margin-bottom: 20px;"
-                                        data-i18n="auth_login.iflow_oauth_hint">
-                                        通过 OAuth 流程登录 iFlow 服务，自动获取并保存认证文件。
-                                    </p>
-                                    <div id="iflow-oauth-content" style="display: none;">
-                                        <div class="form-group">
-                                            <label data-i18n="auth_login.iflow_oauth_url_label">授权链接:</label>
-                                            <div class="input-group">
-                                                <input type="text" id="iflow-oauth-url" readonly>
-                                                <button id="iflow-open-link" class="btn btn-primary">
-                                                    <i class="fas fa-external-link-alt"></i> <span
-                                                        data-i18n="auth_login.iflow_open_link">打开链接</span>
-                                                </button>
-                                                <button id="iflow-copy-link" class="btn btn-secondary">
-                                                    <i class="fas fa-copy"></i> <span
-                                                        data-i18n="auth_login.iflow_copy_link">复制链接</span>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div id="iflow-oauth-status" class="form-hint" style="margin-top: 10px;"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- 日志查看 -->
-                        <section id="logs" class="content-section">
-                            <h2 data-i18n="logs.title">日志查看</h2>
-
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-scroll"></i> <span data-i18n="logs.log_content">日志内容</span></h3>
-                                    <div class="header-actions">
-                                        <div class="toggle-group" style="margin-right: 15px;">
-                                            <label class="toggle-switch" style="margin-right: 5px;">
-                                                <input type="checkbox" id="logs-auto-refresh-toggle">
-                                                <span class="slider"></span>
-                                            </label>
-                                            <span class="toggle-label" data-i18n="logs.auto_refresh" style="font-size: 0.9em;">自动刷新</span>
-                                        </div>
-                                        <button id="refresh-logs" class="btn btn-primary">
-                                            <i class="fas fa-sync-alt"></i> <span data-i18n="logs.refresh_button">刷新日志</span>
-                                        </button>
-                                        <button id="download-logs" class="btn btn-secondary">
-                                            <i class="fas fa-download"></i> <span data-i18n="logs.download_button">下载日志</span>
-                                        </button>
-                                        <button id="clear-logs" class="btn btn-danger">
-                                            <i class="fas fa-trash"></i> <span data-i18n="logs.clear_button">清空日志</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="card-content">
-                                    <div id="logs-content" class="logs-container">
-                                        <div class="loading-placeholder" data-i18n="logs.loading">正在加载日志...</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- 使用统计 -->
-                        <section id="usage-stats" class="content-section">
-                            <h2 data-i18n="usage_stats.title">使用统计</h2>
-
-                            <!-- 概览统计卡片 -->
-                            <div class="stats-overview">
-                                <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-paper-plane"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="total-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon success">
-                                        <i class="fas fa-check-circle"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="success-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.success_requests">成功请求</div>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon error">
-                                        <i class="fas fa-exclamation-circle"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="failed-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.failed_requests">失败请求</div>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-coins"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="total-tokens">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 图表区域 -->
-                            <div class="charts-container">
-                                <!-- 请求趋势图 -->
-                                <div class="card chart-card">
-                                    <div class="card-header">
-                                        <h3><i class="fas fa-chart-line"></i> <span
-                                                data-i18n="usage_stats.requests_trend">请求趋势</span></h3>
-                                        <div class="chart-controls">
-                                            <button class="btn btn-small" data-period="hour" id="requests-hour-btn">
-                                                <span data-i18n="usage_stats.by_hour">按小时</span>
-                                            </button>
-                                            <button class="btn btn-small active" data-period="day"
-                                                id="requests-day-btn">
-                                                <span data-i18n="usage_stats.by_day">按天</span>
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="card-content">
-                                        <div class="chart-container">
-                                            <canvas id="requests-chart"></canvas>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <!-- Token使用趋势图 -->
-                                <div class="card chart-card">
-                                    <div class="card-header">
-                                        <h3><i class="fas fa-chart-area"></i> <span
-                                                data-i18n="usage_stats.tokens_trend">Token 使用趋势</span></h3>
-                                        <div class="chart-controls">
-                                            <button class="btn btn-small" data-period="hour" id="tokens-hour-btn">
-                                                <span data-i18n="usage_stats.by_hour">按小时</span>
-                                            </button>
-                                            <button class="btn btn-small active" data-period="day" id="tokens-day-btn">
-                                                <span data-i18n="usage_stats.by_day">按天</span>
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="card-content">
-                                        <div class="chart-container">
-                                            <canvas id="tokens-chart"></canvas>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- API详细统计 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-list"></i> <span data-i18n="usage_stats.api_details">API
-                                            详细统计</span></h3>
-                                    <button id="refresh-usage-stats" class="btn btn-primary">
-                                        <i class="fas fa-sync-alt"></i> <span data-i18n="usage_stats.refresh">刷新</span>
-                                    </button>
-                                </div>
-                                <div class="card-content">
-                                    <div id="api-stats-table" class="api-stats-table">
-                                        <div class="loading-placeholder" data-i18n="common.loading">正在加载...</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- 配置管理 -->
-                        <section id="config-management" class="content-section">
-                            <h2 data-i18n="config_management.title">配置管理</h2>
-
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-file-code"></i> <span data-i18n="config_management.editor_title">配置文件</span></h3>
-                                    <div class="editor-actions">
-                                        <button id="config-reload-btn" class="btn btn-secondary">
-                                            <i class="fas fa-sync-alt"></i> <span data-i18n="config_management.reload">重新加载</span>
-                                        </button>
-                                        <button id="config-save-btn" class="btn btn-primary">
-                                            <i class="fas fa-save"></i> <span data-i18n="config_management.save">保存</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" data-i18n="config_management.description">查看并编辑服务器上的 config.yaml 配置文件。保存前请确认语法正确。</p>
-                                    <div class="yaml-editor-container">
-                                        <textarea id="config-editor" class="yaml-editor" spellcheck="false" data-i18n="config_management.editor_placeholder"></textarea>
-                                        <div id="config-editor-status" class="editor-status" data-i18n="config_management.status_idle">等待操作</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-
-                        <!-- 系统信息 -->
-                        <section id="system-info" class="content-section">
-                            <h2 data-i18n="system_info.title">系统信息</h2>
-
-                            <!-- 连接信息卡片 -->
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-server"></i> <span data-i18n="connection.title">连接信息</span>
-                                    </h3>
-                                </div>
-                                <div class="card-content">
-                                    <div class="connection-info">
-                                        <div class="info-item">
-                                            <div class="info-label">
-                                                <i class="fas fa-globe"></i>
-                                                <span data-i18n="connection.server_address">服务器地址:</span>
-                                            </div>
-                                            <div class="info-value" id="display-api-url">-</div>
-                                        </div>
-                                        <div class="info-item">
-                                            <div class="info-label">
-                                                <i class="fas fa-circle"></i>
-                                                <span data-i18n="connection.status">连接状态:</span>
-                                            </div>
-                                            <div class="info-value" id="display-connection-status">
-                                                <span class="status-indicator disconnected"
-                                                    data-i18n="common.disconnected">未连接</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-info-circle"></i> <span
-                                            data-i18n="system_info.connection_status_title">连接状态</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <div id="system-status" class="status-info">
-                                        <div class="status-item">
-                                            <span class="status-label" data-i18n="system_info.api_status_label">API
-                                                状态:</span>
-                                            <span id="api-status" class="status-value"
-                                                data-i18n="common.disconnected">未连接</span>
-                                        </div>
-                                        <div class="status-item">
-                                            <span class="status-label"
-                                                data-i18n="system_info.config_status_label">配置状态:</span>
-                                            <span id="config-status" class="status-value"
-                                                data-i18n="system_info.not_loaded">未加载</span>
-                                        </div>
-                                        <div class="status-item">
-                                            <span class="status-label"
-                                                data-i18n="system_info.last_update_label">最后更新:</span>
-                                            <span id="last-update" class="status-value">-</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                    <!-- /内容区域 -->
-
-                    <!-- 版本信息 -->
-                    <footer class="version-footer">
-                        <div class="version-info">
-                            <span data-i18n="footer.version">版本</span>: __VERSION__
-                            <span class="separator">•</span>
-                            <span data-i18n="footer.author">作者</span>: CLI Proxy API Team
-                        </div>
-                    </footer>
-                </div>
-                <!-- /主内容区域 -->
-            </div>
-            <!-- /主内容包装器 -->
-        </div>
-        <!-- /主页面 -->
-
-        <!-- 模态框 -->
-        <div id="modal" class="modal">
-            <div class="modal-content">
-                <span class="close">&times;</span>
-                <div id="modal-body"></div>
-            </div>
-        </div>
-
-        <!-- 通知 -->
-        <div id="notification" class="notification"></div>
-
-    </div>
-
-    <script src="app.js"></script>
-</body>
-
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20class%3D%22iconify%20iconify--logos%22%20width%3D%2231.88%22%20height%3D%2232%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%20256%20257%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22IconifyId1813088fe1fbc01fb466%22%20x1%3D%22-.828%25%22%20x2%3D%2257.636%25%22%20y1%3D%227.652%25%22%20y2%3D%2278.411%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2341D1FF%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23BD34FE%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22IconifyId1813088fe1fbc01fb467%22%20x1%3D%2243.376%25%22%20x2%3D%2250.316%25%22%20y1%3D%222.242%25%22%20y2%3D%2289.03%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23FFEA83%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%228.333%25%22%20stop-color%3D%22%23FFDD35%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23FFA800%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23IconifyId1813088fe1fbc01fb466)%22%20d%3D%22M255.153%2037.938L134.897%20252.976c-2.483%204.44-8.862%204.466-11.382.048L.875%2037.958c-2.746-4.814%201.371-10.646%206.827-9.67l120.385%2021.517a6.537%206.537%200%200%200%202.322-.004l117.867-21.483c5.438-.991%209.574%204.796%206.877%209.62Z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22url(%23IconifyId1813088fe1fbc01fb467)%22%20d%3D%22M185.432.063L96.44%2017.501a3.268%203.268%200%200%200-2.634%203.014l-5.474%2092.456a3.268%203.268%200%200%200%203.997%203.378l24.777-5.718c2.318-.535%204.413%201.507%203.936%203.838l-7.361%2036.047c-.495%202.426%201.782%204.5%204.151%203.78l15.304-4.649c2.372-.72%204.652%201.36%204.15%203.788l-11.698%2056.621c-.732%203.542%203.979%205.473%205.943%202.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505%204.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CLI Proxy API Management Center</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>

package.json

@@ -1,30 +1,45 @@
-{
-  "name": "cli-proxy-api-webui",
-  "version": "1.0.0",
-  "description": "CLI Proxy API 管理界面",
-  "main": "index.html",
-  "scripts": {
-    "start": "npx serve .",
-    "dev": "npx serve . --port 3000",
-    "build": "node build.js",
-    "lint": "echo '使用浏览器开发者工具检查代码'"
-  },
-  "keywords": [
-    "cli-proxy-api",
-    "webui",
-    "management",
-    "api"
-  ],
-  "author": "CLI Proxy API WebUI",
-  "license": "MIT",
-  "devDependencies": {
-    "serve": "^14.2.1"
-  },
-  "engines": {
-    "node": ">=14.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "local"
-  }
-}
+{
+  "name": "cli-proxy-webui-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,scss}\"",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@uiw/react-codemirror": "^4.25.3",
+    "axios": "^1.13.2",
+    "chart.js": "^4.5.1",
+    "i18next": "^25.7.1",
+    "react": "^19.2.1",
+    "react-chartjs-2": "^5.3.1",
+    "react-dom": "^19.2.1",
+    "react-i18next": "^16.4.0",
+    "react-router-dom": "^7.10.1",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "prettier": "^3.7.4",
+    "sass": "^1.94.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vite-plugin-singlefile": "^2.3.0"
+  }
+}

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,97 @@
+import { useCallback, useEffect, useState } from 'react';
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { LoginPage } from '@/pages/LoginPage';
+import { DashboardPage } from '@/pages/DashboardPage';
+import { SettingsPage } from '@/pages/SettingsPage';
+import { ApiKeysPage } from '@/pages/ApiKeysPage';
+import { AiProvidersPage } from '@/pages/AiProvidersPage';
+import { AuthFilesPage } from '@/pages/AuthFilesPage';
+import { OAuthPage } from '@/pages/OAuthPage';
+import { UsagePage } from '@/pages/UsagePage';
+import { ConfigPage } from '@/pages/ConfigPage';
+import { LogsPage } from '@/pages/LogsPage';
+import { SystemPage } from '@/pages/SystemPage';
+import { NotificationContainer } from '@/components/common/NotificationContainer';
+import { SplashScreen } from '@/components/common/SplashScreen';
+import { MainLayout } from '@/components/layout/MainLayout';
+import { ProtectedRoute } from '@/router/ProtectedRoute';
+import { useAuthStore, useLanguageStore, useThemeStore } from '@/stores';
+
+const SPLASH_DURATION = 1500;
+const SPLASH_FADE_DURATION = 400;
+
+function App() {
+  const initializeTheme = useThemeStore((state) => state.initializeTheme);
+  const language = useLanguageStore((state) => state.language);
+  const setLanguage = useLanguageStore((state) => state.setLanguage);
+  const restoreSession = useAuthStore((state) => state.restoreSession);
+
+  const [splashReadyToFade, setSplashReadyToFade] = useState(false);
+  const [showSplash, setShowSplash] = useState(true);
+  const [authReady, setAuthReady] = useState(false);
+
+  useEffect(() => {
+    initializeTheme();
+    void restoreSession().finally(() => {
+      setAuthReady(true);
+    });
+  }, [initializeTheme, restoreSession]);
+
+  useEffect(() => {
+    setLanguage(language);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // 仅用于首屏同步 i18n 语言
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSplashReadyToFade(true);
+    }, SPLASH_DURATION - SPLASH_FADE_DURATION);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleSplashFinish = useCallback(() => {
+    setShowSplash(false);
+  }, []);
+
+  if (showSplash) {
+    return (
+      <SplashScreen
+        fadeOut={splashReadyToFade && authReady}
+        onFinish={handleSplashFinish}
+      />
+    );
+  }
+
+  return (
+    <HashRouter>
+      <NotificationContainer />
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route
+          path="/"
+          element={
+            <ProtectedRoute>
+              <MainLayout />
+            </ProtectedRoute>
+          }
+        >
+          <Route index element={<DashboardPage />} />
+          <Route path="dashboard" element={<DashboardPage />} />
+          <Route path="settings" element={<SettingsPage />} />
+          <Route path="api-keys" element={<ApiKeysPage />} />
+          <Route path="ai-providers" element={<AiProvidersPage />} />
+          <Route path="auth-files" element={<AuthFilesPage />} />
+          <Route path="oauth" element={<OAuthPage />} />
+          <Route path="usage" element={<UsagePage />} />
+          <Route path="config" element={<ConfigPage />} />
+          <Route path="logs" element={<LogsPage />} />
+          <Route path="system" element={<SystemPage />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Route>
+      </Routes>
+    </HashRouter>
+  );
+}
+
+export default App;

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,36 @@
+import { useEffect } from 'react';
+import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
+import './SplashScreen.scss';
+
+interface SplashScreenProps {
+  onFinish: () => void;
+  fadeOut?: boolean;
+}
+
+const FADE_OUT_DURATION = 400;
+
+export function SplashScreen({ onFinish, fadeOut = false }: SplashScreenProps) {
+  useEffect(() => {
+    if (!fadeOut) return;
+    const finishTimer = setTimeout(() => {
+      onFinish();
+    }, FADE_OUT_DURATION);
+
+    return () => {
+      clearTimeout(finishTimer);
+    };
+  }, [fadeOut, onFinish]);
+
+  return (
+    <div className={`splash-screen ${fadeOut ? 'fade-out' : ''}`}>
+      <div className="splash-content">
+        <img src={INLINE_LOGO_JPEG} alt="CPAMC" className="splash-logo" />
+        <h1 className="splash-title">CLI Proxy API</h1>
+        <p className="splash-subtitle">Management Center</p>
+        <div className="splash-loader">
+          <div className="splash-loader-bar" />
+        </div>
+      </div>
+    </div>
+  );
+}

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/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,763 @@
+{
+  "common": {
+    "login": "Login",
+    "logout": "Logout",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "add": "Add",
+    "update": "Update",
+    "refresh": "Refresh",
+    "close": "Close",
+    "success": "Success",
+    "error": "Error",
+    "info": "Info",
+    "warning": "Warning",
+    "loading": "Loading...",
+    "connecting": "Connecting...",
+    "connected": "Connected",
+    "disconnected": "Disconnected",
+    "connecting_status": "Connecting",
+    "connected_status": "Connected",
+    "disconnected_status": "Disconnected",
+    "yes": "Yes",
+    "no": "No",
+    "not_set": "Not set",
+    "optional": "Optional",
+    "required": "Required",
+    "api_key": "Key",
+    "base_url": "Address",
+    "prefix": "Prefix",
+    "proxy_url": "Proxy",
+    "alias": "Alias",
+    "failure": "Failure",
+    "unknown_error": "Unknown error",
+    "copy": "Copy",
+    "custom_headers_label": "Custom Headers",
+    "custom_headers_hint": "Optional HTTP headers to send with the request. Leave blank to remove.",
+    "custom_headers_add": "Add Header",
+    "custom_headers_key_placeholder": "Header name, e.g. X-Custom-Header",
+    "custom_headers_value_placeholder": "Header value",
+    "model_name_placeholder": "Model name, e.g. claude-3-5-sonnet-20241022",
+    "model_alias_placeholder": "Model alias (optional)"
+  },
+  "title": {
+    "main": "CLI Proxy API Management Center",
+    "login": "CLI Proxy API Management Center",
+    "abbr": "CPAMC"
+  },
+  "auto_login": {
+    "title": "Auto Login in Progress...",
+    "message": "Attempting to connect to server using locally saved connection information"
+  },
+  "login": {
+    "subtitle": "Please enter connection information to access the management interface",
+    "connection_title": "Connection Address",
+    "connection_current": "Current URL",
+    "connection_auto_hint": "The system will automatically use the current URL for connection",
+    "custom_connection_label": "Custom Connection URL:",
+    "custom_connection_placeholder": "Eg: https://example.com:8317",
+    "custom_connection_hint": "By default the current URL is used. Override it here if needed.",
+    "use_current_address": "Use Current URL",
+    "management_key_label": "Management Key:",
+    "management_key_placeholder": "Enter the management key",
+    "connect_button": "Connect",
+    "submit_button": "Login",
+    "submitting": "Connecting...",
+    "error_title": "Login Failed",
+    "error_required": "Please fill in complete connection information",
+    "error_invalid": "Connection failed, please check address and key"
+  },
+  "header": {
+    "check_connection": "Check Connection",
+    "refresh_all": "Refresh All",
+    "logout": "Logout"
+  },
+  "connection": {
+    "title": "Connection Information",
+    "server_address": "Server Address:",
+    "management_key": "Management Key:",
+    "status": "Connection Status:"
+  },
+  "nav": {
+    "dashboard": "Dashboard",
+    "basic_settings": "Basic Settings",
+    "api_keys": "API Keys",
+    "ai_providers": "AI Providers",
+    "auth_files": "Auth Files",
+    "oauth": "OAuth Login",
+    "usage_stats": "Usage Statistics",
+    "config_management": "Config Management",
+    "logs": "Logs Viewer",
+    "system_info": "Management Center Info"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "subtitle": "Welcome to CLI Proxy API Management Center",
+    "openai_providers": "OpenAI Providers",
+    "quick_actions": "Quick Actions",
+    "current_config": "Current Configuration",
+    "management_keys": "Management Keys",
+    "provider_keys_detail": "G:{{gemini}} C:{{codex}} Cl:{{claude}} O:{{openai}}",
+    "oauth_credentials": "OAuth Credentials",
+    "usage_overview": "Usage Overview",
+    "total_requests": "Total Requests",
+    "total_tokens": "Total Tokens",
+    "rpm_30min": "RPM (30min)",
+    "tpm_30min": "TPM (30min)",
+    "models_used": "Models Used",
+    "no_usage_data": "No usage data available",
+    "view_detailed_usage": "View Detailed Stats",
+    "edit_settings": "Edit Settings",
+    "available_models": "Available Models",
+    "available_models_desc": "Total models from all providers"
+  },
+  "basic_settings": {
+    "title": "Basic Settings",
+    "debug_title": "Debug Mode",
+    "debug_enable": "Enable Debug Mode",
+    "proxy_title": "Proxy Settings",
+    "proxy_url_label": "Proxy URL:",
+    "proxy_url_placeholder": "e.g.: socks5://user:pass@127.0.0.1:1080/",
+    "proxy_update": "Update",
+    "proxy_clear": "Clear",
+    "retry_title": "Request Retry",
+    "retry_count_label": "Retry Count:",
+    "retry_update": "Update",
+    "quota_title": "Quota Exceeded Behavior",
+    "quota_switch_project": "Auto Switch Project",
+    "quota_switch_preview": "Switch to Preview Model",
+    "usage_statistics_title": "Usage Statistics",
+    "usage_statistics_enable": "Enable usage statistics",
+    "logging_title": "Logging",
+    "logging_to_file_enable": "Enable logging to file",
+    "request_log_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",
+    "prefix_label": "Prefix (Optional):",
+    "prefix_placeholder": "e.g.: team-a",
+    "prefix_hint": "When set, call models as prefix/<model> to target this entry.",
+    "config_toggle_label": "Enabled",
+    "config_disabled_badge": "Disabled",
+    "codex_title": "Codex API Configuration",
+    "codex_add_button": "Add Configuration",
+    "codex_empty_title": "No Codex Configuration",
+    "codex_empty_desc": "Click the button above to add the first configuration",
+    "codex_item_title": "Codex Configuration",
+    "codex_add_modal_title": "Add Codex API Configuration",
+    "codex_add_modal_key_label": "API Key:",
+    "codex_add_modal_key_placeholder": "Please enter Codex API key",
+    "codex_add_modal_url_label": "Base URL (Required):",
+    "codex_add_modal_url_placeholder": "e.g.: https://api.example.com",
+    "codex_add_modal_proxy_label": "Proxy URL (Optional):",
+    "codex_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
+    "codex_edit_modal_title": "Edit Codex API Configuration",
+    "codex_edit_modal_key_label": "API Key:",
+    "codex_edit_modal_url_label": "Base URL (Required):",
+    "codex_edit_modal_proxy_label": "Proxy URL (Optional):",
+    "codex_delete_confirm": "Are you sure you want to delete this Codex configuration?",
+    "claude_title": "Claude API Configuration",
+    "claude_add_button": "Add Configuration",
+    "claude_empty_title": "No Claude Configuration",
+    "claude_empty_desc": "Click the button above to add the first configuration",
+    "claude_item_title": "Claude Configuration",
+    "claude_add_modal_title": "Add Claude API Configuration",
+    "claude_add_modal_key_label": "API Key:",
+    "claude_add_modal_key_placeholder": "Please enter Claude API key",
+    "claude_add_modal_url_label": "Base URL (Optional):",
+    "claude_add_modal_url_placeholder": "e.g.: https://api.anthropic.com",
+    "claude_add_modal_proxy_label": "Proxy URL (Optional):",
+    "claude_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
+    "claude_edit_modal_title": "Edit Claude API Configuration",
+    "claude_edit_modal_key_label": "API Key:",
+    "claude_edit_modal_url_label": "Base URL (Optional):",
+    "claude_edit_modal_proxy_label": "Proxy URL (Optional):",
+    "claude_delete_confirm": "Are you sure you want to delete this Claude configuration?",
+    "claude_models_label": "Custom Models (Optional):",
+    "claude_models_hint": "Leave empty to allow all models, or add name[, alias] entries to limit/alias them.",
+    "claude_models_add_btn": "Add Model",
+    "claude_models_count": "Models Count",
+    "ampcode_title": "Amp CLI Integration (ampcode)",
+    "ampcode_modal_title": "Configure Ampcode",
+    "ampcode_upstream_url_label": "Upstream URL",
+    "ampcode_upstream_url_placeholder": "e.g. https://ampcode.com",
+    "ampcode_upstream_url_hint": "Optional. Leave empty to use the default/auto-discovered control plane URL.",
+    "ampcode_upstream_api_key_label": "Upstream API Key (Amp Official)",
+    "ampcode_upstream_api_key_placeholder": "Enter sk-amp... (leave empty to keep current)",
+    "ampcode_upstream_api_key_hint": "Optional. Leaving it empty will not change the current Amp official key. Use the button below to clear it.",
+    "ampcode_upstream_api_key_current": "Current Amp official key: {{key}}",
+    "ampcode_clear_upstream_api_key": "Clear official key",
+    "ampcode_clear_upstream_api_key_confirm": "Are you sure you want to clear the Ampcode upstream API key (Amp official)?",
+    "ampcode_force_model_mappings_label": "Force model mappings",
+    "ampcode_force_model_mappings_hint": "When enabled, mappings override local API-key availability checks.",
+    "ampcode_model_mappings_label": "Model mappings (from → to)",
+    "ampcode_model_mappings_hint": "Rewrites model names in Amp requests. Leave empty to disable mappings.",
+    "ampcode_model_mappings_add_btn": "Add mapping",
+    "ampcode_model_mappings_from_placeholder": "from model (source)",
+    "ampcode_model_mappings_to_placeholder": "to model (target)",
+    "ampcode_model_mappings_count": "Mappings Count",
+    "ampcode_mappings_overwrite_confirm": "Existing mappings could not be loaded. Continuing may overwrite or clear them. Continue?",
+    "openai_title": "OpenAI Compatible Providers",
+    "openai_add_button": "Add Provider",
+    "openai_empty_title": "No OpenAI Compatible Providers",
+    "openai_empty_desc": "Click the button above to add the first provider",
+    "openai_add_modal_title": "Add OpenAI Compatible Provider",
+    "openai_add_modal_name_label": "Provider Name:",
+    "openai_add_modal_name_placeholder": "e.g.: openrouter",
+    "openai_add_modal_url_label": "Base URL:",
+    "openai_add_modal_url_placeholder": "e.g.: https://openrouter.ai/api/v1",
+    "openai_add_modal_keys_label": "API Keys",
+    "openai_edit_modal_keys_label": "API Keys",
+    "openai_keys_hint": "Add each key separately with an optional proxy URL to keep things organized.",
+    "openai_keys_add_btn": "Add Key",
+    "openai_key_placeholder": "sk-... key",
+    "openai_proxy_placeholder": "Optional proxy URL (e.g. socks5://...)",
+    "openai_add_modal_models_label": "Model List (name[, alias] one per line):",
+    "openai_models_hint": "Example: gpt-4o-mini or moonshotai/kimi-k2:free, kimi-k2",
+    "openai_model_name_placeholder": "Model name, e.g. moonshotai/kimi-k2:free",
+    "openai_model_alias_placeholder": "Model alias (optional)",
+    "openai_models_add_btn": "Add Model",
+    "openai_models_fetch_button": "Fetch via /v1/models",
+    "openai_models_fetch_title": "Pick Models from /v1/models",
+    "openai_models_fetch_hint": "Call the /v1/models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.",
+    "openai_models_fetch_url_label": "Request URL",
+    "openai_models_fetch_refresh": "Refresh",
+    "openai_models_fetch_loading": "Fetching models from /v1/models...",
+    "openai_models_fetch_empty": "No models returned. Please check the endpoint or auth.",
+    "openai_models_fetch_error": "Failed to fetch models",
+    "openai_models_fetch_back": "Back to edit",
+    "openai_models_fetch_apply": "Add selected models",
+    "openai_models_search_label": "Search models",
+    "openai_models_search_placeholder": "Filter by name, alias, or description",
+    "openai_models_search_empty": "No models match your search. Try a different keyword.",
+    "openai_models_fetch_invalid_url": "Please enter a valid Base URL first",
+    "openai_models_fetch_added": "{{count}} new models added",
+    "openai_edit_modal_title": "Edit OpenAI Compatible Provider",
+    "openai_edit_modal_name_label": "Provider Name:",
+    "openai_edit_modal_url_label": "Base URL:",
+    "openai_edit_modal_models_label": "Model List (name[, alias] one per line):",
+    "openai_delete_confirm": "Are you sure you want to delete this OpenAI provider?",
+    "openai_keys_count": "Keys Count",
+    "openai_models_count": "Models Count",
+    "openai_test_title": "Connection Test",
+    "openai_test_hint": "Send a /v1/chat/completions request with the current settings to verify availability.",
+    "openai_test_model_placeholder": "Model to test",
+    "openai_test_action": "Run Test",
+    "openai_test_running": "Sending test request...",
+    "openai_test_timeout": "Test request timed out after {{seconds}} seconds.",
+    "openai_test_success": "Test succeeded. The model responded.",
+    "openai_test_failed": "Test failed",
+    "openai_test_select_placeholder": "Choose from current models",
+    "openai_test_select_empty": "No models configured. Add models first"
+  },
+  "auth_files": {
+    "title": "Auth Files Management",
+    "title_section": "Auth Files",
+    "description": "Manage all CLI Proxy JSON auth files here (e.g. Qwen, Gemini, Vertex). Uploading a credential immediately enables the corresponding AI integration.",
+    "upload_button": "Upload File",
+    "delete_all_button": "Delete All",
+    "empty_title": "No Auth Files",
+    "empty_desc": "Click the button above to upload the first file",
+    "search_empty_title": "No matching files",
+    "search_empty_desc": "Try changing the filters or clearing the search box.",
+    "file_size": "Size",
+    "file_modified": "Modified",
+    "download_button": "Download",
+    "delete_button": "Delete",
+    "delete_confirm": "Are you sure you want to delete file",
+    "delete_all_confirm": "Are you sure you want to delete all auth files? This operation cannot be undone!",
+    "delete_filtered_confirm": "Are you sure you want to delete all {{type}} auth files? This operation cannot be undone!",
+    "upload_error_json": "Only JSON files are allowed",
+    "upload_success": "File uploaded successfully",
+    "download_success": "File downloaded successfully",
+    "delete_success": "File deleted successfully",
+    "delete_all_success": "Successfully deleted",
+    "delete_filtered_success": "Deleted {{count}} {{type}} auth files successfully",
+    "delete_filtered_partial": "{{type}} auth files deletion finished: {{success}} succeeded, {{failed}} failed",
+    "delete_filtered_none": "No deletable auth files under the current filter ({{type}})",
+    "files_count": "files",
+    "pagination_prev": "Previous",
+    "pagination_next": "Next",
+    "pagination_info": "Page {{current}} / {{total}} · {{count}} files",
+    "search_label": "Search configs",
+    "search_placeholder": "Filter by name, type, or provider",
+    "page_size_label": "Per page",
+    "page_size_unit": "items",
+    "filter_all": "All",
+    "filter_qwen": "Qwen",
+    "filter_gemini": "Gemini",
+    "filter_gemini-cli": "GeminiCLI",
+    "filter_aistudio": "AIStudio",
+    "filter_claude": "Claude",
+    "filter_codex": "Codex",
+    "filter_antigravity": "Antigravity",
+    "filter_iflow": "iFlow",
+    "filter_vertex": "Vertex",
+    "filter_empty": "Empty",
+    "filter_unknown": "Other",
+    "type_qwen": "Qwen",
+    "type_gemini": "Gemini",
+    "type_gemini-cli": "GeminiCLI",
+    "type_aistudio": "AIStudio",
+    "type_claude": "Claude",
+    "type_codex": "Codex",
+    "type_antigravity": "Antigravity",
+    "type_iflow": "iFlow",
+    "type_vertex": "Vertex",
+    "type_empty": "Empty",
+    "type_unknown": "Other",
+    "type_virtual": "Virtual auth file",
+    "models_button": "Models",
+    "models_title": "Supported models",
+    "models_loading": "Loading model list...",
+    "models_empty": "No available models for this credential",
+    "models_empty_desc": "This credential may not be loaded by the server yet, or no models are bound to it.",
+    "models_unsupported": "This feature is not supported in the current version",
+    "models_unsupported_desc": "Please update CLI Proxy API to the latest version and try again",
+    "models_excluded_badge": "Excluded",
+    "models_excluded_hint": "This model is excluded by OAuth"
+  },
+  "vertex_import": {
+    "title": "Vertex 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,763 @@
+{
+  "common": {
+    "login": "登录",
+    "logout": "登出",
+    "cancel": "取消",
+    "confirm": "确认",
+    "save": "保存",
+    "delete": "删除",
+    "edit": "编辑",
+    "add": "添加",
+    "update": "更新",
+    "refresh": "刷新",
+    "close": "关闭",
+    "success": "成功",
+    "error": "错误",
+    "info": "信息",
+    "warning": "警告",
+    "loading": "加载中...",
+    "connecting": "连接中...",
+    "connected": "已连接",
+    "disconnected": "未连接",
+    "connecting_status": "连接中",
+    "connected_status": "已连接",
+    "disconnected_status": "未连接",
+    "yes": "是",
+    "no": "否",
+    "not_set": "未设置",
+    "optional": "可选",
+    "required": "必填",
+    "api_key": "密钥",
+    "base_url": "地址",
+    "prefix": "前缀",
+    "proxy_url": "代理",
+    "alias": "别名",
+    "failure": "失败",
+    "unknown_error": "未知错误",
+    "copy": "复制",
+    "custom_headers_label": "自定义请求头",
+    "custom_headers_hint": "可选，设置需要附带到请求中的 HTTP 头，名称和值均不能为空。",
+    "custom_headers_add": "添加请求头",
+    "custom_headers_key_placeholder": "Header 名称，例如 X-Custom-Header",
+    "custom_headers_value_placeholder": "Header 值",
+    "model_name_placeholder": "模型名称，例如 claude-3-5-sonnet-20241022",
+    "model_alias_placeholder": "模型别名 (可选)"
+  },
+  "title": {
+    "main": "CLI Proxy API Management Center",
+    "login": "CLI Proxy API Management Center",
+    "abbr": "CPAMC"
+  },
+  "auto_login": {
+    "title": "正在自动登录...",
+    "message": "正在使用本地保存的连接信息尝试连接服务器"
+  },
+  "login": {
+    "subtitle": "请输入连接信息以访问管理界面",
+    "connection_title": "连接地址",
+    "connection_current": "当前地址",
+    "connection_auto_hint": "系统将自动使用当前访问地址进行连接",
+    "custom_connection_label": "自定义连接地址:",
+    "custom_connection_placeholder": "例如: https://example.com:8317",
+    "custom_connection_hint": "默认使用当前访问地址，若需要可手动输入其他地址。",
+    "use_current_address": "使用当前地址",
+    "management_key_label": "管理密钥:",
+    "management_key_placeholder": "请输入管理密钥",
+    "connect_button": "连接",
+    "submit_button": "登录",
+    "submitting": "连接中...",
+    "error_title": "登录失败",
+    "error_required": "请填写完整的连接信息",
+    "error_invalid": "连接失败，请检查地址和密钥"
+  },
+  "header": {
+    "check_connection": "检查连接",
+    "refresh_all": "刷新全部",
+    "logout": "登出"
+  },
+  "connection": {
+    "title": "连接信息",
+    "server_address": "服务器地址:",
+    "management_key": "管理密钥:",
+    "status": "连接状态:"
+  },
+  "nav": {
+    "dashboard": "仪表盘",
+    "basic_settings": "基础设置",
+    "api_keys": "API 密钥",
+    "ai_providers": "AI 提供商",
+    "auth_files": "认证文件",
+    "oauth": "OAuth 登录",
+    "usage_stats": "使用统计",
+    "config_management": "配置管理",
+    "logs": "日志查看",
+    "system_info": "中心信息"
+  },
+  "dashboard": {
+    "title": "仪表盘",
+    "subtitle": "欢迎使用 CLI Proxy API 管理中心",
+    "openai_providers": "OpenAI 提供商",
+    "quick_actions": "快捷操作",
+    "current_config": "当前配置",
+    "management_keys": "管理密钥",
+    "provider_keys_detail": "G:{{gemini}} C:{{codex}} Cl:{{claude}} O:{{openai}}",
+    "oauth_credentials": "OAuth 凭证",
+    "usage_overview": "使用概览",
+    "total_requests": "总请求数",
+    "total_tokens": "总 Token 数",
+    "rpm_30min": "RPM (30分钟)",
+    "tpm_30min": "TPM (30分钟)",
+    "models_used": "使用模型数",
+    "no_usage_data": "暂无使用数据",
+    "view_detailed_usage": "查看详细统计",
+    "edit_settings": "编辑设置",
+    "available_models": "可用模型",
+    "available_models_desc": "所有提供商的模型总数"
+  },
+  "basic_settings": {
+    "title": "基础设置",
+    "debug_title": "调试模式",
+    "debug_enable": "启用调试模式",
+    "proxy_title": "代理设置",
+    "proxy_url_label": "代理 URL:",
+    "proxy_url_placeholder": "例如: socks5://user:pass@127.0.0.1:1080/",
+    "proxy_update": "更新",
+    "proxy_clear": "清空",
+    "retry_title": "请求重试",
+    "retry_count_label": "重试次数:",
+    "retry_update": "更新",
+    "quota_title": "配额超出行为",
+    "quota_switch_project": "自动切换项目",
+    "quota_switch_preview": "切换到预览模型",
+    "usage_statistics_title": "使用统计",
+    "usage_statistics_enable": "启用使用统计",
+    "logging_title": "日志记录",
+    "logging_to_file_enable": "启用日志记录到文件",
+    "request_log_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}} 个模型",
+    "prefix_label": "前缀 (可选):",
+    "prefix_placeholder": "例如: team-a",
+    "prefix_hint": "设置后可用 prefix/<model> 选择该条目。",
+    "config_toggle_label": "启用",
+    "config_disabled_badge": "已停用",
+    "codex_title": "Codex API 配置",
+    "codex_add_button": "添加配置",
+    "codex_empty_title": "暂无Codex配置",
+    "codex_empty_desc": "点击上方按钮添加第一个配置",
+    "codex_item_title": "Codex配置",
+    "codex_add_modal_title": "添加Codex API配置",
+    "codex_add_modal_key_label": "API密钥:",
+    "codex_add_modal_key_placeholder": "请输入Codex API密钥",
+    "codex_add_modal_url_label": "Base URL (必填):",
+    "codex_add_modal_url_placeholder": "例如: https://api.example.com",
+    "codex_add_modal_proxy_label": "代理 URL (可选):",
+    "codex_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
+    "codex_edit_modal_title": "编辑Codex API配置",
+    "codex_edit_modal_key_label": "API密钥:",
+    "codex_edit_modal_url_label": "Base URL (必填):",
+    "codex_edit_modal_proxy_label": "代理 URL (可选):",
+    "codex_delete_confirm": "确定要删除这个Codex配置吗？",
+    "claude_title": "Claude API 配置",
+    "claude_add_button": "添加配置",
+    "claude_empty_title": "暂无Claude配置",
+    "claude_empty_desc": "点击上方按钮添加第一个配置",
+    "claude_item_title": "Claude配置",
+    "claude_add_modal_title": "添加Claude API配置",
+    "claude_add_modal_key_label": "API密钥:",
+    "claude_add_modal_key_placeholder": "请输入Claude API密钥",
+    "claude_add_modal_url_label": "Base URL (可选):",
+    "claude_add_modal_url_placeholder": "例如: https://api.anthropic.com",
+    "claude_add_modal_proxy_label": "代理 URL (可选):",
+    "claude_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
+    "claude_edit_modal_title": "编辑Claude API配置",
+    "claude_edit_modal_key_label": "API密钥:",
+    "claude_edit_modal_url_label": "Base URL (可选):",
+    "claude_edit_modal_proxy_label": "代理 URL (可选):",
+    "claude_delete_confirm": "确定要删除这个Claude配置吗？",
+    "claude_models_label": "自定义模型 (可选):",
+    "claude_models_hint": "为空表示使用全部模型；可填写 name[, alias] 以限制或重命名模型。",
+    "claude_models_add_btn": "添加模型",
+    "claude_models_count": "模型数量",
+    "ampcode_title": "Amp CLI 集成 (ampcode)",
+    "ampcode_modal_title": "配置 Ampcode",
+    "ampcode_upstream_url_label": "Upstream URL",
+    "ampcode_upstream_url_placeholder": "例如: https://ampcode.com",
+    "ampcode_upstream_url_hint": "可选；留空表示使用默认/自动发现的控制平面地址。",
+    "ampcode_upstream_api_key_label": "Upstream API Key (Amp官方)",
+    "ampcode_upstream_api_key_placeholder": "输入 sk-amp...（留空不修改）",
+    "ampcode_upstream_api_key_hint": "可选；留空不会修改当前Amp官方密钥，需清除请点击下方按钮。",
+    "ampcode_upstream_api_key_current": "当前Amp官方密钥: {{key}}",
+    "ampcode_clear_upstream_api_key": "清除官方密钥",
+    "ampcode_clear_upstream_api_key_confirm": "确定要清除 Ampcode 的 upstream API key（Amp官方）吗？",
+    "ampcode_force_model_mappings_label": "强制应用模型映射",
+    "ampcode_force_model_mappings_hint": "开启后，模型映射将覆盖本地 API Key 可用性判断。",
+    "ampcode_model_mappings_label": "模型映射 (from → to)",
+    "ampcode_model_mappings_hint": "用于重写 Amp 请求中的模型名称；留空表示不做映射。",
+    "ampcode_model_mappings_add_btn": "添加映射",
+    "ampcode_model_mappings_from_placeholder": "from 模型（原始）",
+    "ampcode_model_mappings_to_placeholder": "to 模型（目标）",
+    "ampcode_model_mappings_count": "映射数量",
+    "ampcode_mappings_overwrite_confirm": "当前未成功加载服务器已有映射，继续保存可能覆盖或清空已有映射，是否继续？",
+    "openai_title": "OpenAI 兼容提供商",
+    "openai_add_button": "添加提供商",
+    "openai_empty_title": "暂无OpenAI兼容提供商",
+    "openai_empty_desc": "点击上方按钮添加第一个提供商",
+    "openai_add_modal_title": "添加OpenAI兼容提供商",
+    "openai_add_modal_name_label": "提供商名称:",
+    "openai_add_modal_name_placeholder": "例如: openrouter",
+    "openai_add_modal_url_label": "Base URL:",
+    "openai_add_modal_url_placeholder": "例如: https://openrouter.ai/api/v1",
+    "openai_add_modal_keys_label": "API密钥",
+    "openai_edit_modal_keys_label": "API密钥",
+    "openai_keys_hint": "每个密钥可搭配一个可选代理地址，更便于管理。",
+    "openai_keys_add_btn": "添加密钥",
+    "openai_key_placeholder": "输入 sk- 开头的密钥",
+    "openai_proxy_placeholder": "可选代理 URL (如 socks5://...)",
+    "openai_add_modal_models_label": "模型列表 (name[, alias] 每行一个):",
+    "openai_models_hint": "示例：gpt-4o-mini 或 moonshotai/kimi-k2:free, kimi-k2",
+    "openai_model_name_placeholder": "模型名称，如 moonshotai/kimi-k2:free",
+    "openai_model_alias_placeholder": "模型别名 (可选)",
+    "openai_models_add_btn": "添加模型",
+    "openai_models_fetch_button": "从 /v1/models 获取",
+    "openai_models_fetch_title": "从 /v1/models 选择模型",
+    "openai_models_fetch_hint": "使用上方 Base URL 调用 /v1/models 端点，附带首个 API Key（Bearer）与自定义请求头。",
+    "openai_models_fetch_url_label": "请求地址",
+    "openai_models_fetch_refresh": "重新获取",
+    "openai_models_fetch_loading": "正在从 /v1/models 获取模型列表...",
+    "openai_models_fetch_empty": "未获取到模型，请检查端点或鉴权信息。",
+    "openai_models_fetch_error": "获取模型失败",
+    "openai_models_fetch_back": "返回编辑",
+    "openai_models_fetch_apply": "添加所选模型",
+    "openai_models_search_label": "搜索模型",
+    "openai_models_search_placeholder": "按名称、别名或描述筛选",
+    "openai_models_search_empty": "没有匹配的模型，请更换关键字试试。",
+    "openai_models_fetch_invalid_url": "请先填写有效的 Base URL",
+    "openai_models_fetch_added": "已添加 {{count}} 个新模型",
+    "openai_edit_modal_title": "编辑OpenAI兼容提供商",
+    "openai_edit_modal_name_label": "提供商名称:",
+    "openai_edit_modal_url_label": "Base URL:",
+    "openai_edit_modal_models_label": "模型列表 (name[, alias] 每行一个):",
+    "openai_delete_confirm": "确定要删除这个OpenAI提供商吗？",
+    "openai_keys_count": "密钥数量",
+    "openai_models_count": "模型数量",
+    "openai_test_title": "连通性测试",
+    "openai_test_hint": "使用当前配置向 /v1/chat/completions 请求，验证是否可用。",
+    "openai_test_model_placeholder": "选择或输入要测试的模型",
+    "openai_test_action": "发送测试",
+    "openai_test_running": "正在发送测试请求...",
+    "openai_test_timeout": "测试请求超时（{{seconds}}秒）。",
+    "openai_test_success": "测试成功，模型可用。",
+    "openai_test_failed": "测试失败",
+    "openai_test_select_placeholder": "从当前模型列表选择",
+    "openai_test_select_empty": "当前未配置模型，请先添加模型"
+  },
+  "auth_files": {
+    "title": "认证文件管理",
+    "title_section": "认证文件",
+    "description": "这里集中管理 CLI Proxy 支持的所有 JSON 认证文件（如 Qwen、Gemini、Vertex 等），上传后即可在运行时启用相应的 AI 服务。",
+    "upload_button": "上传文件",
+    "delete_all_button": "删除全部",
+    "empty_title": "暂无认证文件",
+    "empty_desc": "点击上方按钮上传第一个文件",
+    "search_empty_title": "没有匹配的配置文件",
+    "search_empty_desc": "请调整筛选条件或清空搜索关键字再试一次。",
+    "file_size": "大小",
+    "file_modified": "修改时间",
+    "download_button": "下载",
+    "delete_button": "删除",
+    "delete_confirm": "确定要删除文件",
+    "delete_all_confirm": "确定要删除所有认证文件吗？此操作不可恢复！",
+    "delete_filtered_confirm": "确定要删除筛选出的 {{type}} 认证文件吗？此操作不可恢复！",
+    "upload_error_json": "只能上传JSON文件",
+    "upload_success": "文件上传成功",
+    "download_success": "文件下载成功",
+    "delete_success": "文件删除成功",
+    "delete_all_success": "成功删除",
+    "delete_filtered_success": "成功删除 {{count}} 个 {{type}} 认证文件",
+    "delete_filtered_partial": "{{type}} 认证文件删除完成，成功 {{success}} 个，失败 {{failed}} 个",
+    "delete_filtered_none": "当前筛选类型 ({{type}}) 下没有可删除的认证文件",
+    "files_count": "个文件",
+    "pagination_prev": "上一页",
+    "pagination_next": "下一页",
+    "pagination_info": "第 {{current}} / {{total}} 页 · 共 {{count}} 个文件",
+    "search_label": "搜索配置文件",
+    "search_placeholder": "输入名称、类型或提供方关键字",
+    "page_size_label": "单页数量",
+    "page_size_unit": "个/页",
+    "filter_all": "全部",
+    "filter_qwen": "Qwen",
+    "filter_gemini": "Gemini",
+    "filter_gemini-cli": "GeminiCLI",
+    "filter_aistudio": "AIStudio",
+    "filter_claude": "Claude",
+    "filter_codex": "Codex",
+    "filter_antigravity": "Antigravity",
+    "filter_iflow": "iFlow",
+    "filter_vertex": "Vertex",
+    "filter_empty": "空文件",
+    "filter_unknown": "其他",
+    "type_qwen": "Qwen",
+    "type_gemini": "Gemini",
+    "type_gemini-cli": "GeminiCLI",
+    "type_aistudio": "AIStudio",
+    "type_claude": "Claude",
+    "type_codex": "Codex",
+    "type_antigravity": "Antigravity",
+    "type_iflow": "iFlow",
+    "type_vertex": "Vertex",
+    "type_empty": "空文件",
+    "type_unknown": "其他",
+    "type_virtual": "虚拟认证文件",
+    "models_button": "模型",
+    "models_title": "支持的模型",
+    "models_loading": "正在加载模型列表...",
+    "models_empty": "该凭证暂无可用模型",
+    "models_empty_desc": "该认证凭证可能尚未被服务器加载或没有绑定任何模型",
+    "models_unsupported": "当前版本不支持此功能",
+    "models_unsupported_desc": "请更新 CLI Proxy API 到最新版本后重试",
+    "models_excluded_badge": "已排除",
+    "models_excluded_hint": "此模型已被 OAuth 排除"
+  },
+  "vertex_import": {
+    "title": "Vertex 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/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,159 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Navigate, useNavigate, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { IconEye, IconEyeOff } from '@/components/ui/icons';
+import { useAuthStore, useNotificationStore } from '@/stores';
+import { detectApiBaseFromLocation, normalizeApiBase } from '@/utils/connection';
+
+export function LoginPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { showNotification } = useNotificationStore();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const login = useAuthStore((state) => state.login);
+  const restoreSession = useAuthStore((state) => state.restoreSession);
+  const storedBase = useAuthStore((state) => state.apiBase);
+  const storedKey = useAuthStore((state) => state.managementKey);
+
+  const [apiBase, setApiBase] = useState('');
+  const [managementKey, setManagementKey] = useState('');
+  const [showCustomBase, setShowCustomBase] = useState(false);
+  const [showKey, setShowKey] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [autoLoading, setAutoLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const detectedBase = useMemo(() => detectApiBaseFromLocation(), []);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const autoLoggedIn = await restoreSession();
+        if (!autoLoggedIn) {
+          setApiBase(storedBase || detectedBase);
+          setManagementKey(storedKey || '');
+        }
+      } finally {
+        setAutoLoading(false);
+      }
+    };
+
+    init();
+  }, [detectedBase, restoreSession, storedBase, storedKey]);
+
+  if (isAuthenticated) {
+    const redirect = (location.state as any)?.from?.pathname || '/';
+    return <Navigate to={redirect} replace />;
+  }
+
+  const handleUseCurrent = () => {
+    setApiBase(detectedBase);
+  };
+
+  const handleSubmit = async () => {
+    if (!managementKey.trim()) {
+      setError(t('login.error_required'));
+      return;
+    }
+
+    const baseToUse = apiBase ? normalizeApiBase(apiBase) : detectedBase;
+    setLoading(true);
+    setError('');
+    try {
+      await login({ apiBase: baseToUse, managementKey: managementKey.trim() });
+      showNotification(t('common.connected_status'), 'success');
+      navigate('/', { replace: true });
+    } catch (err: any) {
+      const message = err?.message || t('login.error_invalid');
+      setError(message);
+      showNotification(`${t('notification.login_failed')}: ${message}`, 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <div className="login-header">
+          <div className="title">{t('title.login')}</div>
+          <div className="subtitle">{t('login.subtitle')}</div>
+        </div>
+
+        <div className="connection-box">
+          <div className="label">{t('login.connection_current')}</div>
+          <div className="value">{apiBase || detectedBase}</div>
+          <div className="hint">{t('login.connection_auto_hint')}</div>
+        </div>
+
+        <div className="toggle-advanced">
+          <input
+            id="custom-connection-toggle"
+            type="checkbox"
+            checked={showCustomBase}
+            onChange={(e) => setShowCustomBase(e.target.checked)}
+          />
+          <label htmlFor="custom-connection-toggle">{t('login.custom_connection_label')}</label>
+        </div>
+
+        {showCustomBase && (
+          <Input
+            label={t('login.custom_connection_label')}
+            placeholder={t('login.custom_connection_placeholder')}
+            value={apiBase}
+            onChange={(e) => setApiBase(e.target.value)}
+            hint={t('login.custom_connection_hint')}
+          />
+        )}
+
+        <Input
+          label={t('login.management_key_label')}
+          placeholder={t('login.management_key_placeholder')}
+          type={showKey ? 'text' : 'password'}
+          value={managementKey}
+          onChange={(e) => setManagementKey(e.target.value)}
+          rightElement={
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              onClick={() => setShowKey((prev) => !prev)}
+              aria-label={
+                showKey
+                  ? t('login.hide_key', { defaultValue: '隐藏密钥' })
+                  : t('login.show_key', { defaultValue: '显示密钥' })
+              }
+              title={
+                showKey
+                  ? t('login.hide_key', { defaultValue: '隐藏密钥' })
+                  : t('login.show_key', { defaultValue: '显示密钥' })
+              }
+            >
+              {showKey ? <IconEyeOff size={16} /> : <IconEye size={16} />}
+            </button>
+          }
+        />
+
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <Button variant="secondary" onClick={handleUseCurrent}>
+            {t('login.use_current_address')}
+          </Button>
+          <Button fullWidth onClick={handleSubmit} loading={loading}>
+            {loading ? t('login.submitting') : t('login.submit_button')}
+          </Button>
+        </div>
+
+        {error && <div className="error-box">{error}</div>}
+
+        {autoLoading && (
+          <div className="connection-box">
+            <div className="label">{t('auto_login.title')}</div>
+            <div className="value">{t('auto_login.message')}</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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,158 @@
+/**
+ * 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.prefix?.trim()) payload.prefix = config.prefix.trim();
+  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.prefix?.trim()) payload.prefix = config.prefix.trim();
+  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))
+      : []
+  };
+  if (provider.prefix?.trim()) payload.prefix = provider.prefix.trim();
+  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)}`)
+};

src/services/api/transformers.ts

@@ -0,0 +1,315 @@
+import type {
+  ApiKeyEntry,
+  GeminiKeyConfig,
+  ModelAlias,
+  OpenAIProviderConfig,
+  ProviderKeyConfig,
+  AmpcodeConfig,
+  AmpcodeModelMapping
+} from '@/types';
+import type { Config } from '@/types/config';
+import { buildHeaderObject } from '@/utils/headers';
+
+const normalizeBoolean = (value: any): boolean | undefined => {
+  if (value === undefined || value === null) return undefined;
+  if (typeof value === 'boolean') return value;
+  if (typeof value === 'number') return value !== 0;
+  if (typeof value === 'string') {
+    const trimmed = value.trim().toLowerCase();
+    if (['true', '1', 'yes', 'y', 'on'].includes(trimmed)) return true;
+    if (['false', '0', 'no', 'n', 'off'].includes(trimmed)) return false;
+  }
+  return Boolean(value);
+};
+
+const normalizeModelAliases = (models: any): ModelAlias[] => {
+  if (!Array.isArray(models)) return [];
+  return models
+    .map((item) => {
+      if (!item) return null;
+      const name = item.name || item.id || item.model;
+      if (!name) return null;
+      const alias = item.alias || item.display_name || item.displayName;
+      const priority = item.priority ?? item['priority'];
+      const testModel = item['test-model'] ?? item.testModel;
+      const entry: ModelAlias = { name: String(name) };
+      if (alias && alias !== name) {
+        entry.alias = String(alias);
+      }
+      if (priority !== undefined) {
+        entry.priority = Number(priority);
+      }
+      if (testModel) {
+        entry.testModel = String(testModel);
+      }
+      return entry;
+    })
+    .filter(Boolean) as ModelAlias[];
+};
+
+const normalizeHeaders = (headers: any) => {
+  if (!headers || typeof headers !== 'object') return undefined;
+  const normalized = buildHeaderObject(headers as Record<string, string>);
+  return Object.keys(normalized).length ? normalized : undefined;
+};
+
+const normalizeExcludedModels = (input: any): string[] => {
+  const rawList = Array.isArray(input) ? input : typeof input === 'string' ? input.split(/[\n,]/) : [];
+  const seen = new Set<string>();
+  const normalized: string[] = [];
+
+  rawList.forEach((item) => {
+    const trimmed = String(item ?? '').trim();
+    if (!trimmed) return;
+    const key = trimmed.toLowerCase();
+    if (seen.has(key)) return;
+    seen.add(key);
+    normalized.push(trimmed);
+  });
+
+  return normalized;
+};
+
+const normalizePrefix = (value: any): string | undefined => {
+  if (value === undefined || value === null) return undefined;
+  const trimmed = String(value).trim();
+  return trimmed ? trimmed : undefined;
+};
+
+const normalizeApiKeyEntry = (entry: any): ApiKeyEntry | null => {
+  if (!entry) return null;
+  const apiKey = entry['api-key'] ?? entry.apiKey ?? entry.key ?? (typeof entry === 'string' ? entry : '');
+  const trimmed = String(apiKey || '').trim();
+  if (!trimmed) return null;
+
+  const proxyUrl = entry['proxy-url'] ?? entry.proxyUrl;
+  const headers = normalizeHeaders(entry.headers);
+
+  return {
+    apiKey: trimmed,
+    proxyUrl: proxyUrl ? String(proxyUrl) : undefined,
+    headers
+  };
+};
+
+const normalizeProviderKeyConfig = (item: any): ProviderKeyConfig | null => {
+  if (!item) return null;
+  const apiKey = item['api-key'] ?? item.apiKey ?? (typeof item === 'string' ? item : '');
+  const trimmed = String(apiKey || '').trim();
+  if (!trimmed) return null;
+
+  const config: ProviderKeyConfig = { apiKey: trimmed };
+  const prefix = normalizePrefix(item.prefix ?? item['prefix']);
+  if (prefix) config.prefix = prefix;
+  const baseUrl = item['base-url'] ?? item.baseUrl;
+  const proxyUrl = item['proxy-url'] ?? item.proxyUrl;
+  if (baseUrl) config.baseUrl = String(baseUrl);
+  if (proxyUrl) config.proxyUrl = String(proxyUrl);
+  const headers = normalizeHeaders(item.headers);
+  if (headers) config.headers = headers;
+  const models = normalizeModelAliases(item.models);
+  if (models.length) config.models = models;
+  const excludedModels = normalizeExcludedModels(
+    item['excluded-models'] ?? item.excludedModels ?? item['excluded_models'] ?? item.excluded_models
+  );
+  if (excludedModels.length) config.excludedModels = excludedModels;
+  return config;
+};
+
+const normalizeGeminiKeyConfig = (item: any): GeminiKeyConfig | null => {
+  if (!item) return null;
+  let apiKey = item['api-key'] ?? item.apiKey;
+  if (!apiKey && typeof item === 'string') {
+    apiKey = item;
+  }
+  const trimmed = String(apiKey || '').trim();
+  if (!trimmed) return null;
+
+  const config: GeminiKeyConfig = { apiKey: trimmed };
+  const prefix = normalizePrefix(item.prefix ?? item['prefix']);
+  if (prefix) config.prefix = prefix;
+  const baseUrl = item['base-url'] ?? item.baseUrl ?? item['base_url'];
+  if (baseUrl) config.baseUrl = String(baseUrl);
+  const headers = normalizeHeaders(item.headers);
+  if (headers) config.headers = headers;
+  const excludedModels = normalizeExcludedModels(item['excluded-models'] ?? item.excludedModels);
+  if (excludedModels.length) config.excludedModels = excludedModels;
+  return config;
+};
+
+const normalizeOpenAIProvider = (provider: any): OpenAIProviderConfig | null => {
+  if (!provider || typeof provider !== 'object') return null;
+  const name = provider.name || provider.id;
+  const baseUrl = provider['base-url'] ?? provider.baseUrl;
+  if (!name || !baseUrl) return null;
+
+  let apiKeyEntries: ApiKeyEntry[] = [];
+  if (Array.isArray(provider['api-key-entries'])) {
+    apiKeyEntries = provider['api-key-entries']
+      .map((entry: any) => normalizeApiKeyEntry(entry))
+      .filter(Boolean) as ApiKeyEntry[];
+  } else if (Array.isArray(provider['api-keys'])) {
+    apiKeyEntries = provider['api-keys']
+      .map((key: any) => normalizeApiKeyEntry({ 'api-key': key }))
+      .filter(Boolean) as ApiKeyEntry[];
+  }
+
+  const headers = normalizeHeaders(provider.headers);
+  const models = normalizeModelAliases(provider.models);
+  const priority = provider.priority ?? provider['priority'];
+  const testModel = provider['test-model'] ?? provider.testModel;
+
+  const result: OpenAIProviderConfig = {
+    name: String(name),
+    baseUrl: String(baseUrl),
+    apiKeyEntries
+  };
+
+  const prefix = normalizePrefix(provider.prefix ?? provider['prefix']);
+  if (prefix) result.prefix = prefix;
+  if (headers) result.headers = headers;
+  if (models.length) result.models = models;
+  if (priority !== undefined) result.priority = Number(priority);
+  if (testModel) result.testModel = String(testModel);
+  return result;
+};
+
+const normalizeOauthExcluded = (payload: any): Record<string, string[]> | undefined => {
+  if (!payload || typeof payload !== 'object') return undefined;
+  const source = payload['oauth-excluded-models'] ?? payload.items ?? payload;
+  if (!source || typeof source !== 'object') return undefined;
+  const map: Record<string, string[]> = {};
+  Object.entries(source).forEach(([provider, models]) => {
+    const key = String(provider || '').trim();
+    if (!key) return;
+    const normalized = normalizeExcludedModels(models);
+    map[key.toLowerCase()] = normalized;
+  });
+  return map;
+};
+
+const normalizeAmpcodeModelMappings = (input: any): AmpcodeModelMapping[] => {
+  if (!Array.isArray(input)) return [];
+  const seen = new Set<string>();
+  const mappings: AmpcodeModelMapping[] = [];
+
+  input.forEach((entry) => {
+    if (!entry || typeof entry !== 'object') return;
+    const from = String(entry.from ?? entry['from'] ?? '').trim();
+    const to = String(entry.to ?? entry['to'] ?? '').trim();
+    if (!from || !to) return;
+    const key = from.toLowerCase();
+    if (seen.has(key)) return;
+    seen.add(key);
+    mappings.push({ from, to });
+  });
+
+  return mappings;
+};
+
+const normalizeAmpcodeConfig = (payload: any): AmpcodeConfig | undefined => {
+  const source = payload?.ampcode ?? payload;
+  if (!source || typeof source !== 'object') return undefined;
+
+  const config: AmpcodeConfig = {};
+  const upstreamUrl = source['upstream-url'] ?? source.upstreamUrl ?? source['upstream_url'];
+  if (upstreamUrl) config.upstreamUrl = String(upstreamUrl);
+  const upstreamApiKey = source['upstream-api-key'] ?? source.upstreamApiKey ?? source['upstream_api_key'];
+  if (upstreamApiKey) config.upstreamApiKey = String(upstreamApiKey);
+
+  const forceModelMappings = normalizeBoolean(
+    source['force-model-mappings'] ?? source.forceModelMappings ?? source['force_model_mappings']
+  );
+  if (forceModelMappings !== undefined) {
+    config.forceModelMappings = forceModelMappings;
+  }
+
+  const modelMappings = normalizeAmpcodeModelMappings(
+    source['model-mappings'] ?? source.modelMappings ?? source['model_mappings']
+  );
+  if (modelMappings.length) {
+    config.modelMappings = modelMappings;
+  }
+
+  return config;
+};
+
+/**
+ * 规范化 /config 返回值
+ */
+export const normalizeConfigResponse = (raw: any): Config => {
+  const config: Config = { raw: raw || {} };
+  if (!raw || typeof raw !== 'object') {
+    return config;
+  }
+
+  config.debug = raw.debug;
+  config.proxyUrl = raw['proxy-url'] ?? raw.proxyUrl;
+  config.requestRetry = raw['request-retry'] ?? raw.requestRetry;
+
+  const quota = raw['quota-exceeded'] ?? raw.quotaExceeded;
+  if (quota && typeof quota === 'object') {
+    config.quotaExceeded = {
+      switchProject: quota['switch-project'] ?? quota.switchProject,
+      switchPreviewModel: quota['switch-preview-model'] ?? quota.switchPreviewModel
+    };
+  }
+
+  config.usageStatisticsEnabled = raw['usage-statistics-enabled'] ?? raw.usageStatisticsEnabled;
+  config.requestLog = raw['request-log'] ?? raw.requestLog;
+  config.loggingToFile = raw['logging-to-file'] ?? raw.loggingToFile;
+  config.wsAuth = raw['ws-auth'] ?? raw.wsAuth;
+  config.apiKeys = Array.isArray(raw['api-keys']) ? raw['api-keys'].slice() : raw.apiKeys;
+
+  const geminiList = raw['gemini-api-key'] ?? raw.geminiApiKey ?? raw.geminiApiKeys;
+  if (Array.isArray(geminiList)) {
+    config.geminiApiKeys = geminiList
+      .map((item: any) => normalizeGeminiKeyConfig(item))
+      .filter(Boolean) as GeminiKeyConfig[];
+  }
+
+  const codexList = raw['codex-api-key'] ?? raw.codexApiKey ?? raw.codexApiKeys;
+  if (Array.isArray(codexList)) {
+    config.codexApiKeys = codexList
+      .map((item: any) => normalizeProviderKeyConfig(item))
+      .filter(Boolean) as ProviderKeyConfig[];
+  }
+
+  const claudeList = raw['claude-api-key'] ?? raw.claudeApiKey ?? raw.claudeApiKeys;
+  if (Array.isArray(claudeList)) {
+    config.claudeApiKeys = claudeList
+      .map((item: any) => normalizeProviderKeyConfig(item))
+      .filter(Boolean) as ProviderKeyConfig[];
+  }
+
+  const openaiList = raw['openai-compatibility'] ?? raw.openaiCompatibility ?? raw.openAICompatibility;
+  if (Array.isArray(openaiList)) {
+    config.openaiCompatibility = openaiList
+      .map((item: any) => normalizeOpenAIProvider(item))
+      .filter(Boolean) as OpenAIProviderConfig[];
+  }
+
+  const ampcode = normalizeAmpcodeConfig(raw.ampcode);
+  if (ampcode) {
+    config.ampcode = ampcode;
+  }
+
+  const oauthExcluded = normalizeOauthExcluded(raw['oauth-excluded-models'] ?? raw.oauthExcludedModels);
+  if (oauthExcluded) {
+    config.oauthExcludedModels = oauthExcluded;
+  }
+
+  return config;
+};
+
+export {
+  normalizeApiKeyEntry,
+  normalizeGeminiKeyConfig,
+  normalizeModelAliases,
+  normalizeOpenAIProvider,
+  normalizeProviderKeyConfig,
+  normalizeHeaders,
+  normalizeExcludedModels,
+  normalizeAmpcodeConfig,
+  normalizeAmpcodeModelMappings
+};

src/services/api/usage.ts

@@ -0,0 +1,27 @@
+/**
+ * 使用统计相关 API
+ */
+
+import { apiClient } from './client';
+import { computeKeyStats, KeyStats } from '@/utils/usage';
+
+const USAGE_TIMEOUT_MS = 60 * 1000;
+
+export const usageApi = {
+  /**
+   * 获取使用统计原始数据
+   */
+  getUsage: () => apiClient.get('/usage', { timeout: USAGE_TIMEOUT_MS }),
+
+  /**
+   * 计算密钥成功/失败统计，必要时会先获取 usage 数据
+   */
+  async getKeyStats(usageData?: any): Promise<KeyStats> {
+    let payload = usageData;
+    if (!payload) {
+      const response = await apiClient.get('/usage', { timeout: USAGE_TIMEOUT_MS });
+      payload = response?.usage ?? response;
+    }
+    return computeKeyStats(payload);
+  }
+};

src/services/api/version.ts

@@ -0,0 +1,9 @@
+/**
+ * 版本相关 API
+ */
+
+import { apiClient } from './client';
+
+export const versionApi = {
+  checkLatest: () => apiClient.get('/latest-version')
+};

src/services/storage/secureStorage.ts

@@ -0,0 +1,111 @@
+/**
+ * 安全存储服务
+ * 基于原项目 src/utils/secure-storage.js
+ */
+
+import { encryptData, decryptData } from '@/utils/encryption';
+
+interface StorageOptions {
+  encrypt?: boolean;
+}
+
+class SecureStorageService {
+  /**
+   * 存储数据
+   */
+  setItem(key: string, value: any, options: StorageOptions = {}): void {
+    const { encrypt = true } = options;
+
+    if (value === null || value === undefined) {
+      this.removeItem(key);
+      return;
+    }
+
+    const stringValue = JSON.stringify(value);
+    const storedValue = encrypt ? encryptData(stringValue) : stringValue;
+
+    localStorage.setItem(key, storedValue);
+  }
+
+  /**
+   * 获取数据
+   */
+  getItem<T = any>(key: string, options: StorageOptions = {}): T | null {
+    const { encrypt = true } = options;
+
+    const raw = localStorage.getItem(key);
+    if (raw === null) return null;
+
+    try {
+      const decrypted = encrypt ? decryptData(raw) : raw;
+      return JSON.parse(decrypted) as T;
+    } catch {
+      // JSON解析失败,尝试兼容旧的纯字符串数据 (非JSON格式)
+      try {
+        // 如果是加密的,尝试解密后直接返回
+        if (encrypt && raw.startsWith('enc::v1::')) {
+          const decrypted = decryptData(raw);
+          // 解密后如果还不是JSON,返回原始字符串
+          return decrypted as T;
+        }
+        // 非加密的纯字符串,直接返回
+        return raw as T;
+      } catch {
+        // 完全失败,静默返回null (避免控制台污染)
+        return null;
+      }
+    }
+  }
+
+  /**
+   * 删除数据
+   */
+  removeItem(key: string): void {
+    localStorage.removeItem(key);
+  }
+
+  /**
+   * 清空所有数据
+   */
+  clear(): void {
+    localStorage.clear();
+  }
+
+  /**
+   * 迁移旧的明文缓存为加密格式
+   */
+  migratePlaintextKeys(keys: string[]): void {
+    keys.forEach((key) => {
+      const raw = localStorage.getItem(key);
+      if (!raw) return;
+
+      // 如果已经是加密格式，跳过
+      if (raw.startsWith('enc::v1::')) {
+        return;
+      }
+
+      let parsed: any = raw;
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        // 原值不是 JSON，直接使用字符串
+        parsed = raw;
+      }
+
+      try {
+        this.setItem(key, parsed);
+      } catch (error) {
+        console.warn(`Failed to migrate key "${key}":`, error);
+      }
+    });
+  }
+
+  /**
+   * 检查键是否存在
+   */
+  hasItem(key: string): boolean {
+    return localStorage.getItem(key) !== null;
+  }
+}
+
+export const secureStorage = new SecureStorageService();

src/stores/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Zustand Stores 统一导出
+ */
+
+export { useNotificationStore } from './useNotificationStore';
+export { useThemeStore } from './useThemeStore';
+export { useLanguageStore } from './useLanguageStore';
+export { useAuthStore } from './useAuthStore';
+export { useConfigStore } from './useConfigStore';
+export { useModelsStore } from './useModelsStore';

src/stores/useAuthStore.ts

@@ -0,0 +1,209 @@
+/**
+ * 认证状态管理
+ * 从原项目 src/modules/login.js 和 src/core/connection.js 迁移
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import type { AuthState, LoginCredentials, ConnectionStatus } from '@/types';
+import { STORAGE_KEY_AUTH } from '@/utils/constants';
+import { secureStorage } from '@/services/storage/secureStorage';
+import { apiClient } from '@/services/api/client';
+import { useConfigStore } from './useConfigStore';
+import { detectApiBaseFromLocation, normalizeApiBase } from '@/utils/connection';
+
+interface AuthStoreState extends AuthState {
+  connectionStatus: ConnectionStatus;
+  connectionError: string | null;
+
+  // 操作
+  login: (credentials: LoginCredentials) => Promise<void>;
+  logout: () => void;
+  checkAuth: () => Promise<boolean>;
+  restoreSession: () => Promise<boolean>;
+  updateServerVersion: (version: string | null, buildDate?: string | null) => void;
+  updateConnectionStatus: (status: ConnectionStatus, error?: string | null) => void;
+}
+
+let restoreSessionPromise: Promise<boolean> | null = null;
+
+export const useAuthStore = create<AuthStoreState>()(
+  persist(
+    (set, get) => ({
+      // 初始状态
+      isAuthenticated: false,
+      apiBase: '',
+      managementKey: '',
+      serverVersion: null,
+      serverBuildDate: null,
+      connectionStatus: 'disconnected',
+      connectionError: null,
+
+      // 恢复会话并自动登录
+      restoreSession: () => {
+        if (restoreSessionPromise) return restoreSessionPromise;
+
+        restoreSessionPromise = (async () => {
+          secureStorage.migratePlaintextKeys(['apiBase', 'apiUrl', 'managementKey']);
+
+          const wasLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
+          const legacyBase =
+            secureStorage.getItem<string>('apiBase') ||
+            secureStorage.getItem<string>('apiUrl', { encrypt: true });
+          const legacyKey = secureStorage.getItem<string>('managementKey');
+
+          const { apiBase, managementKey } = get();
+          const resolvedBase = normalizeApiBase(apiBase || legacyBase || detectApiBaseFromLocation());
+          const resolvedKey = managementKey || legacyKey || '';
+
+          set({ apiBase: resolvedBase, managementKey: resolvedKey });
+          apiClient.setConfig({ apiBase: resolvedBase, managementKey: resolvedKey });
+
+          if (wasLoggedIn && resolvedBase && resolvedKey) {
+            try {
+              await get().login({ apiBase: resolvedBase, managementKey: resolvedKey });
+              return true;
+            } catch (error) {
+              console.warn('Auto login failed:', error);
+              return false;
+            }
+          }
+
+          return false;
+        })();
+
+        return restoreSessionPromise;
+      },
+
+      // 登录
+      login: async (credentials) => {
+        const apiBase = normalizeApiBase(credentials.apiBase);
+        const managementKey = credentials.managementKey.trim();
+
+        try {
+          set({ connectionStatus: 'connecting' });
+
+          // 配置 API 客户端
+          apiClient.setConfig({
+            apiBase,
+            managementKey
+          });
+
+          // 测试连接 - 获取配置
+          await useConfigStore.getState().fetchConfig(undefined, true);
+
+          // 登录成功
+          set({
+            isAuthenticated: true,
+            apiBase,
+            managementKey,
+            connectionStatus: 'connected',
+            connectionError: null
+          });
+          localStorage.setItem('isLoggedIn', 'true');
+        } catch (error: any) {
+          set({
+            connectionStatus: 'error',
+            connectionError: error.message || 'Connection failed'
+          });
+          throw error;
+        }
+      },
+
+      // 登出
+      logout: () => {
+        restoreSessionPromise = null;
+        useConfigStore.getState().clearCache();
+        set({
+          isAuthenticated: false,
+          apiBase: '',
+          managementKey: '',
+          serverVersion: null,
+          serverBuildDate: null,
+          connectionStatus: 'disconnected',
+          connectionError: null
+        });
+        localStorage.removeItem('isLoggedIn');
+      },
+
+      // 检查认证状态
+      checkAuth: async () => {
+        const { managementKey, apiBase } = get();
+
+        if (!managementKey || !apiBase) {
+          return false;
+        }
+
+        try {
+          // 重新配置客户端
+          apiClient.setConfig({ apiBase, managementKey });
+
+          // 验证连接
+          await useConfigStore.getState().fetchConfig();
+
+          set({
+            isAuthenticated: true,
+            connectionStatus: 'connected'
+          });
+
+          return true;
+        } catch (error) {
+          set({
+            isAuthenticated: false,
+            connectionStatus: 'error'
+          });
+          return false;
+        }
+      },
+
+      // 更新服务器版本
+      updateServerVersion: (version, buildDate) => {
+        set({ serverVersion: version || null, serverBuildDate: buildDate || null });
+      },
+
+      // 更新连接状态
+      updateConnectionStatus: (status, error = null) => {
+        set({
+          connectionStatus: status,
+          connectionError: error
+        });
+      }
+    }),
+    {
+      name: STORAGE_KEY_AUTH,
+      storage: createJSONStorage(() => ({
+        getItem: (name) => {
+          const data = secureStorage.getItem<AuthStoreState>(name);
+          return data ? JSON.stringify(data) : null;
+        },
+        setItem: (name, value) => {
+          secureStorage.setItem(name, JSON.parse(value));
+        },
+        removeItem: (name) => {
+          secureStorage.removeItem(name);
+        }
+      })),
+      partialize: (state) => ({
+        apiBase: state.apiBase,
+        managementKey: state.managementKey,
+        serverVersion: state.serverVersion,
+        serverBuildDate: state.serverBuildDate
+      })
+    }
+  )
+);
+
+// 监听全局未授权事件
+if (typeof window !== 'undefined') {
+  window.addEventListener('unauthorized', () => {
+    useAuthStore.getState().logout();
+  });
+
+  window.addEventListener(
+    'server-version-update',
+    ((e: CustomEvent) => {
+      const detail = e.detail || {};
+      useAuthStore.getState().updateServerVersion(detail.version || null, detail.buildDate || null);
+    }) as EventListener
+  );
+}

src/stores/useConfigStore.ts

@@ -0,0 +1,263 @@
+/**
+ * 配置状态管理
+ * 从原项目 src/core/config-service.js 迁移
+ */
+
+import { create } from 'zustand';
+import type { Config } from '@/types';
+import type { RawConfigSection } from '@/types/config';
+import { configApi } from '@/services/api/config';
+import { CACHE_EXPIRY_MS } from '@/utils/constants';
+
+interface ConfigCache {
+  data: any;
+  timestamp: number;
+}
+
+interface ConfigState {
+  config: Config | null;
+  cache: Map<string, ConfigCache>;
+  loading: boolean;
+  error: string | null;
+
+  // 操作
+  fetchConfig: (section?: RawConfigSection, forceRefresh?: boolean) => Promise<Config | any>;
+  updateConfigValue: (section: RawConfigSection, value: any) => void;
+  clearCache: (section?: RawConfigSection) => void;
+  isCacheValid: (section?: RawConfigSection) => boolean;
+}
+
+let configRequestToken = 0;
+let inFlightConfigRequest: { id: number; promise: Promise<Config> } | null = null;
+
+const SECTION_KEYS: RawConfigSection[] = [
+  'debug',
+  'proxy-url',
+  'request-retry',
+  'quota-exceeded',
+  'usage-statistics-enabled',
+  'request-log',
+  'logging-to-file',
+  'ws-auth',
+  'api-keys',
+  'ampcode',
+  'gemini-api-key',
+  'codex-api-key',
+  'claude-api-key',
+  'openai-compatibility',
+  'oauth-excluded-models'
+];
+
+const extractSectionValue = (config: Config | null, section?: RawConfigSection) => {
+  if (!config) return undefined;
+  switch (section) {
+    case 'debug':
+      return config.debug;
+    case 'proxy-url':
+      return config.proxyUrl;
+    case 'request-retry':
+      return config.requestRetry;
+    case 'quota-exceeded':
+      return config.quotaExceeded;
+    case 'usage-statistics-enabled':
+      return config.usageStatisticsEnabled;
+    case 'request-log':
+      return config.requestLog;
+    case 'logging-to-file':
+      return config.loggingToFile;
+    case 'ws-auth':
+      return config.wsAuth;
+    case 'api-keys':
+      return config.apiKeys;
+    case 'ampcode':
+      return config.ampcode;
+    case 'gemini-api-key':
+      return config.geminiApiKeys;
+    case 'codex-api-key':
+      return config.codexApiKeys;
+    case 'claude-api-key':
+      return config.claudeApiKeys;
+    case 'openai-compatibility':
+      return config.openaiCompatibility;
+    case 'oauth-excluded-models':
+      return config.oauthExcludedModels;
+    default:
+      if (!section) return undefined;
+      return config.raw?.[section];
+  }
+};
+
+export const useConfigStore = create<ConfigState>((set, get) => ({
+  config: null,
+  cache: new Map(),
+  loading: false,
+  error: null,
+
+  fetchConfig: async (section, forceRefresh = false) => {
+    const { cache, isCacheValid } = get();
+
+    // 检查缓存
+    const cacheKey = section || '__full__';
+    if (!forceRefresh && isCacheValid(section)) {
+      const cached = cache.get(cacheKey);
+      if (cached) {
+        return cached.data;
+      }
+    }
+
+    // section 缓存未命中但 full 缓存可用时，直接复用已获取到的配置，避免重复 /config 请求
+    if (!forceRefresh && section && isCacheValid()) {
+      const fullCached = cache.get('__full__');
+      if (fullCached?.data) {
+        return extractSectionValue(fullCached.data as Config, section);
+      }
+    }
+
+    // 同一时刻合并多个 /config 请求（如 StrictMode 或多个页面同时触发）
+    if (inFlightConfigRequest) {
+      const data = await inFlightConfigRequest.promise;
+      return section ? extractSectionValue(data, section) : data;
+    }
+
+    // 获取新数据
+    set({ loading: true, error: null });
+
+    const requestId = (configRequestToken += 1);
+    try {
+      const requestPromise = configApi.getConfig();
+      inFlightConfigRequest = { id: requestId, promise: requestPromise };
+      const data = await requestPromise;
+      const now = Date.now();
+
+      // 如果在请求过程中连接已被切换/登出，则忽略旧请求的结果，避免覆盖新会话的状态
+      if (requestId !== configRequestToken) {
+        return section ? extractSectionValue(data, section) : data;
+      }
+
+      // 更新缓存
+      const newCache = new Map(cache);
+      newCache.set('__full__', { data, timestamp: now });
+      SECTION_KEYS.forEach((key) => {
+        const value = extractSectionValue(data, key);
+        if (value !== undefined) {
+          newCache.set(key, { data: value, timestamp: now });
+        }
+      });
+
+      set({
+        config: data,
+        cache: newCache,
+        loading: false
+      });
+
+      return section ? extractSectionValue(data, section) : data;
+    } catch (error: any) {
+      if (requestId === configRequestToken) {
+        set({
+          error: error.message || 'Failed to fetch config',
+          loading: false
+        });
+      }
+      throw error;
+    } finally {
+      if (inFlightConfigRequest?.id === requestId) {
+        inFlightConfigRequest = null;
+      }
+    }
+  },
+
+  updateConfigValue: (section, value) => {
+    set((state) => {
+      const raw = { ...(state.config?.raw || {}) };
+      raw[section] = value;
+      const nextConfig: Config = { ...(state.config || {}), raw };
+
+      switch (section) {
+        case 'debug':
+          nextConfig.debug = value;
+          break;
+        case 'proxy-url':
+          nextConfig.proxyUrl = value;
+          break;
+        case 'request-retry':
+          nextConfig.requestRetry = value;
+          break;
+        case 'quota-exceeded':
+          nextConfig.quotaExceeded = value;
+          break;
+        case 'usage-statistics-enabled':
+          nextConfig.usageStatisticsEnabled = value;
+          break;
+        case 'request-log':
+          nextConfig.requestLog = value;
+          break;
+        case 'logging-to-file':
+          nextConfig.loggingToFile = value;
+          break;
+        case 'ws-auth':
+          nextConfig.wsAuth = value;
+          break;
+        case 'api-keys':
+          nextConfig.apiKeys = value;
+          break;
+        case 'ampcode':
+          nextConfig.ampcode = value;
+          break;
+        case 'gemini-api-key':
+          nextConfig.geminiApiKeys = value;
+          break;
+        case 'codex-api-key':
+          nextConfig.codexApiKeys = value;
+          break;
+        case 'claude-api-key':
+          nextConfig.claudeApiKeys = value;
+          break;
+        case 'openai-compatibility':
+          nextConfig.openaiCompatibility = value;
+          break;
+        case 'oauth-excluded-models':
+          nextConfig.oauthExcludedModels = value;
+          break;
+        default:
+          break;
+      }
+
+      return { config: nextConfig };
+    });
+
+    // 清除该 section 的缓存
+    get().clearCache(section);
+  },
+
+  clearCache: (section) => {
+    const { cache } = get();
+    const newCache = new Map(cache);
+
+    if (section) {
+      newCache.delete(section);
+      // 同时清除完整配置缓存
+      newCache.delete('__full__');
+
+      set({ cache: newCache });
+      return;
+    } else {
+      newCache.clear();
+    }
+
+    // 清除全部缓存一般代表“切换连接/登出/全量刷新”，需要让 in-flight 的旧请求失效
+    configRequestToken += 1;
+    inFlightConfigRequest = null;
+
+    set({ config: null, cache: newCache, loading: false, error: null });
+  },
+
+  isCacheValid: (section) => {
+    const { cache } = get();
+    const cacheKey = section || '__full__';
+    const cached = cache.get(cacheKey);
+
+    if (!cached) return false;
+
+    return Date.now() - cached.timestamp < CACHE_EXPIRY_MS;
+  }
+}));

src/stores/useLanguageStore.ts

@@ -0,0 +1,39 @@
+/**
+ * 语言状态管理
+ * 从原项目 src/modules/language.js 迁移
+ */
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Language } from '@/types';
+import { STORAGE_KEY_LANGUAGE } from '@/utils/constants';
+import i18n from '@/i18n';
+
+interface LanguageState {
+  language: Language;
+  setLanguage: (language: Language) => void;
+  toggleLanguage: () => void;
+}
+
+export const useLanguageStore = create<LanguageState>()(
+  persist(
+    (set, get) => ({
+      language: 'zh-CN',
+
+      setLanguage: (language) => {
+        // 切换 i18next 语言
+        i18n.changeLanguage(language);
+        set({ language });
+      },
+
+      toggleLanguage: () => {
+        const { language, setLanguage } = get();
+        const newLanguage: Language = language === 'zh-CN' ? 'en' : 'zh-CN';
+        setLanguage(newLanguage);
+      }
+    }),
+    {
+      name: STORAGE_KEY_LANGUAGE
+    }
+  )
+);

src/stores/useModelsStore.ts

@@ -0,0 +1,76 @@
+/**
+ * 模型列表状态管理（带缓存）
+ */
+
+import { create } from 'zustand';
+import { modelsApi } from '@/services/api/models';
+import { CACHE_EXPIRY_MS } from '@/utils/constants';
+import type { ModelInfo } from '@/utils/models';
+
+interface ModelsCache {
+  data: ModelInfo[];
+  timestamp: number;
+  apiBase: string;
+}
+
+interface ModelsState {
+  models: ModelInfo[];
+  loading: boolean;
+  error: string | null;
+  cache: ModelsCache | null;
+
+  fetchModels: (apiBase: string, apiKey?: string, forceRefresh?: boolean) => Promise<ModelInfo[]>;
+  clearCache: () => void;
+  isCacheValid: (apiBase: string) => boolean;
+}
+
+export const useModelsStore = create<ModelsState>((set, get) => ({
+  models: [],
+  loading: false,
+  error: null,
+  cache: null,
+
+  fetchModels: async (apiBase, apiKey, forceRefresh = false) => {
+    const { cache, isCacheValid } = get();
+
+    // 检查缓存
+    if (!forceRefresh && isCacheValid(apiBase) && cache) {
+      set({ models: cache.data, error: null });
+      return cache.data;
+    }
+
+    set({ loading: true, error: null });
+
+    try {
+      const list = await modelsApi.fetchModels(apiBase, apiKey);
+      const now = Date.now();
+
+      set({
+        models: list,
+        loading: false,
+        cache: { data: list, timestamp: now, apiBase }
+      });
+
+      return list;
+    } catch (error: any) {
+      const message = error?.message || 'Failed to fetch models';
+      set({
+        error: message,
+        loading: false,
+        models: []
+      });
+      throw error;
+    }
+  },
+
+  clearCache: () => {
+    set({ cache: null, models: [] });
+  },
+
+  isCacheValid: (apiBase) => {
+    const { cache } = get();
+    if (!cache) return false;
+    if (cache.apiBase !== apiBase) return false;
+    return Date.now() - cache.timestamp < CACHE_EXPIRY_MS;
+  }
+}));

src/stores/useNotificationStore.ts

@@ -0,0 +1,53 @@
+/**
+ * 通知状态管理
+ * 替代原项目中的 showNotification 方法
+ */
+
+import { create } from 'zustand';
+import type { Notification, NotificationType } from '@/types';
+import { generateId } from '@/utils/helpers';
+import { NOTIFICATION_DURATION_MS } from '@/utils/constants';
+
+interface NotificationState {
+  notifications: Notification[];
+  showNotification: (message: string, type?: NotificationType, duration?: number) => void;
+  removeNotification: (id: string) => void;
+  clearAll: () => void;
+}
+
+export const useNotificationStore = create<NotificationState>((set) => ({
+  notifications: [],
+
+  showNotification: (message, type = 'info', duration = NOTIFICATION_DURATION_MS) => {
+    const id = generateId();
+    const notification: Notification = {
+      id,
+      message,
+      type,
+      duration
+    };
+
+    set((state) => ({
+      notifications: [...state.notifications, notification]
+    }));
+
+    // 自动移除通知
+    if (duration > 0) {
+      setTimeout(() => {
+        set((state) => ({
+          notifications: state.notifications.filter((n) => n.id !== id)
+        }));
+      }, duration);
+    }
+  },
+
+  removeNotification: (id) => {
+    set((state) => ({
+      notifications: state.notifications.filter((n) => n.id !== id)
+    }));
+  },
+
+  clearAll: () => {
+    set({ notifications: [] });
+  }
+}));

src/stores/useThemeStore.ts

@@ -0,0 +1,70 @@
+/**
+ * 主题状态管理
+ * 从原项目 src/modules/theme.js 迁移
+ */
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Theme } from '@/types';
+import { STORAGE_KEY_THEME } from '@/utils/constants';
+
+interface ThemeState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+  initializeTheme: () => void;
+}
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set, get) => ({
+      theme: 'light',
+
+      setTheme: (theme) => {
+        // 应用主题到 DOM
+        if (theme === 'dark') {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        } else {
+          document.documentElement.removeAttribute('data-theme');
+        }
+
+        set({ theme });
+      },
+
+      toggleTheme: () => {
+        const { theme, setTheme } = get();
+        const newTheme: Theme = theme === 'light' ? 'dark' : 'light';
+        setTheme(newTheme);
+      },
+
+      initializeTheme: () => {
+        const { theme, setTheme } = get();
+
+        // 检查系统偏好
+        if (
+          !localStorage.getItem(STORAGE_KEY_THEME) &&
+          window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches
+        ) {
+          setTheme('dark');
+          return;
+        }
+
+        // 应用已保存的主题
+        setTheme(theme);
+
+        // 监听系统主题变化（仅在用户未手动设置时）
+        if (window.matchMedia) {
+          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (!localStorage.getItem(STORAGE_KEY_THEME)) {
+              setTheme(e.matches ? 'dark' : 'light');
+            }
+          });
+        }
+      }
+    }),
+    {
+      name: STORAGE_KEY_THEME
+    }
+  )
+);

src/styles/components.scss

@@ -0,0 +1,634 @@
+@use 'sass:color';
+@use './variables.scss' as *;
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  border: 1px solid transparent;
+  border-radius: $radius-md;
+  padding: 10px 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all $transition-fast;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+
+  &.btn-primary {
+    background-color: var(--primary-color);
+    color: #fff;
+    border-color: var(--primary-color);
+
+    &:hover {
+      background-color: var(--primary-hover);
+      border-color: var(--primary-hover);
+    }
+  }
+
+  &.btn-secondary {
+    background-color: var(--bg-tertiary);
+    border-color: var(--border-color);
+    color: var(--text-primary);
+
+    &:hover {
+      border-color: var(--border-hover);
+    }
+  }
+
+  &.btn-ghost {
+    background: transparent;
+    border-color: transparent;
+    color: var(--text-secondary);
+
+    &:hover {
+      color: var(--text-primary);
+      background: var(--bg-secondary);
+    }
+  }
+
+  &.btn-danger {
+    background-color: $error-color;
+    border-color: $error-color;
+    color: #fff;
+
+    &:hover {
+      background-color: color.adjust($error-color, $lightness: -5%);
+    }
+  }
+
+  &.btn-full {
+    width: 100%;
+  }
+
+  &.btn-sm {
+    padding: 8px 10px;
+    font-size: 14px;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.input,
+textarea {
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: 10px 12px;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: border-color $transition-fast, box-shadow $transition-fast;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  }
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+  margin-bottom: $spacing-md;
+
+  label {
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .hint {
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+}
+
+.card {
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  box-shadow: var(--shadow);
+  padding: $spacing-lg;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $spacing-md;
+
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: $radius-full;
+  font-size: 13px;
+  border: 1px solid var(--border-color);
+  margin-bottom: $spacing-md;
+
+  // 确保后续内容换行显示
+  + * {
+    display: block;
+  }
+
+  &.success {
+    color: $success-color;
+    border-color: rgba(16, 185, 129, 0.35);
+    background: rgba(16, 185, 129, 0.08);
+  }
+
+  &.warning {
+    color: $warning-color;
+    border-color: rgba(245, 158, 11, 0.35);
+    background: rgba(245, 158, 11, 0.08);
+  }
+
+  &.error {
+    color: $error-color;
+    border-color: rgba(239, 68, 68, 0.35);
+    background: rgba(239, 68, 68, 0.08);
+  }
+
+  &.muted {
+    color: var(--text-secondary);
+  }
+}
+
+.notification-container {
+  position: fixed;
+  top: $spacing-lg;
+  right: $spacing-lg;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  z-index: $z-notification;
+  max-width: 360px;
+}
+
+@keyframes notification-enter {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes notification-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+.notification {
+  padding: $spacing-md;
+  border-radius: $radius-md;
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-sm;
+
+  // Animation states
+  &.entering {
+    animation: notification-enter 0.3s ease-out forwards;
+  }
+
+  &.exiting {
+    animation: notification-exit 0.3s ease-in forwards;
+  }
+
+  &.success {
+    border-color: rgba(16, 185, 129, 0.4);
+  }
+  &.warning {
+    border-color: rgba(245, 158, 11, 0.4);
+  }
+  &.error {
+    border-color: rgba(239, 68, 68, 0.4);
+  }
+
+  .message {
+    flex: 1;
+    font-weight: 500;
+  }
+
+  .close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    border-radius: $radius-md;
+    cursor: pointer;
+    transition: color 0.15s ease, background-color 0.15s ease;
+
+    svg {
+      display: block;
+    }
+
+    &:hover {
+      color: var(--text-primary);
+      background: var(--bg-secondary);
+    }
+  }
+}
+
+.switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  cursor: pointer;
+
+  input {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    position: absolute;
+  }
+
+  .track {
+    width: 44px;
+    height: 24px;
+    background: var(--border-color);
+    border-radius: $radius-full;
+    position: relative;
+    transition: background $transition-fast;
+  }
+
+  .thumb {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    border-radius: $radius-full;
+    box-shadow: $shadow-sm;
+    transition: transform $transition-fast;
+  }
+
+  input:checked + .track {
+    background: var(--primary-color);
+  }
+
+  input:checked + .track .thumb {
+    transform: translateX(20px);
+  }
+
+  .label {
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+}
+
+.pill {
+  padding: 4px 10px;
+  border-radius: $radius-full;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+  font-size: 12px;
+}
+
+.loading-spinner {
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: #fff;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-modal;
+  padding: $spacing-lg;
+}
+
+.modal {
+  background: var(--bg-primary);
+  border-radius: $radius-lg;
+  border: 1px solid var(--border-color);
+  box-shadow: $shadow-lg;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $spacing-md $spacing-lg;
+  border-bottom: 1px solid var(--border-color);
+
+  .modal-title {
+    font-weight: 700;
+    font-size: 18px;
+    color: var(--text-primary);
+  }
+
+  .modal-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: $radius-md;
+    transition: color 0.15s ease, background-color 0.15s ease;
+
+    svg {
+      display: block;
+    }
+
+    &:hover {
+      color: var(--text-primary);
+      background: var(--bg-secondary);
+    }
+  }
+}
+
+.modal-body {
+  padding: $spacing-lg;
+  overflow: auto;
+  max-height: 65vh;
+}
+
+.modal-footer {
+  padding: $spacing-md $spacing-lg;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-sm;
+  background: var(--bg-primary);
+}
+
+.empty-state {
+  border: 1px dashed var(--border-color);
+  border-radius: $radius-lg;
+  padding: $spacing-lg;
+  background: var(--bg-secondary);
+  display: flex;
+  justify-content: space-between;
+  gap: $spacing-md;
+  align-items: center;
+
+  .empty-content {
+    display: flex;
+    align-items: center;
+    gap: $spacing-md;
+  }
+
+  .empty-icon {
+    width: 42px;
+    height: 42px;
+    border-radius: $radius-full;
+    border: 2px solid var(--border-color);
+    display: grid;
+    place-items: center;
+    color: var(--text-secondary);
+
+    svg {
+      display: block;
+    }
+  }
+
+  .empty-title {
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .empty-desc {
+    color: var(--text-secondary);
+    margin-top: 4px;
+  }
+}
+
+.header-input-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+
+  .header-input-row {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr auto;
+    align-items: center;
+    gap: $spacing-sm;
+  }
+
+  .header-separator {
+    color: var(--text-secondary);
+    text-align: center;
+  }
+
+  .align-start {
+    width: fit-content;
+  }
+}
+
+.item-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.item-row {
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  background: var(--bg-primary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+
+  .item-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .item-title {
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .item-subtitle {
+    color: var(--text-secondary);
+    font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+      monospace;
+    word-break: break-all;
+  }
+
+  .item-actions {
+    display: flex;
+    gap: $spacing-sm;
+  }
+}
+
+.error-box {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  border-radius: $radius-md;
+  padding: $spacing-sm $spacing-md;
+  color: $error-color;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.filters {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: $spacing-md;
+  margin-bottom: $spacing-md;
+
+  .filter-item {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xs;
+  }
+}
+
+.table {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  overflow: hidden;
+
+  .table-header,
+  .table-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: $spacing-sm;
+    padding: $spacing-sm $spacing-md;
+    align-items: center;
+  }
+
+  .table-header {
+    background: var(--bg-secondary);
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .table-row {
+    border-top: 1px solid var(--border-color);
+  }
+
+  .cell {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    flex-wrap: wrap;
+  }
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  margin-top: $spacing-md;
+}
+
+.stat-card {
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  background: var(--bg-primary);
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+
+  .stat-label {
+    color: var(--text-secondary);
+    font-size: 14px;
+  }
+
+  .stat-value {
+    font-weight: 800;
+    color: var(--text-primary);
+    font-size: 18px;
+  }
+}
+
+.log-viewer {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  max-height: 520px;
+  overflow: auto;
+  white-space: pre-wrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  color: var(--text-primary);
+}
+
+.log-viewer-lines {
+  .log-line {
+    display: block;
+    padding: 1px 0;
+  }
+
+  .log-line-warning {
+    color: var(--warning-text, #92400e);
+    background: var(--warning-bg, rgba(251, 191, 36, 0.18));
+    border-radius: 4px;
+    padding: 2px 6px;
+  }
+}
+
+.hint {
+  color: var(--text-secondary);
+}

src/styles/global.scss

@@ -0,0 +1,70 @@
+/**
+ * 全局样式
+ */
+
+@use './variables.scss' as *;
+@use './mixins.scss' as *;
+@use './reset.scss';
+@use './themes.scss';
+@use './components.scss';
+@use './layout.scss';
+
+body {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  transition: background-color $transition-normal, color $transition-normal;
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: $radius-full;
+
+  &:hover {
+    background: var(--border-hover);
+  }
+}
+
+// 通用工具类
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 $spacing-md;
+}
+
+.flex-center {
+  @include flex-center;
+}
+
+.text-ellipsis {
+  @include text-ellipsis;
+}
+
+// 通用过渡
+.fade-enter {
+  opacity: 0;
+}
+
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity $transition-normal;
+}
+
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity $transition-normal;
+}

src/styles/layout.scss

@@ -0,0 +1,447 @@
+@use './variables.scss' as *;
+
+:root {
+  --header-height: 64px;
+}
+
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.main-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+  padding: $spacing-md $spacing-lg;
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+
+  @media (max-width: $breakpoint-mobile) {
+    padding: $spacing-sm $spacing-md;
+    gap: $spacing-sm;
+  }
+
+  .left {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    min-width: 0;
+    flex: 0 1 auto;
+
+    .brand-logo {
+      height: 32px;
+      width: 32px;
+      object-fit: contain;
+      flex-shrink: 0;
+      border-radius: $radius-sm;
+    }
+  }
+
+  .right {
+    display: flex;
+    align-items: center;
+    gap: $spacing-md;
+    min-width: 0;
+    flex: 1 1 auto;
+    justify-content: flex-end;
+
+    @media (max-width: $breakpoint-mobile) {
+      flex: 0 1 auto;
+      gap: $spacing-sm;
+    }
+  }
+
+  .sidebar-toggle-header {
+    padding: 0;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: $radius-md;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    transition: background $transition-fast, color $transition-fast;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    line-height: 1;
+
+    &:hover {
+      background: var(--bg-tertiary, var(--border-color));
+      color: var(--text-primary);
+    }
+
+    @media (max-width: $breakpoint-mobile) {
+      display: none;
+    }
+  }
+
+  .brand-header {
+    display: flex;
+    align-items: center;
+    gap: $spacing-xs;
+    font-weight: 800;
+    font-size: 18px;
+    color: var(--text-primary);
+    margin-right: $spacing-md;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    flex-shrink: 0;
+
+    .brand-full {
+      display: inline-block;
+      max-width: 320px;
+      opacity: 1;
+      transform: translateX(0);
+      transition: max-width 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
+    }
+
+    .brand-abbr {
+      display: inline-block;
+      transform: translateX(12px);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.4s ease, transform 0.4s ease;
+    }
+
+    &.collapsed {
+      .brand-full {
+        max-width: 0;
+        opacity: 0;
+        transform: translateX(-12px);
+      }
+
+      .brand-abbr {
+        transform: translateX(0);
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    &:hover {
+      color: var(--primary-color);
+    }
+
+    // 移动端：禁用动画，只显示缩写
+    @media (max-width: $breakpoint-mobile) {
+      cursor: default;
+      flex-shrink: 1;
+      min-width: 0;
+      margin-right: 0;
+
+      .brand-full,
+      .brand-abbr {
+        transition: none;
+      }
+
+      .brand-full {
+        display: none;
+      }
+
+      .brand-abbr {
+        transform: translateX(0);
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      &:hover {
+        color: var(--text-primary);
+      }
+    }
+  }
+
+  .mobile-menu-btn {
+    display: none;
+    flex-shrink: 0;
+
+    @media (max-width: $breakpoint-mobile) {
+      display: inline-flex;
+    }
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: $spacing-xs;
+    flex-shrink: 0;
+
+    svg {
+      display: block;
+    }
+
+    @media (max-width: $breakpoint-mobile) {
+      gap: 2px;
+    }
+  }
+
+  .connection {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    color: var(--text-secondary);
+    min-width: 0;
+    flex-shrink: 1;
+    overflow: hidden;
+
+    .status-badge {
+      flex-shrink: 0;
+      white-space: nowrap;
+      margin-bottom: 0;
+    }
+
+    .base {
+      font-weight: 600;
+      color: var(--text-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 80px;
+    }
+
+    @media (max-width: $breakpoint-mobile) {
+      display: none;
+    }
+  }
+}
+
+.main-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  height: calc(100vh - var(--header-height));
+  overflow: hidden;
+  position: relative;
+
+  @supports (height: 100dvh) {
+    height: calc(100dvh - var(--header-height));
+  }
+}
+
+.sidebar {
+  width: 240px;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border-color);
+  padding: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  transition: width $transition-normal, transform $transition-normal;
+  overflow-y: auto;
+  flex-shrink: 0;
+  height: 100%;
+
+  &.collapsed {
+    width: 60px;
+    padding: $spacing-md $spacing-sm;
+
+    .nav-item {
+      justify-content: center;
+      padding: 10px;
+    }
+  }
+
+  .nav-section {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+    flex: 1;
+  }
+
+  .nav-item {
+    padding: 10px 12px;
+    border-radius: $radius-md;
+    color: var(--text-primary);
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    cursor: pointer;
+    transition: background $transition-fast, color $transition-fast;
+
+    .nav-icon {
+      width: 20px;
+      height: 20px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      opacity: 0.9;
+
+      svg {
+        width: 18px;
+        height: 18px;
+        display: block;
+      }
+    }
+
+    .nav-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:hover {
+      background: var(--bg-secondary);
+    }
+
+    &.active {
+      background: rgba(59, 130, 246, 0.12);
+      color: var(--primary-color);
+      border: 1px solid rgba(59, 130, 246, 0.3);
+    }
+  }
+
+  @media (max-width: $breakpoint-mobile) {
+    position: fixed;
+    z-index: $z-dropdown;
+    left: 0;
+    top: var(--header-height);
+    bottom: 0;
+    transform: translateX(-100%);
+    box-shadow: $shadow-lg;
+
+    &.open {
+      transform: translateX(0);
+    }
+  }
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow-y: auto;
+  height: 100%;
+}
+
+.main-content {
+  flex: 1;
+  padding: $spacing-lg;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+
+  @media (max-width: $breakpoint-mobile) {
+    padding: $spacing-md;
+  }
+}
+
+.footer {
+  padding: $spacing-md $spacing-lg;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--text-secondary);
+  font-size: 14px;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+}
+
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-secondary);
+  padding: $spacing-lg;
+
+  .login-card {
+    width: 100%;
+    max-width: 520px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: $radius-lg;
+    box-shadow: var(--shadow-lg);
+    padding: $spacing-xl;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-lg;
+  }
+
+  .login-header {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+
+    .title {
+      font-size: 22px;
+      font-weight: 800;
+      color: var(--text-primary);
+    }
+
+    .subtitle {
+      color: var(--text-secondary);
+    }
+  }
+
+  .connection-box {
+    background: var(--bg-secondary);
+    border: 1px dashed var(--border-color);
+    border-radius: $radius-md;
+    padding: $spacing-md;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xs;
+
+    .label {
+      color: var(--text-secondary);
+      font-size: 14px;
+    }
+
+    .value {
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+
+    .item-actions {
+      display: flex;
+      gap: $spacing-md;
+    }
+  }
+
+  .toggle-advanced {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: $spacing-xs;
+    color: var(--text-secondary);
+    cursor: pointer;
+  }
+
+  .error-box {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.4);
+    border-radius: $radius-md;
+    padding: $spacing-sm $spacing-md;
+    color: $error-color;
+  }
+}
+
+.grid {
+  display: grid;
+  gap: $spacing-lg;
+}
+
+@media (min-width: $breakpoint-tablet) {
+  .grid.cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

src/styles/mixins.scss

@@ -0,0 +1,63 @@
+/**
+ * SCSS 混入
+ */
+
+@use './variables.scss' as *;
+
+// 响应式断点
+@mixin mobile {
+  @media (max-width: #{$breakpoint-mobile}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$breakpoint-mobile + 1}) and (max-width: #{$breakpoint-tablet}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$breakpoint-tablet + 1}) {
+    @content;
+  }
+}
+
+// Flexbox 居中
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 文本截断
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 多行文本截断
+@mixin text-ellipsis-multiline($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// 按钮重置
+@mixin button-reset {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  outline: none;
+
+  &:focus {
+    outline: 2px solid $primary-color;
+    outline-offset: 2px;
+  }
+}

src/styles/reset.scss

@@ -0,0 +1,49 @@
+/**
+ * CSS Reset
+ */
+
+@use './variables.scss' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: $font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul,
+ol {
+  list-style: none;
+}

src/styles/themes.scss

@@ -0,0 +1,71 @@
+/**
+ * 主题样式
+ */
+
+// 浅色主题（默认）
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f3f4f6;
+  --bg-tertiary: #e5e7eb;
+
+  --text-primary: #1f2937;
+  --text-secondary: #6b7280;
+  --text-tertiary: #9ca3af;
+
+  --border-color: #e5e7eb;
+  --border-hover: #d1d5db;
+
+  --primary-color: #3b82f6;
+  --primary-hover: #2563eb;
+  --primary-active: #1d4ed8;
+
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --error-color: #ef4444;
+  --info-color: #3b82f6;
+
+  --success-badge-bg: #d1fae5;
+  --success-badge-text: #065f46;
+  --success-badge-border: #6ee7b7;
+
+  --failure-badge-bg: #fee2e2;
+  --failure-badge-text: #991b1b;
+  --failure-badge-border: #fca5a5;
+
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+// 深色主题（#191919）
+[data-theme='dark'] {
+  --bg-primary: #202020;
+  --bg-secondary: #191919;
+  --bg-tertiary: #262626;
+
+  --text-primary: #fafafa;
+  --text-secondary: #a3a3a3;
+  --text-tertiary: #737373;
+
+  --border-color: #262626;
+  --border-hover: #404040;
+
+  --primary-color: #3b82f6;
+  --primary-hover: #60a5fa;
+  --primary-active: #93c5fd;
+
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --error-color: #ef4444;
+  --info-color: #3b82f6;
+
+  --success-badge-bg: rgba(6, 78, 59, 0.3);
+  --success-badge-text: #6ee7b7;
+  --success-badge-border: #059669;
+
+  --failure-badge-bg: rgba(153, 27, 27, 0.3);
+  --failure-badge-text: #fca5a5;
+  --failure-badge-border: #dc2626;
+
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+}