更新 README.md

This commit is contained in:
Supra4E8C
2025-09-24 19:25:23 +08:00
committed by GitHub
parent 67f009b81c
commit 86fc9fe86e

199
README.md
View File

@@ -1,137 +1,140 @@
# Cli-Proxy-API-Management-Center # 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 https://github.com/router-for-me/CLIProxyAPI
最低可用版本 ≥ 5.0.0 Minimum required version: ≥ 5.0.0
推荐版本 ≥ 5.1.1 Recommended version: ≥ 5.1.1
## 功能特点 ## Features
### 认证管理 ### Authentication Management
- 支持管理密钥认证 - Supports management key authentication
- 可配置 API 基础地址 - Configurable API base address
- 实时连接状态检测 - Real-time connection status detection
### 基础设置 ### Basic Settings
- **调试模式**: 开启/关闭调试功能 - **Debug Mode**: Enable/disable debugging
- **代理设置**: 配置代理服务器 URL - **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 密钥管理 ### API Key Management
- **代理服务认证密钥**: 管理用于代理服务的 API 密钥 - **Proxy Service Authentication Key**: Manage API keys for the proxy service
- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥 - **Gemini API**: Manage Google Gemini generative language API keys
- **Codex API**: 管理 OpenAI Codex API 配置 - **Codex API**: Manage OpenAI Codex API configuration
- **Claude API**: 管理 Anthropic Claude API 配置 - **Claude API**: Manage Anthropic Claude API configuration
- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商 - **OpenAI-Compatible Providers**: Manage OpenAI-compatible third-party providers
### 认证文件管理 ### Authentication File Management
- 上传认证 JSON 文件 - Upload authentication JSON files
- 下载现有认证文件 - Download existing authentication files
- 删除单个或所有认证文件 - Delete single or all authentication files
- 显示文件详细信息 - Display file details
## 使用方法 ## How to Use
### 1. 直接使用(推荐) ### 1. Direct Use (Recommended)
直接用浏览器打开 `index.html` 文件即可使用。 Simply open the `index.html` file directly in your browser to use it.
### 2. 使用本地服务器 ### 2. Use a Local Server
```bash ```bash
# 安装依赖 # Install dependencies
npm install npm install
# 使用默认端口(3000 # Start the server on the default port (3000)
npm start npm start
``` ```
### 3. 配置 API 连接 ### 3. Configure API Connection
1. 打开管理界面 1. Open the management interface.
2. 在登录界面上输入: 2. On the login screen, enter:
- **远程地址**: `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
### 现代化 UI ### Modern UI
- 响应式设计,支持各种屏幕尺寸 - Responsive design, supports all screen sizes
- 美观的渐变色彩和阴影效果 - Beautiful gradient colors and shadow effects
- 流畅的动画和过渡效果 - Smooth animations and transition effects
- 直观的图标和状态指示 - Intuitive icons and status indicators
### 实时更新 ### 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
- **前端**: 纯 HTMLCSSJavaScript - **Frontend**: Plain HTML, CSS, JavaScript
- **样式**: CSS3 + Flexbox/Grid - **Styling**: CSS3 + Flexbox/Grid
- **图标**: Font Awesome 6.4.0 - **Icons**: Font Awesome 6.4.0
- **字体**: Segoe UI 系统字体 - **Fonts**: Segoe UI system font
- **API**: RESTful API 调用 - **API**: RESTful API calls
## 故障排除 ## Troubleshooting
### 连接问题 ### Connection Issues
1. 确认 CLI Proxy API 服务正在运行 1. Confirm that the CLI Proxy API service is running.
2. 检查 API 地址是否正确 2. Check if the API address is correct.
3. 验证管理密钥是否有效 3. Verify that the management key is valid.
4. 确认防火墙设置允许连接 4. Ensure your firewall settings allow the connection.
### 数据不更新 ### Data Not Updating
1. 点击"刷新全部"按钮 1. Click the "Refresh All" button.
2. 检查网络连接 2. Check your network connection.
3. 查看浏览器控制台错误信息 3. Check the browser's console for any error messages.
## 开发说明 ## Development Information
### 文件结构 ### File Structure
``` ```
webui/ webui/
├── index.html # 主页面 ├── index.html # Main page
├── styles.css # 样式文件 ├── styles.css # Stylesheet
├── app.js # 应用逻辑 ├── app.js # Application logic
├── package.json # 项目配置 ├── package.json # Project configuration
├── i18n.js # 国际化支持 ├── i18n.js # Internationalization support
└── README.md # 说明文档 └── README.md # README document
``` ```
### API 调用 ### API Calls
所有 API 调用都通过 `ManagerAPI` 类的 `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
欢迎提交 Issue Pull Request 来改进这个项目我们欢迎更多的大佬来对这个WebUI进行更新 We welcome Issues and Pull Requests to improve this project! We encourage more developers to contribute to the enhancement of this WebUI!
本项目采用MIT许可 This project is licensed under the MIT License.