实现请求和Token使用趋势图表，更新API详细统计表格，优化侧边栏样式，增强移动端体验，修复若干UI问题。

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,14 +43,33 @@ 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
 
-### 1. Direct Use (Recommended)
+### 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`.
+
+### 2. Direct Use
 Simply open the `index.html` file directly in your browser to use it.
 
-### 2. Use a Local Server
+### 3. Use a Local Server
+
+#### Option A: Using Node.js (npm)
 ```bash
 # Install dependencies
 npm install
@@ -56,10 +78,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 +102,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 +119,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
+- **Frontend**: Plain HTML, CSS, JavaScript (ES6+)
-- **Styling**: CSS3 + Flexbox/Grid
+- **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 +177,20 @@ npm start
 ### File Structure
 ```
 webui/
-├── index.html      # Main page
+├── index.html          # Main page with responsive layout
-├── styles.css      # Stylesheet
+├── styles.css          # Stylesheet with theme support
-├── app.js          # Application logic
+├── app.js              # Application logic and API management
-├── package.json    # Project configuration
+├── i18n.js             # Internationalization support (EN/CN)
-├── i18n.js         # Internationalization support
+├── package.json        # Project configuration
-└── README.md       # README document
+├── 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

README_CN.md

@@ -1,14 +1,15 @@
 # Cli-Proxy-API-Management-Center
 这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
+
 主项目
 https://github.com/router-for-me/CLIProxyAPI
 
 示例网站:
 https://remote.router-for.me/
 
-最低可用版本 ≥ 5.0.0
+最低可用版本 ≥ 6.0.0
-推荐版本 ≥ 5.2.6
+推荐版本 ≥ 6.0.19
-自6.0.19起WebUI已经集成在主程序中 可以通过/management.html访问
+自6.0.19起WebUI已经集成在主程序中 可以通过主项目开启的外部端口的`/management.html`访问
 
 ## 功能特点
 
@@ -16,13 +17,16 @@ https://remote.router-for.me/
 - 支持管理密钥认证
 - 可配置 API 基础地址
 - 实时连接状态检测
+- 自动登录保存的凭据
+- 语言和主题切换
 
 ### 基础设置
 - **调试模式**: 开启/关闭调试功能
 - **代理设置**: 配置代理服务器 URL
 - **请求重试**: 设置请求重试次数
 - **配额管理**: 配置超出配额时的行为
-- **本地访问**: 管理本地未认证访问
+  - 超出配额时自动切换项目
+  - 超出配额时切换到预览模型
 
 ### API 密钥管理
 - **代理服务认证密钥**: 管理用于代理服务的 API 密钥
@@ -36,14 +40,33 @@ https://remote.router-for.me/
 - 下载现有认证文件
 - 删除单个或所有认证文件
 - 显示文件详细信息
+- **Gemini Web Token**: 使用浏览器 Cookie 直接认证
+
+### 使用统计
+- **实时分析**: 通过交互式图表跟踪 API 使用情况
+- **请求趋势**: 按小时/天可视化请求模式
+- **Token 使用**: 监控 Token 消耗随时间变化
+- **API 详情**: 每个 API 端点的详细统计
+- **成功率/失败率**: 跟踪 API 可靠性指标
+
+### 系统信息
+- **连接状态**: 实时连接监控
+- **配置状态**: 跟踪配置加载状态
+- **服务器信息**: 显示服务器地址和管理密钥
+- **最后更新**: 显示数据最后刷新时间
 
 
 ## 使用方法
 
-### 1. 直接使用（推荐）
+### 1. 在CLI Proxy API程序启动后使用 （推荐）
+在启动了CLI Proxy API程序后 访问`http://您的服务器IP:8317/management.html`使用
+
+### 2. 直接使用
 直接用浏览器打开 `index.html` 文件即可使用。
 
-### 2. 使用本地服务器
+### 3. 使用本地服务器
+
+#### 方法A：使用 Node.js (npm)
 ```bash
 # 安装依赖
 npm install
@@ -52,10 +75,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 +99,16 @@ npm start
 - **API 密钥**: 各种 API 服务的密钥管理
 - **AI 提供商**: AI 服务提供商配置
 - **认证文件**: 认证文件的上传下载管理
+- **使用统计**: 实时分析和使用统计，包含交互式图表
 - **系统信息**: 连接状态和系统信息
 
+### 登录界面
+- **自动连接**: 使用保存的凭据自动尝试连接
+- **自定义连接**: 手动配置 API 基础地址
+- **当前地址检测**: 自动检测并使用当前访问地址
+- **语言切换**: 支持多种语言（英文/中文）
+- **主题切换**: 支持明暗主题
+
 ## 特性亮点
 
 ### 现代化 UI
@@ -76,27 +116,45 @@ npm start
 - 美观的渐变色彩和阴影效果
 - 流畅的动画和过渡效果
 - 直观的图标和状态指示
+- 明暗主题支持，自动检测系统偏好
+- 移动端友好的侧边栏和遮罩
 
 ### 实时更新
 - 配置更改立即生效
 - 实时状态反馈
 - 自动数据刷新
+- 实时使用统计和交互式图表
+- 实时连接状态监控
 
 ### 安全特性
 - 密钥遮蔽显示
+- 安全凭据存储
+- 加密本地存储自动登录
 
 ### 响应式设计
 - 完美适配桌面和移动设备
-- 自适应布局
+- 自适应布局，可折叠侧边栏
 - 触摸友好的交互
+- 移动端菜单和遮罩
+
+### 分析与监控
+- Chart.js 驱动的交互式图表
+- 实时使用统计
+- 请求趋势可视化
+- Token 消耗跟踪
+- API 性能指标
 
 ## 技术栈
 
-- **前端**: 纯 HTML、CSS、JavaScript
+- **前端**: 纯 HTML、CSS、JavaScript (ES6+)
-- **样式**: CSS3 + Flexbox/Grid
+- **样式**: CSS3 + Flexbox/Grid，支持 CSS 变量
 - **图标**: Font Awesome 6.4.0
+- **图表**: Chart.js 交互式数据可视化
 - **字体**: Segoe UI 系统字体
-- **API**: RESTful API 调用
+- **API**: RESTful API 调用，自动认证
+- **国际化**: 自定义 i18n 系统，支持中英文
+- **主题系统**: CSS 自定义属性动态主题
+- **存储**: LocalStorage 用户偏好和凭据存储
 
 ## 故障排除
 
@@ -116,12 +174,20 @@ npm start
 ### 文件结构
 ```
 webui/
-├── index.html      # 主页面
+├── index.html          # 主页面，响应式布局
-├── styles.css      # 样式文件
+├── styles.css          # 样式文件，支持主题
-├── app.js          # 应用逻辑
+├── app.js              # 应用逻辑和 API 管理
-├── package.json    # 项目配置
+├── i18n.js             # 国际化支持（中英文）
-├── i18n.js         # 国际化支持
+├── package.json        # 项目配置
-└── README.md       # 说明文档
+├── build.js            # 生产环境构建脚本
+├── bundle-entry.js     # 打包入口文件
+├── build-scripts/      # 构建工具
+│   └── prepare-html.js # HTML 准备脚本
+├── logo.jpg            # 应用图标
+├── LICENSE             # MIT 许可证
+├── README.md           # 英文文档
+├── README_CN.md        # 中文文档
+└── BUILD_RELEASE.md    # 构建和发布说明
 ```
 
 ### API 调用

styles.css

@@ -7,6 +7,9 @@
 
 /* CSS变量主题系统 */
 :root {
+    /* 布局尺寸 */
+    --navbar-height: 69px;
+    
     /* 亮色主题（默认） */
     --bg-primary: #f5f7fa;
     --bg-secondary: #ffffff;
@@ -605,30 +608,92 @@ body {
     overflow-x: hidden;
 }
 
-.container {
+/* 侧边栏样式 */
-    display: flex;
+.layout {
-    min-height: 100vh;
+    display: grid;
-    position: relative;
+    grid-template-columns: 240px 1fr;
+    min-height: calc(100vh - var(--navbar-height, 69px));
+    width: 100%;
+    transition: grid-template-columns 0.3s ease;
+}
+
+.layout.sidebar-collapsed {
+    grid-template-columns: 64px 1fr;
 }
 
-/* 侧边栏样式 */
 .sidebar {
     width: 240px;
     background: var(--sidebar-bg);
     border-right: 1px solid var(--sidebar-border);
-    height: 100vh;
+    height: calc(100vh - var(--navbar-height, 69px));
-    position: fixed;
+    position: sticky;
-    left: 0;
+    top: var(--navbar-height, 69px);
-    top: 0;
     overflow-y: auto;
     overflow-x: hidden;
     display: flex;
     flex-direction: column;
-    z-index: 100;
+    z-index: 5;
     box-shadow: var(--shadow-sm);
     transition: all 0.3s ease;
 }
 
+.sidebar.collapsed {
+    width: 64px;
+}
+
+.sidebar.collapsed .nav-item span {
+    opacity: 0;
+    width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.sidebar.collapsed .nav-item {
+    justify-content: center;
+    padding: 10px 0;
+}
+
+.sidebar.collapsed .nav-item i {
+    margin-right: 0;
+}
+
+/* 侧边栏切换按钮（桌面端-在顶栏） */
+.sidebar-toggle-btn-desktop {
+    display: none;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    border-radius: 8px;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    transition: all 0.2s ease;
+    padding: 0;
+}
+
+.sidebar-toggle-btn-desktop:hover {
+    background: var(--bg-tertiary);
+    color: var(--primary-color);
+}
+
+.sidebar-toggle-btn-desktop i {
+    transition: transform 0.3s ease;
+}
+
+.layout.sidebar-collapsed .sidebar-toggle-btn-desktop i {
+    transform: rotate(90deg);
+}
+
+/* 在大屏幕上显示桌面端切换按钮 */
+@media (min-width: 1025px) {
+    .sidebar-toggle-btn-desktop {
+        display: flex;
+    }
+}
+
 /* 侧边栏品牌区域 */
 .sidebar-brand {
     padding: 24px 20px;
@@ -662,6 +727,7 @@ body {
 
 .sidebar .nav-menu li {
     margin-bottom: 4px;
+    position: relative;
 }
 
 .sidebar .nav-item {
@@ -675,6 +741,7 @@ body {
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
+    position: relative;
 }
 
 .sidebar .nav-item:hover {
@@ -692,16 +759,43 @@ body {
     width: 18px;
     font-size: 16px;
     text-align: center;
+    transition: margin 0.3s ease;
+}
+
+/* 收起状态时的工具提示 */
+.sidebar.collapsed .nav-menu li:hover::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 68px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border-primary);
+    z-index: 1000;
+    pointer-events: none;
+    opacity: 0;
+    animation: tooltipFadeIn 0.2s ease forwards;
+}
+
+@keyframes tooltipFadeIn {
+    to {
+        opacity: 1;
+    }
 }
 
 /* 主内容区域包装器 */
 .main-wrapper {
-    margin-left: 240px;
-    min-height: 100vh;
-    width: calc(100% - 240px);
     display: flex;
     flex-direction: column;
     background: var(--bg-primary);
+    min-height: 100%;
 }
 
 /* 顶部导航栏 */
@@ -714,27 +808,47 @@ body {
     align-items: center;
     position: sticky;
     top: 0;
-    z-index: 90;
+    z-index: 200;
     box-shadow: var(--shadow-sm);
+    height: var(--navbar-height, 69px);
+    min-height: var(--navbar-height, 69px);
+    box-sizing: border-box;
 }
 
 .top-navbar-left {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 12px;
+    flex: 1;
 }
 
-.top-navbar-title {
+.top-navbar-brand {
-    font-size: 20px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    max-width: max-content;
+}
+
+.top-navbar-brand-logo {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+    border-radius: 8px;
+}
+
+.top-navbar-brand-text {
+    font-size: 18px;
     font-weight: 600;
     color: var(--text-primary);
-    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .top-navbar-actions {
     display: flex;
     align-items: center;
     gap: 10px;
+    margin-left: auto;
 }
 
 .top-navbar-actions > * {
@@ -1476,17 +1590,54 @@ input:checked + .slider:before {
 
 /* 响应式设计 */
 @media (max-width: 1024px) {
-    .sidebar {
+    .layout {
-        transform: translateX(-100%);
+        position: relative;
+        grid-template-columns: 1fr;
+        min-height: calc(100vh - var(--navbar-height, 69px));
     }
-    
+
+    .sidebar {
+        position: fixed;
+        left: 0;
+        top: var(--navbar-height, 69px);
+        height: calc(100vh - var(--navbar-height, 69px));
+        transform: translateX(-100%);
+        z-index: 150;
+        box-shadow: var(--shadow-sm);
+        background: var(--sidebar-bg);
+        width: 240px !important;
+    }
+
     .sidebar.mobile-open {
         transform: translateX(0);
+        box-shadow: var(--shadow-secondary);
+    }
+    
+    /* 移动端强制恢复侧栏展开状态 */
+    .sidebar.collapsed {
+        width: 240px !important;
+    }
+    
+    .sidebar.collapsed .nav-item span {
+        opacity: 1 !important;
+        width: auto !important;
+        overflow: visible !important;
+    }
+    
+    .sidebar.collapsed .nav-item {
+        justify-content: flex-start !important;
+        padding: 10px 14px !important;
+    }
+    
+    .sidebar.collapsed .nav-item i {
+        margin-right: 12px !important;
     }
     
     .main-wrapper {
         margin-left: 0;
         width: 100%;
+        min-height: calc(100vh - var(--navbar-height, 69px));
+        overflow: hidden;
     }
     
     .main-content {
@@ -1605,29 +1756,38 @@ input:checked + .slider:before {
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
-    z-index: 99;
+    z-index: 120;
 }
 
-@media (max-width: 1024px) {
+.sidebar-overlay.active {
-    .sidebar-overlay.active {
+    display: block;
-        display: block;
-    }
 }
 
 /* 移动端菜单按钮 */
 .mobile-menu-btn {
     display: none;
-    background: none;
+    width: 40px;
+    height: 40px;
+    background: transparent;
     border: none;
-    padding: 8px;
+    padding: 0;
     cursor: pointer;
     color: var(--text-primary);
     font-size: 20px;
+    border-radius: 8px;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.mobile-menu-btn:hover {
+    background: var(--bg-tertiary);
+    color: var(--primary-color);
 }
 
 @media (max-width: 1024px) {
     .mobile-menu-btn {
-        display: block;
+        display: flex;
     }
 }