update app.js

1.去除了部分无法使用的OAuth逻辑
2.修复了Gemini Web保存功能

README.md

@@ -1,145 +1,140 @@
 # Cli-Proxy-API-Management-Center
-这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
+This is a modern web interface for managing the CLI Proxy API.
 
-## 功能特点
+[中文](README_CN.md)
 
-### 认证管理
+Main Project:
-- 支持管理密钥认证
+https://github.com/router-for-me/CLIProxyAPI
-- 可配置 API 基础地址
-- 实时连接状态检测
 
-### 基础设置
+Minimum required version: ≥ 5.0.0
-- **调试模式**: 开启/关闭调试功能
+Recommended version: ≥ 5.1.1
-- **代理设置**: 配置代理服务器 URL
-- **请求重试**: 设置请求重试次数
-- **配额管理**: 配置超出配额时的行为
-- **本地访问**: 允许本地未认证访问
 
-### API 密钥管理
+## Features
-- **代理服务认证密钥**: 管理用于代理服务的 API 密钥
-- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥
-- **Codex API**: 管理 OpenAI Codex API 配置
-- **Claude API**: 管理 Anthropic Claude API 配置
-- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商
 
-### 认证文件管理
+### Authentication Management
-- 上传认证 JSON 文件
+- Supports management key authentication
-- 下载现有认证文件
+- Configurable API base address
-- 删除单个或所有认证文件
+- Real-time connection status detection
-- 显示文件详细信息
 
-### 系统监控
+### Basic Settings
-- 实时 API 连接状态
+- **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
 
-## 使用方法
+### API Key Management
+- **Proxy Service Authentication Key**: Manage API keys for the proxy service
+- **Gemini API**: Manage Google Gemini generative language API keys
+- **Codex API**: Manage OpenAI Codex API configuration
+- **Claude API**: Manage Anthropic Claude API configuration
+- **OpenAI-Compatible Providers**: Manage OpenAI-compatible third-party providers
 
-### 1. 直接使用（推荐）
+### Authentication File Management
-直接用浏览器打开 `index.html` 文件即可使用。
+- Upload authentication JSON files
+- Download existing authentication files
+- Delete single or all authentication files
+- Display file details
 
-### 2. 使用本地服务器
+
+## How to Use
+
+### 1. Direct Use (Recommended)
+Simply open the `index.html` file directly in your browser to use it.
+
+### 2. Use a Local Server
 ```bash
-# 安装依赖
+# Install dependencies
 npm install
 
-# 使用默认端口(3000）
+# Start the server on the default port (3000)
 npm start
 ```
 
-### 3. 配置 API 连接
+### 3. Configure API Connection
-1. 打开管理界面
+1. Open the management interface.
-2. 在认证配置区域输入：
+2. On the login screen, enter:
-   - **API 地址**: `http://localhost:8317`/v0/management将会自动为您补全
+   - **Remote Address**: `http://localhost:8317` (`/v0/management` will be auto-completed for you)
-   - **管理密钥**: 您的管理密钥
+   - **Management Key**: Your management key
-3. 点击"测试连接"按钮
+3. Click the "Connect" button.
-4. 连接成功后即可使用所有功能
+4. Once connected successfully, all features will be available.
 
-## 界面说明
+## Interface Description
 
-### 导航菜单
+### Navigation Menu
-- **基础设置**: 调试、代理、重试等基本配置
+- **Basic Settings**: Basic configurations like debugging, proxy, retries, etc.
-- **API 密钥**: 各种 API 服务的密钥管理
+- **API Keys**: Management of keys for various API services.
-- **AI 提供商**: AI 服务提供商配置
+- **AI Providers**: Configuration for AI service providers.
-- **认证文件**: 认证文件的上传下载管理
+- **Auth Files**: Upload and download management for authentication files.
-- **系统信息**: 连接状态和系统信息
+- **System Info**: Connection status and system information.
 
-### 操作按钮
+## Feature Highlights
-- **刷新全部**: 重新加载所有配置数据
-- **连接状态**: 检查 API 连接状态
-- **添加**: 添加新的配置项
-- **编辑**: 编辑现有配置
-- **删除**: 删除配置项
 
-## 特性亮点
+### Modern UI
+- Responsive design, supports all screen sizes
+- Beautiful gradient colors and shadow effects
+- Smooth animations and transition effects
+- Intuitive icons and status indicators
 
-### 现代化 UI
+### Real-time Updates
-- 响应式设计，支持各种屏幕尺寸
+- Configuration changes take effect immediately
-- 美观的渐变色彩和阴影效果
+- Real-time status feedback
-- 流畅的动画和过渡效果
+- Automatic data refresh
-- 直观的图标和状态指示
 
-### 实时更新
+### Security Features
-- 配置更改立即生效
+- Masked display for keys
-- 实时状态反馈
-- 自动数据刷新
 
-### 安全特性
+### Responsive Design
-- 密钥遮蔽显示
+- Perfectly adapts to desktop and mobile devices
+- Adaptive layout
+- Touch-friendly interactions
 
-### 响应式设计
+## Tech Stack
-- 完美适配桌面和移动设备
-- 自适应布局
-- 触摸友好的交互
 
-## 技术栈
+- **Frontend**: Plain HTML, CSS, JavaScript
+- **Styling**: CSS3 + Flexbox/Grid
+- **Icons**: Font Awesome 6.4.0
+- **Fonts**: Segoe UI system font
+- **API**: RESTful API calls
 
-- **前端**: 纯 HTML、CSS、JavaScript
+## Troubleshooting
-- **样式**: CSS3 + Flexbox/Grid
-- **图标**: Font Awesome 6.4.0
-- **字体**: Segoe UI 系统字体
-- **API**: RESTful API 调用
 
-## 故障排除
+### Connection Issues
+1. Confirm that the CLI Proxy API service is running.
+2. Check if the API address is correct.
+3. Verify that the management key is valid.
+4. Ensure your firewall settings allow the connection.
 
-### 连接问题
+### Data Not Updating
-1. 确认 CLI Proxy API 服务正在运行
+1. Click the "Refresh All" button.
-2. 检查 API 地址是否正确
+2. Check your network connection.
-3. 验证管理密钥是否有效
+3. Check the browser's console for any error messages.
-4. 确认防火墙设置允许连接
 
-### 数据不更新
+## Development Information
-1. 点击"刷新全部"按钮
-2. 检查网络连接
-3. 查看浏览器控制台错误信息
 
-## 开发说明
+### File Structure
-
-### 文件结构
 ```
 webui/
-├── index.html      # 主页面
+├── index.html      # Main page
-├── styles.css      # 样式文件
+├── styles.css      # Stylesheet
-├── app.js          # 应用逻辑
+├── app.js          # Application logic
-├── package.json    # 项目配置
+├── package.json    # Project configuration
-└── README.md       # 说明文档
+├── i18n.js         # Internationalization support
+└── README.md       # README document
 ```
 
-### API 调用
+### API Calls
-所有 API 调用都通过 `CLIProxyManager` 类的 `makeRequest` 方法处理，包含：
+All API calls are handled through the `makeRequest` method of the `ManagerAPI` class, which includes:
-- 自动添加认证头
+- Automatic addition of authentication headers
-- 错误处理
+- Error handling
-- JSON 响应解析
+- JSON response parsing
 
-### 状态管理
+### State Management
-- 本地存储保存 API 地址和密钥
+- API address and key are saved in local storage
-- 内存中维护连接状态
+- Connection status is maintained in memory
-- 实时数据刷新机制
+- Real-time data refresh mechanism
 
-## 许可证
+## Contributing
+We welcome Issues and Pull Requests to improve this project! We encourage more developers to contribute to the enhancement of this WebUI!
 
-MIT License
+This project is licensed under the MIT License.
-
-## 贡献
-
-欢迎提交 Issue 和 Pull Request 来改进这个项目！

README_CN.md

@@ -0,0 +1,137 @@
+# Cli-Proxy-API-Management-Center
+这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
+主项目
+https://github.com/router-for-me/CLIProxyAPI
+
+最低可用版本 ≥ 5.0.0
+推荐版本 ≥ 5.1.1
+
+## 功能特点
+
+### 认证管理
+- 支持管理密钥认证
+- 可配置 API 基础地址
+- 实时连接状态检测
+
+### 基础设置
+- **调试模式**: 开启/关闭调试功能
+- **代理设置**: 配置代理服务器 URL
+- **请求重试**: 设置请求重试次数
+- **配额管理**: 配置超出配额时的行为
+- **本地访问**: 管理本地未认证访问
+
+### API 密钥管理
+- **代理服务认证密钥**: 管理用于代理服务的 API 密钥
+- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥
+- **Codex API**: 管理 OpenAI Codex API 配置
+- **Claude API**: 管理 Anthropic Claude API 配置
+- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商
+
+### 认证文件管理
+- 上传认证 JSON 文件
+- 下载现有认证文件
+- 删除单个或所有认证文件
+- 显示文件详细信息
+
+
+## 使用方法
+
+### 1. 直接使用（推荐）
+直接用浏览器打开 `index.html` 文件即可使用。
+
+### 2. 使用本地服务器
+```bash
+# 安装依赖
+npm install
+
+# 使用默认端口(3000）
+npm start
+```
+
+### 3. 配置 API 连接
+1. 打开管理界面
+2. 在登录界面上输入：
+   - **远程地址**: `http://localhost:8317`/v0/management将会自动为您补全
+   - **管理密钥**: 您的管理密钥
+3. 点击"连接"按钮
+4. 连接成功后即可使用所有功能
+
+## 界面说明
+
+### 导航菜单
+- **基础设置**: 调试、代理、重试等基本配置
+- **API 密钥**: 各种 API 服务的密钥管理
+- **AI 提供商**: AI 服务提供商配置
+- **认证文件**: 认证文件的上传下载管理
+- **系统信息**: 连接状态和系统信息
+
+## 特性亮点
+
+### 现代化 UI
+- 响应式设计，支持各种屏幕尺寸
+- 美观的渐变色彩和阴影效果
+- 流畅的动画和过渡效果
+- 直观的图标和状态指示
+
+### 实时更新
+- 配置更改立即生效
+- 实时状态反馈
+- 自动数据刷新
+
+### 安全特性
+- 密钥遮蔽显示
+
+### 响应式设计
+- 完美适配桌面和移动设备
+- 自适应布局
+- 触摸友好的交互
+
+## 技术栈
+
+- **前端**: 纯 HTML、CSS、JavaScript
+- **样式**: CSS3 + Flexbox/Grid
+- **图标**: Font Awesome 6.4.0
+- **字体**: Segoe UI 系统字体
+- **API**: RESTful API 调用
+
+## 故障排除
+
+### 连接问题
+1. 确认 CLI Proxy API 服务正在运行
+2. 检查 API 地址是否正确
+3. 验证管理密钥是否有效
+4. 确认防火墙设置允许连接
+
+### 数据不更新
+1. 点击"刷新全部"按钮
+2. 检查网络连接
+3. 查看浏览器控制台错误信息
+
+## 开发说明
+
+### 文件结构
+```
+webui/
+├── index.html      # 主页面
+├── styles.css      # 样式文件
+├── app.js          # 应用逻辑
+├── package.json    # 项目配置
+├── i18n.js         # 国际化支持
+└── README.md       # 说明文档
+```
+
+### API 调用
+所有 API 调用都通过 `ManagerAPI` 类的 `makeRequest` 方法处理，包含：
+- 自动添加认证头
+- 错误处理
+- JSON 响应解析
+
+### 状态管理
+- 本地存储保存 API 地址和密钥
+- 内存中维护连接状态
+- 实时数据刷新机制
+
+## 贡献
+欢迎提交 Issue 和 Pull Request 来改进这个项目！我们欢迎更多的大佬来对这个WebUI进行更新！
+
+本项目采用MIT许可

app.js

@@ -38,7 +38,6 @@ class CLIProxyManager {
         if (savedTheme && ['light', 'dark'].includes(savedTheme)) {
             this.currentTheme = savedTheme;
         } else {
-            // 根据系统偏好自动选择
             if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                 this.currentTheme = 'dark';
             } else {
@@ -586,6 +585,13 @@ class CLIProxyManager {
             addOpenaiProvider.addEventListener('click', () => this.showAddOpenAIProviderModal());
         }
         
+        
+        // Gemini Web Token
+        const geminiWebTokenBtn = document.getElementById('gemini-web-token-btn');
+        if (geminiWebTokenBtn) {
+            geminiWebTokenBtn.addEventListener('click', () => this.showGeminiWebTokenModal());
+        }
+        
         // 认证文件管理
         const uploadAuthFile = document.getElementById('upload-auth-file');
         const deleteAllAuthFiles = document.getElementById('delete-all-auth-files');
@@ -726,8 +732,7 @@ class CLIProxyManager {
             this.managementKey = savedKey;
         }
         
-        // 注意：不再处理DOM元素，因为认证配置已改为只读显示
+    
-        // DOM更新由updateConnectionInfo()方法处理
     }
 
     // API 请求方法
@@ -2187,6 +2192,96 @@ class CLIProxyManager {
         }
     }
 
+
+
+
+
+    // 显示 Gemini Web Token 模态框
+    showGeminiWebTokenModal() {
+        const inlineSecure1psid = document.getElementById('secure-1psid-input');
+        const inlineSecure1psidts = document.getElementById('secure-1psidts-input');
+        const modalBody = document.getElementById('modal-body');
+        modalBody.innerHTML = `
+            <h3>${i18n.t('auth_login.gemini_web_button')}</h3>
+            <div class="gemini-web-form">
+                <div class="form-group">
+                    <label for="modal-secure-1psid">${i18n.t('auth_login.secure_1psid_label')}</label>
+                    <input type="text" id="modal-secure-1psid" placeholder="${i18n.t('auth_login.secure_1psid_placeholder')}" required>
+                    <div class="form-hint">从浏览器开发者工具 → Application → Cookies 中获取</div>
+                </div>
+                <div class="form-group">
+                    <label for="modal-secure-1psidts">${i18n.t('auth_login.secure_1psidts_label')}</label>
+                    <input type="text" id="modal-secure-1psidts" placeholder="${i18n.t('auth_login.secure_1psidts_placeholder')}" required>
+                    <div class="form-hint">从浏览器开发者工具 → Application → Cookies 中获取</div>
+                </div>
+                <div class="modal-actions">
+                    <button class="btn btn-secondary" onclick="manager.closeModal()">${i18n.t('common.cancel')}</button>
+                    <button class="btn btn-primary" onclick="manager.saveGeminiWebToken()">${i18n.t('common.save')}</button>
+                </div>
+            </div>
+        `;
+        this.showModal();
+
+        const modalSecure1psid = document.getElementById('modal-secure-1psid');
+        const modalSecure1psidts = document.getElementById('modal-secure-1psidts');
+
+        if (modalSecure1psid && inlineSecure1psid) {
+            modalSecure1psid.value = inlineSecure1psid.value.trim();
+        }
+        if (modalSecure1psidts && inlineSecure1psidts) {
+            modalSecure1psidts.value = inlineSecure1psidts.value.trim();
+        }
+
+        if (modalSecure1psid) {
+            modalSecure1psid.focus();
+        }
+    }
+
+    // 保存 Gemini Web Token
+    async saveGeminiWebToken() {
+        const secure1psid = document.getElementById('modal-secure-1psid').value.trim();
+        const secure1psidts = document.getElementById('modal-secure-1psidts').value.trim();
+        
+        if (!secure1psid || !secure1psidts) {
+            this.showNotification('请填写完整的 Cookie 信息', 'error');
+            return;
+        }
+        
+        try {
+            const response = await this.makeRequest('/gemini-web-token', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    secure_1psid: secure1psid,
+                    secure_1psidts: secure1psidts
+                })
+            });
+            
+            this.closeModal();
+            this.loadAuthFiles(); // 刷新认证文件列表
+            const inlineSecure1psid = document.getElementById('secure-1psid-input');
+            const inlineSecure1psidts = document.getElementById('secure-1psidts-input');
+            if (inlineSecure1psid) {
+                inlineSecure1psid.value = secure1psid;
+            }
+            if (inlineSecure1psidts) {
+                inlineSecure1psidts.value = secure1psidts;
+            }
+            this.showNotification(`${i18n.t('auth_login.gemini_web_saved')}: ${response.file}`, 'success');
+        } catch (error) {
+            this.showNotification(`保存失败: ${error.message}`, 'error');
+        }
+    }
+
+    showModal() {
+        const modal = document.getElementById('modal');
+        if (modal) {
+            modal.style.display = 'block';
+        }
+    }
+
     // 关闭模态框
     closeModal() {
         document.getElementById('modal').style.display = 'none';

i18n.js

@@ -182,9 +182,11 @@ const i18n = {
             'ai_providers.openai_keys_count': '密钥数量',
             'ai_providers.openai_models_count': '模型数量',
             
+            
             // 认证文件管理
             'auth_files.title': '认证文件管理',
             'auth_files.title_section': '认证文件',
+            'auth_files.description': '这里管理 Qwen 和 Gemini 的认证配置文件。上传 JSON 格式的认证文件以启用相应的 AI 服务。',
             'auth_files.upload_button': '上传文件',
             'auth_files.delete_all_button': '删除全部',
             'auth_files.empty_title': '暂无认证文件',
@@ -202,6 +204,16 @@ 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 保存成功',
+            
             // 系统信息
             'system_info.title': '系统信息',
             'system_info.connection_status_title': '连接状态',
@@ -443,9 +455,11 @@ const i18n = {
             'ai_providers.openai_keys_count': 'Keys Count',
             'ai_providers.openai_models_count': 'Models Count',
             
+            
             // Auth files management
             'auth_files.title': 'Auth Files Management',
             'auth_files.title_section': 'Auth Files',
+            'auth_files.description': 'Here you can manage authentication configuration files for Qwen and Gemini. Upload JSON format authentication files to enable the corresponding AI services.',
             'auth_files.upload_button': 'Upload File',
             'auth_files.delete_all_button': 'Delete All',
             'auth_files.empty_title': 'No Auth Files',
@@ -463,6 +477,16 @@ 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',
+            
             // System info
             'system_info.title': 'System Information',
             'system_info.connection_status_title': 'Connection Status',

index.html

@@ -394,12 +394,45 @@
                             <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>
 
                 <!-- 认证文件管理 -->
                 <section id="auth-files" class="content-section">
                     <h2 data-i18n="auth_files.title">认证文件管理</h2>
                     
+                    <div class="card" style="margin-bottom: 20px;">
+                        <div class="card-content">
+                            <p class="form-hint" data-i18n="auth_files.description">
+                                这里管理 Qwen 和 Gemini 的认证配置文件。上传 JSON 格式的认证文件以启用相应的 AI 服务。
+                            </p>
+                        </div>
+                    </div>
+                    
+                    <!-- 认证文件 -->
                     <div class="card">
                         <div class="card-header">
                             <h3><i class="fas fa-file-alt"></i> <span data-i18n="auth_files.title_section">认证文件</span></h3>

styles.css

@@ -436,6 +436,7 @@
 
 .local-url-group input[type="number"] {
     -moz-appearance: textfield;
+    appearance: textfield;
 }
 
 .login-title {
@@ -1572,3 +1573,43 @@ input:checked + .slider:before {
         opacity: 1;
     }
 }
+
+
+/* Gemini Web Token 模态框样式 */
+.gemini-web-form .form-group {
+    margin-bottom: 20px;
+}
+
+.gemini-web-form .form-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-secondary);
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.gemini-web-form .form-group input {
+    width: 100%;
+    padding: 12px 16px;
+    border: 2px solid var(--border-primary);
+    border-radius: 8px;
+    font-size: 14px;
+    transition: all 0.3s ease;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.gemini-web-form .form-group input:focus {
+    outline: none;
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 3px var(--border-primary);
+}
+
+.gemini-web-form .form-hint {
+    margin-top: 6px;
+    color: var(--text-tertiary);
+    font-size: 12px;
+    line-height: 1.4;
+}
+