Compare commits

..

8 Commits

9 changed files with 500 additions and 327 deletions

216
README.md
View File

@@ -1,150 +1,49 @@
# Cli-Proxy-API-Management-Center
This is a modern web interface for managing the CLI Proxy API.
This is the modern WebUI for managing the CLI Proxy API.
[中文文档](README_CN.md)
Main Project:
https://github.com/router-for-me/CLIProxyAPI
Main Project: https://github.com/router-for-me/CLIProxyAPI
Example URL: https://remote.router-for.me/
Minimum required version: ≥ 6.3.0 (recommended ≥ 6.5.0)
Example URL:
https://remote.router-for.me/
Minimum required version: ≥ 6.0.0
Recommended version: ≥ 6.2.32
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.
Since 6.0.19 the WebUI ships with the main program; access it via `/management.html` on the API port once the service is running.
## Features
### Authentication Management
- 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
- 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
- **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
### Authentication File Management
- Upload authentication JSON files
- Download existing authentication files
- 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
### Capabilities
- **Login & UX**: Auto-detects the current address (manual override/reset supported), encrypted auto-login, language/theme toggles, responsive layout with mobile sidebar.
- **Basic Settings**: Debug, proxy URL, request retries, quota fallback (auto-switch project/preview models), usage-statistics toggle, request logging & logging-to-file switches, WebSocket `/ws/*` auth switch.
- **Keys & Providers**: Manage proxy auth keys, Gemini/Codex/Claude configs, OpenAI-compatible providers (custom base URLs/headers/proxy/model aliases), Vertex AI credential import from service-account JSON with optional location.
- **Auth Files & OAuth**: Upload/download/search/paginate JSON credentials; type filters (Qwen/Gemini/GeminiCLI/AIStudio/Claude/Codex/Antigravity/iFlow/Vertex/Empty); delete-all; OAuth/Device flows for Codex, Anthropic (Claude), Antigravity (Google), Gemini CLI (optional project), Qwen; iFlow OAuth and cookie login.
- **Logs**: Live viewer with auto-refresh/incremental updates, download and clear; section appears when logging-to-file is enabled.
- **Usage Analytics**: Overview cards, hourly/daily toggles, up to three model lines per chart, per-API stats table (Chart.js).
- **Config Management**: In-browser CodeMirror YAML editor for `/config.yaml` with reload/save, syntax highlighting, and status feedback.
- **System Info & Versioning**: Connection/config cache status, last refresh time, server version/build date, and UI version in the footer.
- **Security & Preferences**: Masked secrets, secure local storage, persistent theme/language/sidebar state, real-time status feedback.
## How to Use
### 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`.
1) **After CLI Proxy API is running (recommended)**
Visit `http://your-server:8317/management.html`.
### 2. Direct Use
Simply open the `index.html` file directly in your browser to use it.
2) **Direct static use**
Open `index.html` (or the bundled `dist/index.html` from `npm run build`) directly in your browser.
### 3. Use a Local Server
#### Option A: Using Node.js (npm)
3) **Local server**
```bash
# Install dependencies
npm install
# Start the server on the default port (3000)
npm start
```
#### Option B: Using Python
```bash
# Python 3.x
npm start # http://localhost:3000
npm run dev # optional dev port: 3090
# or
python -m http.server 8000
```
Then open the corresponding localhost URL.
Then open `http://localhost:8000` in your browser.
4) **Configure connection**
The login page shows the detected address; you can override it, enter the management key, and click Connect. Saved credentials use encrypted local storage for auto-login.
### 3. Configure Connection
1. Open the management interface.
2. On the login screen, enter:
- **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.
## Interface Description
### Navigation Menu
- **Basic Settings**: Basic configurations like debugging, proxy, retries, etc.
- **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
- Responsive design, supports all screen sizes
- 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 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
Tip: The Logs navigation item appears after enabling "Logging to file" in Basic Settings.
## Tech Stack
@@ -152,11 +51,17 @@ Then open `http://localhost:8000` in your browser.
- **Styling**: CSS3 + Flexbox/Grid with CSS Variables
- **Icons**: Font Awesome 6.4.0
- **Charts**: Chart.js for interactive data visualization
- **Editor/Parsing**: CodeMirror + js-yaml
- **Fonts**: Segoe UI system font
- **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
- **Internationalization**: Custom i18n (EN/CN) and theme system (light/dark)
- **API**: RESTful management endpoints with automatic authentication
- **Storage**: LocalStorage with lightweight encryption for preferences/credentials
## Build & Development
- `npm run build` bundles everything into `dist/index.html` via webpack (`build.cjs`, `bundle-entry.js`, `build-scripts/prepare-html.js`).
- External CDNs remain for Font Awesome, Chart.js, and CodeMirror to keep the bundle lean.
- Development servers: `npm start` (3000) or `npm run dev` (3090); Python `http.server` also works for static hosting.
## Troubleshooting
@@ -171,38 +76,31 @@ Then open `http://localhost:8000` in your browser.
2. Check your network connection.
3. Check the browser's console for any error messages.
## Development Information
### Logs & Config Editor
- Logs: Requires server-side logging-to-file; 404 indicates the server build is too old or logging is disabled.
- Config editor: Requires `/config.yaml` endpoint; keep YAML valid before saving.
### File Structure
### Usage Stats
- Enable "Usage statistics" if charts stay empty; data resets on server restart.
## Project Structure
```
webui/
├── 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
├── index.html
├── styles.css
├── app.js
├── i18n.js
├── src/ # Core/modules/utils source code
├── build.cjs # Webpack build script
├── bundle-entry.js # Bundling entry
├── 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
│ └── prepare-html.js
├── dist/ # Bundled single-file output
├── BUILD_RELEASE.md
├── LICENSE
├── README.md
└── README_CN.md
```
### API Calls
All API calls are handled through the `makeRequest` method of the `ManagerAPI` class, which includes:
- Automatic addition of authentication headers
- Error handling
- JSON response parsing
### State Management
- 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!

View File

@@ -1,149 +1,49 @@
# Cli-Proxy-API-Management-Center
这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
主项目
https://github.com/router-for-me/CLIProxyAPI
[English](README.md)
示例网站:
https://remote.router-for.me/
主项目: https://github.com/router-for-me/CLIProxyAPI
示例网站: https://remote.router-for.me/
最低版本 ≥ 6.3.0(推荐 ≥ 6.5.0
最低可用版本 ≥ 6.0.0
推荐版本 ≥ 6.2.32
自6.0.19起WebUI已经集成在主程序中 可以通过主项目开启的外部端口的`/management.html`访问
自 6.0.19 起 WebUI 已集成到主程序中,启动后可通过 `/management.html` 访问。
## 功能特点
### 认证管理
- 支持管理密钥认证
- 可配置 API 基础地址
- 实时连接状态检测
- 自动登录保存的凭据
- 语言和主题切换
### 基础设置
- **调试模式**: 开启/关闭调试功能
- **代理设置**: 配置代理服务器 URL
- **请求重试**: 设置请求重试次数
- **配额管理**: 配置超出配额时的行为
- 超出配额时自动切换项目
- 超出配额时切换到预览模型
### API 密钥管理
- **代理服务认证密钥**: 管理用于代理服务的 API 密钥
- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥
- **Codex API**: 管理 OpenAI Codex API 配置
- **Claude API**: 管理 Anthropic Claude API 配置
- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商
### 认证文件管理
- 上传认证 JSON 文件
- 下载现有认证文件
- 删除单个或所有认证文件
- 显示文件详细信息
### 使用统计
- **实时分析**: 通过交互式图表跟踪 API 使用情况
- **请求趋势**: 按小时/天可视化请求模式
- **Token 使用**: 监控 Token 消耗随时间变化
- **API 详情**: 每个 API 端点的详细统计
- **成功率/失败率**: 跟踪 API 可靠性指标
### 系统信息
- **连接状态**: 实时连接监控
- **配置状态**: 跟踪配置加载状态
- **服务器信息**: 显示服务器地址和管理密钥
- **最后更新**: 显示数据最后刷新时间
### 主要能力
- **登录与体验**: 自动检测当前地址(可自定义/重置),加密自动登录,语言/主题切换,响应式布局与移动端侧边栏。
- **基础设置**: 调试、代理 URL、请求重试配额溢出自动切换项目/预览模型使用统计开关请求日志与文件日志开关WebSocket `/ws/*` 鉴权开关。
- **密钥与提供商**: 管理代理服务密钥Gemini/Codex/Claude 配置OpenAI 兼容提供商(自定义 Base URL/Headers/Proxy/模型别名Vertex AI 服务账号导入(可选区域)。
- **认证文件与 OAuth**: 上传/下载/搜索/分页 JSON 凭据类型筛选Qwen/Gemini/GeminiCLI/AIStudio/Claude/Codex/Antigravity/iFlow/Vertex/Empty一键删除全部Codex、Anthropic(Claude)、Antigravity(Google)、Gemini CLI可选项目、Qwen 设备码、iFlow OAuth 与 Cookie 登录。
- **日志**: 实时查看并增量刷新,支持下载和清空;启用“写入日志文件”后出现日志栏目。
- **使用统计**: 概览卡片、小时/天切换、最多三条模型曲线、按 API 统计表Chart.js
- **配置管理**: 内置 CodeMirror YAML 编辑器,在线读取/保存 `/config.yaml`,语法高亮与状态提示。
- **系统与版本**: 连接/配置缓存状态、最后刷新时间,底栏显示服务版本、构建时间与 UI 版本。
- **安全与偏好**: 密钥遮蔽、加密本地存储,主题/语言/侧边栏状态持久化,实时状态反馈。
## 使用方法
### 1. 在CLI Proxy API程序启动后使用 (推荐)
在启动了CLI Proxy API程序后 访问`http://您的服务器IP:8317/management.html`使用
1) **主程序启动后使用(推荐)**
访问 `http://您的服务器:8317/management.html`
### 2. 直接使用
直接用浏览器打开 `index.html` 文件即可使用
2) **直接静态打开**
浏览器打开 `index.html`(或 `npm run build` 生成的 `dist/index.html` 单文件)
### 3. 使用本地服务器
#### 方法A使用 Node.js (npm)
3) **本地服务器**
```bash
# 安装依赖
npm install
# 使用默认端口(3000
npm start
```
#### 方法B使用 Python
```bash
# Python 3.x
npm start # 默认 http://localhost:3000
npm run dev # 可选开发端口 3090
# 或
python -m http.server 8000
```
然后在浏览器打开对应的 localhost 地址。
然后在浏览器中打开 `http://localhost:8000`
4) **配置连接**
登录页会显示自动检测的地址,可自行修改,填入管理密钥后点击连接。凭据将加密保存以便下次自动登录。
### 3. 配置连接
1. 打开管理界面
2. 在登录界面上输入:
- **远程地址**: 现版本远程地址将会自动从您的访问地址中获取 当然您也可以自定义
- **管理密钥**: 您的管理密钥
3. 点击"连接"按钮
4. 连接成功后即可使用所有功能
## 界面说明
### 导航菜单
- **基础设置**: 调试、代理、重试等基本配置
- **API 密钥**: 各种 API 服务的密钥管理
- **AI 提供商**: AI 服务提供商配置
- **认证文件**: 认证文件的上传下载管理
- **使用统计**: 实时分析和使用统计,包含交互式图表
- **系统信息**: 连接状态和系统信息
### 登录界面
- **自动连接**: 使用保存的凭据自动尝试连接
- **自定义连接**: 手动配置 API 基础地址
- **当前地址检测**: 自动检测并使用当前访问地址
- **语言切换**: 支持多种语言(英文/中文)
- **主题切换**: 支持明暗主题
## 特性亮点
### 现代化 UI
- 响应式设计,支持各种屏幕尺寸
- 美观的渐变色彩和阴影效果
- 流畅的动画和过渡效果
- 直观的图标和状态指示
- 明暗主题支持,自动检测系统偏好
- 移动端友好的侧边栏和遮罩
### 实时更新
- 配置更改立即生效
- 实时状态反馈
- 自动数据刷新
- 实时使用统计和交互式图表
- 实时连接状态监控
### 安全特性
- 密钥遮蔽显示
- 安全凭据存储
- 加密本地存储自动登录
### 响应式设计
- 完美适配桌面和移动设备
- 自适应布局,可折叠侧边栏
- 触摸友好的交互
- 移动端菜单和遮罩
### 分析与监控
- Chart.js 驱动的交互式图表
- 实时使用统计
- 请求趋势可视化
- Token 消耗跟踪
- API 性能指标
提示: 开启“写入日志文件”后才会显示“日志查看”导航。
## 技术栈
@@ -151,11 +51,16 @@ python -m http.server 8000
- **样式**: CSS3 + Flexbox/Grid支持 CSS 变量
- **图标**: Font Awesome 6.4.0
- **图表**: Chart.js 交互式数据可视化
- **字体**: Segoe UI 系统字体
- **API**: RESTful API 调用,自动认证
- **国际化**: 自定义 i18n 系统,支持中英文
- **主题系统**: CSS 自定义属性动态主题
- **存储**: LocalStorage 用户偏好和凭据存储
- **编辑/解析**: CodeMirror + js-yaml
- **国际化**: 自定义 i18n中/英)与主题系统(明/暗)
- **API**: RESTful 管理接口,自动附加认证
- **存储**: LocalStorage 轻量加密存储偏好与凭据
## 构建与开发
- `npm run build` 通过 webpack`build.cjs``bundle-entry.js``build-scripts/prepare-html.js`)打包为 `dist/index.html`
- Font Awesome、Chart.js、CodeMirror 仍走 CDN减小打包体积。
- 开发可用 `npm start` (3000) / `npm run dev` (3090) 或 `python -m http.server` 静态托管。
## 故障排除
@@ -170,39 +75,32 @@ python -m http.server 8000
2. 检查网络连接
3. 查看浏览器控制台错误信息
## 开发说明
### 日志与配置编辑
- 日志: 需要服务端开启写文件日志;返回 404 说明版本过旧或未启用。
- 配置编辑: 依赖 `/config.yaml` 接口,保存前请确保 YAML 语法正确。
### 文件结构
### 使用统计
- 若图表为空,请开启“使用统计”;数据在服务重启后会清空。
## 项目结构
```
webui/
├── index.html # 主页面,响应式布局
├── styles.css # 样式文件,支持主题
├── app.js # 应用逻辑和 API 管理
├── i18n.js # 国际化支持(中英文)
├── package.json # 项目配置
├── build.js # 生产环境构建脚本
├── bundle-entry.js # 打包入口文件
├── index.html
├── styles.css
├── app.js
├── i18n.js
├── src/ # 核心/模块/工具源码
├── build.cjs # Webpack 构建脚本
├── bundle-entry.js # 打包入口
├── build-scripts/ # 构建工具
│ └── prepare-html.js # HTML 准备脚本
├── logo.jpg # 应用图标
├── LICENSE # MIT 许可证
├── README.md # 英文文档
├── README_CN.md # 中文文档
└── BUILD_RELEASE.md # 构建和发布说明
│ └── prepare-html.js
├── dist/ # 打包输出单文件
├── BUILD_RELEASE.md
├── LICENSE
├── README.md
└── README_CN.md
```
### API 调用
所有 API 调用都通过 `ManagerAPI` 类的 `makeRequest` 方法处理,包含:
- 自动添加认证头
- 错误处理
- JSON 响应解析
### 状态管理
- 本地存储保存 API 地址和密钥
- 内存中维护连接状态
- 实时数据刷新机制
## 贡献
欢迎提交 Issue 和 Pull Request 来改进这个项目我们欢迎更多的大佬来对这个WebUI进行更新
欢迎提交 Issue 和 Pull Request 来改进这个项目!我们欢迎更多的大佬来对这个 WebUI 进行更新!
本项目采用MIT许可
本项目采用 MIT 许可

22
app.js
View File

@@ -20,6 +20,7 @@ import { debounce } from './src/utils/dom.js';
import {
CACHE_EXPIRY_MS,
MAX_LOG_LINES,
LOG_FETCH_LIMIT,
DEFAULT_AUTH_FILES_PAGE_SIZE,
MIN_AUTH_FILES_PAGE_SIZE,
MAX_AUTH_FILES_PAGE_SIZE,
@@ -78,6 +79,7 @@ class CLIProxyManager {
// 当前展示的日志行
this.displayedLogLines = [];
this.maxDisplayLogLines = MAX_LOG_LINES;
this.logFetchLimit = LOG_FETCH_LIMIT;
// 日志时间戳(用于增量加载)
this.latestLogTimestamp = null;
@@ -221,6 +223,7 @@ class CLIProxyManager {
const cardText = card.textContent || '';
if (cardText.includes('Codex OAuth') ||
cardText.includes('Anthropic OAuth') ||
cardText.includes('Antigravity OAuth') ||
cardText.includes('Gemini CLI OAuth') ||
cardText.includes('Qwen OAuth') ||
cardText.includes('iFlow OAuth')) {
@@ -430,6 +433,21 @@ class CLIProxyManager {
anthropicCopyLink.addEventListener('click', () => this.copyAnthropicLink());
}
// Antigravity OAuth
const antigravityOauthBtn = document.getElementById('antigravity-oauth-btn');
const antigravityOpenLink = document.getElementById('antigravity-open-link');
const antigravityCopyLink = document.getElementById('antigravity-copy-link');
if (antigravityOauthBtn) {
antigravityOauthBtn.addEventListener('click', () => this.startAntigravityOAuth());
}
if (antigravityOpenLink) {
antigravityOpenLink.addEventListener('click', () => this.openAntigravityLink());
}
if (antigravityCopyLink) {
antigravityCopyLink.addEventListener('click', () => this.copyAntigravityLink());
}
// Gemini CLI OAuth
const geminiCliOauthBtn = document.getElementById('gemini-cli-oauth-btn');
const geminiCliOpenLink = document.getElementById('gemini-cli-open-link');
@@ -464,6 +482,7 @@ class CLIProxyManager {
const iflowOauthBtn = document.getElementById('iflow-oauth-btn');
const iflowOpenLink = document.getElementById('iflow-open-link');
const iflowCopyLink = document.getElementById('iflow-copy-link');
const iflowCookieSubmit = document.getElementById('iflow-cookie-submit');
if (iflowOauthBtn) {
iflowOauthBtn.addEventListener('click', () => this.startIflowOAuth());
@@ -474,6 +493,9 @@ class CLIProxyManager {
if (iflowCopyLink) {
iflowCopyLink.addEventListener('click', () => this.copyIflowLink());
}
if (iflowCookieSubmit) {
iflowCookieSubmit.addEventListener('click', () => this.submitIflowCookieLogin());
}
// 使用统计
const refreshUsageStats = document.getElementById('refresh-usage-stats');

54
i18n.js
View File

@@ -333,6 +333,19 @@ const i18n = {
'auth_login.anthropic_oauth_start_error': '启动 Anthropic OAuth 失败:',
'auth_login.anthropic_oauth_polling_error': '检查认证状态失败:',
// Antigravity OAuth
'auth_login.antigravity_oauth_title': 'Antigravity OAuth',
'auth_login.antigravity_oauth_button': '开始 Antigravity 登录',
'auth_login.antigravity_oauth_hint': '通过 OAuth 流程登录 AntigravityGoogle 账号)服务,自动获取并保存认证文件。',
'auth_login.antigravity_oauth_url_label': '授权链接:',
'auth_login.antigravity_open_link': '打开链接',
'auth_login.antigravity_copy_link': '复制链接',
'auth_login.antigravity_oauth_status_waiting': '等待认证中...',
'auth_login.antigravity_oauth_status_success': '认证成功!',
'auth_login.antigravity_oauth_status_error': '认证失败:',
'auth_login.antigravity_oauth_start_error': '启动 Antigravity OAuth 失败:',
'auth_login.antigravity_oauth_polling_error': '检查认证状态失败:',
// Gemini CLI OAuth
'auth_login.gemini_cli_oauth_title': 'Gemini CLI OAuth',
'auth_login.gemini_cli_oauth_button': '开始 Gemini CLI 登录',
@@ -375,6 +388,20 @@ const i18n = {
'auth_login.iflow_oauth_status_error': '认证失败:',
'auth_login.iflow_oauth_start_error': '启动 iFlow OAuth 失败:',
'auth_login.iflow_oauth_polling_error': '检查认证状态失败:',
'auth_login.iflow_cookie_title': 'iFlow Cookie 登录',
'auth_login.iflow_cookie_label': 'Cookie 内容:',
'auth_login.iflow_cookie_placeholder': '粘贴浏览器中的 Cookie例如 sessionid=...;',
'auth_login.iflow_cookie_hint': '直接提交 Cookie 以完成登录(无需打开授权链接),服务端将自动保存凭据。',
'auth_login.iflow_cookie_button': '提交 Cookie 登录',
'auth_login.iflow_cookie_status_success': 'Cookie 登录成功,凭据已保存。',
'auth_login.iflow_cookie_status_error': 'Cookie 登录失败:',
'auth_login.iflow_cookie_start_error': '提交 Cookie 登录失败:',
'auth_login.iflow_cookie_required': '请先填写 Cookie 内容',
'auth_login.iflow_cookie_result_title': 'Cookie 登录结果',
'auth_login.iflow_cookie_result_email': '账号',
'auth_login.iflow_cookie_result_expired': '过期时间',
'auth_login.iflow_cookie_result_path': '保存路径',
'auth_login.iflow_cookie_result_type': '类型',
// 使用统计
'usage_stats.title': '使用统计',
@@ -854,6 +881,19 @@ const i18n = {
'auth_login.anthropic_oauth_start_error': 'Failed to start Anthropic OAuth:',
'auth_login.anthropic_oauth_polling_error': 'Failed to check authentication status:',
// Antigravity OAuth
'auth_login.antigravity_oauth_title': 'Antigravity OAuth',
'auth_login.antigravity_oauth_button': 'Start Antigravity Login',
'auth_login.antigravity_oauth_hint': 'Login to Antigravity service (Google account) through OAuth flow, automatically obtain and save authentication files.',
'auth_login.antigravity_oauth_url_label': 'Authorization URL:',
'auth_login.antigravity_open_link': 'Open Link',
'auth_login.antigravity_copy_link': 'Copy Link',
'auth_login.antigravity_oauth_status_waiting': 'Waiting for authentication...',
'auth_login.antigravity_oauth_status_success': 'Authentication successful!',
'auth_login.antigravity_oauth_status_error': 'Authentication failed:',
'auth_login.antigravity_oauth_start_error': 'Failed to start Antigravity OAuth:',
'auth_login.antigravity_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',
@@ -896,6 +936,20 @@ const i18n = {
'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:',
'auth_login.iflow_cookie_title': 'iFlow Cookie Login',
'auth_login.iflow_cookie_label': 'Cookie Value:',
'auth_login.iflow_cookie_placeholder': 'Paste browser cookie, e.g. sessionid=...;',
'auth_login.iflow_cookie_hint': 'Submit an existing cookie to finish login without opening the authorization link; the credential file will be saved automatically.',
'auth_login.iflow_cookie_button': 'Submit Cookie Login',
'auth_login.iflow_cookie_status_success': 'Cookie login succeeded and credentials are saved.',
'auth_login.iflow_cookie_status_error': 'Cookie login failed:',
'auth_login.iflow_cookie_start_error': 'Failed to submit cookie login:',
'auth_login.iflow_cookie_required': 'Please provide the Cookie value first.',
'auth_login.iflow_cookie_result_title': 'Cookie Login Result',
'auth_login.iflow_cookie_result_email': 'Account',
'auth_login.iflow_cookie_result_expired': 'Expires At',
'auth_login.iflow_cookie_result_path': 'Saved Path',
'auth_login.iflow_cookie_result_type': 'Type',
// Usage Statistics
'usage_stats.title': 'Usage Statistics',

View File

@@ -628,6 +628,42 @@
</div>
</div>
<!-- Antigravity OAuth -->
<div class="card" id="antigravity-oauth-card">
<div class="card-header">
<h3><i class="fas fa-rocket"></i> <span
data-i18n="auth_login.antigravity_oauth_title">Antigravity OAuth</span></h3>
<button id="antigravity-oauth-btn" class="btn btn-primary">
<i class="fas fa-sign-in-alt"></i> <span
data-i18n="auth_login.antigravity_oauth_button">开始 Antigravity 登录</span>
</button>
</div>
<div class="card-content">
<p class="form-hint" style="margin-bottom: 20px;"
data-i18n="auth_login.antigravity_oauth_hint">
通过 OAuth 流程登录 AntigravityGoogle 账号)服务,自动获取并保存认证文件。
</p>
<div id="antigravity-oauth-content" style="display: none;">
<div class="form-group">
<label data-i18n="auth_login.antigravity_oauth_url_label">授权链接:</label>
<div class="input-group">
<input type="text" id="antigravity-oauth-url" readonly>
<button id="antigravity-open-link" class="btn btn-primary">
<i class="fas fa-external-link-alt"></i> <span
data-i18n="auth_login.antigravity_open_link">打开链接</span>
</button>
<button id="antigravity-copy-link" class="btn btn-secondary">
<i class="fas fa-copy"></i> <span
data-i18n="auth_login.antigravity_copy_link">复制链接</span>
</button>
</div>
</div>
<div id="antigravity-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">
@@ -742,6 +778,34 @@
<div id="iflow-oauth-status" class="form-hint" style="margin-top: 10px;"></div>
</div>
</div>
<div class="card-content" style="border-top: 1px solid var(--border-color); margin-top: 16px; padding-top: 16px;">
<h4 style="margin-bottom: 10px;" data-i18n="auth_login.iflow_cookie_title">iFlow Cookie 登录</h4>
<p class="form-hint" data-i18n="auth_login.iflow_cookie_hint">
直接提交 Cookie 完成登录并保存凭据,无需打开授权链接。
</p>
<div class="form-group">
<label for="iflow-cookie-input" data-i18n="auth_login.iflow_cookie_label">Cookie 内容:</label>
<textarea id="iflow-cookie-input" rows="3" data-i18n-placeholder="auth_login.iflow_cookie_placeholder" placeholder="粘贴浏览器中的 Cookie"></textarea>
</div>
<div class="form-actions">
<button id="iflow-cookie-submit" class="btn btn-primary">
<i class="fas fa-cookie-bite"></i> <span data-i18n="auth_login.iflow_cookie_button">提交 Cookie 登录</span>
</button>
</div>
<div id="iflow-cookie-status" class="form-hint" style="margin-top: 10px;"></div>
<div id="iflow-cookie-result" class="vertex-import-result" style="display: none;">
<div class="vertex-import-result-header">
<i class="fas fa-check-circle"></i>
<span data-i18n="auth_login.iflow_cookie_result_title">Cookie 登录结果</span>
</div>
<ul>
<li><span data-i18n="auth_login.iflow_cookie_result_email">账号</span>: <code id="iflow-cookie-result-email">-</code></li>
<li><span data-i18n="auth_login.iflow_cookie_result_expired">过期时间</span>: <code id="iflow-cookie-result-expired">-</code></li>
<li><span data-i18n="auth_login.iflow_cookie_result_path">保存路径</span>: <code id="iflow-cookie-result-path">-</code></li>
<li><span data-i18n="auth_login.iflow_cookie_result_type">类型</span>: <code id="iflow-cookie-result-type">-</code></li>
</ul>
</div>
</div>
</div>
</section>

View File

@@ -20,8 +20,20 @@ export const logsModule = {
}
let url = '/logs';
const params = new URLSearchParams();
if (incremental && this.latestLogTimestamp) {
url += `?after=${this.latestLogTimestamp}`;
params.set('after', this.latestLogTimestamp);
}
const logFetchLimit = Number.isFinite(this.logFetchLimit) ? this.logFetchLimit : 2500;
if (logFetchLimit > 0) {
params.set('limit', logFetchLimit);
}
const queryString = params.toString();
if (queryString) {
url += `?${queryString}`;
}
const response = await this.makeRequest(url, {

View File

@@ -300,6 +300,135 @@ export const oauthModule = {
}
},
// ===== Antigravity OAuth 相关方法 =====
// 开始 Antigravity OAuth 流程
async startAntigravityOAuth() {
try {
const response = await this.makeRequest('/antigravity-auth-url?is_webui=1');
const authUrl = response.url;
const state = response.state || this.extractStateFromUrl(authUrl);
// 显示授权链接
const urlInput = document.getElementById('antigravity-oauth-url');
const content = document.getElementById('antigravity-oauth-content');
const status = document.getElementById('antigravity-oauth-status');
if (urlInput) {
urlInput.value = authUrl;
}
if (content) {
content.style.display = 'block';
}
if (status) {
status.textContent = i18n.t('auth_login.antigravity_oauth_status_waiting');
status.style.color = 'var(--warning-text)';
}
// 开始轮询认证状态
this.startAntigravityOAuthPolling(state);
} catch (error) {
this.showNotification(`${i18n.t('auth_login.antigravity_oauth_start_error')} ${error.message}`, 'error');
}
},
// 打开 Antigravity 授权链接
openAntigravityLink() {
const urlInput = document.getElementById('antigravity-oauth-url');
if (urlInput && urlInput.value) {
window.open(urlInput.value, '_blank');
}
},
// 复制 Antigravity 授权链接
async copyAntigravityLink() {
const urlInput = document.getElementById('antigravity-oauth-url');
if (urlInput && urlInput.value) {
try {
await navigator.clipboard.writeText(urlInput.value);
this.showNotification(i18n.t('notification.link_copied'), 'success');
} catch (error) {
urlInput.select();
document.execCommand('copy');
this.showNotification(i18n.t('notification.link_copied'), 'success');
}
}
},
// 开始轮询 Antigravity OAuth 状态
startAntigravityOAuthPolling(state) {
if (!state) {
this.showNotification(i18n.t('auth_login.missing_state'), 'error');
return;
}
const pollInterval = setInterval(async () => {
try {
const response = await this.makeRequest(`/get-auth-status?state=${encodeURIComponent(state)}`);
const status = response.status;
const statusElement = document.getElementById('antigravity-oauth-status');
if (status === 'ok') {
clearInterval(pollInterval);
this.resetAntigravityOAuthUI();
this.showNotification(i18n.t('auth_login.antigravity_oauth_status_success'), 'success');
this.loadAuthFiles();
} else if (status === 'error') {
clearInterval(pollInterval);
const errorMessage = response.error || 'Unknown error';
if (statusElement) {
statusElement.textContent = `${i18n.t('auth_login.antigravity_oauth_status_error')} ${errorMessage}`;
statusElement.style.color = 'var(--error-text)';
}
this.showNotification(`${i18n.t('auth_login.antigravity_oauth_status_error')} ${errorMessage}`, 'error');
setTimeout(() => {
this.resetAntigravityOAuthUI();
}, 3000);
} else if (status === 'wait') {
if (statusElement) {
statusElement.textContent = i18n.t('auth_login.antigravity_oauth_status_waiting');
statusElement.style.color = 'var(--warning-text)';
}
}
} catch (error) {
clearInterval(pollInterval);
const statusElement = document.getElementById('antigravity-oauth-status');
if (statusElement) {
statusElement.textContent = `${i18n.t('auth_login.antigravity_oauth_polling_error')} ${error.message}`;
statusElement.style.color = 'var(--error-text)';
}
this.showNotification(`${i18n.t('auth_login.antigravity_oauth_polling_error')} ${error.message}`, 'error');
setTimeout(() => {
this.resetAntigravityOAuthUI();
}, 3000);
}
}, 2000);
setTimeout(() => {
clearInterval(pollInterval);
}, 5 * 60 * 1000);
},
// 重置 Antigravity OAuth UI 到初始状态
resetAntigravityOAuthUI() {
const urlInput = document.getElementById('antigravity-oauth-url');
const content = document.getElementById('antigravity-oauth-content');
const status = document.getElementById('antigravity-oauth-status');
if (urlInput) {
urlInput.value = '';
}
if (content) {
content.style.display = 'none';
}
if (status) {
status.textContent = '';
status.style.color = '';
status.className = '';
}
},
// ===== Gemini CLI OAuth 相关方法 =====
// 开始 Gemini CLI OAuth 流程
@@ -733,6 +862,88 @@ export const oauthModule = {
status.style.color = '';
status.className = '';
}
},
// 提交 iFlow Cookie 登录
async submitIflowCookieLogin() {
const cookieInput = document.getElementById('iflow-cookie-input');
const statusEl = document.getElementById('iflow-cookie-status');
const submitBtn = document.getElementById('iflow-cookie-submit');
const cookieValue = cookieInput ? cookieInput.value.trim() : '';
this.renderIflowCookieResult(null);
if (!cookieValue) {
this.showNotification(i18n.t('auth_login.iflow_cookie_required'), 'error');
if (statusEl) {
statusEl.textContent = `${i18n.t('auth_login.iflow_cookie_status_error')} ${i18n.t('auth_login.iflow_cookie_required')}`;
statusEl.style.color = 'var(--error-text)';
}
return;
}
try {
if (submitBtn) {
submitBtn.disabled = true;
}
if (statusEl) {
statusEl.textContent = i18n.t('auth_login.iflow_oauth_status_waiting');
statusEl.style.color = 'var(--warning-text)';
}
const response = await this.makeRequest('/iflow-auth-url', {
method: 'POST',
body: JSON.stringify({ cookie: cookieValue })
});
this.renderIflowCookieResult(response);
if (statusEl) {
statusEl.textContent = i18n.t('auth_login.iflow_cookie_status_success');
statusEl.style.color = 'var(--success-text)';
}
if (cookieInput) {
cookieInput.value = '';
}
this.showNotification(i18n.t('auth_login.iflow_cookie_status_success'), 'success');
this.loadAuthFiles();
} catch (error) {
if (statusEl) {
statusEl.textContent = `${i18n.t('auth_login.iflow_cookie_status_error')} ${error.message}`;
statusEl.style.color = 'var(--error-text)';
}
this.showNotification(`${i18n.t('auth_login.iflow_cookie_start_error')} ${error.message}`, 'error');
} finally {
if (submitBtn) {
submitBtn.disabled = false;
}
}
},
renderIflowCookieResult(result = null) {
const container = document.getElementById('iflow-cookie-result');
const emailEl = document.getElementById('iflow-cookie-result-email');
const expiredEl = document.getElementById('iflow-cookie-result-expired');
const pathEl = document.getElementById('iflow-cookie-result-path');
const typeEl = document.getElementById('iflow-cookie-result-type');
if (!container || !emailEl || !expiredEl || !pathEl || !typeEl) {
return;
}
if (!result) {
container.style.display = 'none';
emailEl.textContent = '-';
expiredEl.textContent = '-';
pathEl.textContent = '-';
typeEl.textContent = '-';
return;
}
emailEl.textContent = result.email || '-';
expiredEl.textContent = result.expired || '-';
pathEl.textContent = result.saved_path || result.savedPath || result.path || '-';
typeEl.textContent = result.type || '-';
container.style.display = 'block';
}
};

View File

@@ -53,6 +53,12 @@ export const OAUTH_MAX_POLL_DURATION_MS = 5 * 60 * 1000;
*/
export const MAX_LOG_LINES = 2000;
/**
* 日志接口获取数量上限
* 限制后端返回的日志行数,避免一次拉取过多数据
*/
export const LOG_FETCH_LIMIT = 2500;
/**
* 认证文件列表默认每页显示数量
*/
@@ -109,6 +115,7 @@ export const REQUEST_TIMEOUT_MS = 30 * 1000;
export const OAUTH_CARD_IDS = [
'codex-oauth-card',
'anthropic-oauth-card',
'antigravity-oauth-card',
'gemini-cli-oauth-card',
'qwen-oauth-card',
'iflow-oauth-card'
@@ -120,6 +127,7 @@ export const OAUTH_CARD_IDS = [
export const OAUTH_PROVIDERS = {
CODEX: 'codex',
ANTHROPIC: 'anthropic',
ANTIGRAVITY: 'antigravity',
GEMINI_CLI: 'gemini-cli',
QWEN: 'qwen',
IFLOW: 'iflow'

View File

@@ -1548,7 +1548,8 @@ input:checked+.slider:before {
/* 列表样式 */
.key-list {
max-height: 400px;
/* 便于一次展示 6 条密钥记录(约 6*80px 高度) */
max-height: 520px;
overflow-y: auto;
}
@@ -1563,6 +1564,7 @@ input:checked+.slider:before {
.key-table-row {
display: grid;
grid-template-columns: 72px 1fr auto;
column-gap: 14px;
align-items: center;
background: var(--bg-quaternary);
border: 1px solid var(--border-primary);
@@ -1583,14 +1585,15 @@ input:checked+.slider:before {
justify-content: center;
height: 32px;
min-width: 52px;
padding: 0 10px;
padding: 0 12px;
border-radius: 10px;
background: var(--bg-secondary);
color: var(--primary-color);
font-weight: 700;
font-size: 14px;
border: 1px solid var(--border-primary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
letter-spacing: 0.2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.key-table-value {
@@ -1598,6 +1601,7 @@ input:checked+.slider:before {
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 2px 0;
}
.key-table .item-title {
@@ -1608,8 +1612,9 @@ input:checked+.slider:before {
.key-value {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 8px;
padding: 7px 10px;
padding: 8px 12px;
font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
font-size: 13px;
color: var(--text-primary);
@@ -1625,6 +1630,7 @@ input:checked+.slider:before {
transform: none;
gap: 6px;
justify-content: flex-end;
justify-self: end;
}
.item-actions.compact .btn {
@@ -1647,7 +1653,7 @@ input:checked+.slider:before {
@media (max-width: 768px) {
.key-table-row {
grid-template-columns: 1fr;
row-gap: 10px;
row-gap: 8px;
}
.item-actions.compact {