1

删除gemini web tokens
Merge pull request #4 from tombii/main
2026-02-03 03:10:50 +08:00 · 2025-10-11 15:51:51 +08:00 · 2025-10-11 15:02:57 +08:00 · 2025-10-11 14:51:40 +08:00 · 2025-10-08 22:08:36 +02:00 · 2025-10-06 16:02:15 +08:00
9 changed files with 4132 additions and 3757 deletions
--- a/README.md
+++ b/README.md
@@ -9,8 +9,10 @@ https://github.com/router-for-me/CLIProxyAPI
 Example URL:
 https://remote.router-for.me/

-Minimum required version: ≥ 5.0.0
-Recommended version: ≥ 5.2.6
+Minimum required version: ≥ 6.0.0
+Recommended version: ≥ 6.1.3
+
+Since version 6.0.19, the WebUI has been rolled into the main program. You can access it by going to `/management.html` on the external port after firing up the main project.

 ## Features

@@ -18,13 +20,16 @@ Recommended version: ≥ 5.2.6
 - Supports management key authentication
 - Configurable API base address
 - Real-time connection status detection
+- Auto-login with saved credentials
+- Language and theme switching

 ### Basic Settings
 - **Debug Mode**: Enable/disable debugging
 - **Proxy Settings**: Configure proxy server URL
 - **Request Retries**: Set the number of request retries
 - **Quota Management**: Configure behavior when the quota is exceeded
- **Local Access**: Manage local unauthenticated access
+  - Auto-switch project when quota exceeded
+  - Switch to preview models when quota exceeded

 ### API Key Management
 - **Proxy Service Authentication Key**: Manage API keys for the proxy service
@@ -39,13 +44,31 @@ Recommended version: ≥ 5.2.6
 - 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. Direct Use (Recommended)
+### 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.

-### 2. Use a Local Server
+### 3. Use a Local Server
+
+#### Option A: Using Node.js (npm)
 ```bash
 # Install dependencies
 npm install
@@ -54,10 +77,19 @@ npm install
 npm start
 ```

-### 3. Configure API Connection
+#### 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**: `http://localhost:8317` (`/v0/management` will be auto-completed for you)
+   - **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.
@@ -69,8 +101,16 @@ npm start
 - **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
@@ -78,27 +118,45 @@ npm start
 - 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
+- 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

 ## Tech Stack

- **Frontend**: Plain HTML, CSS, JavaScript
- **Styling**: CSS3 + Flexbox/Grid
+- **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
+- **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

 ## Troubleshooting

@@ -118,12 +176,20 @@ npm start
 ### File Structure
 ```
 webui/
-├── index.html      # Main page
-├── styles.css      # Stylesheet
-├── app.js          # Application logic
+├── 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
-├── i18n.js         # Internationalization support
-└── README.md       # README document
+├── 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
 ```

 ### API Calls
--- a/README_CN.md
+++ b/README_CN.md
@@ -1,13 +1,17 @@
 # Cli-Proxy-API-Management-Center
 这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
+
 主项目
 https://github.com/router-for-me/CLIProxyAPI

 示例网站:
 https://remote.router-for.me/

-最低可用版本 ≥ 5.0.0
-推荐版本 ≥ 5.2.6
+最低可用版本 ≥ 6.0.0
+
+推荐版本 ≥ 6.1.3
+
+自6.0.19起WebUI已经集成在主程序中 可以通过主项目开启的外部端口的`/management.html`访问

 ## 功能特点

@@ -15,13 +19,16 @@ https://remote.router-for.me/
 - 支持管理密钥认证
 - 可配置 API 基础地址
 - 实时连接状态检测
+- 自动登录保存的凭据
+- 语言和主题切换

 ### 基础设置
 - **调试模式**: 开启/关闭调试功能
 - **代理设置**: 配置代理服务器 URL
 - **请求重试**: 设置请求重试次数
 - **配额管理**: 配置超出配额时的行为
- **本地访问**: 管理本地未认证访问
+  - 超出配额时自动切换项目
+  - 超出配额时切换到预览模型

 ### API 密钥管理
 - **代理服务认证密钥**: 管理用于代理服务的 API 密钥
@@ -36,13 +43,31 @@ https://remote.router-for.me/
 - 删除单个或所有认证文件
 - 显示文件详细信息

+### 使用统计
+- **实时分析**: 通过交互式图表跟踪 API 使用情况
+- **请求趋势**: 按小时/天可视化请求模式
+- **Token 使用**: 监控 Token 消耗随时间变化
+- **API 详情**: 每个 API 端点的详细统计
+- **成功率/失败率**: 跟踪 API 可靠性指标
+
+### 系统信息
+- **连接状态**: 实时连接监控
+- **配置状态**: 跟踪配置加载状态
+- **服务器信息**: 显示服务器地址和管理密钥
+- **最后更新**: 显示数据最后刷新时间
+

 ## 使用方法

-### 1. 直接使用（推荐）
+### 1. 在CLI Proxy API程序启动后使用 （推荐）
+在启动了CLI Proxy API程序后 访问`http://您的服务器IP:8317/management.html`使用
+
+### 2. 直接使用
 直接用浏览器打开 `index.html` 文件即可使用。

-### 2. 使用本地服务器
+### 3. 使用本地服务器
+
+#### 方法A：使用 Node.js (npm)
 ```bash
 # 安装依赖
 npm install
@@ -51,10 +76,19 @@ npm install
 npm start
 ```

-### 3. 配置 API 连接
+#### 方法B：使用 Python
+```bash
+# Python 3.x
+python -m http.server 8000
+
+```
+
+然后在浏览器中打开 `http://localhost:8000`。
+
+### 3. 配置连接
 1. 打开管理界面
 2. 在登录界面上输入：
-   - **远程地址**: `http://localhost:8317`/v0/management将会自动为您补全
+   - **远程地址**: 现版本远程地址将会自动从您的访问地址中获取 当然您也可以自定义
   - **管理密钥**: 您的管理密钥
 3. 点击"连接"按钮
 4. 连接成功后即可使用所有功能
@@ -66,8 +100,16 @@ npm start
 - **API 密钥**: 各种 API 服务的密钥管理
 - **AI 提供商**: AI 服务提供商配置
 - **认证文件**: 认证文件的上传下载管理
+- **使用统计**: 实时分析和使用统计，包含交互式图表
 - **系统信息**: 连接状态和系统信息

+### 登录界面
+- **自动连接**: 使用保存的凭据自动尝试连接
+- **自定义连接**: 手动配置 API 基础地址
+- **当前地址检测**: 自动检测并使用当前访问地址
+- **语言切换**: 支持多种语言（英文/中文）
+- **主题切换**: 支持明暗主题
+
 ## 特性亮点

 ### 现代化 UI
@@ -75,27 +117,45 @@ npm start
 - 美观的渐变色彩和阴影效果
 - 流畅的动画和过渡效果
 - 直观的图标和状态指示
+- 明暗主题支持，自动检测系统偏好
+- 移动端友好的侧边栏和遮罩

 ### 实时更新
 - 配置更改立即生效
 - 实时状态反馈
 - 自动数据刷新
+- 实时使用统计和交互式图表
+- 实时连接状态监控

 ### 安全特性
 - 密钥遮蔽显示
+- 安全凭据存储
+- 加密本地存储自动登录

 ### 响应式设计
 - 完美适配桌面和移动设备
- 自适应布局
+- 自适应布局，可折叠侧边栏
 - 触摸友好的交互
+- 移动端菜单和遮罩
+
+### 分析与监控
+- Chart.js 驱动的交互式图表
+- 实时使用统计
+- 请求趋势可视化
+- Token 消耗跟踪
+- API 性能指标

 ## 技术栈

- **前端**: 纯 HTML、CSS、JavaScript
- **样式**: CSS3 + Flexbox/Grid
+- **前端**: 纯 HTML、CSS、JavaScript (ES6+)
+- **样式**: CSS3 + Flexbox/Grid，支持 CSS 变量
 - **图标**: Font Awesome 6.4.0
+- **图表**: Chart.js 交互式数据可视化
 - **字体**: Segoe UI 系统字体
- **API**: RESTful API 调用
+- **API**: RESTful API 调用，自动认证
+- **国际化**: 自定义 i18n 系统，支持中英文
+- **主题系统**: CSS 自定义属性动态主题
+- **存储**: LocalStorage 用户偏好和凭据存储

 ## 故障排除

@@ -115,12 +175,20 @@ npm start
 ### 文件结构
 ```
 webui/
-├── index.html      # 主页面
-├── styles.css      # 样式文件
-├── app.js          # 应用逻辑
+├── index.html          # 主页面，响应式布局
+├── styles.css          # 样式文件，支持主题
+├── app.js              # 应用逻辑和 API 管理
+├── i18n.js             # 国际化支持（中英文）
 ├── package.json        # 项目配置
-├── i18n.js         # 国际化支持
-└── README.md       # 说明文档
+├── build.js            # 生产环境构建脚本
+├── bundle-entry.js     # 打包入口文件
+├── build-scripts/      # 构建工具
+│   └── prepare-html.js # HTML 准备脚本
+├── logo.jpg            # 应用图标
+├── LICENSE             # MIT 许可证
+├── README.md           # 英文文档
+├── README_CN.md        # 中文文档
+└── BUILD_RELEASE.md    # 构建和发布说明
 ```

 ### API 调用
--- a/app.js
+++ b/app.js
--- a/build.js
+++ b/build.js
@@ -0,0 +1,132 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const projectRoot = __dirname;
+const distDir = path.join(projectRoot, 'dist');
+
+const sourceFiles = {
+    html: path.join(projectRoot, 'index.html'),
+    css: path.join(projectRoot, 'styles.css'),
+    i18n: path.join(projectRoot, 'i18n.js'),
+    app: path.join(projectRoot, 'app.js')
+};
+
+const logoCandidates = ['logo.png', 'logo.jpg', 'logo.jpeg', 'logo.svg', 'logo.webp', 'logo.gif'];
+const logoMimeMap = {
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.svg': 'image/svg+xml',
+    '.webp': 'image/webp',
+    '.gif': 'image/gif'
+};
+
+function readFile(filePath) {
+    try {
+        return fs.readFileSync(filePath, 'utf8');
+    } catch (err) {
+        console.error(`读取文件失败: ${filePath}`);
+        throw err;
+    }
+}
+
+function readBinary(filePath) {
+    try {
+        return fs.readFileSync(filePath);
+    } catch (err) {
+        console.error(`读取文件失败: ${filePath}`);
+        throw err;
+    }
+}
+
+function escapeForScript(content) {
+    return content.replace(/<\/(script)/gi, '<\\/$1');
+}
+
+function escapeForStyle(content) {
+    return content.replace(/<\/(style)/gi, '<\\/$1');
+}
+
+function ensureDistDir() {
+    if (fs.existsSync(distDir)) {
+        fs.rmSync(distDir, { recursive: true, force: true });
+    }
+    fs.mkdirSync(distDir);
+}
+
+function loadLogoDataUrl() {
+    for (const candidate of logoCandidates) {
+        const filePath = path.join(projectRoot, candidate);
+        if (!fs.existsSync(filePath)) continue;
+
+        const ext = path.extname(candidate).toLowerCase();
+        const mime = logoMimeMap[ext];
+        if (!mime) {
+            console.warn(`未知 Logo 文件类型，跳过内联: ${candidate}`);
+            continue;
+        }
+
+        const buffer = readBinary(filePath);
+        const base64 = buffer.toString('base64');
+        return `data:${mime};base64,${base64}`;
+    }
+    return null;
+}
+
+function build() {
+    ensureDistDir();
+
+    let html = readFile(sourceFiles.html);
+    const css = escapeForStyle(readFile(sourceFiles.css));
+    const i18n = escapeForScript(readFile(sourceFiles.i18n));
+    const app = escapeForScript(readFile(sourceFiles.app));
+
+    html = html.replace(
+        '<link rel="stylesheet" href="styles.css">',
+        `<style>
+${css}
+</style>`
+    );
+
+    html = html.replace(
+        '<script src="i18n.js"></script>',
+        `<script>
+${i18n}
+</script>`
+    );
+
+    html = html.replace(
+        '<script src="app.js"></script>',
+        `<script>
+${app}
+</script>`
+    );
+
+    const logoDataUrl = loadLogoDataUrl();
+    if (logoDataUrl) {
+        const logoScript = `<script>window.__INLINE_LOGO__ = "${logoDataUrl}";</script>`;
+        if (html.includes('</body>')) {
+            html = html.replace('</body>', `${logoScript}\n</body>`);
+        } else {
+            html += `\n${logoScript}`;
+        }
+    } else {
+        console.warn('未找到可内联的 Logo 文件，将保持运行时加载。');
+    }
+
+    const outputPath = path.join(distDir, 'index.html');
+    fs.writeFileSync(outputPath, html, 'utf8');
+
+    console.log('构建完成: dist/index.html');
+}
+
+try {
+    build();
+} catch (error) {
+    console.error('构建失败:', error);
+    process.exit(1);
+}
+
+
--- a/i18n.js
+++ b/i18n.js
@@ -36,6 +36,8 @@ const i18n = {
            'common.required': '必填',
            'common.api_key': '密钥',
            'common.base_url': '地址',
+            'common.proxy_url': '代理',
+            'common.alias': '别名',

            // 页面标题
            'title.main': 'CLI Proxy API Management Center',
@@ -47,19 +49,13 @@ const i18n = {

            // 登录页面
            'login.subtitle': '请输入连接信息以访问管理界面',
-            'login.tab_local_title': 'Local',
-            'login.tab_local_subtitle': '在本地运行 Cli Web 服务器',
-            'login.tab_remote_title': 'Remote',
-            'login.tab_remote_subtitle': '远程连接到 Cli Web 服务器',
-            'login.proxy_label': '代理服务器 (可选):',
-            'login.proxy_placeholder': 'http://ip:port 或 https://ip:port 或 socks5://user:pass@ip:port',
-            'login.local_port_label': '端口号:',
-            'login.local_port_placeholder': '8317',
-            'login.local_url_hint': '将连接到 http://localhost:端口/v0/management',
-            'login.api_url_label': 'API 基础地址:',
-            'login.api_url_placeholder': '例如: http://localhost:8317 或 127.0.0.1:8317',
-            'login.remote_api_url_placeholder': '例如: https://example.com:8317',
-            'login.api_url_hint': '将自动补全 /v0/management',
+            'login.connection_title': '连接地址',
+            'login.connection_current': '当前地址',
+            'login.connection_auto_hint': '系统将自动使用当前访问地址进行连接',
+            'login.custom_connection_label': '自定义连接地址:',
+            'login.custom_connection_placeholder': '例如: https://example.com:8317',
+            'login.custom_connection_hint': '默认使用当前访问地址，若需要可手动输入其他地址。',
+            'login.use_current_address': '使用当前地址',
            'login.management_key_label': '管理密钥:',
            'login.management_key_placeholder': '请输入管理密钥',
            'login.connect_button': '连接',
@@ -142,9 +138,12 @@ const i18n = {
            'ai_providers.codex_add_modal_key_placeholder': '请输入Codex API密钥',
            'ai_providers.codex_add_modal_url_label': 'Base URL (可选):',
            'ai_providers.codex_add_modal_url_placeholder': '例如: https://api.example.com',
+            'ai_providers.codex_add_modal_proxy_label': '代理 URL (可选):',
+            'ai_providers.codex_add_modal_proxy_placeholder': '例如: socks5://proxy.example.com:1080',
            'ai_providers.codex_edit_modal_title': '编辑Codex API配置',
            'ai_providers.codex_edit_modal_key_label': 'API密钥:',
            'ai_providers.codex_edit_modal_url_label': 'Base URL (可选):',
+            'ai_providers.codex_edit_modal_proxy_label': '代理 URL (可选):',
            'ai_providers.codex_delete_confirm': '确定要删除这个Codex配置吗？',

            'ai_providers.claude_title': 'Claude API 配置',
@@ -157,9 +156,12 @@ const i18n = {
            'ai_providers.claude_add_modal_key_placeholder': '请输入Claude API密钥',
            'ai_providers.claude_add_modal_url_label': 'Base URL (可选):',
            'ai_providers.claude_add_modal_url_placeholder': '例如: https://api.anthropic.com',
+            'ai_providers.claude_add_modal_proxy_label': '代理 URL (可选):',
+            'ai_providers.claude_add_modal_proxy_placeholder': '例如: socks5://proxy.example.com:1080',
            'ai_providers.claude_edit_modal_title': '编辑Claude API配置',
            'ai_providers.claude_edit_modal_key_label': 'API密钥:',
            'ai_providers.claude_edit_modal_url_label': 'Base URL (可选):',
+            'ai_providers.claude_edit_modal_proxy_label': '代理 URL (可选):',
            'ai_providers.claude_delete_confirm': '确定要删除这个Claude配置吗？',

            'ai_providers.openai_title': 'OpenAI 兼容提供商',
@@ -173,10 +175,19 @@ const i18n = {
            'ai_providers.openai_add_modal_url_placeholder': '例如: https://openrouter.ai/api/v1',
            'ai_providers.openai_add_modal_keys_label': 'API密钥 (每行一个):',
            'ai_providers.openai_add_modal_keys_placeholder': 'sk-key1\nsk-key2',
+            'ai_providers.openai_add_modal_keys_proxy_label': '代理 URL (按行对应，可选):',
+            'ai_providers.openai_add_modal_keys_proxy_placeholder': 'socks5://proxy.example.com:1080\n',
+            'ai_providers.openai_add_modal_models_label': '模型列表 (name[, alias] 每行一个):',
+            'ai_providers.openai_models_hint': '示例：gpt-4o-mini 或 moonshotai/kimi-k2:free, kimi-k2',
+            'ai_providers.openai_model_name_placeholder': '模型名称，如 moonshotai/kimi-k2:free',
+            'ai_providers.openai_model_alias_placeholder': '模型别名 (可选)',
+            'ai_providers.openai_models_add_btn': '添加模型',
            'ai_providers.openai_edit_modal_title': '编辑OpenAI兼容提供商',
            'ai_providers.openai_edit_modal_name_label': '提供商名称:',
            'ai_providers.openai_edit_modal_url_label': 'Base URL:',
            'ai_providers.openai_edit_modal_keys_label': 'API密钥 (每行一个):',
+            'ai_providers.openai_edit_modal_keys_proxy_label': '代理 URL (按行对应，可选):',
+            'ai_providers.openai_edit_modal_models_label': '模型列表 (name[, alias] 每行一个):',
            'ai_providers.openai_delete_confirm': '确定要删除这个OpenAI提供商吗？',
            'ai_providers.openai_keys_count': '密钥数量',
            'ai_providers.openai_models_count': '模型数量',
@@ -203,15 +214,74 @@ const i18n = {
            'auth_files.delete_all_success': '成功删除',
            'auth_files.files_count': '个文件',

-            // Gemini Web Token
-            'auth_login.gemini_web_title': 'Gemini Web Token',
-            'auth_login.gemini_web_button': '保存 Gemini Web Token',
-            'auth_login.gemini_web_hint': '从浏览器开发者工具中获取 Gemini 网页版的 Cookie 值，用于直接认证访问 Gemini。',
-            'auth_login.secure_1psid_label': '__Secure-1PSID Cookie:',
-            'auth_login.secure_1psid_placeholder': '输入 __Secure-1PSID cookie 值',
-            'auth_login.secure_1psidts_label': '__Secure-1PSIDTS Cookie:',
-            'auth_login.secure_1psidts_placeholder': '输入 __Secure-1PSIDTS cookie 值',
-            'auth_login.gemini_web_saved': 'Gemini Web Token 保存成功',
+
+            // Codex OAuth
+            'auth_login.codex_oauth_title': 'Codex OAuth',
+            'auth_login.codex_oauth_button': '开始 Codex 登录',
+            'auth_login.codex_oauth_hint': '通过 OAuth 流程登录 Codex 服务，自动获取并保存认证文件。',
+            'auth_login.codex_oauth_url_label': '授权链接:',
+            'auth_login.codex_open_link': '打开链接',
+            'auth_login.codex_copy_link': '复制链接',
+            'auth_login.codex_oauth_status_waiting': '等待认证中...',
+            'auth_login.codex_oauth_status_success': '认证成功！',
+            'auth_login.codex_oauth_status_error': '认证失败:',
+            'auth_login.codex_oauth_start_error': '启动 Codex OAuth 失败:',
+            'auth_login.codex_oauth_polling_error': '检查认证状态失败:',
+
+            // Anthropic OAuth
+            'auth_login.anthropic_oauth_title': 'Anthropic OAuth',
+            'auth_login.anthropic_oauth_button': '开始 Anthropic 登录',
+            'auth_login.anthropic_oauth_hint': '通过 OAuth 流程登录 Anthropic (Claude) 服务，自动获取并保存认证文件。',
+            'auth_login.anthropic_oauth_url_label': '授权链接:',
+            'auth_login.anthropic_open_link': '打开链接',
+            'auth_login.anthropic_copy_link': '复制链接',
+            'auth_login.anthropic_oauth_status_waiting': '等待认证中...',
+            'auth_login.anthropic_oauth_status_success': '认证成功！',
+            'auth_login.anthropic_oauth_status_error': '认证失败:',
+            'auth_login.anthropic_oauth_start_error': '启动 Anthropic OAuth 失败:',
+            'auth_login.anthropic_oauth_polling_error': '检查认证状态失败:',
+
+            // Gemini CLI OAuth
+            'auth_login.gemini_cli_oauth_title': 'Gemini CLI OAuth',
+            'auth_login.gemini_cli_oauth_button': '开始 Gemini CLI 登录',
+            'auth_login.gemini_cli_oauth_hint': '通过 OAuth 流程登录 Google Gemini CLI 服务，自动获取并保存认证文件。',
+            'auth_login.gemini_cli_project_id_label': 'Google Cloud 项目 ID (可选):',
+            'auth_login.gemini_cli_project_id_placeholder': '输入 Google Cloud 项目 ID (可选)',
+            'auth_login.gemini_cli_project_id_hint': '如果指定了项目 ID，将使用该项目的认证信息。',
+            'auth_login.gemini_cli_oauth_url_label': '授权链接:',
+            'auth_login.gemini_cli_open_link': '打开链接',
+            'auth_login.gemini_cli_copy_link': '复制链接',
+            'auth_login.gemini_cli_oauth_status_waiting': '等待认证中...',
+            'auth_login.gemini_cli_oauth_status_success': '认证成功！',
+            'auth_login.gemini_cli_oauth_status_error': '认证失败:',
+            'auth_login.gemini_cli_oauth_start_error': '启动 Gemini CLI OAuth 失败:',
+            'auth_login.gemini_cli_oauth_polling_error': '检查认证状态失败:',
+
+            // Qwen OAuth
+            'auth_login.qwen_oauth_title': 'Qwen OAuth',
+            'auth_login.qwen_oauth_button': '开始 Qwen 登录',
+            'auth_login.qwen_oauth_hint': '通过设备授权流程登录 Qwen 服务，自动获取并保存认证文件。',
+            'auth_login.qwen_oauth_url_label': '授权链接:',
+            'auth_login.qwen_open_link': '打开链接',
+            'auth_login.qwen_copy_link': '复制链接',
+            'auth_login.qwen_oauth_status_waiting': '等待认证中...',
+            'auth_login.qwen_oauth_status_success': '认证成功！',
+            'auth_login.qwen_oauth_status_error': '认证失败:',
+            'auth_login.qwen_oauth_start_error': '启动 Qwen OAuth 失败:',
+            'auth_login.qwen_oauth_polling_error': '检查认证状态失败:',
+
+            // iFlow OAuth
+            'auth_login.iflow_oauth_title': 'iFlow OAuth',
+            'auth_login.iflow_oauth_button': '开始 iFlow 登录',
+            'auth_login.iflow_oauth_hint': '通过 OAuth 流程登录 iFlow 服务，自动获取并保存认证文件。',
+            'auth_login.iflow_oauth_url_label': '授权链接:',
+            'auth_login.iflow_open_link': '打开链接',
+            'auth_login.iflow_copy_link': '复制链接',
+            'auth_login.iflow_oauth_status_waiting': '等待认证中...',
+            'auth_login.iflow_oauth_status_success': '认证成功！',
+            'auth_login.iflow_oauth_status_error': '认证失败:',
+            'auth_login.iflow_oauth_start_error': '启动 iFlow OAuth 失败:',
+            'auth_login.iflow_oauth_polling_error': '检查认证状态失败:',

            // 使用统计
            'usage_stats.title': '使用统计',
@@ -263,9 +333,12 @@ const i18n = {
            'notification.claude_config_added': 'Claude配置添加成功',
            'notification.claude_config_updated': 'Claude配置更新成功',
            'notification.claude_config_deleted': 'Claude配置删除成功',
+            'notification.field_required': '必填字段不能为空',
+            'notification.openai_provider_required': '请填写提供商名称和Base URL',
            'notification.openai_provider_added': 'OpenAI提供商添加成功',
            'notification.openai_provider_updated': 'OpenAI提供商更新成功',
            'notification.openai_provider_deleted': 'OpenAI提供商删除成功',
+            'notification.openai_model_name_required': '请填写模型名称',
            'notification.data_refreshed': '数据刷新成功',
            'notification.connection_required': '请先建立连接',
            'notification.refresh_failed': '刷新失败',
@@ -331,6 +404,8 @@ const i18n = {
            'common.required': 'Required',
            'common.api_key': 'Key',
            'common.base_url': 'Address',
+            'common.proxy_url': 'Proxy',
+            'common.alias': 'Alias',

            // Page titles
            'title.main': 'CLI Proxy API Management Center',
@@ -342,21 +417,15 @@ const i18n = {

            // Login page
            'login.subtitle': 'Please enter connection information to access the management interface',
-            'login.tab_local_title': 'Local',
-            'login.tab_local_subtitle': 'Run Cli Web server on your local machine',
-            'login.tab_remote_title': 'Remote',
-            'login.tab_remote_subtitle': 'Remote connection for a remote Cli Web server',
-            'login.proxy_label': 'Proxy Server (Optional):',
-            'login.proxy_placeholder': 'http://ip:port or https://ip:port or socks5://user:pass@ip:port',
-            'login.local_port_label': 'Port:',
-            'login.local_port_placeholder': '8317',
-            'login.local_url_hint': 'Will connect to http://localhost:port/v0/management',
-            'login.api_url_label': 'API Base URL:',
-            'login.api_url_placeholder': 'e.g.: http://localhost:8317 or 127.0.0.1:8317',
-            'login.remote_api_url_placeholder': 'e.g.: https://example.com:8317',
-            'login.api_url_hint': 'Will automatically append /v0/management',
+            'login.connection_title': 'Connection Address',
+            'login.connection_current': 'Current URL',
+            'login.connection_auto_hint': 'The system will automatically use the current URL for connection',
+            'login.custom_connection_label': 'Custom Connection URL:',
+            'login.custom_connection_placeholder': 'Eg: https://example.com:8317',
+            'login.custom_connection_hint': 'By default the current URL is used. Override it here if needed.',
+            'login.use_current_address': 'Use Current URL',
            'login.management_key_label': 'Management Key:',
-            'login.management_key_placeholder': 'Please enter management key',
+            'login.management_key_placeholder': 'Enter the management key',
            'login.connect_button': 'Connect',
            'login.submit_button': 'Login',
            'login.submitting': 'Connecting...',
@@ -437,9 +506,12 @@ const i18n = {
            'ai_providers.codex_add_modal_key_placeholder': 'Please enter Codex API key',
            'ai_providers.codex_add_modal_url_label': 'Base URL (Optional):',
            'ai_providers.codex_add_modal_url_placeholder': 'e.g.: https://api.example.com',
+            'ai_providers.codex_add_modal_proxy_label': 'Proxy URL (Optional):',
+            'ai_providers.codex_add_modal_proxy_placeholder': 'e.g.: socks5://proxy.example.com:1080',
            'ai_providers.codex_edit_modal_title': 'Edit Codex API Configuration',
            'ai_providers.codex_edit_modal_key_label': 'API Key:',
            'ai_providers.codex_edit_modal_url_label': 'Base URL (Optional):',
+            'ai_providers.codex_edit_modal_proxy_label': 'Proxy URL (Optional):',
            'ai_providers.codex_delete_confirm': 'Are you sure you want to delete this Codex configuration?',

            'ai_providers.claude_title': 'Claude API Configuration',
@@ -452,9 +524,12 @@ const i18n = {
            'ai_providers.claude_add_modal_key_placeholder': 'Please enter Claude API key',
            'ai_providers.claude_add_modal_url_label': 'Base URL (Optional):',
            'ai_providers.claude_add_modal_url_placeholder': 'e.g.: https://api.anthropic.com',
+            'ai_providers.claude_add_modal_proxy_label': 'Proxy URL (Optional):',
+            'ai_providers.claude_add_modal_proxy_placeholder': 'e.g.: socks5://proxy.example.com:1080',
            'ai_providers.claude_edit_modal_title': 'Edit Claude API Configuration',
            'ai_providers.claude_edit_modal_key_label': 'API Key:',
            'ai_providers.claude_edit_modal_url_label': 'Base URL (Optional):',
+            'ai_providers.claude_edit_modal_proxy_label': 'Proxy URL (Optional):',
            'ai_providers.claude_delete_confirm': 'Are you sure you want to delete this Claude configuration?',

            'ai_providers.openai_title': 'OpenAI Compatible Providers',
@@ -468,10 +543,19 @@ const i18n = {
            'ai_providers.openai_add_modal_url_placeholder': 'e.g.: https://openrouter.ai/api/v1',
            'ai_providers.openai_add_modal_keys_label': 'API Keys (one per line):',
            'ai_providers.openai_add_modal_keys_placeholder': 'sk-key1\nsk-key2',
+            'ai_providers.openai_add_modal_keys_proxy_label': 'Proxy URL (one per line, optional):',
+            'ai_providers.openai_add_modal_keys_proxy_placeholder': 'socks5://proxy.example.com:1080\n',
+            'ai_providers.openai_add_modal_models_label': 'Model List (name[, alias] one per line):',
+            'ai_providers.openai_models_hint': 'Example: gpt-4o-mini or moonshotai/kimi-k2:free, kimi-k2',
+            'ai_providers.openai_model_name_placeholder': 'Model name, e.g. moonshotai/kimi-k2:free',
+            'ai_providers.openai_model_alias_placeholder': 'Model alias (optional)',
+            'ai_providers.openai_models_add_btn': 'Add Model',
            'ai_providers.openai_edit_modal_title': 'Edit OpenAI Compatible Provider',
            'ai_providers.openai_edit_modal_name_label': 'Provider Name:',
            'ai_providers.openai_edit_modal_url_label': 'Base URL:',
            'ai_providers.openai_edit_modal_keys_label': 'API Keys (one per line):',
+            'ai_providers.openai_edit_modal_keys_proxy_label': 'Proxy URL (one per line, optional):',
+            'ai_providers.openai_edit_modal_models_label': 'Model List (name[, alias] one per line):',
            'ai_providers.openai_delete_confirm': 'Are you sure you want to delete this OpenAI provider?',
            'ai_providers.openai_keys_count': 'Keys Count',
            'ai_providers.openai_models_count': 'Models Count',
@@ -498,15 +582,73 @@ const i18n = {
            'auth_files.delete_all_success': 'Successfully deleted',
            'auth_files.files_count': 'files',

-            // Gemini Web Token
-            'auth_login.gemini_web_title': 'Gemini Web Token',
-            'auth_login.gemini_web_button': 'Save Gemini Web Token',
-            'auth_login.gemini_web_hint': 'Obtain the Cookie value of the Gemini web version from the browser\'s developer tools, used for direct authentication to access Gemini.',
-            'auth_login.secure_1psid_label': '__Secure-1PSID Cookie:',
-            'auth_login.secure_1psid_placeholder': 'Enter __Secure-1PSID cookie value',
-            'auth_login.secure_1psidts_label': '__Secure-1PSIDTS Cookie:',
-            'auth_login.secure_1psidts_placeholder': 'Enter __Secure-1PSIDTS cookie value',
-            'auth_login.gemini_web_saved': 'Gemini Web Token saved successfully',
+            // Codex OAuth
+            'auth_login.codex_oauth_title': 'Codex OAuth',
+            'auth_login.codex_oauth_button': 'Start Codex Login',
+            'auth_login.codex_oauth_hint': 'Login to Codex service through OAuth flow, automatically obtain and save authentication files.',
+            'auth_login.codex_oauth_url_label': 'Authorization URL:',
+            'auth_login.codex_open_link': 'Open Link',
+            'auth_login.codex_copy_link': 'Copy Link',
+            'auth_login.codex_oauth_status_waiting': 'Waiting for authentication...',
+            'auth_login.codex_oauth_status_success': 'Authentication successful!',
+            'auth_login.codex_oauth_status_error': 'Authentication failed:',
+            'auth_login.codex_oauth_start_error': 'Failed to start Codex OAuth:',
+            'auth_login.codex_oauth_polling_error': 'Failed to check authentication status:',
+
+            // Anthropic OAuth
+            'auth_login.anthropic_oauth_title': 'Anthropic OAuth',
+            'auth_login.anthropic_oauth_button': 'Start Anthropic Login',
+            'auth_login.anthropic_oauth_hint': 'Login to Anthropic (Claude) service through OAuth flow, automatically obtain and save authentication files.',
+            'auth_login.anthropic_oauth_url_label': 'Authorization URL:',
+            'auth_login.anthropic_open_link': 'Open Link',
+            'auth_login.anthropic_copy_link': 'Copy Link',
+            'auth_login.anthropic_oauth_status_waiting': 'Waiting for authentication...',
+            'auth_login.anthropic_oauth_status_success': 'Authentication successful!',
+            'auth_login.anthropic_oauth_status_error': 'Authentication failed:',
+            'auth_login.anthropic_oauth_start_error': 'Failed to start Anthropic OAuth:',
+            'auth_login.anthropic_oauth_polling_error': 'Failed to check authentication status:',
+
+            // Gemini CLI OAuth
+            'auth_login.gemini_cli_oauth_title': 'Gemini CLI OAuth',
+            'auth_login.gemini_cli_oauth_button': 'Start Gemini CLI Login',
+            'auth_login.gemini_cli_oauth_hint': 'Login to Google Gemini CLI service through OAuth flow, automatically obtain and save authentication files.',
+            'auth_login.gemini_cli_project_id_label': 'Google Cloud Project ID (Optional):',
+            'auth_login.gemini_cli_project_id_placeholder': 'Enter Google Cloud Project ID (optional)',
+            'auth_login.gemini_cli_project_id_hint': 'If a project ID is specified, authentication information for that project will be used.',
+            'auth_login.gemini_cli_oauth_url_label': 'Authorization URL:',
+            'auth_login.gemini_cli_open_link': 'Open Link',
+            'auth_login.gemini_cli_copy_link': 'Copy Link',
+            'auth_login.gemini_cli_oauth_status_waiting': 'Waiting for authentication...',
+            'auth_login.gemini_cli_oauth_status_success': 'Authentication successful!',
+            'auth_login.gemini_cli_oauth_status_error': 'Authentication failed:',
+            'auth_login.gemini_cli_oauth_start_error': 'Failed to start Gemini CLI OAuth:',
+            'auth_login.gemini_cli_oauth_polling_error': 'Failed to check authentication status:',
+
+            // Qwen OAuth
+            'auth_login.qwen_oauth_title': 'Qwen OAuth',
+            'auth_login.qwen_oauth_button': 'Start Qwen Login',
+            'auth_login.qwen_oauth_hint': 'Login to Qwen service through device authorization flow, automatically obtain and save authentication files.',
+            'auth_login.qwen_oauth_url_label': 'Authorization URL:',
+            'auth_login.qwen_open_link': 'Open Link',
+            'auth_login.qwen_copy_link': 'Copy Link',
+            'auth_login.qwen_oauth_status_waiting': 'Waiting for authentication...',
+            'auth_login.qwen_oauth_status_success': 'Authentication successful!',
+            'auth_login.qwen_oauth_status_error': 'Authentication failed:',
+            'auth_login.qwen_oauth_start_error': 'Failed to start Qwen OAuth:',
+            'auth_login.qwen_oauth_polling_error': 'Failed to check authentication status:',
+
+            // iFlow OAuth
+            'auth_login.iflow_oauth_title': 'iFlow OAuth',
+            'auth_login.iflow_oauth_button': 'Start iFlow Login',
+            'auth_login.iflow_oauth_hint': 'Login to iFlow service through OAuth flow, automatically obtain and save authentication files.',
+            'auth_login.iflow_oauth_url_label': 'Authorization URL:',
+            'auth_login.iflow_open_link': 'Open Link',
+            'auth_login.iflow_copy_link': 'Copy Link',
+            'auth_login.iflow_oauth_status_waiting': 'Waiting for authentication...',
+            'auth_login.iflow_oauth_status_success': 'Authentication successful!',
+            'auth_login.iflow_oauth_status_error': 'Authentication failed:',
+            'auth_login.iflow_oauth_start_error': 'Failed to start iFlow OAuth:',
+            'auth_login.iflow_oauth_polling_error': 'Failed to check authentication status:',

            // Usage Statistics
            'usage_stats.title': 'Usage Statistics',
@@ -558,9 +700,12 @@ const i18n = {
            'notification.claude_config_added': 'Claude configuration added successfully',
            'notification.claude_config_updated': 'Claude configuration updated successfully',
            'notification.claude_config_deleted': 'Claude configuration deleted successfully',
+            'notification.field_required': 'Required fields cannot be empty',
+            'notification.openai_provider_required': 'Please fill in provider name and Base URL',
            'notification.openai_provider_added': 'OpenAI provider added successfully',
            'notification.openai_provider_updated': 'OpenAI provider updated successfully',
            'notification.openai_provider_deleted': 'OpenAI provider deleted successfully',
+            'notification.openai_model_name_required': 'Model name is required',
            'notification.data_refreshed': 'Data refreshed successfully',
            'notification.connection_required': 'Please establish connection first',
            'notification.refresh_failed': 'Refresh failed',
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,6 +10,7 @@
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="i18n.js"></script>
 </head>
+
 <body>
    <!-- 自动登录加载页面 -->
    <div id="auto-login-loading" class="login-container" style="display: none;">
@@ -49,67 +51,42 @@
                </div>
            </div>

-            <!-- 选项卡导航 -->
-            <div class="connection-tabs">
-                <button class="tab-button active" data-tab="local">
-                    <i class="fas fa-home"></i>
-                    <div class="tab-content">
-                        <span class="tab-title" data-i18n="login.tab_local_title">Local</span>
-                        <span class="tab-subtitle" data-i18n="login.tab_local_subtitle">Run CLI Web server on your local machine</span>
+            <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>
-                </button>
-                <button class="tab-button" data-tab="remote">
-                    <i class="fas fa-cloud"></i>
-                    <div class="tab-content">
-                        <span class="tab-title" data-i18n="login.tab_remote_title">Remote</span>
-                        <span class="tab-subtitle" data-i18n="login.tab_remote_subtitle">Remote connection for a remote CLI Web server</span>
                    </div>
-                </button>
+                    <p class="form-hint" data-i18n="login.connection_auto_hint">系统将自动使用当前访问地址进行连接</p>
                </div>

-            <!-- 代理服务器设置（可选） -->
-            <div class="proxy-settings">
-                <label data-i18n="login.proxy_label">Proxy Server (Optional):</label>
-                <input type="text" id="login-proxy-url" data-i18n="login.proxy_placeholder" placeholder="http://ip:port or https://ip:port or socks5://user:pass@ip:port">
-            </div>
-            
-            <!-- 本地连接表单 -->
-            <div id="local-form" class="connection-form active">
                <form class="login-form">
                    <div class="form-group">
-                        <label for="local-port" data-i18n="login.local_port_label">端口号:</label>
-                        <div class="local-url-group">
-                            <span class="url-prefix">http://localhost:</span>
-                            <input type="number" id="local-port" value="8317" min="1" max="65535" data-i18n="login.local_port_placeholder" placeholder="8317" required>
-                        </div>
-                        <div class="form-hint" data-i18n="login.local_url_hint">将连接到 http://localhost:端口/v0/management</div>
-                    </div>
-                    
-                    <div class="form-group">
-                        <label for="local-management-key" data-i18n="login.management_key_label">管理密钥:</label>
+                        <label for="login-api-base" data-i18n="login.custom_connection_label">自定义连接地址:</label>
                        <div class="input-group">
-                            <input type="password" id="local-management-key" data-i18n="login.management_key_placeholder" placeholder="请输入管理密钥" required>
-                            <button type="button" class="btn btn-secondary toggle-key-visibility">
-                                <i class="fas fa-eye"></i>
+                            <input type="text" id="login-api-base" data-i18n="login.custom_connection_placeholder"
+                                placeholder="例如: https://example.com:8317">
+                            <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>
-                    </div>
-                </form>
-            </div>
-            
-            <!-- 远程连接表单 -->
-            <div id="remote-form" class="connection-form">
-                <form class="login-form">
-                    <div class="form-group">
-                        <label for="remote-api-url" data-i18n="login.api_url_label">API 基础地址:</label>
-                        <input type="text" id="remote-api-url" data-i18n="login.remote_api_url_placeholder" placeholder="例如: https://example.com:8317" required>
-                        <div class="form-hint" data-i18n="login.api_url_hint">将自动补全 /v0/management</div>
+                        <p class="form-hint" data-i18n="login.custom_connection_hint">默认使用当前访问地址，若需要可手动输入其他地址。</p>
                    </div>

                    <div class="form-group">
-                        <label for="remote-management-key" data-i18n="login.management_key_label">管理密钥:</label>
+                        <label for="login-management-key" data-i18n="login.management_key_label">管理密钥:</label>
                        <div class="input-group">
-                            <input type="password" id="remote-management-key" data-i18n="login.management_key_placeholder" placeholder="请输入管理密钥" required>
+                            <input type="password" id="login-management-key"
+                                data-i18n="login.management_key_placeholder" placeholder="请输入管理密钥" required>
                            <button type="button" class="btn btn-secondary toggle-key-visibility">
                                <i class="fas fa-eye"></i>
                            </button>
@@ -133,26 +110,31 @@
    </div>

    <!-- 主页面 -->
-    <div id="main-page" class="container" style="display: none;">
-        <!-- 头部导航 -->
-        <header class="header">
-            <div class="header-content">
-                <h1 class="brand">
-                    <img id="site-logo" alt="Logo" style="display:none" />
-                    <span class="brand-title" data-i18n="title.main">CLI Proxy API Management Center</span>
-                </h1>
-                <div class="header-actions">
+    <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" title="收起/展开侧边栏">
+                    <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>
-                                <span data-i18n="language.switch">语言</span>
                        </button>
                    </div>
                    <div class="theme-switcher">
                        <button id="theme-toggle-main" class="btn btn-secondary theme-btn">
                            <i class="fas fa-moon"></i>
-                                <span data-i18n="theme.switch">主题</span>
                        </button>
                    </div>
                </div>
@@ -160,77 +142,48 @@
                    <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> <span data-i18n="header.refresh_all">刷新全部</span>
+                    <i class="fas fa-sync-alt"></i>
                </button>
                <button id="logout-btn" class="btn btn-danger">
-                        <i class="fas fa-sign-out-alt"></i> <span data-i18n="header.logout">登出</span>
+                    <i class="fas fa-sign-out-alt"></i>
                </button>
            </div>
        </div>
-        </header>

-        <!-- 连接信息 -->
-        <section class="auth-section">
-            <div class="card">
-                <div class="card-header">
-                    <h2><i class="fas fa-server"></i> <span data-i18n="connection.title">连接信息</span></h2>
-                </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-key"></i>
-                                <span data-i18n="connection.management_key">管理密钥:</span>
-                            </div>
-                            <div class="info-value" id="display-management-key">-</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">
-                                <i class="fas fa-circle"></i>
-                                <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>
-        </section>
-
-        <!-- 主要内容区域 -->
-        <main class="main-content">
-            <!-- 侧边栏导航 -->
-            <nav class="sidebar">
+        <div class="layout" id="layout-container">
+            <!-- 侧边栏 -->
+            <nav class="sidebar" id="sidebar">
+                <!-- 导航菜单 -->
                <ul class="nav-menu">
-                    <li><a href="#basic-settings" class="nav-item active" data-section="basic-settings">
+                    <li data-tooltip="基础设置"><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><a href="#api-keys" class="nav-item" data-section="api-keys">
+                    <li data-tooltip="API 密钥"><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><a href="#ai-providers" class="nav-item" data-section="ai-providers">
+                    <li data-tooltip="AI 提供商"><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><a href="#auth-files" class="nav-item" data-section="auth-files">
+                    <li data-tooltip="认证文件"><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><a href="#usage-stats" class="nav-item" data-section="usage-stats">
+                    <li data-tooltip="使用统计"><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><a href="#system-info" class="nav-item" data-section="system-info">
+                    <li data-tooltip="系统信息"><a href="#system-info" class="nav-item" data-section="system-info">
                            <i class="fas fa-info-circle"></i> <span data-i18n="nav.system_info">系统信息</span>
                        </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">
                        <!-- 基础设置 -->
@@ -240,7 +193,8 @@
                            <!-- Debug 设置 -->
                            <div class="card">
                                <div class="card-header">
-                            <h3><i class="fas fa-bug"></i> <span data-i18n="basic_settings.debug_title">调试模式</span></h3>
+                                    <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">
@@ -256,15 +210,21 @@
                            <!-- 代理设置 -->
                            <div class="card">
                                <div class="card-header">
-                            <h3><i class="fas fa-network-wired"></i> <span data-i18n="basic_settings.proxy_title">代理设置</span></h3>
+                                    <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>
+                                        <label for="proxy-url" data-i18n="basic_settings.proxy_url_label">代理
+                                            URL:</label>
                                        <div class="input-group">
-                                    <input type="text" id="proxy-url" data-i18n="basic_settings.proxy_url_placeholder" placeholder="例如: socks5://user:pass@127.0.0.1:1080/">
-                                    <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>
+                                            <input type="text" id="proxy-url"
+                                                data-i18n="basic_settings.proxy_url_placeholder"
+                                                placeholder="例如: socks5://user:pass@127.0.0.1:1080/">
+                                            <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>
@@ -273,14 +233,17 @@
                            <!-- 请求重试设置 -->
                            <div class="card">
                                <div class="card-header">
-                            <h3><i class="fas fa-redo"></i> <span data-i18n="basic_settings.retry_title">请求重试</span></h3>
+                                    <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>
+                                        <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>
+                                            <button id="update-retry" class="btn btn-primary"
+                                                data-i18n="basic_settings.retry_update">更新</button>
                                        </div>
                                    </div>
                                </div>
@@ -289,7 +252,8 @@
                            <!-- 配额超出行为 -->
                            <div class="card">
                                <div class="card-header">
-                            <h3><i class="fas fa-exclamation-triangle"></i> <span data-i18n="basic_settings.quota_title">配额超出行为</span></h3>
+                                    <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">
@@ -297,14 +261,16 @@
                                            <input type="checkbox" id="switch-project-toggle">
                                            <span class="slider"></span>
                                        </label>
-                                <span class="toggle-label" data-i18n="basic_settings.quota_switch_project">自动切换项目</span>
+                                        <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>
+                                        <span class="toggle-label"
+                                            data-i18n="basic_settings.quota_switch_preview">切换到预览模型</span>
                                    </div>
                                </div>
                            </div>
@@ -317,7 +283,8 @@

                            <div class="card">
                                <div class="card-header">
-                            <h3><i class="fas fa-key"></i> <span data-i18n="api_keys.proxy_auth_title">代理服务认证密钥</span></h3>
+                                    <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>
@@ -335,9 +302,11 @@
                            <!-- 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>
+                                    <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>
+                                        <i class="fas fa-plus"></i> <span
+                                            data-i18n="ai_providers.gemini_add_button">添加密钥</span>
                                    </button>
                                </div>
                                <div class="card-content">
@@ -348,9 +317,11 @@
                            <!-- 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>
+                                    <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>
+                                        <i class="fas fa-plus"></i> <span
+                                            data-i18n="ai_providers.codex_add_button">添加配置</span>
                                    </button>
                                </div>
                                <div class="card-content">
@@ -361,9 +332,11 @@
                            <!-- 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>
+                                    <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>
+                                        <i class="fas fa-plus"></i> <span
+                                            data-i18n="ai_providers.claude_add_button">添加配置</span>
                                    </button>
                                </div>
                                <div class="card-content">
@@ -374,39 +347,17 @@
                            <!-- 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>
+                                    <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>
+                                        <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>
-
-
-                    <!-- Gemini Web Token -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fab fa-google"></i> <span data-i18n="auth_login.gemini_web_title">Gemini Web Token</span></h3>
-                            <button id="gemini-web-token-btn" class="btn btn-primary">
-                                <i class="fas fa-save"></i> <span data-i18n="auth_login.gemini_web_button">保存 Gemini Web Token</span>
-                            </button>
-                        </div>
-                        <div class="card-content">
-                            <p class="form-hint" style="margin-bottom: 20px;" data-i18n="auth_login.gemini_web_hint">
-                                从浏览器开发者工具中获取 Gemini 网页版的 Cookie 值，用于直接认证访问 Gemini。
-                            </p>
-                            <div class="form-group">
-                                <label for="secure-1psid-input" data-i18n="auth_login.secure_1psid_label">__Secure-1PSID Cookie:</label>
-                                <input type="text" id="secure-1psid-input" data-i18n="auth_login.secure_1psid_placeholder" placeholder="输入 __Secure-1PSID cookie 值">
-                            </div>
-                            <div class="form-group">
-                                <label for="secure-1psidts-input" data-i18n="auth_login.secure_1psidts_label">__Secure-1PSIDTS Cookie:</label>
-                                <input type="text" id="secure-1psidts-input" data-i18n="auth_login.secure_1psidts_placeholder" placeholder="输入 __Secure-1PSIDTS cookie 值">
-                            </div>
-                        </div>
-                    </div>
                        </section>

                        <!-- 认证文件管理 -->
@@ -424,13 +375,16 @@
                            <!-- 认证文件 -->
                            <div class="card">
                                <div class="card-header">
-                            <h3><i class="fas fa-file-alt"></i> <span data-i18n="auth_files.title_section">认证文件</span></h3>
+                                    <h3><i class="fas fa-file-alt"></i> <span
+                                            data-i18n="auth_files.title_section">认证文件</span></h3>
                                    <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>
+                                            <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>
+                                            <i class="fas fa-trash"></i> <span
+                                                data-i18n="auth_files.delete_all_button">删除全部</span>
                                        </button>
                                    </div>
                                </div>
@@ -439,6 +393,194 @@
                                    <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="auth_login.gemini_cli_project_id_placeholder"
+                                            placeholder="输入 Google Cloud 项目 ID (可选)">
+                                        <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>

                        <!-- 使用统计 -->
@@ -493,12 +635,14 @@
                                <!-- 请求趋势图 -->
                                <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>
+                                        <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">
+                                            <button class="btn btn-small active" data-period="day"
+                                                id="requests-day-btn">
                                                <span data-i18n="usage_stats.by_day">按天</span>
                                            </button>
                                        </div>
@@ -513,7 +657,8 @@
                                <!-- 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>
+                                        <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>
@@ -534,7 +679,8 @@
                            <!-- 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>
+                                    <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>
@@ -551,22 +697,64 @@
                        <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-info-circle"></i> <span data-i18n="system_info.connection_status_title">连接状态</span></h3>
+                                    <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-key"></i>
+                                                <span data-i18n="connection.management_key">管理密钥:</span>
+                                            </div>
+                                            <div class="info-value" id="display-management-key">-</div>
+                                        </div>
+                                        <div class="info-item">
+                                            <div class="info-label">
+                                                <i class="fas fa-circle"></i>
+                                                <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>
+                                            <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>
+                                            <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 class="status-label"
+                                                data-i18n="system_info.last_update_label">最后更新:</span>
                                            <span id="last-update" class="status-value">-</span>
                                        </div>
                                    </div>
@@ -574,17 +762,22 @@
                            </div>
                        </section>
                    </div>
-        </main>
+                    <!-- /内容区域 -->

                    <!-- 版本信息 -->
                    <footer class="version-footer">
                        <div class="version-info">
-                <span data-i18n="footer.version">版本</span>: v0.0.3
+                            <span data-i18n="footer.version">版本</span>: v0.1.3
                            <span class="separator">•</span>
-                <span data-i18n="footer.author">作者</span>: Supra4E8C
+                            <span data-i18n="footer.author">作者</span>: CLI Proxy API Team
                        </div>
                    </footer>
                </div>
+                <!-- /主内容区域 -->
+            </div>
+            <!-- /主内容包装器 -->
+        </div>
+        <!-- /主页面 -->

        <!-- 模态框 -->
        <div id="modal" class="modal">
@@ -601,4 +794,5 @@

    <script src="app.js"></script>
 </body>
+
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,9 +6,7 @@
  "scripts": {
    "start": "npx serve .",
    "dev": "npx serve . --port 3000",
-    "prebuild": "node build-scripts/prepare-html.js",
-    "build": "webpack --config webpack.config.js",
-    "postbuild": "rm -f index.build.html",
+    "build": "node build.js",
    "lint": "echo '使用浏览器开发者工具检查代码'"
  },
  "keywords": [
@@ -20,14 +18,7 @@
  "author": "CLI Proxy API WebUI",
  "license": "MIT",
  "devDependencies": {
-    "css-loader": "^6.8.1",
-    "html-inline-script-webpack-plugin": "^3.2.1",
-    "html-loader": "^4.2.0",
-    "html-webpack-plugin": "^5.5.4",
-    "serve": "^14.2.1",
-    "style-loader": "^3.3.3",
-    "webpack": "^5.102.0",
-    "webpack-cli": "^5.1.4"
+    "serve": "^14.2.1"
  },
  "engines": {
    "node": ">=14.0.0"
@@ -35,5 +26,6 @@
  "repository": {
    "type": "git",
    "url": "local"
-  }
+  },
+  "dependencies": {}
 }
--- a/styles.css
+++ b/styles.css
Author	SHA1	Message	Date
Supra4E8C	020fccc032	1	2025-10-11 15:51:51 +08:00
Supra4E8C	c162ab3a54	删除gemini web tokens	2025-10-11 15:02:57 +08:00
Supra4E8C	85d12e15d8	Merge pull request #4 from tombii/main Add missing English translations.	2025-10-11 14:51:40 +08:00
tombii	ebffb49f52	Add missing English translations.	2025-10-08 22:08:36 +02:00
Supra4E8C	316c1ffc0d	Update README_CN.md	2025-10-06 16:02:15 +08:00
Supra4E8C	b3e54e7f14	Update README.md	2025-10-06 16:01:56 +08:00
Luis Pater	fe11bfb48f	Added hostname checking function. If it is not localhost or 127.0.0.1, the OAuth login box will be hidden to improve user experience; Added unique IDs to each OAuth card for easier operation.	2025-10-06 01:51:56 +08:00
Luis Pater	ee0d8f82d7	Implement multiple OAuth functions, including Anthropic, Gemini CLI, Qwen and iFlow, add relevant UI components and styles, optimize user experience, and enhance the usability and feedback mechanism of the authentication process.	2025-10-06 01:48:17 +08:00
Luis Pater	0bbb397df5	Implement the Codex OAuth function, add relevant UI components and styles, optimize the login experience, and fix several UI issues.	2025-10-06 01:12:34 +08:00
Supra4E8C	27948b3d5c	实现请求和Token使用趋势图表，更新API详细统计表格，优化侧边栏样式，增强移动端体验，修复若干UI问题。	2025-10-03 18:05:33 +08:00
Supra4E8C	dff28db227	增补README	2025-10-03 15:48:21 +08:00
Supra4E8C	34b16ca886	Merge branch 'main' of https://github.com/router-for-me/Cli-Proxy-API-Management-Center	2025-10-03 15:42:22 +08:00
Supra4E8C	fa86f76289	增补README	2025-10-03 15:42:10 +08:00
Supra4E8C	41ca99978f	Update README_CN.md	2025-10-03 15:35:39 +08:00
Supra4E8C	6ef674487f	更新README以适配新版本	2025-10-03 15:34:14 +08:00
Supra4E8C	2be7ced21a	实现移动端侧边栏功能，添加移动菜单按钮及遮罩，优化导航项点击事件，更新样式以提升用户体验。	2025-10-03 15:09:41 +08:00
Supra4E8C	b61155d215	v0.0.6 添加代理 URL 支持，更新 API 配置模态框，增强 XSS 防护，优化界面样式，修复若干 UI 问题，版本更新至 0.0.6	2025-10-02 17:34:26 +08:00
Supra4E8C	5488d6153d	Update README.md	2025-10-01 16:36:06 +08:00
Supra4E8C	30f5300bb4	Update README_CN.md	2025-10-01 16:10:47 +08:00
Supra4E8C	52169200f1	Update README.md	2025-10-01 16:10:22 +08:00
Supra4E8C	80b2597611	0.0.5 为Cli Proxy API主程序兼容做准备	2025-10-01 16:06:12 +08:00