From 6ef674487ffe3380bc8389a0824a59c7f4684c76 Mon Sep 17 00:00:00 2001 From: Supra4E8C Date: Fri, 3 Oct 2025 15:34:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0README=E4=BB=A5=E9=80=82?= =?UTF-8?q?=E9=85=8D=E6=96=B0=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 90 +++++++++++++++++++++++++++++++++++++++++-------- README_CN.md | 94 +++++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 154 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 7b129b5c..35d3ef25 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/README_CN.md b/README_CN.md index 29faf21c..00322133 100644 --- a/README_CN.md +++ b/README_CN.md @@ -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 调用