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

添加代理 URL 支持，更新 API 配置模态框，增强 XSS 防护，优化界面样式，修复若干 UI 问题，版本更新至 0.0.6

.github/workflows/release.yml

@@ -0,0 +1,61 @@
+name: Build and Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  build-and-release:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build all-in-one HTML
+        run: npm run build
+
+      - name: Prepare release assets
+        run: |
+          cd dist
+          mv index.html management.html
+          ls -lh management.html
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: dist/management.html
+          body: |
+            ## CLI Proxy API Management Center - ${{ github.ref_name }}
+
+            ### Download and Usage
+            1. Download the `management.html` file
+            2. Open it directly in your browser
+            3. All assets (CSS, JavaScript, images) are bundled into this single file
+
+            ### Features
+            - Single file, no external dependencies required
+            - Complete management interface for CLI Proxy API
+            - Support for local and remote connections
+            - Multi-language support (Chinese/English)
+            - Dark/Light theme support
+
+            ---
+            🤖 Generated with GitHub Actions
+          draft: false
+          prerelease: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,22 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+
+# Temporary build files
+index.build.html
+
+# npm lock files
+package-lock.json
+
+# IDE and editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS files
+.DS_Store
+Thumbs.db

BUILD_RELEASE.md

@@ -0,0 +1,69 @@
+# Build and Release Instructions
+
+## Overview
+
+This project uses webpack to bundle all HTML, CSS, JavaScript, and images into a single all-in-one HTML file. The GitHub workflow automatically builds and releases this file when you create a new tag.
+
+## How to Create a Release
+
+1. Make sure all your changes are committed
+2. Create and push a new tag:
+   ```bash
+   git tag v1.0.0
+   git push origin v1.0.0
+   ```
+3. The GitHub workflow will automatically:
+   - Install dependencies
+   - Build the all-in-one HTML file using webpack
+   - Create a new release with the tag
+   - Upload the bundled HTML file to the release
+
+## Manual Build
+
+To build locally:
+
+```bash
+# Install dependencies
+npm install
+
+# Build the all-in-one HTML file
+npm run build
+```
+
+The output will be in the `dist/` directory as `index.html`.
+
+## How It Works
+
+1. **build-scripts/prepare-html.js**: Pre-build script
+   - Reads the original `index.html`
+   - Removes local CSS and JavaScript references
+   - Generates temporary `index.build.html` for webpack
+
+2. **webpack.config.js**: Configures webpack to bundle all assets
+   - Uses `style-loader` to inline CSS
+   - Uses `asset/inline` to embed images as base64
+   - Uses `html-inline-script-webpack-plugin` to inline JavaScript
+   - Uses `index.build.html` as template (generated dynamically)
+
+3. **bundle-entry.js**: Entry point that imports all resources
+   - Imports CSS files
+   - Imports JavaScript modules
+   - Imports and sets logo image
+
+4. **package.json scripts**:
+   - `prebuild`: Automatically runs before build to generate `index.build.html`
+   - `build`: Runs webpack to bundle everything
+   - `postbuild`: Cleans up temporary `index.build.html` file
+
+5. **.github/workflows/release.yml**: GitHub workflow
+   - Triggers on tag push
+   - Builds the project (prebuild → build → postbuild)
+   - Creates a release with the bundled HTML file
+
+## External Dependencies
+
+The bundled HTML file still relies on these CDN resources:
+- Font Awesome (icons)
+- Chart.js (charts and graphs)
+
+These are loaded from CDN to keep the file size reasonable and leverage browser caching.

README.md

@@ -1,145 +1,210 @@
 # Cli-Proxy-API-Management-Center
-这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
+This is a modern web interface for managing the CLI Proxy API.
 
-## 功能特点
+[中文文档](README_CN.md)
 
-### 认证管理
-- 支持管理密钥认证
-- 可配置 API 基础地址
-- 实时连接状态检测
+Main Project:
+https://github.com/router-for-me/CLIProxyAPI
 
-### 基础设置
-- **调试模式**: 开启/关闭调试功能
-- **代理设置**: 配置代理服务器 URL
-- **请求重试**: 设置请求重试次数
-- **配额管理**: 配置超出配额时的行为
-- **本地访问**: 允许本地未认证访问
+Example URL:
+https://remote.router-for.me/
 
-### API 密钥管理
-- **代理服务认证密钥**: 管理用于代理服务的 API 密钥
-- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥
-- **Codex API**: 管理 OpenAI Codex API 配置
-- **Claude API**: 管理 Anthropic Claude API 配置
-- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商
+Minimum required version: ≥ 6.0.0
+Recommended version: ≥ 6.0.19
 
-### 认证文件管理
-- 上传认证 JSON 文件
-- 下载现有认证文件
-- 删除单个或所有认证文件
-- 显示文件详细信息
+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.
 
-### 系统监控
-- 实时 API 连接状态
-- 最后更新时间跟踪
-- 详细的错误信息提示
+## 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
 
-### 1. 直接使用（推荐）
-直接用浏览器打开 `index.html` 文件即可使用。
+### 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
 
-### 2. 使用本地服务器
+### 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
+- **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. 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.
+
+### 3. Use a Local Server
+
+#### Option A: Using Node.js (npm)
 ```bash
-# 安装依赖
+# Install dependencies
 npm install
 
-# 使用默认端口(3000）
+# Start the server on the default port (3000)
 npm start
 ```
 
-### 3. 配置 API 连接
-1. 打开管理界面
-2. 在认证配置区域输入：
-   - **API 地址**: `http://localhost:8317`/v0/management将会自动为您补全
-   - **管理密钥**: 您的管理密钥
-3. 点击"测试连接"按钮
-4. 连接成功后即可使用所有功能
+#### Option B: Using Python
+```bash
+# Python 3.x
+python -m http.server 8000
 
-## 界面说明
+```
 
-### 导航菜单
-- **基础设置**: 调试、代理、重试等基本配置
-- **API 密钥**: 各种 API 服务的密钥管理
-- **AI 提供商**: AI 服务提供商配置
-- **认证文件**: 认证文件的上传下载管理
-- **系统信息**: 连接状态和系统信息
+Then open `http://localhost:8000` in your browser.
 
-### 操作按钮
-- **刷新全部**: 重新加载所有配置数据
-- **连接状态**: 检查 API 连接状态
-- **添加**: 添加新的配置项
-- **编辑**: 编辑现有配置
-- **删除**: 删除配置项
+### 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
 
-### 现代化 UI
-- 响应式设计，支持各种屏幕尺寸
-- 美观的渐变色彩和阴影效果
-- 流畅的动画和过渡效果
-- 直观的图标和状态指示
+### 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
 
-- **前端**: 纯 HTML、CSS、JavaScript
-- **样式**: CSS3 + Flexbox/Grid
-- **图标**: Font Awesome 6.4.0
-- **字体**: Segoe UI 系统字体
-- **API**: RESTful API 调用
+### 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
 
-### 连接问题
-1. 确认 CLI Proxy API 服务正在运行
-2. 检查 API 地址是否正确
-3. 验证管理密钥是否有效
-4. 确认防火墙设置允许连接
+### Analytics & Monitoring
+- Interactive charts powered by Chart.js
+- Real-time usage statistics
+- Request trend visualization
+- Token consumption tracking
+- API performance metrics
 
-### 数据不更新
-1. 点击"刷新全部"按钮
-2. 检查网络连接
-3. 查看浏览器控制台错误信息
+## Tech Stack
 
-## 开发说明
+- **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 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
+
+### Connection Issues
+1. Confirm that the CLI Proxy API service is running.
+2. Check if the API address is correct.
+3. Verify that the management key is valid.
+4. Ensure your firewall settings allow the connection.
+
+### Data Not Updating
+1. Click the "Refresh All" button.
+2. Check your network connection.
+3. Check the browser's console for any error messages.
+
+## Development Information
+
+### File Structure
 ```
 webui/
-├── index.html      # 主页面
-├── styles.css      # 样式文件
-├── app.js          # 应用逻辑
-├── package.json    # 项目配置
-└── README.md       # 说明文档
+├── 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 调用
-所有 API 调用都通过 `CLIProxyManager` 类的 `makeRequest` 方法处理，包含：
-- 自动添加认证头
-- 错误处理
-- JSON 响应解析
+### 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
 
-### 状态管理
-- 本地存储保存 API 地址和密钥
-- 内存中维护连接状态
-- 实时数据刷新机制
+### 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!
 
-MIT License
-
-## 贡献
-
-欢迎提交 Issue 和 Pull Request 来改进这个项目！
+This project is licensed under the MIT License.

README_CN.md

@@ -0,0 +1,207 @@
+# Cli-Proxy-API-Management-Center
+这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
+
+主项目
+https://github.com/router-for-me/CLIProxyAPI
+
+示例网站:
+https://remote.router-for.me/
+
+最低可用版本 ≥ 6.0.0
+推荐版本 ≥ 6.0.19
+自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 文件
+- 下载现有认证文件
+- 删除单个或所有认证文件
+- 显示文件详细信息
+- **Gemini Web Token**: 使用浏览器 Cookie 直接认证
+
+### 使用统计
+- **实时分析**: 通过交互式图表跟踪 API 使用情况
+- **请求趋势**: 按小时/天可视化请求模式
+- **Token 使用**: 监控 Token 消耗随时间变化
+- **API 详情**: 每个 API 端点的详细统计
+- **成功率/失败率**: 跟踪 API 可靠性指标
+
+### 系统信息
+- **连接状态**: 实时连接监控
+- **配置状态**: 跟踪配置加载状态
+- **服务器信息**: 显示服务器地址和管理密钥
+- **最后更新**: 显示数据最后刷新时间
+
+
+## 使用方法
+
+### 1. 在CLI Proxy API程序启动后使用 （推荐）
+在启动了CLI Proxy API程序后 访问`http://您的服务器IP:8317/management.html`使用
+
+### 2. 直接使用
+直接用浏览器打开 `index.html` 文件即可使用。
+
+### 3. 使用本地服务器
+
+#### 方法A：使用 Node.js (npm)
+```bash
+# 安装依赖
+npm install
+
+# 使用默认端口(3000）
+npm start
+```
+
+#### 方法B：使用 Python
+```bash
+# Python 3.x
+python -m http.server 8000
+
+```
+
+然后在浏览器中打开 `http://localhost:8000`。
+
+### 3. 配置连接
+1. 打开管理界面
+2. 在登录界面上输入：
+   - **远程地址**: 现版本远程地址将会自动从您的访问地址中获取 当然您也可以自定义
+   - **管理密钥**: 您的管理密钥
+3. 点击"连接"按钮
+4. 连接成功后即可使用所有功能
+
+## 界面说明
+
+### 导航菜单
+- **基础设置**: 调试、代理、重试等基本配置
+- **API 密钥**: 各种 API 服务的密钥管理
+- **AI 提供商**: AI 服务提供商配置
+- **认证文件**: 认证文件的上传下载管理
+- **使用统计**: 实时分析和使用统计，包含交互式图表
+- **系统信息**: 连接状态和系统信息
+
+### 登录界面
+- **自动连接**: 使用保存的凭据自动尝试连接
+- **自定义连接**: 手动配置 API 基础地址
+- **当前地址检测**: 自动检测并使用当前访问地址
+- **语言切换**: 支持多种语言（英文/中文）
+- **主题切换**: 支持明暗主题
+
+## 特性亮点
+
+### 现代化 UI
+- 响应式设计，支持各种屏幕尺寸
+- 美观的渐变色彩和阴影效果
+- 流畅的动画和过渡效果
+- 直观的图标和状态指示
+- 明暗主题支持，自动检测系统偏好
+- 移动端友好的侧边栏和遮罩
+
+### 实时更新
+- 配置更改立即生效
+- 实时状态反馈
+- 自动数据刷新
+- 实时使用统计和交互式图表
+- 实时连接状态监控
+
+### 安全特性
+- 密钥遮蔽显示
+- 安全凭据存储
+- 加密本地存储自动登录
+
+### 响应式设计
+- 完美适配桌面和移动设备
+- 自适应布局，可折叠侧边栏
+- 触摸友好的交互
+- 移动端菜单和遮罩
+
+### 分析与监控
+- Chart.js 驱动的交互式图表
+- 实时使用统计
+- 请求趋势可视化
+- Token 消耗跟踪
+- API 性能指标
+
+## 技术栈
+
+- **前端**: 纯 HTML、CSS、JavaScript (ES6+)
+- **样式**: CSS3 + Flexbox/Grid，支持 CSS 变量
+- **图标**: Font Awesome 6.4.0
+- **图表**: Chart.js 交互式数据可视化
+- **字体**: Segoe UI 系统字体
+- **API**: RESTful API 调用，自动认证
+- **国际化**: 自定义 i18n 系统，支持中英文
+- **主题系统**: CSS 自定义属性动态主题
+- **存储**: LocalStorage 用户偏好和凭据存储
+
+## 故障排除
+
+### 连接问题
+1. 确认 CLI Proxy API 服务正在运行
+2. 检查 API 地址是否正确
+3. 验证管理密钥是否有效
+4. 确认防火墙设置允许连接
+
+### 数据不更新
+1. 点击"刷新全部"按钮
+2. 检查网络连接
+3. 查看浏览器控制台错误信息
+
+## 开发说明
+
+### 文件结构
+```
+webui/
+├── 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 调用
+所有 API 调用都通过 `ManagerAPI` 类的 `makeRequest` 方法处理，包含：
+- 自动添加认证头
+- 错误处理
+- JSON 响应解析
+
+### 状态管理
+- 本地存储保存 API 地址和密钥
+- 内存中维护连接状态
+- 实时数据刷新机制
+
+## 贡献
+欢迎提交 Issue 和 Pull Request 来改进这个项目！我们欢迎更多的大佬来对这个WebUI进行更新！
+
+本项目采用MIT许可

build-scripts/prepare-html.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const path = require('path');
+
+// Read the original index.html
+const indexPath = path.resolve(__dirname, '../index.html');
+const outputPath = path.resolve(__dirname, '../index.build.html');
+
+let htmlContent = fs.readFileSync(indexPath, 'utf8');
+
+// Remove local CSS reference
+htmlContent = htmlContent.replace(
+    /<link rel="stylesheet" href="styles\.css">\n?/g,
+    ''
+);
+
+// Remove local JavaScript references
+htmlContent = htmlContent.replace(
+    /<script src="i18n\.js"><\/script>\n?/g,
+    ''
+);
+
+htmlContent = htmlContent.replace(
+    /<script src="app\.js"><\/script>\n?/g,
+    ''
+);
+
+// Write the modified HTML to a temporary build file
+fs.writeFileSync(outputPath, htmlContent, 'utf8');
+
+console.log('✓ Generated index.build.html for webpack processing');

build.js

@@ -0,0 +1,132 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const projectRoot = __dirname;
+const distDir = path.join(projectRoot, 'dist');
+
+const sourceFiles = {
+    html: path.join(projectRoot, 'index.html'),
+    css: path.join(projectRoot, 'styles.css'),
+    i18n: path.join(projectRoot, 'i18n.js'),
+    app: path.join(projectRoot, 'app.js')
+};
+
+const logoCandidates = ['logo.png', 'logo.jpg', 'logo.jpeg', 'logo.svg', 'logo.webp', 'logo.gif'];
+const logoMimeMap = {
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.svg': 'image/svg+xml',
+    '.webp': 'image/webp',
+    '.gif': 'image/gif'
+};
+
+function readFile(filePath) {
+    try {
+        return fs.readFileSync(filePath, 'utf8');
+    } catch (err) {
+        console.error(`读取文件失败: ${filePath}`);
+        throw err;
+    }
+}
+
+function readBinary(filePath) {
+    try {
+        return fs.readFileSync(filePath);
+    } catch (err) {
+        console.error(`读取文件失败: ${filePath}`);
+        throw err;
+    }
+}
+
+function escapeForScript(content) {
+    return content.replace(/<\/(script)/gi, '<\\/$1');
+}
+
+function escapeForStyle(content) {
+    return content.replace(/<\/(style)/gi, '<\\/$1');
+}
+
+function ensureDistDir() {
+    if (fs.existsSync(distDir)) {
+        fs.rmSync(distDir, { recursive: true, force: true });
+    }
+    fs.mkdirSync(distDir);
+}
+
+function loadLogoDataUrl() {
+    for (const candidate of logoCandidates) {
+        const filePath = path.join(projectRoot, candidate);
+        if (!fs.existsSync(filePath)) continue;
+
+        const ext = path.extname(candidate).toLowerCase();
+        const mime = logoMimeMap[ext];
+        if (!mime) {
+            console.warn(`未知 Logo 文件类型，跳过内联: ${candidate}`);
+            continue;
+        }
+
+        const buffer = readBinary(filePath);
+        const base64 = buffer.toString('base64');
+        return `data:${mime};base64,${base64}`;
+    }
+    return null;
+}
+
+function build() {
+    ensureDistDir();
+
+    let html = readFile(sourceFiles.html);
+    const css = escapeForStyle(readFile(sourceFiles.css));
+    const i18n = escapeForScript(readFile(sourceFiles.i18n));
+    const app = escapeForScript(readFile(sourceFiles.app));
+
+    html = html.replace(
+        '<link rel="stylesheet" href="styles.css">',
+        `<style>
+${css}
+</style>`
+    );
+
+    html = html.replace(
+        '<script src="i18n.js"></script>',
+        `<script>
+${i18n}
+</script>`
+    );
+
+    html = html.replace(
+        '<script src="app.js"></script>',
+        `<script>
+${app}
+</script>`
+    );
+
+    const logoDataUrl = loadLogoDataUrl();
+    if (logoDataUrl) {
+        const logoScript = `<script>window.__INLINE_LOGO__ = "${logoDataUrl}";</script>`;
+        if (html.includes('</body>')) {
+            html = html.replace('</body>', `${logoScript}\n</body>`);
+        } else {
+            html += `\n${logoScript}`;
+        }
+    } else {
+        console.warn('未找到可内联的 Logo 文件，将保持运行时加载。');
+    }
+
+    const outputPath = path.join(distDir, 'index.html');
+    fs.writeFileSync(outputPath, html, 'utf8');
+
+    console.log('构建完成: dist/index.html');
+}
+
+try {
+    build();
+} catch (error) {
+    console.error('构建失败:', error);
+    process.exit(1);
+}
+
+

bundle-entry.js

@@ -0,0 +1,25 @@
+// Import CSS
+import './styles.css';
+
+// Import JavaScript modules
+import './i18n.js';
+import './app.js';
+
+// Import logo image
+import logoImg from './logo.jpg';
+
+// Set logo after DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    const loginLogo = document.getElementById('login-logo');
+    const siteLogo = document.getElementById('site-logo');
+
+    if (loginLogo) {
+        loginLogo.src = logoImg;
+        loginLogo.style.display = 'block';
+    }
+
+    if (siteLogo) {
+        siteLogo.src = logoImg;
+        siteLogo.style.display = 'block';
+    }
+});

index.html

@@ -6,6 +6,7 @@
     <title data-i18n="title.login">CLI Proxy API Management Center</title>
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="i18n.js"></script>
 </head>
 <body>
@@ -48,67 +49,39 @@
                 </div>
             </div>
             
-            <!-- 选项卡导航 -->
-            <div class="connection-tabs">
-                <button class="tab-button active" data-tab="local">
-                    <i class="fas fa-home"></i>
-                    <div class="tab-content">
-                        <span class="tab-title" data-i18n="login.tab_local_title">Local</span>
-                        <span class="tab-subtitle" data-i18n="login.tab_local_subtitle">Run CLI Web server on your local machine</span>
+            <div class="login-body">
+                <div class="login-connection-info">
+                    <div class="connection-summary">
+                        <i class="fas fa-link"></i>
+                        <div>
+                            <h3 data-i18n="login.connection_title">连接地址</h3>
+                            <p class="connection-url">
+                                <span data-i18n="login.connection_current">当前地址</span>
+                                <span class="connection-url-separator">:</span>
+                                <span id="login-connection-url">-</span>
+                            </p>
+                        </div>
                     </div>
-                </button>
-                <button class="tab-button" data-tab="remote">
-                    <i class="fas fa-cloud"></i>
-                    <div class="tab-content">
-                        <span class="tab-title" data-i18n="login.tab_remote_title">Remote</span>
-                        <span class="tab-subtitle" data-i18n="login.tab_remote_subtitle">Remote connection for a remote CLI Web server</span>
-                    </div>
-                </button>
-            </div>
-            
-            <!-- 代理服务器设置（可选） -->
-            <div class="proxy-settings">
-                <label data-i18n="login.proxy_label">Proxy Server (Optional):</label>
-                <input type="text" id="login-proxy-url" data-i18n="login.proxy_placeholder" placeholder="http://ip:port or https://ip:port or socks5://user:pass@ip:port">
-            </div>
-            
-            <!-- 本地连接表单 -->
-            <div id="local-form" class="connection-form active">
+                    <p class="form-hint" data-i18n="login.connection_auto_hint">系统将自动使用当前访问地址进行连接</p>
+                </div>
+
                 <form class="login-form">
                     <div class="form-group">
-                        <label for="local-port" data-i18n="login.local_port_label">端口号:</label>
-                        <div class="local-url-group">
-                            <span class="url-prefix">http://localhost:</span>
-                            <input type="number" id="local-port" value="8317" min="1" max="65535" data-i18n="login.local_port_placeholder" placeholder="8317" required>
-                        </div>
-                        <div class="form-hint" data-i18n="login.local_url_hint">将连接到 http://localhost:端口/v0/management</div>
-                    </div>
-                    
-                    <div class="form-group">
-                        <label for="local-management-key" data-i18n="login.management_key_label">管理密钥:</label>
+                        <label for="login-api-base" data-i18n="login.custom_connection_label">自定义连接地址:</label>
                         <div class="input-group">
-                            <input type="password" id="local-management-key" data-i18n="login.management_key_placeholder" placeholder="请输入管理密钥" required>
-                            <button type="button" class="btn btn-secondary toggle-key-visibility">
-                                <i class="fas fa-eye"></i>
+                            <input type="text" id="login-api-base" data-i18n="login.custom_connection_placeholder" placeholder="例如: https://example.com:8317">
+                            <button type="button" id="login-reset-api-base" class="btn btn-secondary connection-reset-btn">
+                                <i class="fas fa-location-arrow"></i>
+                                <span data-i18n="login.use_current_address">使用当前地址</span>
                             </button>
                         </div>
+                        <p class="form-hint" data-i18n="login.custom_connection_hint">默认使用当前访问地址，若需要可手动输入其他地址。</p>
                     </div>
-                </form>
-            </div>
-            
-            <!-- 远程连接表单 -->
-            <div id="remote-form" class="connection-form">
-                <form class="login-form">
+
                     <div class="form-group">
-                        <label for="remote-api-url" data-i18n="login.api_url_label">API 基础地址:</label>
-                        <input type="text" id="remote-api-url" data-i18n="login.remote_api_url_placeholder" placeholder="例如: https://example.com:8317" required>
-                        <div class="form-hint" data-i18n="login.api_url_hint">将自动补全 /v0/management</div>
-                    </div>
-                    
-                    <div class="form-group">
-                        <label for="remote-management-key" data-i18n="login.management_key_label">管理密钥:</label>
+                        <label for="login-management-key" data-i18n="login.management_key_label">管理密钥:</label>
                         <div class="input-group">
-                            <input type="password" id="remote-management-key" data-i18n="login.management_key_placeholder" placeholder="请输入管理密钥" required>
+                            <input type="password" id="login-management-key" data-i18n="login.management_key_placeholder" placeholder="请输入管理密钥" required>
                             <button type="button" class="btn btn-secondary toggle-key-visibility">
                                 <i class="fas fa-eye"></i>
                             </button>
@@ -132,103 +105,81 @@
     </div>
 
     <!-- 主页面 -->
-    <div id="main-page" class="container" style="display: none;">
-        <!-- 头部导航 -->
-        <header class="header">
-            <div class="header-content">
-                <h1 class="brand">
-                    <img id="site-logo" alt="Logo" style="display:none" />
-                    <span class="brand-title" data-i18n="title.main">CLI Proxy API Management Center</span>
-                </h1>
-                <div class="header-actions">
-                    <div class="header-controls">
-                        <div class="language-switcher">
-                            <button id="language-toggle-main" class="btn btn-secondary language-btn">
-                                <i class="fas fa-globe"></i>
-                                <span data-i18n="language.switch">语言</span>
-                            </button>
-                        </div>
-                        <div class="theme-switcher">
-                            <button id="theme-toggle-main" class="btn btn-secondary theme-btn">
-                                <i class="fas fa-moon"></i>
-                                <span data-i18n="theme.switch">主题</span>
-                            </button>
-                        </div>
-                    </div>
-                    <button id="connection-status" class="btn btn-secondary">
-                        <i class="fas fa-circle"></i> <span data-i18n="header.check_connection">检查连接</span>
-                    </button>
-                    <button id="refresh-all" class="btn btn-primary">
-                        <i class="fas fa-sync-alt"></i> <span data-i18n="header.refresh_all">刷新全部</span>
-                    </button>
-                    <button id="logout-btn" class="btn btn-danger">
-                        <i class="fas fa-sign-out-alt"></i> <span data-i18n="header.logout">登出</span>
-                    </button>
+    <div id="main-page" style="display: none;">
+        <!-- 顶部导航栏 -->
+        <div class="top-navbar">
+            <div class="top-navbar-left">
+                <button class="mobile-menu-btn" id="mobile-menu-btn">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <button class="sidebar-toggle-btn-desktop" id="sidebar-toggle-btn-desktop" title="收起/展开侧边栏">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <div class="top-navbar-brand">
+                    <img id="site-logo" class="top-navbar-brand-logo" alt="Logo" style="display:none" />
+                    <span class="top-navbar-brand-text" data-i18n="title.main">CLI Proxy API Management Center</span>
                 </div>
             </div>
-        </header>
-
-        <!-- 连接信息 -->
-        <section class="auth-section">
-            <div class="card">
-                <div class="card-header">
-                    <h2><i class="fas fa-server"></i> <span data-i18n="connection.title">连接信息</span></h2>
-                </div>
-                <div class="card-content">
-                    <div class="connection-info">
-                        <div class="info-item">
-                            <div class="info-label">
-                                <i class="fas fa-globe"></i>
-                                <span data-i18n="connection.server_address">服务器地址:</span>
-                            </div>
-                            <div class="info-value" id="display-api-url">-</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">
-                                <i class="fas fa-key"></i>
-                                <span data-i18n="connection.management_key">管理密钥:</span>
-                            </div>
-                            <div class="info-value" id="display-management-key">-</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">
-                                <i class="fas fa-circle"></i>
-                                <span data-i18n="connection.status">连接状态:</span>
-                            </div>
-                            <div class="info-value" id="display-connection-status">
-                                <span class="status-indicator disconnected" data-i18n="common.disconnected">未连接</span>
-                            </div>
-                        </div>
+            <div class="top-navbar-actions">
+                <div class="header-controls">
+                    <div class="language-switcher">
+                        <button id="language-toggle-main" class="btn btn-secondary language-btn">
+                            <i class="fas fa-globe"></i>
+                        </button>
+                    </div>
+                    <div class="theme-switcher">
+                        <button id="theme-toggle-main" class="btn btn-secondary theme-btn">
+                            <i class="fas fa-moon"></i>
+                        </button>
                     </div>
                 </div>
+                <button id="connection-status" class="btn btn-secondary">
+                    <i class="fas fa-circle"></i> <span data-i18n="header.check_connection">检查连接</span>
+                </button>
+                <button id="refresh-all" class="btn btn-primary">
+                    <i class="fas fa-sync-alt"></i>
+                </button>
+                <button id="logout-btn" class="btn btn-danger">
+                    <i class="fas fa-sign-out-alt"></i>
+                </button>
             </div>
-        </section>
+        </div>
 
-        <!-- 主要内容区域 -->
-        <main class="main-content">
-            <!-- 侧边栏导航 -->
-            <nav class="sidebar">
+        <div class="layout" id="layout-container">
+            <!-- 侧边栏 -->
+            <nav class="sidebar" id="sidebar">
+                <!-- 导航菜单 -->
                 <ul class="nav-menu">
-                    <li><a href="#basic-settings" class="nav-item active" data-section="basic-settings">
+                    <li data-tooltip="基础设置"><a href="#basic-settings" class="nav-item active" data-section="basic-settings">
                         <i class="fas fa-sliders-h"></i> <span data-i18n="nav.basic_settings">基础设置</span>
                     </a></li>
-                    <li><a href="#api-keys" class="nav-item" data-section="api-keys">
+                    <li data-tooltip="API 密钥"><a href="#api-keys" class="nav-item" data-section="api-keys">
                         <i class="fas fa-key"></i> <span data-i18n="nav.api_keys">API 密钥</span>
                     </a></li>
-                    <li><a href="#ai-providers" class="nav-item" data-section="ai-providers">
+                    <li data-tooltip="AI 提供商"><a href="#ai-providers" class="nav-item" data-section="ai-providers">
                         <i class="fas fa-robot"></i> <span data-i18n="nav.ai_providers">AI 提供商</span>
                     </a></li>
-                    <li><a href="#auth-files" class="nav-item" data-section="auth-files">
+                    <li data-tooltip="认证文件"><a href="#auth-files" class="nav-item" data-section="auth-files">
                         <i class="fas fa-file-alt"></i> <span data-i18n="nav.auth_files">认证文件</span>
                     </a></li>
-                    <li><a href="#system-info" class="nav-item" data-section="system-info">
+                    <li data-tooltip="使用统计"><a href="#usage-stats" class="nav-item" data-section="usage-stats">
+                        <i class="fas fa-chart-line"></i> <span data-i18n="nav.usage_stats">使用统计</span>
+                    </a></li>
+                    <li data-tooltip="系统信息"><a href="#system-info" class="nav-item" data-section="system-info">
                         <i class="fas fa-info-circle"></i> <span data-i18n="nav.system_info">系统信息</span>
                     </a></li>
                 </ul>
             </nav>
 
-            <!-- 内容区域 -->
-            <div class="content-area">
+            <!-- 侧边栏遮罩（移动端） -->
+            <div class="sidebar-overlay" id="sidebar-overlay"></div>
+
+            <!-- 主内容包装器 -->
+            <div class="main-wrapper" id="main-wrapper">
+                <!-- 主内容区域 -->
+                <div class="main-content">
+                <!-- 内容区域 -->
+                <div class="content-area">
                 <!-- 基础设置 -->
                 <section id="basic-settings" class="content-section active">
                     <h2 data-i18n="basic_settings.title">基础设置</h2>
@@ -305,21 +256,6 @@
                         </div>
                     </div>
 
-                    <!-- 本地访问设置 -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-home"></i> <span data-i18n="basic_settings.localhost_title">本地访问</span></h3>
-                        </div>
-                        <div class="card-content">
-                            <div class="toggle-group">
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="allow-localhost-toggle">
-                                    <span class="slider"></span>
-                                </label>
-                                <span class="toggle-label" data-i18n="basic_settings.localhost_allow">允许本地未认证访问</span>
-                            </div>
-                        </div>
-                    </div>
                 </section>
 
                 <!-- API 密钥管理 -->
@@ -400,6 +336,42 @@
                 <section id="auth-files" class="content-section">
                     <h2 data-i18n="auth_files.title">认证文件管理</h2>
                     
+                    <div class="card" style="margin-bottom: 20px;">
+                        <div class="card-content">
+                            <p class="form-hint" data-i18n="auth_files.description">
+                                这里管理 Qwen 和 Gemini 的认证配置文件。上传 JSON 格式的认证文件以启用相应的 AI 服务。
+                            </p>
+                        </div>
+                    </div>
+                    
+                    <!-- Gemini Web Token -->
+                    <div class="card">
+                        <div class="card-header">
+                            <h3><i class="fab fa-google"></i> <span data-i18n="auth_login.gemini_web_title">Gemini Web Token</span></h3>
+                            <button id="gemini-web-token-btn" class="btn btn-primary">
+                                <i class="fas fa-save"></i> <span data-i18n="auth_login.gemini_web_button">保存 Gemini Web Token</span>
+                            </button>
+                        </div>
+                        <div class="card-content">
+                            <p class="form-hint" style="margin-bottom: 20px;" data-i18n="auth_login.gemini_web_hint">
+                                从浏览器开发者工具中获取 Gemini 网页版的 Cookie 值，用于直接认证访问 Gemini。
+                            </p>
+                            <div class="form-group">
+                                <label for="secure-1psid-input" data-i18n="auth_login.secure_1psid_label">__Secure-1PSID Cookie:</label>
+                                <input type="text" id="secure-1psid-input" data-i18n="auth_login.secure_1psid_placeholder" placeholder="输入 __Secure-1PSID cookie 值">
+                            </div>
+                            <div class="form-group">
+                                <label for="secure-1psidts-input" data-i18n="auth_login.secure_1psidts_label">__Secure-1PSIDTS Cookie:</label>
+                                <input type="text" id="secure-1psidts-input" data-i18n="auth_login.secure_1psidts_placeholder" placeholder="输入 __Secure-1PSIDTS cookie 值">
+                            </div>
+                            <div class="form-group">
+                                <label for="gemini-web-label-input" data-i18n="auth_login.gemini_web_label_label">Label (Optional):</label>
+                                <input type="text" id="gemini-web-label-input" data-i18n="auth_login.gemini_web_label_placeholder" placeholder="输入标签名称 (可选)">
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 认证文件 -->
                     <div class="card">
                         <div class="card-header">
                             <h3><i class="fas fa-file-alt"></i> <span data-i18n="auth_files.title_section">认证文件</span></h3>
@@ -419,10 +391,150 @@
                     </div>
                 </section>
 
+                <!-- 使用统计 -->
+                <section id="usage-stats" class="content-section">
+                    <h2 data-i18n="usage_stats.title">使用统计</h2>
+                    
+                    <!-- 概览统计卡片 -->
+                    <div class="stats-overview">
+                        <div class="stat-card">
+                            <div class="stat-icon">
+                                <i class="fas fa-paper-plane"></i>
+                            </div>
+                            <div class="stat-content">
+                                <div class="stat-number" id="total-requests">0</div>
+                                <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
+                            </div>
+                        </div>
+                        
+                        <div class="stat-card">
+                            <div class="stat-icon success">
+                                <i class="fas fa-check-circle"></i>
+                            </div>
+                            <div class="stat-content">
+                                <div class="stat-number" id="success-requests">0</div>
+                                <div class="stat-label" data-i18n="usage_stats.success_requests">成功请求</div>
+                            </div>
+                        </div>
+                        
+                        <div class="stat-card">
+                            <div class="stat-icon error">
+                                <i class="fas fa-exclamation-circle"></i>
+                            </div>
+                            <div class="stat-content">
+                                <div class="stat-number" id="failed-requests">0</div>
+                                <div class="stat-label" data-i18n="usage_stats.failed_requests">失败请求</div>
+                            </div>
+                        </div>
+                        
+                        <div class="stat-card">
+                            <div class="stat-icon">
+                                <i class="fas fa-coins"></i>
+                            </div>
+                            <div class="stat-content">
+                                <div class="stat-number" id="total-tokens">0</div>
+                                <div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 图表区域 -->
+                    <div class="charts-container">
+                        <!-- 请求趋势图 -->
+                        <div class="card chart-card">
+                            <div class="card-header">
+                                <h3><i class="fas fa-chart-line"></i> <span data-i18n="usage_stats.requests_trend">请求趋势</span></h3>
+                                <div class="chart-controls">
+                                    <button class="btn btn-small" data-period="hour" id="requests-hour-btn">
+                                        <span data-i18n="usage_stats.by_hour">按小时</span>
+                                    </button>
+                                    <button class="btn btn-small active" data-period="day" id="requests-day-btn">
+                                        <span data-i18n="usage_stats.by_day">按天</span>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-content">
+                                <div class="chart-container">
+                                    <canvas id="requests-chart"></canvas>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Token使用趋势图 -->
+                        <div class="card chart-card">
+                            <div class="card-header">
+                                <h3><i class="fas fa-chart-area"></i> <span data-i18n="usage_stats.tokens_trend">Token 使用趋势</span></h3>
+                                <div class="chart-controls">
+                                    <button class="btn btn-small" data-period="hour" id="tokens-hour-btn">
+                                        <span data-i18n="usage_stats.by_hour">按小时</span>
+                                    </button>
+                                    <button class="btn btn-small active" data-period="day" id="tokens-day-btn">
+                                        <span data-i18n="usage_stats.by_day">按天</span>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-content">
+                                <div class="chart-container">
+                                    <canvas id="tokens-chart"></canvas>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- API详细统计 -->
+                    <div class="card">
+                        <div class="card-header">
+                            <h3><i class="fas fa-list"></i> <span data-i18n="usage_stats.api_details">API 详细统计</span></h3>
+                            <button id="refresh-usage-stats" class="btn btn-primary">
+                                <i class="fas fa-sync-alt"></i> <span data-i18n="usage_stats.refresh">刷新</span>
+                            </button>
+                        </div>
+                        <div class="card-content">
+                            <div id="api-stats-table" class="api-stats-table">
+                                <div class="loading-placeholder" data-i18n="common.loading">正在加载...</div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
                 <!-- 系统信息 -->
                 <section id="system-info" class="content-section">
                     <h2 data-i18n="system_info.title">系统信息</h2>
                     
+                    <!-- 连接信息卡片 -->
+                    <div class="card">
+                        <div class="card-header">
+                            <h3><i class="fas fa-server"></i> <span data-i18n="connection.title">连接信息</span></h3>
+                        </div>
+                        <div class="card-content">
+                            <div class="connection-info">
+                                <div class="info-item">
+                                    <div class="info-label">
+                                        <i class="fas fa-globe"></i>
+                                        <span data-i18n="connection.server_address">服务器地址:</span>
+                                    </div>
+                                    <div class="info-value" id="display-api-url">-</div>
+                                </div>
+                                <div class="info-item">
+                                    <div class="info-label">
+                                        <i class="fas fa-key"></i>
+                                        <span data-i18n="connection.management_key">管理密钥:</span>
+                                    </div>
+                                    <div class="info-value" id="display-management-key">-</div>
+                                </div>
+                                <div class="info-item">
+                                    <div class="info-label">
+                                        <i class="fas fa-circle"></i>
+                                        <span data-i18n="connection.status">连接状态:</span>
+                                    </div>
+                                    <div class="info-value" id="display-connection-status">
+                                        <span class="status-indicator disconnected" data-i18n="common.disconnected">未连接</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
                     <div class="card">
                         <div class="card-header">
                             <h3><i class="fas fa-info-circle"></i> <span data-i18n="system_info.connection_status_title">连接状态</span></h3>
@@ -445,9 +557,23 @@
                         </div>
                     </div>
                 </section>
+                </div>
+                <!-- /内容区域 -->
+                
+                <!-- 版本信息 -->
+                <footer class="version-footer">
+                    <div class="version-info">
+                        <span data-i18n="footer.version">版本</span>: v0.1.0
+                        <span class="separator">•</span>
+                        <span data-i18n="footer.author">作者</span>: Supra4E8C
+                    </div>
+                </footer>
             </div>
-        </main>
+            <!-- /主内容区域 -->
+        </div>
+        <!-- /主内容包装器 -->
     </div>
+    <!-- /主页面 -->
 
     <!-- 模态框 -->
     <div id="modal" class="modal">

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "npx serve .",
     "dev": "npx serve . --port 3000",
-    "build": "echo '无需构建，直接使用静态文件'",
+    "build": "node build.js",
     "lint": "echo '使用浏览器开发者工具检查代码'"
   },
   "keywords": [

webpack.config.js

@@ -0,0 +1,64 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+    mode: 'production',
+    entry: {
+        main: './bundle-entry.js'
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].bundle.js',
+        clean: true
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader']
+            },
+            {
+                test: /\.(png|jpg|jpeg|gif|svg)$/i,
+                type: 'asset/inline'
+            },
+            {
+                test: /\.html$/i,
+                loader: 'html-loader',
+                options: {
+                    sources: {
+                        list: [
+                            {
+                                tag: 'img',
+                                attribute: 'src',
+                                type: 'src'
+                            }
+                        ]
+                    }
+                }
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './index.build.html',
+            filename: 'index.html',
+            inject: 'body',
+            minify: {
+                collapseWhitespace: true,
+                removeComments: true,
+                removeRedundantAttributes: true,
+                removeScriptTypeAttributes: true,
+                removeStyleLinkTypeAttributes: true,
+                useShortDoctype: true
+            }
+        }),
+        new HtmlInlineScriptPlugin({
+            htmlMatchPattern: [/index.html$/],
+            scriptMatchPattern: [/.js$/]
+        })
+    ],
+    optimization: {
+        minimize: true
+    }
+};