feat: Add instructions for obtaining proxy acceleration to the UI panel.

Dockerfile

@@ -0,0 +1,15 @@
+# 使用官方的 Node.js 运行时镜像作为基础镜像
+FROM node:lts-alpine
+
+# 设置工作目录
+WORKDIR /app
+# 复制项目文件到工作目录
+COPY hubcmdui/ .
+# 安装项目依赖
+RUN npm install
+
+# 暴露应用程序的端口
+EXPOSE 3000
+
+# 运行应用程序
+CMD ["node", "server.js"]

hubcmdui/README.md

@@ -0,0 +1,120 @@
+<p align="right">
+   <strong>中文</strong> | <a href="./README.en.md">English</a>
+</p>
+
+<div style="text-align: center">
+  <p align="center">
+  <img src="https://github.com/dqzboy/Docker-Proxy/assets/42825450/c187d66f-152e-4172-8268-e54bd77d48bb" width="230px" height="200px">
+      <br>
+      <i>Docker-Proxy 镜像代理加速快速获取命令UI面板.</i>
+  </p>
+</div>
+
+<div align="center">
+
+[![Auth](https://img.shields.io/badge/Auth-dqzboy-ff69b4)](https://github.com/dqzboy)
+[![GitHub contributors](https://img.shields.io/github/contributors/dqzboy/Docker-Proxy)](https://github.com/dqzboy/Docker-Proxy/graphs/contributors)
+[![GitHub Issues](https://img.shields.io/github/issues/dqzboy/Docker-Proxy.svg)](https://github.com/dqzboy/Docker-Proxy/issues)
+[![GitHub Pull Requests](https://img.shields.io/github/stars/dqzboy/Docker-Proxy)](https://github.com/dqzboy/Docker-Proxy)
+[![HitCount](https://views.whatilearened.today/views/github/dqzboy/Docker-Proxy.svg)](https://github.com/dqzboy/Docker-Proxy)
+[![GitHub license](https://img.shields.io/github/license/dqzboy/Docker-Proxy)](https://github.com/dqzboy/Docker-Proxy/blob/main/LICENSE)
+
+
+📢 <a href="https://t.me/+ghs_XDp1vwxkMGU9" style="font-size: 15px;">Docker Proxy-交流群</a>
+
+</div>
+
+---
+
+## 📝 本地运行
+#### 1. 克隆项目
+```bash
+git clone [email protected]:dqzboy/Docker-Proxy.git
+```
+
+#### 2. 安装依赖
+```bash
+cd Docker-Proxy/hubcmdui
+npm install
+```
+
+#### 3. 启动服务
+```bash
+node server.js 
+```
+
+## 📦 Docker运行
+
+- 如果不自行构建Docker镜像，可直接跳转第三步拉取镜像运行
+
+#### 1. 克隆项目（可选）
+```bash
+git clone [email protected]:dqzboy/Docker-Proxy.git
+```
+
+#### 2. 构建镜像（可选）
+```bash
+cd Docker-Proxy
+
+docker build -t hubcmd-ui .
+```
+
+#### 3. 运行容器
+```bash
+# 拉取镜像！如果你手动构建了镜像此步骤跳过
+docker pull dqzboy/hubcmd-ui:latest
+
+docker run -d -p 3000:3000 --name hubcmdui-server hubcmd-ui
+```
+
+---
+
+## UI
+
+- 默认监听3000端口
+
+> 浏览器输入 `服务器地址:3000` 访问前端
+
+<table>
+    <tr>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/142ac19b-933f-46e8-85f9-5cb60a14c5cd"?raw=true"></td>
+    </tr>
+</table>
+
+> 浏览器输入 `服务器地址/admin:3000` 访问后端页面
+
+<table>
+    <tr>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/d2f76296-e329-4941-9292-8d3d43e2bea4"?raw=true"></td>
+    </tr>
+</table>
+
+<table>
+    <tr>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/c3551c10-a2b4-431b-87b9-f5d408162e61"?raw=true"></td>
+    </tr>
+</table>
+
+---
+
+## 🫶 赞助
+如果你觉得这个项目对你有帮助，请给我点个Star。并且情况允许的话，可以给我一点点支持，总之非常感谢支持😊
+
+> 项目作者自建公益服务：[服务地址查看](https://uk.dqzboy.xyz/)
+
+<table>
+    <tr>
+      <td width="50%" align="center"><b> Alipay </b></td>
+      <td width="50%" align="center"><b> WeChat Pay </b></td>
+    </tr>
+    <tr>
+        <td width="50%" align="center"><img src="https://github.com/dqzboy/Deploy_K8sCluster/assets/42825450/223fd099-9433-468b-b490-f9807bdd2035?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/dqzboy/Deploy_K8sCluster/assets/42825450/9404460f-ea1b-446c-a0ae-6da96eb459e3?raw=true"></td>
+    </tr>
+</table>
+
+---
+
+## 😺 其他
+
+开源不易,若你参考此项目或基于此项目修改可否麻烦在你的项目文档中标识此项目？谢谢你！

hubcmdui/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "express": "^4.19.2",
+    "express-session": "^1.18.0"
+  }
+}

hubcmdui/server.js

@@ -0,0 +1,139 @@
+const express = require('express');
+const fs = require('fs').promises;
+const path = require('path');
+const bodyParser = require('body-parser');
+const session = require('express-session');
+
+const app = express();
+app.use(express.json());
+app.use(express.static('web'));
+app.use(bodyParser.urlencoded({ extended: true }));
+app.use(session({
+  secret: 'OhTq3faqSKoxbV%NJV',
+  resave: false,
+  saveUninitialized: true,
+  cookie: { secure: false } // 设置为true如果使用HTTPS
+}));
+
+app.get('/admin', (req, res) => {
+  res.sendFile(path.join(__dirname, 'web', 'admin.html'));
+});
+
+const CONFIG_FILE = path.join(__dirname, 'config.json');
+const USERS_FILE = path.join(__dirname, 'users.json');
+
+// 读取配置
+async function readConfig() {
+  try {
+    const data = await fs.readFile(CONFIG_FILE, 'utf8');
+    return JSON.parse(data);
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      return {
+        logo: '',
+        menuItems: [],
+        adImage: { url: '', link: '' }
+      };
+    }
+    throw error;
+  }
+}
+
+// 写入配置
+async function writeConfig(config) {
+  await fs.writeFile(CONFIG_FILE, JSON.stringify(config, null, 2), 'utf8');
+}
+
+// 读取用户
+async function readUsers() {
+  try {
+    const data = await fs.readFile(USERS_FILE, 'utf8');
+    return JSON.parse(data);
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      return {
+        users: [{ username: 'root', password: 'admin' }]
+      };
+    }
+    throw error;
+  }
+}
+
+// 写入用户
+async function writeUsers(users) {
+  await fs.writeFile(USERS_FILE, JSON.stringify(users, null, 2), 'utf8');
+}
+
+// 登录验证
+app.post('/api/login', async (req, res) => {
+  const { username, password } = req.body;
+  const users = await readUsers();
+  const user = users.users.find(u => u.username === username && u.password === password);
+  if (user) {
+    req.session.user = user;
+    res.json({ success: true });
+  } else {
+    res.status(401).json({ error: 'Invalid credentials' });
+  }
+});
+
+// 修改密码
+app.post('/api/change-password', async (req, res) => {
+  if (!req.session.user) {
+    return res.status(401).json({ error: 'Not logged in' });
+  }
+  const { currentPassword, newPassword } = req.body;
+  const users = await readUsers();
+  const user = users.users.find(u => u.username === req.session.user.username);
+  if (user && user.password === currentPassword) {
+    user.password = newPassword;
+    await writeUsers(users);
+    res.json({ success: true });
+  } else {
+    res.status(401).json({ error: 'Invalid current password' });
+  }
+});
+
+// 需要登录验证的中间件
+function requireLogin(req, res, next) {
+  if (req.session.user) {
+    next();
+  } else {
+    res.status(401).json({ error: 'Not logged in' });
+  }
+}
+
+// API 端点：获取配置
+app.get('/api/config', async (req, res) => {
+  try {
+    const config = await readConfig();
+    res.json(config);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to read config' });
+  }
+});
+
+// API 端点：保存配置
+app.post('/api/config', requireLogin, async (req, res) => {
+  try {
+    await writeConfig(req.body);
+    res.json({ success: true });
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to save config' });
+  }
+});
+
+// API 端点：检查会话状态
+app.get('/api/check-session', (req, res) => {
+  if (req.session.user) {
+    res.json({ success: true });
+  } else {
+    res.status(401).json({ error: 'Not logged in' });
+  }
+});
+
+// 启动服务器
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+  console.log(`Server is running on http://localhost:${PORT}`);
+});

hubcmdui/users.json

@@ -0,0 +1,8 @@
+{
+  "users": [
+    {
+      "username": "root",
+      "password": "admin"
+    }
+  ]
+}

hubcmdui/web/admin.html

@@ -0,0 +1,628 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Docker 镜像代理加速 - 管理面板</title>
+    <link rel="icon" href="https://cdn.jsdelivr.net/gh/dqzboy/Blog-Image/BlogCourse/docker-proxy.png" type="image/png">
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
+            line-height: 1.6;
+            color: #24292e;
+            margin: 0;
+            padding: 20px;
+            background-color: #f6f8fa;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1, h2 {
+            border-bottom: 2px solid #eaecef;
+            padding-bottom: 0.5em;
+            margin-bottom: 1em;
+            color: #0366d6;
+        }
+        label {
+            display: block;
+            margin-top: 20px;
+            border-bottom: none;
+            padding-bottom: 0;
+            color: #24292e;
+            font-size: 20px;
+        }
+        input[type="text"], input[type="url"], input[type="password"], select {
+            width: 100%;
+            padding: 8px;
+            margin-top: 5px;
+            border: 1px solid #d1d5da;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font-family: inherit;
+            font-size: inherit;
+        }
+        button {
+            background-color: #2ea44f;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            margin-top: 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: inherit;
+        }
+        button:hover {
+            background-color: #2c974b;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        th, td {
+            border: 1px solid #d1d5da;
+            padding: 8px;
+            text-align: left;
+        }
+        th {
+            background-color: #f6f8fa;
+            font-weight: normal;
+        }
+        .action-btn {
+            background-color: #0366d6;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-right: 5px;
+            font-family: inherit;
+            font-size: inherit;
+        }
+        .action-btn:hover {
+            background-color: #0256b9;
+        }
+        .add-btn {
+            background-color: #2ea44f;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            margin-top: 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: inherit;
+        }
+        .add-btn:hover {
+            background-color: #2c974b;
+        }
+        #menuPreview {
+            margin-top: 20px;
+            padding: 10px;
+            background-color: #f6f8fa;
+            border: 1px solid #d1d5da;
+            border-radius: 4px;
+        }
+        #menuPreview a {
+            margin-right: 15px;
+            color: #0366d6;
+            text-decoration: none;
+        }
+        #menuPreview a:hover {
+            text-decoration: underline;
+        }
+        .hidden {
+            display: none;
+        }
+        .login-modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.4);
+        }
+        .login-content {
+            background-color: #fefefe;
+            margin: 15% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 30%;
+            border-radius: 8px;
+        }
+        .user-management {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            cursor: pointer;
+        }
+        .user-management i {
+            font-size: 24px;
+            color: #0366d6;
+        }
+        .menu-label {
+            font-size: 20px;
+            color: #24292e;
+        }
+        .admin-title {
+            font-size: 24px;
+            color: #0366d6;
+        }
+    </style>
+</head>
+<body>
+    <div class="container hidden" id="adminContainer">
+        <h1 class="admin-title">Docker 镜像代理加速 - 管理面板</h1>
+        <form id="adminForm">
+            <label for="logoUrl">Logo URL: (可选)</label>
+            <input type="url" id="logoUrl" name="logoUrl">
+            
+            <label for="proxyDomain">Docker镜像代理地址: (必填)</label>
+            <input type="text" id="proxyDomain" name="proxyDomain" required>
+            
+            <h2 class="menu-label">菜单项管理</h2>
+            <table id="menuTable">
+                <thead>
+                    <tr>
+                        <th>文本</th>
+                        <th>链接 (可选)</th>
+                        <th>新标签页打开</th>
+                        <th>操作</th>
+                    </tr>
+                </thead>
+                <tbody id="menuTableBody">
+                    <!-- 菜单项将在这里动态添加 -->
+                </tbody>
+            </table>
+            <button type="button" class="add-btn" onclick="showNewMenuItemRow()">添加菜单项</button>
+            
+            <h2 class="menu-label">广告管理</h2>
+            <table id="adTable">
+                <thead>
+                    <tr>
+                        <th>广告URL</th>
+                        <th>跳转URL</th>
+                        <th>操作</th>
+                    </tr>
+                </thead>
+                <tbody id="adTableBody">
+                    <!-- 广告项将在这里动态添加 -->
+                </tbody>
+            </table>
+            <button type="button" class="add-btn" onclick="showNewAdRow()">添加广告</button>
+            
+            <button type="submit">保存更改</button>
+        </form>
+
+        <!-- 修改密码的独立表单 -->
+        <div id="passwordChangeForm" style="margin-top: 20px;">
+            <h2 class="menu-label">修改密码</h2>
+            <label for="currentPassword">当前密码</label>
+            <input type="password" id="currentPassword" name="currentPassword">
+            <label for="newPassword">新密码</label>
+            <input type="password" id="newPassword" name="newPassword">
+            <button type="button" onclick="changePassword()">修改密码</button>
+        </div>
+    </div>
+
+    <div class="login-modal" id="loginModal">
+        <div class="login-content">
+            <h2>登录</h2>
+            <label for="username">用户名</label>
+            <input type="text" id="username" name="username" required>
+            <label for="password">密码</label>
+            <input type="password" id="password" name="password" required>
+            <button type="button" onclick="login()">登录</button>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
+    <script>
+        let menuItems = [];
+        let adImages = [];
+        let isLoggedIn = false;
+        let editingIndex = -1; // 用于记录当前编辑的菜单项索引
+
+        function getMenuItems() {
+            return menuItems;
+        }
+
+        function setMenuItems(items) {
+            menuItems = items;
+            renderMenuItems();
+        }
+
+        function renderMenuItems() {
+            const tbody = document.getElementById('menuTableBody');
+            tbody.innerHTML = '';
+            menuItems.forEach((item, index) => {
+                const row = `
+                    <tr data-index="${index}">
+                        <td><input type="text" class="menu-text" value="${item.text}" disabled></td>
+                        <td><input type="url" class="menu-link" value="${item.link || ''}" disabled></td>
+                        <td>
+                            <select class="menu-newtab" disabled>
+                                <option value="false" ${item.newTab ? '' : 'selected'}>否</option>
+                                <option value="true" ${item.newTab ? 'selected' : ''}>是</option>
+                            </select>
+                        </td>
+                        <td>
+                            <button type="button" class="action-btn edit-btn">编辑</button>
+                            <button type="button" class="action-btn delete-btn">删除</button>
+                            <span class="drag-handle" style="cursor: move;">☰</span>
+                        </td>
+                    </tr>
+                `;
+                tbody.innerHTML += row;
+            });
+            setupDragAndDrop();
+            setupEditButtons();
+            setupDeleteButtons();
+        }
+
+        function setupEditButtons() {
+            const editButtons = document.querySelectorAll('.edit-btn');
+            editButtons.forEach((button, index) => {
+                button.addEventListener('click', () => {
+                    const row = button.closest('tr');
+                    const textInput = row.querySelector('.menu-text');
+                    const linkInput = row.querySelector('.menu-link');
+                    const newTabSelect = row.querySelector('.menu-newtab');
+
+                    if (textInput.disabled) {
+                        textInput.disabled = false;
+                        linkInput.disabled = false;
+                        newTabSelect.disabled = false;
+                        button.textContent = '保存';
+                        editingIndex = row.getAttribute('data-index');
+                    } else {
+                        const text = textInput.value;
+                        const link = linkInput.value;
+                        const newTab = newTabSelect.value === 'true';
+
+                        if (text) {
+                            menuItems[editingIndex] = { text, link, newTab };
+                            renderMenuItems();
+                            editingIndex = -1;
+                        } else {
+                            alert('请填写菜单项文本');
+                        }
+                    }
+                });
+            });
+        }
+
+        function setupDeleteButtons() {
+            const deleteButtons = document.querySelectorAll('.delete-btn');
+            deleteButtons.forEach((button, index) => {
+                button.addEventListener('click', () => {
+                    const row = button.closest('tr');
+                    const index = row.getAttribute('data-index');
+                    menuItems.splice(index, 1);
+                    renderMenuItems();
+                });
+            });
+        }
+
+        function showNewMenuItemRow() {
+            const tbody = document.getElementById('menuTableBody');
+            const newRow = `
+                <tr id="newMenuItemRow">
+                    <td><input type="text" id="newMenuItemText" placeholder="菜单项文本"></td>
+                    <td><input type="url" id="newMenuItemLink" placeholder="菜单项链接 (可选)"></td>
+                    <td>
+                        <select id="newMenuItemNewTab">
+                            <option value="false">否</option>
+                            <option value="true">是</option>
+                        </select>
+                    </td>
+                    <td>
+                        <button type="button" class="action-btn" onclick="saveNewMenuItem()">保存</button>
+                        <button type="button" class="action-btn" onclick="cancelNewMenuItem()">取消</button>
+                    </td>
+                </tr>
+            `;
+            tbody.insertAdjacentHTML('beforeend', newRow);
+        }
+
+        function saveNewMenuItem() {
+            const text = document.getElementById('newMenuItemText').value;
+            const link = document.getElementById('newMenuItemLink').value;
+            const newTab = document.getElementById('newMenuItemNewTab').value === 'true';
+            
+            if (text) {
+                menuItems.push({ text, link, newTab });
+                renderMenuItems();
+                cancelNewMenuItem();
+            } else {
+                alert('请填写菜单项文本');
+            }
+        }
+
+        function cancelNewMenuItem() {
+            const newRow = document.getElementById('newMenuItemRow');
+            if (newRow) {
+                newRow.remove();
+            }
+        }
+
+        function showNewAdRow() {
+            const tbody = document.getElementById('adTableBody');
+            const newRow = `
+                <tr id="newAdRow">
+                    <td><input type="url" id="newAdUrl" placeholder="广告URL"></td>
+                    <td><input type="url" id="newAdLink" placeholder="跳转URL"></td>
+                    <td>
+                        <button type="button" class="action-btn" onclick="saveNewAd()">保存</button>
+                        <button type="button" class="action-btn" onclick="cancelNewAd()">取消</button>
+                    </td>
+                </tr>
+            `;
+            tbody.insertAdjacentHTML('beforeend', newRow);
+        }
+
+        function renderAdItems() {
+            const tbody = document.getElementById('adTableBody');
+            tbody.innerHTML = '';
+            adImages.forEach((ad, index) => {
+                const row = `
+                    <tr data-index="${index}">
+                        <td><input type="url" class="ad-url" value="${ad.url}" disabled></td>
+                        <td><input type="url" class="ad-link" value="${ad.link}" disabled></td>
+                        <td>
+                            <button type="button" class="action-btn edit-btn">编辑</button>
+                            <button type="button" class="action-btn delete-btn">删除</button>
+                        </td>
+                    </tr>
+                `;
+                tbody.innerHTML += row;
+            });
+            setupAdEditButtons();
+            setupAdDeleteButtons();
+        }       
+
+
+        function saveNewAd() {
+            const url = document.getElementById('newAdUrl').value || '';
+            const link = document.getElementById('newAdLink').value || '';
+
+            adImages.push({ url, link });
+            renderAdItems();
+            cancelNewAd();
+        }
+
+        function cancelNewAd() {
+            const newRow = document.getElementById('newAdRow');
+            if (newRow) {
+                newRow.remove();
+            }
+        }
+
+        function renderAdItems() {
+            const tbody = document.getElementById('adTableBody');
+            tbody.innerHTML = '';
+            adImages.forEach((ad, index) => {
+                const row = `
+                    <tr data-index="${index}">
+                        <td><input type="url" class="ad-url" value="${ad.url}" disabled></td>
+                        <td><input type="url" class="ad-link" value="${ad.link}" disabled></td>
+                        <td>
+                            <button type="button" class="action-btn edit-btn">编辑</button>
+                            <button type="button" class="action-btn delete-btn">删除</button>
+                        </td>
+                    </tr>
+                `;
+                tbody.innerHTML += row;
+            });
+            setupAdEditButtons();
+            setupAdDeleteButtons();
+        }
+
+        function setupAdEditButtons() {
+            const editButtons = document.querySelectorAll('.edit-btn');
+            editButtons.forEach((button, index) => {
+                button.addEventListener('click', () => {
+                    const row = button.closest('tr');
+                    const urlInput = row.querySelector('.ad-url');
+                    const linkInput = row.querySelector('.ad-link');
+
+                    if (urlInput.disabled) {
+                        urlInput.disabled = false;
+                        linkInput.disabled = false;
+                        button.textContent = '保存';
+                        editingIndex = row.getAttribute('data-index');
+                    } else {
+                        const url = urlInput.value || '';
+                        const link = linkInput.value || '';
+
+                        adImages[editingIndex] = { url, link };
+                        renderAdItems();
+                        editingIndex = -1;
+                    }
+                });
+            });
+        }
+
+        function setupAdDeleteButtons() {
+            const deleteButtons = document.querySelectorAll('.delete-btn');
+            deleteButtons.forEach((button, index) => {
+                button.addEventListener('click', () => {
+                    const row = button.closest('tr');
+                    const index = row.getAttribute('data-index');
+                    adImages.splice(index, 1);
+                    renderAdItems();
+                });
+            });
+        }
+
+        async function saveConfig() {
+            const config = {
+                logo: document.getElementById('logoUrl').value,
+                proxyDomain: document.getElementById('proxyDomain').value,
+                menuItems: getMenuItems(),
+                adImages: adImages
+            };
+
+            try {
+                const response = await fetch('/api/config', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(config)
+                });
+                if (response.ok) {
+                    alert('配置已保存');
+                } else {
+                    throw new Error('保存失败');
+                }
+            } catch (error) {
+                alert('保存失败: ' + error.message);
+            }
+        }
+
+        async function loadConfig() {
+            try {
+                const response = await fetch('/api/config');
+                const config = await response.json();
+                document.getElementById('logoUrl').value = config.logo || '';
+                document.getElementById('proxyDomain').value = config.proxyDomain || '';
+                setMenuItems(config.menuItems || []);
+                adImages = config.adImages || [];
+                renderAdItems();
+            } catch (error) {
+                console.error('加载配置失败:', error);
+            }
+        }
+
+        async function login() {
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            try {
+                const response = await fetch('/api/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password })
+                });
+                if (response.ok) {
+                    isLoggedIn = true;
+                    localStorage.setItem('isLoggedIn', 'true');  // 存储登录状态
+                    document.getElementById('loginModal').style.display = 'none';
+                    document.getElementById('adminContainer').classList.remove('hidden');
+                    loadConfig();
+                } else {
+                    alert('登录失败');
+                }
+            } catch (error) {
+                alert('登录失败: ' + error.message);
+            }
+        }
+
+        async function changePassword() {
+            const currentPassword = document.getElementById('currentPassword').value;
+            const newPassword = document.getElementById('newPassword').value;
+            if (!currentPassword || !newPassword) {
+                alert('请填写当前密码和新密码');
+                return;
+            }
+            try {
+                const response = await fetch('/api/change-password', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ currentPassword, newPassword })
+                });
+                if (response.ok) {
+                    alert('密码已修改');
+                } else {
+                    alert('修改密码失败');
+                }
+            } catch (error) {
+                alert('修改密码失败: ' + error.message);
+            }
+        }
+
+        // 页面加载时检查登录状态
+        window.onload = async function() {
+            try {
+                const response = await fetch('/api/check-session');
+                if (response.ok) {
+                    isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';  // 读取登录状态
+                    if (isLoggedIn) {
+                        document.getElementById('loginModal').style.display = 'none';
+                        document.getElementById('adminContainer').classList.remove('hidden');
+                        loadConfig();
+                    } else {
+                        document.getElementById('loginModal').style.display = 'block';
+                    }
+                } else {
+                    localStorage.removeItem('isLoggedIn');  // 清除登录状态
+                    document.getElementById('loginModal').style.display = 'block';
+                }
+            } catch (error) {
+                localStorage.removeItem('isLoggedIn');  // 清除登录状态
+                document.getElementById('loginModal').style.display = 'block';
+            }
+        };
+
+        // 表单提交事件监听器
+        document.getElementById('adminForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            await saveConfig();
+        });
+
+        function setupDragAndDrop() {
+            const drake = dragula([document.getElementById('menuTableBody')], {
+                moves: function (el, container, handle) {
+                    return handle.classList.contains('drag-handle');
+                }
+            });
+
+            drake.on('drop', (el, target, source, sibling) => {
+                const newIndex = Array.from(target.children).indexOf(el);
+                const oldIndex = el.getAttribute('data-index');
+                const movedItem = menuItems.splice(oldIndex, 1)[0];
+                menuItems.splice(newIndex, 0, movedItem);
+                renderMenuItems();
+            });
+        }
+
+        function updateAdImage(adImages) {
+            const adContainer = document.getElementById('adContainer');
+            adContainer.innerHTML = '';
+            if (adImages && adImages.length > 0) {
+                adImages.forEach(ad => {
+                    const adLink = document.createElement('a');
+                    adLink.href = ad.link;
+                    adLink.target = '_blank';
+                    const adImage = document.createElement('img');
+                    adImage.src = ad.url;
+                    adImage.alt = ad.alt || '广告图片';
+                    adLink.appendChild(adImage);
+                    adContainer.appendChild(adLink);
+                });
+
+                // 轮播功能
+                let currentAdIndex = 0;
+                setInterval(() => {
+                    currentAdIndex = (currentAdIndex + 1) % adImages.length;
+                    adImages.forEach((ad, index) => {
+                        const adImage = adContainer.children[index];
+                        if (index === currentAdIndex) {
+                            adImage.style.display = 'block';
+                        } else {
+                            adImage.style.display = 'none';
+                        }
+                    });
+                }, 5000); // 每5秒切换一次广告
+            }
+        }
+    </script>
+</body>
+</html>

hubcmdui/docker-proxy.html → hubcmdui/web/index.html

@@ -228,12 +228,8 @@
     <header class="header">
         <div class="header-content">
             <img src="https://cdn.jsdelivr.net/gh/dqzboy/Blog-Image/BlogCourse/docker-proxy.png" alt="Logo" class="logo">
-            <nav class="nav-menu">
-                <a href="javascript:void(0);" onclick="location.reload();">首页</a>
-                <a href="https://www.dqzboy.com" target="_blank">博客</a>
-                <a href="https://www.dqzboy.com/zanzu" target="_blank">捐赠</a>
-                <a href="https://t.me/dqzboyblog" target="_blank">交流群</a>
-                <a href="https://github.com/dqzboy/Docker-Proxy" target="_blank">GitHub</a>
+            <nav class="nav-menu" id="navMenu">
+                <!-- 菜单项将通过 JavaScript 动态加载 -->
             </nav>
         </div>
     </header>
@@ -245,10 +241,8 @@
             <button onclick="generateCommands()">获取加速命令</button>
         </div>
         <!-- 广告容器 -->
-        <div class="ad-container" id="adContainer">
-            <a href="https://example.com" target="_blank">
-                <img src="https://github.com/user-attachments/assets/595f645a-e4da-49fd-bd67-db93566a6152?text=Ad+Banner" alt="广告图片">
-            </a>
+        <div class="ad-container" id="adContainer" style="display: flex;">
+            <!-- 广告内容将通过 JavaScript 动态加载 -->
         </div>
         <!-- 结果容器 -->
         <div id="result" style="display:none;">
@@ -258,7 +252,7 @@
     </div>
     <!-- 页脚 -->
     <footer class="footer">
-        <p>Copyright © <span id="currentYear"></span> dqzboy.com. All Rights Reserved. <a href="https://github.com/dqzboy/Docker-Proxy" target="_blank" rel="noopener noreferrer">Docker-Proxy</a>版权所有</p>
+        <p>Copyright © <span id="currentYear"></span> All Rights Reserved. <a href="https://github.com/dqzboy/Docker-Proxy" target="_blank" rel="noopener noreferrer">Docker-Proxy</a> 版权所有</p>
     </footer>
 
     <!-- 返回顶部按钮 -->
@@ -268,6 +262,8 @@
         // 设置当前年份
         document.getElementById('currentYear').textContent = new Date().getFullYear();
 
+        let proxyDomain = ''; // 默认代理加速地址
+
         // 生成加速命令
         function generateCommands() {
             const imageInput = document.getElementById('imageInput').value.trim();
@@ -275,8 +271,6 @@
                 alert('请输入 Docker 镜像');
                 return;
             }
-            // docker镜像加速地址，请把下面your_domain改为你实际的加速地址
-            const proxyDomain = 'your_domain'; //例如：hub.baidu.com
             let [imageName, tag] = imageInput.split(':');
             tag = tag || 'latest';
             
@@ -333,6 +327,67 @@
                 behavior: 'smooth'
             });
         }
+
+        // 获取并加载配置
+        async function loadConfig() {
+            try {
+                const response = await fetch('/api/config');
+                const config = await response.json();
+                if (config.logo) {
+                    document.querySelector('.logo').src = config.logo;
+                }
+                if (config.menuItems && Array.isArray(config.menuItems)) {
+                    const navMenu = document.getElementById('navMenu');
+                    navMenu.innerHTML = ''; // 清空菜单
+                    config.menuItems.forEach(item => {
+                        const a = document.createElement('a');
+                        a.href = item.link;
+                        a.textContent = item.text;
+                        if (item.newTab) {
+                            a.target = '_blank';
+                        }
+                        navMenu.appendChild(a);
+                    });
+                }
+                if (config.adImages && Array.isArray(config.adImages)) {
+                    const adContainer = document.getElementById('adContainer');
+                    adContainer.innerHTML = ''; // 清空广告容器
+                    config.adImages.forEach((ad, index) => {
+                        const adLink = document.createElement('a');
+                        adLink.href = ad.link;
+                        adLink.target = '_blank';
+                        const adImage = document.createElement('img');
+                        adImage.src = ad.url;
+                        adImage.alt = ad.alt || '广告图片';
+                        adImage.style.display = 'none'; // 初始状态隐藏所有广告图片
+                        adLink.appendChild(adImage);
+                        adContainer.appendChild(adLink);
+                    });
+
+                    // 轮播功能
+                    let currentAdIndex = 0;
+                    const adImages = adContainer.querySelectorAll('img');
+                    function showAd(index) {
+                        adImages.forEach((img, i) => {
+                            img.style.display = i === index ? 'block' : 'none';
+                        });
+                    }
+                    showAd(currentAdIndex); // 显示第一张广告图片
+
+                    setInterval(() => {
+                        currentAdIndex = (currentAdIndex + 1) % adImages.length;
+                        showAd(currentAdIndex);
+                    }, 5000); // 每5秒切换一次广告
+                }
+                if (config.proxyDomain) {
+                    proxyDomain = config.proxyDomain;
+                }
+            } catch (error) {
+                console.error('加载配置失败:', error);
+            }
+        }
+
+        loadConfig();
     </script>
 </body>
 </html>