chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-02 19:00:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新README以适配新版本

Browse Source
This commit is contained in:
Supra4E8C
2025-10-03 15:34:14 +08:00
parent 2be7ced21a
commit 6ef674487f
2 changed files with 154 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
README.md
View File

@@ -12,7 +12,7 @@ https://remote.router-for.me/
Minimum required version: ≥ 6.0.0
Recommended version: ≥ 6.0.19
Starting from version 6.0.19, the WebUI has been integrated into the main program and is accessible via `/management.html`.
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
@@ -20,13 +20,16 @@ Starting from version 6.0.19, the WebUI has been integrated into the main progra
- 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
@@ -40,6 +43,20 @@ Starting from version 6.0.19, the WebUI has been integrated into the main progra
- Download existing authentication files
- Delete single or all authentication files
- Display file details
- **Gemini Web Token**: Direct authentication using browser cookies
### 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
@@ -48,6 +65,8 @@ Starting from version 6.0.19, the WebUI has been integrated into the main progra
Simply open the `index.html` file directly in your browser to use it.
### 2. Use a Local Server
#### Option A: Using Node.js (npm)
```bash
# Install dependencies
npm install
@@ -56,10 +75,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.
@@ -71,8 +99,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
@@ -80,27 +116,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
@@ -120,12 +174,20 @@ npm start
### File Structure
```
webui/
├── index.html # Main page
├── styles.css # Stylesheet
├── app.js # Application logic
├── package.json # Project configuration
├── i18n.js # Internationalization support
└── README.md # README document
├── index.html # Main page with responsive layout
├── styles.css # Stylesheet with theme support
├── app.js # Application logic and API management
├── i18n.js # Internationalization support (EN/CN)
├── package.json # Project configuration
├── build.js # Build script for production
├── bundle-entry.js # Entry point for bundling
├── build-scripts/ # Build utilities
│ └── prepare-html.js # HTML preparation script
├── logo.jpg # Application logo
├── LICENSE # MIT License
├── README.md # English documentation
├── README_CN.md # Chinese documentation
└── BUILD_RELEASE.md # Build and release notes
```
### API Calls

94
README_CN.md
View File

@@ -6,9 +6,9 @@ https://github.com/router-for-me/CLIProxyAPI
示例网站:
https://remote.router-for.me/
最低可用版本 ≥ 5.0.0
推荐版本 ≥ 5.2.6
自6.0.19起WebUI已经集成在主程序中 可以通过/management.html访问
最低可用版本 ≥ 6.0.0
推荐版本 ≥ 6.0.19
自6.0.19起WebUI已经集成在主程序中 可以通过主项目开启的外部端口的/management.html访问
## 功能特点
@@ -16,13 +16,16 @@ https://remote.router-for.me/
- 支持管理密钥认证
- 可配置 API 基础地址
- 实时连接状态检测
- 自动登录保存的凭据
- 语言和主题切换
### 基础设置
- **调试模式**: 开启/关闭调试功能
- **代理设置**: 配置代理服务器 URL
- **请求重试**: 设置请求重试次数
- **配额管理**: 配置超出配额时的行为
- **本地访问**: 管理本地未认证访问
- 超出配额时自动切换项目
- 超出配额时切换到预览模型
### API 密钥管理
- **代理服务认证密钥**: 管理用于代理服务的 API 密钥
@@ -36,6 +39,20 @@ https://remote.router-for.me/
- 下载现有认证文件
- 删除单个或所有认证文件
- 显示文件详细信息
- **Gemini Web Token**: 使用浏览器 Cookie 直接认证
### 使用统计
- **实时分析**: 通过交互式图表跟踪 API 使用情况
- **请求趋势**: 按小时/天可视化请求模式
- **Token 使用**: 监控 Token 消耗随时间变化
- **API 详情**: 每个 API 端点的详细统计
- **成功率/失败率**: 跟踪 API 可靠性指标
### 系统信息
- **连接状态**: 实时连接监控
- **配置状态**: 跟踪配置加载状态
- **服务器信息**: 显示服务器地址和管理密钥
- **最后更新**: 显示数据最后刷新时间
## 使用方法
@@ -44,6 +61,8 @@ https://remote.router-for.me/
直接用浏览器打开 `index.html` 文件即可使用。
### 2. 使用本地服务器
#### 方法A：使用 Node.js (npm)
```bash
# 安装依赖
npm install
@@ -52,10 +71,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. 连接成功后即可使用所有功能
@@ -67,8 +95,16 @@ npm start
- **API 密钥**: 各种 API 服务的密钥管理
- **AI 提供商**: AI 服务提供商配置
- **认证文件**: 认证文件的上传下载管理
- **使用统计**: 实时分析和使用统计，包含交互式图表
- **系统信息**: 连接状态和系统信息
### 登录界面
- **自动连接**: 使用保存的凭据自动尝试连接
- **自定义连接**: 手动配置 API 基础地址
- **当前地址检测**: 自动检测并使用当前访问地址
- **语言切换**: 支持多种语言（英文/中文）
- **主题切换**: 支持明暗主题
## 特性亮点
### 现代化 UI
@@ -76,27 +112,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 用户偏好和凭据存储
## 故障排除
@@ -116,12 +170,20 @@ npm start
### 文件结构
```
webui/
├── index.html # 主页面
├── styles.css # 样式文件
├── app.js # 应用逻辑
├── package.json # 项目配置
├── i18n.js # 国际化支持
└── README.md # 说明文档
├── index.html # 主页面，响应式布局
├── styles.css # 样式文件，支持主题
├── app.js # 应用逻辑和 API 管理
├── i18n.js # 国际化支持（中英文）
├── package.json # 项目配置
├── build.js # 生产环境构建脚本
├── bundle-entry.js # 打包入口文件
├── build-scripts/ # 构建工具
│ └── prepare-html.js # HTML 准备脚本
├── logo.jpg # 应用图标
├── LICENSE # MIT 许可证
├── README.md # 英文文档
├── README_CN.md # 中文文档
└── BUILD_RELEASE.md # 构建和发布说明
```
### API 调用