change release file name

.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.

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');

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';
+    }
+});

package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "start": "npx serve .",
     "dev": "npx serve . --port 3000",
-    "build": "echo '无需构建，直接使用静态文件'",
+    "prebuild": "node build-scripts/prepare-html.js",
+    "build": "webpack --config webpack.config.js",
+    "postbuild": "rm -f index.build.html",
     "lint": "echo '使用浏览器开发者工具检查代码'"
   },
   "keywords": [
@@ -18,7 +20,14 @@
   "author": "CLI Proxy API WebUI",
   "license": "MIT",
   "devDependencies": {
-    "serve": "^14.2.1"
+    "css-loader": "^6.8.1",
+    "html-inline-script-webpack-plugin": "^3.2.1",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.4",
+    "serve": "^14.2.1",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.102.0",
+    "webpack-cli": "^5.1.4"
   },
   "engines": {
     "node": ">=14.0.0"
@@ -26,6 +35,5 @@
   "repository": {
     "type": "git",
     "url": "local"
-  },
-  "dependencies": {}
+  }
 }

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
+    }
+};