├── README.md
├── app.py
├── Beta
    ├── MosdnsUI_Beta.sh
    ├── app.py
    └── index.html
├── MosDNSUI.sh
└── index.html


/README.md:
--------------------------------------------------------------------------------
  1 | # MosDNS 独立监控面板
  2 | 
  3 | ![MosDNS Monitor Panel Light Theme](https://github.com/user-attachments/assets/bfb2a0d0-5c34-45aa-9057-fadf1b472149)
  4 | _亮色主题预览_
  5 | 
  6 | ![MosDNS Monitor Panel Dark Theme](https://github.com/user-attachments/assets/e4e39bf1-855f-4ae3-a488-29099f75e840)
  7 | _暗色主题预览_
  8 | 
  9 | ## 简介
 10 | 
 11 | MosDNS 独立监控面板是一个简洁、美观且功能强大的 MosDNS 服务实时监控解决方案。它以独立的 Web 应用形式运行（基于 Python Flask），通过抓取 MosDNS 自身的 `/metrics` 接口数据，为您提供直观、易于理解的运行状态报告。
 12 | 
 13 | 本面板与 MosDNS 自带的 UI 并行运行，互不影响。它旨在提供一个专注于监控和管理核心缓存指标的界面，并支持多种主题切换，以适应不同用户偏好，提供流畅无闪烁的交互体验。
 14 | 
 15 | ## 主要功能
 16 | 
 17 | *   **实时性能监控**：展示 MosDNS 的请求总数、缓存命中、过期缓存命中、缓存条目数等关键指标。
 18 | *   **系统资源概览**：监控 MosDNS 进程的 CPU 时间、常驻内存 (RSS)、堆内存、Go 版本、线程数和文件描述符数量等系统信息。
 19 | *   **多主题支持**：内置 **默认亮色**、**默认暗色**、**赛博朋克**、**静谧森林**、**日落余晖** 和 **高级灰** 多种主题，一键切换，满足您的视觉偏好。图表颜色也会随主题联动。
 20 | *   **直观的饼图展示**：通过甜甜圈饼图清晰展示缓存的命中率和过期命中率。
 21 | *   **无闪烁实时更新**：自动刷新时，仅更新数据和图表内容，避免整个页面重绘，提供流畅的视觉体验。
 22 | *   **智能刷新控制**：
 23 |     *   提供开关，可选择是否启用 5 秒自动刷新。
 24 |     *   可手动点击“立即刷新”按钮获取最新数据。
 25 |     *   显示数据最后一次更新的时间。
 26 | *   **一键清空 FakeIP 缓存**：方便快捷地执行 MosDNS 的 FakeIP 缓存清空操作。
 27 | *   **独立的 Web 服务**：作为独立的 Flask 应用运行，不依赖或修改 MosDNS 自身配置，互不干扰。
 28 | *   **一键部署与回滚脚本**：提供 Bash 脚本，简化部署和卸载流程。
 29 | *   **集成诊断与修复**：脚本内置诊断功能，可自动检查并尝试修复常见部署问题。
 30 | 
 31 | ## 部署要求
 32 | 
 33 | *   **操作系统**：基于 Debian / Ubuntu 的 Linux 发行版（脚本基于 `apt` 包管理器）。
 34 | *   **MosDNS**：已正确安装并运行，且其 HTTP Metrics 接口（默认为 `http://localhost:9099/metrics`）可访问。
 35 | *   **Python3**：系统需安装 Python3 及 `python3-venv`。
 36 | *   **权限**：需要 `sudo` 权限来安装系统依赖、创建服务和配置防火墙。
 37 | 
 38 | ## 快速开始 (一键部署)
 39 | 
 40 | 本项目的核心是一个 Bash 脚本，它会帮助您一键部署所有必要的组件。
 41 | 
 42 | 1.  **获取部署脚本**：
 43 |     将 `MosDNSUI.sh` 文件下载到您的服务器。最简单的方式是直接从本 GitHub 仓库下载：
 44 |     ```bash
 45 |     wget https://raw.githubusercontent.com/Jimmyzxk/MosDNSUI/main/MosDNSUI.sh -O MosDNSUI.sh
 46 |     ```
 47 |     _（请确保上述 `main` 分支和 `MosDNSUI.sh` 路径在您上传后是正确的）_
 48 | 
 49 | 2.  **赋予执行权限**：
 50 |     ```bash
 51 |     chmod +x MosDNSUI.sh
 52 |     ```
 53 | 
 54 | 3.  **运行部署脚本**：
 55 |     以 `sudo` 权限运行脚本，它将引导您完成部署过程。
 56 | 
 57 |     ```bash
 58 |     sudo ./MosDNSUI.sh
 59 |     ```
 60 | 
 61 |     脚本将提示您选择操作。选择 `部署 MosDNS 监控面板`。
 62 | 
 63 |     **脚本部署步骤概览：**
 64 |     *   检查 MosDNS Metrics 接口可访问性。
 65 |     *   安装 Python3、pip 和 `python3-venv` 等必要依赖。
 66 |     *   创建项目目录 `/opt/mosdns_monitor_panel`。
 67 |     *   创建 Python 虚拟环境并安装 Flask、Gunicorn 和 Requests。
 68 |     *   创建 Flask 后端应用 `app.py`。
 69 |     *   创建网站图标 `favicon.png`。
 70 |     *   创建 HTML 前端页面 `index.html`（**此文件将包含您最新优化的 UI 代码**）。
 71 |     *   创建 Systemd 服务并启动监控面板。
 72 |     *   自动配置 UFW 防火墙以允许访问默认端口 `5001`。
 73 | 
 74 | 4.  **访问监控面板**：
 75 |     部署完成后，您将看到提示信息，通常可以通过以下地址访问您的监控面板：
 76 | 
 77 |     ```
 78 |     http://<您的服务器IP地址>:5001
 79 |     ```
 80 |     例如：`http://192.168.1.100:5001`
 81 | 
 82 |     如果您的服务器有域名解析，也可以使用域名访问。
 83 | 
 84 | ## 使用说明
 85 | 
 86 | 监控面板分为以下几个主要区域：
 87 | 
 88 | *   **缓存状态卡片**：
 89 |     *   显示各类缓存（全部、国内、国外、节点）的详细统计数据，包括请求总数、命中数、过期命中数、命中率、过期命中率和条目数。
 90 |     *   每个卡片顶部有一个状态点，绿色表示有活跃请求，黄色表示无请求。
 91 |     *   甜甜圈饼图直观展示命中率和过期命中率。
 92 | 
 93 | *   **系统信息** (`<i class="fas fa-server"></i>`)：
 94 |     *   展示 MosDNS 进程的启动时间、CPU 占用时间、常驻内存、空闲堆内存、Go 版本、线程数和打开文件描述符数量。
 95 | 
 96 | *   **显示卡片** (`<i class="fas fa-eye"></i>`)：
 97 |     *   您可以勾选/取消勾选来控制页面上显示哪些缓存卡片。选择后页面会自动刷新以应用更改。
 98 | 
 99 | *   **主题切换** (`<i class="fas fa-palette"></i>`)：
100 |     *   提供多种内置主题按钮。点击即可实时切换面板的主题样式。图表颜色、文字颜色、背景颜色等将同步更新，提供一致的视觉体验。
101 | 
102 | *   **操作与刷新** (`<i class="fas fa-tools"></i>`)：
103 |     *   **启用自动刷新 (5s)**：勾选此项，面板将每 5 秒自动获取最新数据并更新页面，且更新过程无闪烁。取消勾选则停止自动刷新。
104 |     *   **立即刷新**：手动点击此按钮可立即获取最新数据并更新页面，保持无闪烁体验。
105 |     *   **清空 FakeIP 缓存**：点击此按钮将向 MosDNS 发送指令，清空 FakeIP 缓存。此操作会触发页面重新加载以反映最新状态。
106 |     *   **最后更新**：显示面板数据最后一次更新的时间。
107 | 
108 | ## 配置
109 | 
110 | 您可以编辑部署脚本 `MosDNSUI.sh` 文件开头的变量来定制面板：
111 | 
112 | *   `FLASK_PORT=5001`：Web 监控面板运行的端口。如果您希望在其他端口运行，请在部署前修改此值。
113 | *   `MOSDNS_METRICS_URL="http://localhost:9099/metrics"`：MosDNS Metrics 接口的完整 URL。如果您的 MosDNS 监听在不同的 IP 或端口，请相应修改。
114 | *   `WEB_USER="www-data"`：运行 Flask 应用的系统用户。默认是 `www-data`，这是一个常见的 Web 服务器用户。
115 | 
116 | **请注意：** 如果您在部署后修改了这些配置，需要先执行回滚/清理操作，然后重新部署。
117 | 
118 | ## 故障诊断与修复
119 | 
120 | 如果监控面板无法正常工作，您可以运行部署脚本中的“一键诊断并尝试修复”选项：
121 | 
122 | ```bash
123 | sudo ./MosDNSUI.sh
124 | 


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
  1 | # app.py - Optimized for the provided index.html
  2 | import os
  3 | import sys
  4 | import requests
  5 | from flask import Flask, render_template, jsonify, Response, request
  6 | import re
  7 | import datetime
  8 | 
  9 | app = Flask(__name__)
 10 | 
 11 | # --- Configuration ---
 12 | # 这是唯一需要您确认的地方！
 13 | # 请确保这里的地址是您 MosDNS 服务的真实管理地址和端口。
 14 | MOSDNS_ADMIN_URL = os.environ.get('MOSDNS_ADMIN_URL', 'http://127.0.0.1:9099')
 15 | MOSDNS_METRICS_URL = f"{MOSDNS_ADMIN_URL}/metrics"
 16 | 
 17 | def fetch_mosdns_metrics():
 18 |     """从 MosDNS /metrics 接口获取原始文本数据"""
 19 |     try:
 20 |         response = requests.get(MOSDNS_METRICS_URL, timeout=5)
 21 |         response.raise_for_status()
 22 |         return response.text, None
 23 |     except requests.exceptions.RequestException as e:
 24 |         error_message = f"无法连接到 MosDNS metrics 接口: {e}"
 25 |         print(f"ERROR: {error_message}", file=sys.stderr)
 26 |         return None, error_message
 27 | 
 28 | def parse_metrics(metrics_text):
 29 |     """解析 metrics 文本并格式化为前端需要的 JSON 结构"""
 30 |     data = {"caches": {}, "system": {"go_version": "N/A"}}
 31 |     
 32 |     # 使用更高效的单次遍历来解析所有指标
 33 |     patterns = {
 34 |         'cache': re.compile(r'mosdns_cache_(\w+)\{tag="([^"]+)"\}\s+([\d.eE+-]+)'),
 35 |         'start_time': re.compile(r'^process_start_time_seconds\s+([\d.eE+-]+)'),
 36 |         'cpu_time': re.compile(r'^process_cpu_seconds_total\s+([\d.eE+-]+)'),
 37 |         'resident_memory': re.compile(r'^process_resident_memory_bytes\s+([\d.eE+-]+)'),
 38 |         'heap_idle_memory': re.compile(r'^go_memstats_heap_idle_bytes\s+([\d.eE+-]+)'),
 39 |         'threads': re.compile(r'^go_threads\s+(\d+)'),
 40 |         'open_fds': re.compile(r'^process_open_fds\s+(\d+)'),
 41 |         'go_version': re.compile(r'go_info\{version="([^"]+)"\}')
 42 |     }
 43 | 
 44 |     for line in metrics_text.split('\n'):
 45 |         if (match := patterns['cache'].match(line)):
 46 |             metric, tag, value = match.groups()
 47 |             if tag not in data["caches"]:
 48 |                 data["caches"][tag] = {}
 49 |             data["caches"][tag][metric] = float(value)
 50 |         elif (match := patterns['start_time'].match(line)):
 51 |             data["system"]["start_time"] = float(match.group(1))
 52 |         elif (match := patterns['cpu_time'].match(line)):
 53 |             data["system"]["cpu_time"] = float(match.group(1))
 54 |         elif (match := patterns['resident_memory'].match(line)):
 55 |             data["system"]["resident_memory"] = float(match.group(1))
 56 |         elif (match := patterns['heap_idle_memory'].match(line)):
 57 |             data["system"]["heap_idle_memory"] = float(match.group(1))
 58 |         elif (match := patterns['threads'].match(line)):
 59 |             data["system"]["threads"] = int(match.group(1))
 60 |         elif (match := patterns['open_fds'].match(line)):
 61 |             data["system"]["open_fds"] = int(match.group(1))
 62 |         elif (match := patterns['go_version'].search(line)):
 63 |             data["system"]["go_version"] = match.group(1)
 64 | 
 65 |     # 计算命中率并格式化数据
 66 |     for tag, metrics in data["caches"].items():
 67 |         query_total = metrics.get("query_total", 0)
 68 |         hit_total = metrics.get("hit_total", 0)
 69 |         lazy_hit_total = metrics.get("lazy_hit_total", 0)
 70 |         metrics["hit_rate"] = f"{(hit_total / query_total * 100):.2f}%" if query_total > 0 else "0.00%"
 71 |         metrics["lazy_hit_rate"] = f"{(lazy_hit_total / query_total * 100):.2f}%" if query_total > 0 else "0.00%"
 72 |     
 73 |     if "start_time" in data["system"]:
 74 |         data["system"]["start_time"] = datetime.datetime.fromtimestamp(data["system"]["start_time"]).strftime('%Y-%m-%d %H:%M:%S')
 75 |     if "cpu_time" in data["system"]:
 76 |         data["system"]["cpu_time"] = f'{data["system"]["cpu_time"]:.2f} 秒'
 77 |     if "resident_memory" in data["system"]:
 78 |         data["system"]["resident_memory"] = f'{(data["system"]["resident_memory"] / 1024**2):.2f} MB'
 79 |     if "heap_idle_memory" in data["system"]:
 80 |         data["system"]["heap_idle_memory"] = f'{(data["system"]["heap_idle_memory"] / 1024**2):.2f} MB'
 81 |         
 82 |     return data
 83 | 
 84 | # --- Flask 路由 ---
 85 | 
 86 | @app.route('/')
 87 | def index():
 88 |     """提供主页面"""
 89 |     return render_template('index.html')
 90 | 
 91 | @app.route('/api/mosdns_status')
 92 | def get_mosdns_status():
 93 |     """为前端提供格式化后的 JSON 监控数据"""
 94 |     metrics_text, error = fetch_mosdns_metrics()
 95 |     if error:
 96 |         return jsonify({"error": error}), 502 # 502 Bad Gateway is more appropriate
 97 |     data = parse_metrics(metrics_text)
 98 |     return jsonify(data)
 99 | 
100 | @app.route('/plugins/<path:subpath>', methods=['GET', 'POST'])
101 | def proxy_plugins_request(subpath):
102 |     """
103 |     代理所有对 /plugins/ 路径的请求，以处理前端的控制按钮操作。
104 |     例如，前端请求 /plugins/my_fakeiplist/save -> 后端请求 http://<mosdns>/plugins/my_fakeiplist/save
105 |     """
106 |     target_url = f"{MOSDNS_ADMIN_URL}/plugins/{subpath}"
107 |     print(f"DEBUG: Proxying request to -> {target_url}", file=sys.stderr)
108 |     
109 |     try:
110 |         # 前端所有按钮都是 GET 请求，但为了健壮性，我们依然可以处理 POST
111 |         if request.method == 'POST':
112 |             resp = requests.post(target_url, timeout=10)
113 |         else:
114 |             resp = requests.get(target_url, timeout=10)
115 |         
116 |         resp.raise_for_status()
117 | 
118 |         # 将 MosDNS 的响应原样返回给浏览器
119 |         content_type = resp.headers.get('Content-Type', 'text/plain; charset=utf-8')
120 |         return Response(resp.text, status=resp.status_code, content_type=content_type)
121 | 
122 |     except requests.exceptions.RequestException as e:
123 |         error_message = f"代理请求到 MosDNS 失败 ({target_url}): {e}"
124 |         print(f"ERROR: {error_message}", file=sys.stderr)
125 |         return Response(f"请求 MosDNS 失败: {e}", status=502, mimetype='text/plain')
126 | 
127 | if __name__ == '__main__':
128 |     # 从环境变量获取端口，默认为 5001
129 |     port = int(os.environ.get('FLASK_PORT', 5001)) 
130 |     # 在生产环境中，建议将 debug 设置为 False
131 |     app.run(host='0.0.0.0', port=port, debug=False)
132 | 


--------------------------------------------------------------------------------
/Beta/MosdnsUI_Beta.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | 
  3 | # MosDNS 独立监控面板 - Beta版专用部署脚本
  4 | # 作者：ChatGPT & JimmyDADA & Phil Horse
  5 | # 版本：9.2 (Beta独立部署版)
  6 | # 特点：
  7 | # - [独立部署] 使用独立的目录、服务名和端口，与正式版完全隔离，互不干扰。
  8 | # - 专为 Beta 版 UI (带背景上传) 设计，自动处理所有依赖和目录。
  9 | 
 10 | # --- 定义颜色和样式 ---
 11 | C_GREEN='\033[0;32m'; C_YELLOW='\033[0;33m'; C_RED='\033[0;31m'; C_BLUE='\033[0;34m'; C_CYAN='\033[0;36m'; C_PURPLE='\033[0;35m'; C_BOLD='\033[1m'; C_NC='\033[0m';
 12 | 
 13 | # --- 辅助日志函数 ---
 14 | log_info() { echo -e "${C_GREEN}✔  [信息]${C_NC} $1"; }
 15 | log_warn() { echo -e "${C_YELLOW}⚠  [警告]${C_NC} $1"; }
 16 | log_error() { echo -e "${C_RED}✖  [错误]${C_NC} $1"; }
 17 | log_step() { echo -e "\n${C_PURPLE}🚀 [步骤 ${1}/${2}]${C_NC} ${C_BOLD}$3${C_NC}"; }
 18 | log_success() { echo -e "\n${C_GREEN}🎉🎉🎉 $1 🎉🎉🎉${C_NC}"; }
 19 | print_line() { echo -e "${C_BLUE}==================================================================${C_NC}"; }
 20 | 
 21 | # --- [BETA版专用配置] ---
 22 | FLASK_APP_NAME="mosdns_monitor_panel_beta"
 23 | PROJECT_DIR="/opt/$FLASK_APP_NAME"
 24 | BACKUP_DIR="$PROJECT_DIR/backups"
 25 | UPLOAD_DIR="$PROJECT_DIR/uploads"
 26 | FLASK_PORT=5002 # Beta版使用 5002 端口
 27 | SYSTEMD_SERVICE_FILE="/etc/systemd/system/$FLASK_APP_NAME.service"
 28 | 
 29 | # 使用您提供的 Beta 版文件下载地址
 30 | APP_PY_URL="https://raw.githubusercontent.com/Jimmyzxk/MosDNSUI/refs/heads/main/Beta/app.py"
 31 | INDEX_HTML_URL="https://raw.githubusercontent.com/Jimmyzxk/MosDNSUI/refs/heads/main/Beta/index.html"
 32 | APP_PY_PATH="$PROJECT_DIR/app.py"
 33 | INDEX_HTML_PATH="$PROJECT_DIR/templates/index.html"
 34 | 
 35 | # --- 共享配置 ---
 36 | MOSDNS_ADMIN_URL="http://127.0.0.1:9099"
 37 | WEB_USER="www-data"
 38 | 
 39 | # --- 辅助命令执行函数 (重构版) ---
 40 | run_command() {
 41 |     local message="$1"; shift
 42 |     printf "    %-55s" "$message"
 43 |     # shellcheck disable=SC2068
 44 |     ($@ &>/dev/null) &
 45 |     local pid=$!; local spin='⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏'; local i=0
 46 |     while kill -0 $pid 2>/dev/null; do
 47 |         i=$(( (i+1) % ${#spin[@]} )); printf "${C_CYAN}%s${C_NC}" "${spin:$i:1}"; sleep 0.1; printf "\b";
 48 |     done
 49 |     wait $pid
 50 |     if [ $? -eq 0 ]; then echo -e "[ ${C_GREEN}成功${C_NC} ]"; return 0;
 51 |     else echo -e "[ ${C_RED}失败${C_NC} ]"; return 1; fi
 52 | }
 53 | 
 54 | # --- 核心功能函数 ---
 55 | deploy_beta() {
 56 |     print_line; echo -e "${C_BLUE}  🚀  开始部署 MosDNS 监控面板 (Beta版)  🚀${C_NC}"; print_line
 57 |     
 58 |     log_step 1 5 "环境检测与依赖安装"
 59 |     run_command "测试 MosDNS 接口..." curl --output /dev/null --silent --head --fail "$MOSDNS_ADMIN_URL/metrics" || { log_error "无法访问 MosDNS 接口。"; return 1; }
 60 |     if ! id -u "$WEB_USER" >/dev/null 2>&1; then run_command "创建系统用户 '$WEB_USER'..." adduser --system --no-create-home --group "$WEB_USER" || return 1; fi
 61 |     run_command "更新 apt 缓存..." apt-get update -qq
 62 |     run_command "安装系统依赖..." apt-get install -y python3 python3-pip python3-flask python3-requests python3-werkzeug curl wget || return 1
 63 |     
 64 |     log_step 2 5 "创建 Beta 版项目目录结构"
 65 |     run_command "创建所有目录 (包括 uploads)..." mkdir -p "$PROJECT_DIR/templates" "$PROJECT_DIR/static" "$BACKUP_DIR" "$UPLOAD_DIR" || return 1
 66 |     
 67 |     log_step 3 5 "下载 Beta 版核心应用文件"
 68 |     run_command "下载 app.py (Beta)..." wget -qO "$APP_PY_PATH" "$APP_PY_URL" || { log_error "下载 app.py 失败！"; return 1; }
 69 |     run_command "下载 index.html (Beta)..." wget -qO "$INDEX_HTML_PATH" "$INDEX_HTML_URL" || { log_error "下载 index.html 失败！"; return 1; }
 70 |     run_command "设置文件权限..." chown -R "$WEB_USER:$WEB_USER" "$PROJECT_DIR" || return 1
 71 | 
 72 |     log_step 4 5 "创建并配置 Beta 版 Systemd 服务"
 73 |     local python_path; python_path=$(which python3)
 74 |     cat <<EOF > "$SYSTEMD_SERVICE_FILE"
 75 | [Unit]
 76 | Description=MosDNS Monitoring Panel (Beta)
 77 | After=network.target
 78 | [Service]
 79 | User=$WEB_USER
 80 | Group=$WEB_USER
 81 | WorkingDirectory=$PROJECT_DIR
 82 | ExecStart=$python_path app.py
 83 | Environment="FLASK_PORT=$FLASK_PORT"
 84 | Restart=always
 85 | [Install]
 86 | WantedBy=multi-user.target
 87 | EOF
 88 |     run_command "创建 Systemd 服务文件 (${FLASK_APP_NAME}.service)..." true
 89 | 
 90 |     log_step 5 5 "启动服务并设置开机自启"
 91 |     run_command "重载 Systemd..." systemctl daemon-reload || return 1
 92 |     run_command "启用 Beta 服务..." systemctl enable "$FLASK_APP_NAME" || return 1
 93 |     run_command "重启 Beta 服务..." systemctl restart "$FLASK_APP_NAME" || { log_error "服务启动失败！请检查日志。"; return 1; }
 94 |     
 95 |     local ip_addr; ip_addr=$(hostname -I | awk '{print $1}')
 96 |     print_line; log_success "Beta 版部署完成！"
 97 |     echo -e "${C_CYAN}
 98 |     ┌──────────────────────────────────────────────────┐
 99 |     │                                                  │
100 |     │   请在浏览器中访问 Beta 版面板:                    │
101 |     │   ${C_BOLD}http://${ip_addr}:${FLASK_PORT}${C_NC}                     │
102 |     │                                                  │
103 |     └──────────────────────────────────────────────────┘
104 |     ${C_NC}"
105 | }
106 | 
107 | uninstall_beta() {
108 |     log_warn "正在卸载 Beta 版..."
109 |     run_command "停止并禁用 Beta 服务" systemctl stop "$FLASK_APP_NAME" && systemctl disable "$FLASK_APP_NAME"
110 |     run_command "移除 Beta 服务文件" rm -f "$SYSTEMD_SERVICE_FILE" && systemctl daemon-reload
111 |     run_command "移除 Beta 项目目录" rm -rf "$PROJECT_DIR"
112 |     log_success "Beta 版卸载完成！"
113 | }
114 | 
115 | # --- 主程序逻辑 ---
116 | main() {
117 |     clear; print_line
118 |     echo -e "${C_BLUE}  MosDNS 监控面板 Beta 版管理脚本  ${C_NC}"; print_line; echo ""
119 |     if [[ $EUID -ne 0 ]]; then log_error "此脚本必须以 root 用户运行。"; exit 1; fi
120 | 
121 |     PS3="请选择操作: "
122 |     options=("部署 / 重装 Beta 版" "卸载 Beta 版" "退出")
123 |     select opt in "${options[@]}"; do
124 |         case $opt in
125 |             "部署 / 重装 Beta 版")
126 |                 read -rp "这将覆盖现有 Beta 版部署。确定吗？ (y/N): " c; if [[ "$c" =~ ^[yY]$ ]]; then uninstall_beta; deploy_beta; fi; break;;
127 |             "卸载 Beta 版")
128 |                 read -rp "警告：这将删除 Beta 版所有文件和服务！确定吗？(y/N): " c; if [[ "$c" =~ ^[yY]$ ]]; then uninstall_beta; fi; break;;
129 |             "退出") break;;
130 |             *) echo "无效选项 $REPLY";;
131 |         esac
132 |     done
133 |     echo ""; print_line; echo -e "${C_BLUE}    -- 操作完成 --${C_NC}"; print_line
134 | }
135 | 
136 | main "$@"
137 | 


--------------------------------------------------------------------------------
/Beta/app.py:
--------------------------------------------------------------------------------
  1 | # Beta/app.py
  2 | import os
  3 | import sys
  4 | import requests
  5 | from flask import Flask, render_template, jsonify, Response, request, send_from_directory
  6 | from werkzeug.utils import secure_filename
  7 | import re
  8 | import datetime
  9 | 
 10 | app = Flask(__name__)
 11 | 
 12 | # --- 全局配置 ---
 13 | PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
 14 | UPLOAD_FOLDER = os.path.join(PROJECT_ROOT, 'uploads')
 15 | ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
 16 | CUSTOM_BG_FILENAME = 'custom_background'
 17 | 
 18 | # 确保上传目录存在
 19 | if not os.path.exists(UPLOAD_FOLDER):
 20 |     os.makedirs(UPLOAD_FOLDER)
 21 | 
 22 | app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 23 | 
 24 | MOSDNS_ADMIN_URL = os.environ.get('MOSDNS_ADMIN_URL', 'http://127.0.0.1:9099')
 25 | 
 26 | # --- 辅助函数 ---
 27 | def allowed_file(filename):
 28 |     """检查文件后缀是否允许"""
 29 |     return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
 30 | 
 31 | def get_current_background_filename():
 32 |     """检查是否存在自定义背景文件，并返回其完整文件名"""
 33 |     for ext in ALLOWED_EXTENSIONS:
 34 |         filepath = os.path.join(app.config['UPLOAD_FOLDER'], f"{CUSTOM_BG_FILENAME}.{ext}")
 35 |         if os.path.exists(filepath):
 36 |             return f"{CUSTOM_BG_FILENAME}.{ext}"
 37 |     return None
 38 | 
 39 | # --- 数据获取与解析 ---
 40 | def fetch_mosdns_metrics():
 41 |     try:
 42 |         response = requests.get(f"{MOSDNS_ADMIN_URL}/metrics", timeout=5)
 43 |         response.raise_for_status()
 44 |         return response.text, None
 45 |     except requests.exceptions.RequestException as e:
 46 |         return None, f"无法连接到 MosDNS metrics 接口: {e}"
 47 | 
 48 | def parse_metrics(metrics_text):
 49 |     data = {"caches": {}, "system": {"go_version": "N/A"}}
 50 |     patterns = {
 51 |         'cache': re.compile(r'mosdns_cache_(\w+)\{tag="([^"]+)"\}\s+([\d.eE+-]+)'),
 52 |         'start_time': re.compile(r'^process_start_time_seconds\s+([\d.eE+-]+)'),
 53 |         'cpu_time': re.compile(r'^process_cpu_seconds_total\s+([\d.eE+-]+)'),
 54 |         'resident_memory': re.compile(r'^process_resident_memory_bytes\s+([\d.eE+-]+)'),
 55 |         'heap_idle_memory': re.compile(r'^go_memstats_heap_idle_bytes\s+([\d.eE+-]+)'),
 56 |         'threads': re.compile(r'^go_threads\s+(\d+)'),
 57 |         'open_fds': re.compile(r'^process_open_fds\s+(\d+)'),
 58 |         'go_version': re.compile(r'go_info\{version="([^"]+)"\}')
 59 |     }
 60 |     for line in metrics_text.split('\n'):
 61 |         if (match := patterns['cache'].match(line)):
 62 |             metric, tag, value = match.groups()
 63 |             if tag not in data["caches"]: data["caches"][tag] = {}
 64 |             data["caches"][tag][metric] = float(value)
 65 |         elif (match := patterns['start_time'].match(line)): data["system"]["start_time"] = float(match.group(1))
 66 |         elif (match := patterns['cpu_time'].match(line)): data["system"]["cpu_time"] = float(match.group(1))
 67 |         elif (match := patterns['resident_memory'].match(line)): data["system"]["resident_memory"] = float(match.group(1))
 68 |         elif (match := patterns['heap_idle_memory'].match(line)): data["system"]["heap_idle_memory"] = float(match.group(1))
 69 |         elif (match := patterns['threads'].match(line)): data["system"]["threads"] = int(match.group(1))
 70 |         elif (match := patterns['open_fds'].match(line)): data["system"]["open_fds"] = int(match.group(1))
 71 |         elif (match := patterns['go_version'].search(line)): data["system"]["go_version"] = match.group(1)
 72 | 
 73 |     for tag, metrics in data["caches"].items():
 74 |         query_total = metrics.get("query_total", 0)
 75 |         hit_total = metrics.get("hit_total", 0)
 76 |         lazy_hit_total = metrics.get("lazy_hit_total", 0)
 77 |         metrics["hit_rate"] = f"{(hit_total / query_total * 100):.2f}%" if query_total > 0 else "0.00%"
 78 |         metrics["lazy_hit_rate"] = f"{(lazy_hit_total / query_total * 100):.2f}%" if query_total > 0 else "0.00%"
 79 |     
 80 |     if "start_time" in data["system"] and data["system"]["start_time"]: data["system"]["start_time"] = datetime.datetime.fromtimestamp(data["system"]["start_time"]).strftime('%Y-%m-%d %H:%M:%S')
 81 |     if "cpu_time" in data["system"] and data["system"]["cpu_time"]: data["system"]["cpu_time"] = f'{data["system"]["cpu_time"]:.2f} 秒'
 82 |     if "resident_memory" in data["system"] and data["system"]["resident_memory"]: data["system"]["resident_memory"] = f'{(data["system"]["resident_memory"] / 1024**2):.2f} MB'
 83 |     if "heap_idle_memory" in data["system"] and data["system"]["heap_idle_memory"]: data["system"]["heap_idle_memory"] = f'{(data["system"]["heap_idle_memory"] / 1024**2):.2f} MB'
 84 |         
 85 |     return data
 86 | 
 87 | # --- Flask 路由 ---
 88 | 
 89 | @app.route('/')
 90 | def index():
 91 |     return render_template('index.html')
 92 | 
 93 | @app.route('/api/mosdns_status')
 94 | def get_mosdns_status():
 95 |     metrics_text, error = fetch_mosdns_metrics()
 96 |     if error: return jsonify({"error": error}), 502
 97 |     return jsonify(parse_metrics(metrics_text))
 98 | 
 99 | @app.route('/plugins/<path:subpath>', methods=['GET'])
100 | def proxy_plugins_request(subpath):
101 |     target_url = f"{MOSDNS_ADMIN_URL}/plugins/{subpath}"
102 |     try:
103 |         resp = requests.get(target_url, timeout=10)
104 |         resp.raise_for_status()
105 |         content_type = resp.headers.get('Content-Type', 'text/plain; charset=utf-8')
106 |         return Response(resp.text, status=resp.status_code, content_type=content_type)
107 |     except requests.exceptions.RequestException as e:
108 |         return Response(f"请求 MosDNS 失败: {e}", status=502, mimetype='text/plain')
109 | 
110 | # --- 背景图片 API ---
111 | 
112 | @app.route('/api/background_status')
113 | def get_background_status():
114 |     filename = get_current_background_filename()
115 |     if filename: return jsonify({"status": "custom", "url": f"/backgrounds/{filename}"})
116 |     return jsonify({"status": "default"})
117 | 
118 | @app.route('/backgrounds/<path:filename>')
119 | def serve_background(filename):
120 |     return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
121 | 
122 | @app.route('/api/upload_background', methods=['POST'])
123 | def upload_background():
124 |     if 'background_image' not in request.files: return jsonify({"error": "请求中没有文件部分"}), 400
125 |     file = request.files['background_image']
126 |     if file.filename == '': return jsonify({"error": "未选择文件"}), 400
127 |     if file and allowed_file(file.filename):
128 |         try:
129 |             old_filename = get_current_background_filename()
130 |             if old_filename: os.remove(os.path.join(app.config['UPLOAD_FOLDER'], old_filename))
131 |             ext = file.filename.rsplit('.', 1)[1].lower()
132 |             new_filename = f"{CUSTOM_BG_FILENAME}.{ext}"
133 |             file.save(os.path.join(app.config['UPLOAD_FOLDER'], new_filename))
134 |             return jsonify({"success": True, "url": f"/backgrounds/{new_filename}"})
135 |         except Exception as e: return jsonify({"error": f"保存文件失败: {e}"}), 500
136 |     return jsonify({"error": "文件类型不允许"}), 400
137 | 
138 | @app.route('/api/remove_background', methods=['POST'])
139 | def remove_background():
140 |     filename = get_current_background_filename()
141 |     if filename:
142 |         try:
143 |             os.remove(os.path.join(app.config['UPLOAD_FOLDER'], filename))
144 |             return jsonify({"success": True})
145 |         except OSError as e: return jsonify({"error": f"删除文件失败: {e}"}), 500
146 |     return jsonify({"success": True, "message": "没有自定义背景可删除"})
147 | 
148 | if __name__ == '__main__':
149 |     port = int(os.environ.get('FLASK_PORT', 5002))
150 |     app.run(host='0.0.0.0', port=port, debug=False)
151 | 


--------------------------------------------------------------------------------
/MosDNSUI.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | 
  3 | # MosDNS 独立监控面板 - 一键部署、更新、恢复脚本
  4 | # 作者：ChatGPT & JimmyDADA & Phil Horse
  5 | # 版本：7.3 (终极视觉修复版)
  6 | # 特点：
  7 | # - [UI/UX] 重构日志输出和命令执行函数，彻底解决终端乱码问题，输出更专业。
  8 | # - 保持了所有核心功能：自动部署、更新、恢复、诊断。
  9 | # - 保持了最佳兼容性：通过外部下载和系统 apt 安装。
 10 | 
 11 | # --- 定义颜色和样式 ---
 12 | C_GREEN='\033[0;32m'
 13 | C_YELLOW='\033[0;33m'
 14 | C_RED='\033[0;31m'
 15 | C_BLUE='\033[0;34m'
 16 | C_CYAN='\033[0;36m'
 17 | C_PURPLE='\033[0;35m'
 18 | C_BOLD='\033[1m'
 19 | C_NC='\033[0m' # No Color
 20 | 
 21 | # --- 辅助日志函数 ---
 22 | log_info() { echo -e "${C_GREEN}✔  [信息]${C_NC} $1"; }
 23 | log_warn() { echo -e "${C_YELLOW}⚠  [警告]${C_NC} $1"; }
 24 | log_error() { echo -e "${C_RED}✖  [错误]${C_NC} $1"; }
 25 | log_step() { echo -e "\n${C_PURPLE}🚀 [步骤 ${1}/${2}]${C_NC} ${C_BOLD}$3${C_NC}"; }
 26 | log_success() { echo -e "\n${C_GREEN}🎉🎉🎉 $1 🎉🎉🎉${C_NC}"; }
 27 | print_line() { echo -e "${C_BLUE}============================================================${C_NC}"; }
 28 | 
 29 | # --- 全局变量 ---
 30 | FLASK_APP_NAME="mosdns_monitor_panel"
 31 | PROJECT_DIR="/opt/$FLASK_APP_NAME"
 32 | BACKUP_DIR="$PROJECT_DIR/backups"
 33 | FLASK_PORT=5001
 34 | MOSDNS_ADMIN_URL="http://127.0.0.1:9099"
 35 | WEB_USER="www-data"
 36 | SYSTEMD_SERVICE_FILE="/etc/systemd/system/$FLASK_APP_NAME.service"
 37 | 
 38 | # --- 外部下载地址 ---
 39 | APP_PY_URL="https://raw.githubusercontent.com/Jimmyzxk/MosDNSUI/main/app.py"
 40 | INDEX_HTML_URL="https://raw.githubusercontent.com/Jimmyzxk/MosDNSUI/main/index.html"
 41 | APP_PY_PATH="$PROJECT_DIR/app.py"
 42 | INDEX_HTML_PATH="$PROJECT_DIR/templates/index.html"
 43 | 
 44 | # --- [重构] 辅助命令执行函数 ---
 45 | run_command() {
 46 |     local message="$1"
 47 |     shift # 移除消息参数，剩下的是要执行的命令
 48 |     
 49 |     # 打印任务描述，使用 printf 控制格式，-55s 表示左对齐，宽度为55
 50 |     printf "    %-55s" "$message"
 51 | 
 52 |     # 在子shell中执行命令，并将输出重定向到/dev/null
 53 |     # shellcheck disable=SC2068
 54 |     ($@ &>/dev/null) &
 55 |     local pid=$!
 56 |     
 57 |     # 加载动画
 58 |     local -a spin='⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏'
 59 |     local i=0
 60 |     while kill -0 $pid 2>/dev/null; do
 61 |         i=$(( (i+1) % ${#spin[@]} ))
 62 |         printf "${C_CYAN}%s${C_NC}" "${spin[$i]}"
 63 |         sleep 0.1
 64 |         printf "\b"
 65 |     done
 66 |     wait $pid
 67 |     local ret=$?
 68 | 
 69 |     # 打印最终状态
 70 |     if [ $ret -eq 0 ]; then
 71 |         echo -e "[ ${C_GREEN}成功${C_NC} ]"
 72 |         return 0
 73 |     else
 74 |         echo -e "[ ${C_RED}失败${C_NC} ]"
 75 |         # 失败时不需要打印命令，因为主调函数会处理
 76 |         return 1
 77 |     fi
 78 | }
 79 | 
 80 | # --- 卸载函数 ---
 81 | uninstall_monitor() {
 82 |     log_warn "正在执行卸载/清理操作..."
 83 |     if systemctl is-active --quiet "$FLASK_APP_NAME"; then
 84 |         run_command "停止并禁用 Systemd 服务" systemctl stop "$FLASK_APP_NAME"
 85 |         run_command "禁用 Systemd 服务" systemctl disable "$FLASK_APP_NAME"
 86 |     fi
 87 |     if [ -f "$SYSTEMD_SERVICE_FILE" ]; then
 88 |         run_command "移除 Systemd 服务文件" rm -f "$SYSTEMD_SERVICE_FILE"
 89 |         run_command "重载 Systemd 配置" systemctl daemon-reload
 90 |     fi
 91 |     if [ -d "$PROJECT_DIR" ]; then
 92 |         run_command "移除项目目录 $PROJECT_DIR" rm -rf "$PROJECT_DIR"
 93 |     fi
 94 |     log_success "卸载/清理操作完成！"
 95 | }
 96 | 
 97 | # --- 部署函数 ---
 98 | deploy_monitor() {
 99 |     print_line
100 |     echo -e "${C_BLUE}  🚀  开始部署 MosDNS 监控面板 v7.3  🚀${C_NC}"
101 |     print_line
102 |     
103 |     log_step 1 5 "环境检测与依赖安装"
104 |     run_command "测试 MosDNS 接口..." curl --output /dev/null --silent --head --fail "$MOSDNS_ADMIN_URL/metrics" || { log_error "无法访问 MosDNS 接口。"; return 1; }
105 |     
106 |     if ! id -u "$WEB_USER" >/dev/null 2>&1; then
107 |         run_command "创建系统用户 '$WEB_USER'..." adduser --system --no-create-home --group "$WEB_USER" || return 1
108 |     fi
109 | 
110 |     run_command "更新 apt 缓存..." apt-get update -qq
111 |     run_command "安装系统依赖..." apt-get install -y python3 python3-pip python3-flask python3-requests curl wget || return 1
112 |     
113 |     log_step 2 5 "创建项目目录结构"
114 |     run_command "创建主目录及子目录..." mkdir -p "$PROJECT_DIR/templates" "$PROJECT_DIR/static" "$BACKUP_DIR" || return 1
115 |     
116 |     log_step 3 5 "下载核心应用文件"
117 |     run_command "下载 app.py..." wget -qO "$APP_PY_PATH" "$APP_PY_URL" || { log_error "下载 app.py 失败！"; return 1; }
118 |     run_command "下载 index.html..." wget -qO "$INDEX_HTML_PATH" "$INDEX_HTML_URL" || { log_error "下载 index.html 失败！"; return 1; }
119 |     run_command "设置文件权限..." chown -R "$WEB_USER:$WEB_USER" "$PROJECT_DIR" || return 1
120 | 
121 |     log_step 4 5 "创建并配置 Systemd 服务"
122 |     local python_path; python_path=$(which python3)
123 |     cat <<EOF > "$SYSTEMD_SERVICE_FILE"
124 | [Unit]
125 | Description=MosDNS Monitoring Panel Flask App
126 | After=network.target
127 | [Service]
128 | User=$WEB_USER
129 | Group=$WEB_USER
130 | WorkingDirectory=$PROJECT_DIR
131 | ExecStart=$python_path app.py
132 | Environment="FLASK_PORT=$FLASK_PORT"
133 | Restart=always
134 | [Install]
135 | WantedBy=multi-user.target
136 | EOF
137 |     run_command "创建 Systemd 服务文件..." true # 'true' is a dummy command to show status
138 | 
139 |     log_step 5 5 "启动服务并设置开机自启"
140 |     run_command "重载 Systemd..." systemctl daemon-reload || return 1
141 |     run_command "启用服务..." systemctl enable "$FLASK_APP_NAME" || return 1
142 |     run_command "重启服务..." systemctl restart "$FLASK_APP_NAME" || {
143 |         log_error "服务启动失败！"
144 |         log_warn "请运行 'sudo journalctl -u $FLASK_APP_NAME -f' 查看详细日志。"
145 |         return 1
146 |     }
147 |     
148 |     local ip_addr; ip_addr=$(hostname -I | awk '{print $1}')
149 |     print_line
150 |     log_success "部署完成！您的监控面板已准备就绪"
151 |     echo -e "${C_CYAN}
152 |     ┌──────────────────────────────────────────────────┐
153 |     │                                                  │
154 |     │   请在浏览器中访问以下地址:                        │
155 |     │   ${C_BOLD}http://${ip_addr}:${FLASK_PORT}${C_NC}                     │
156 |     │                                                  │
157 |     └──────────────────────────────────────────────────┘
158 |     ${C_NC}"
159 |     return 0
160 | }
161 | 
162 | # --- 更新函数 ---
163 | update_app() {
164 |     print_line; echo -e "${C_BLUE}  🔄  开始一键更新流程  🔄${C_NC}"; print_line
165 |     if [ ! -d "$PROJECT_DIR" ]; then log_error "项目目录不存在，请先部署。"; return 1; fi
166 | 
167 |     local timestamp; timestamp=$(date +"%Y%m%d-%H%M%S")
168 |     local current_backup_dir="$BACKUP_DIR/$timestamp"
169 |     
170 |     run_command "创建备份目录..." mkdir -p "$current_backup_dir/templates" || return 1
171 |     run_command "备份 app.py..." cp "$APP_PY_PATH" "$current_backup_dir/app.py" || return 1
172 |     run_command "备份 index.html..." cp "$INDEX_HTML_PATH" "$current_backup_dir/templates/index.html" || return 1
173 | 
174 |     log_info "正在从 GitHub 下载最新版本..."
175 |     run_command "下载新版 app.py..." wget -qO "$APP_PY_PATH" "$APP_PY_URL" || { log_error "下载 app.py 失败！"; return 1; }
176 |     run_command "下载新版 index.html..." wget -qO "$INDEX_HTML_PATH" "$INDEX_HTML_URL" || { log_error "下载 index.html 失败！"; return 1; }
177 |     
178 |     run_command "重设文件权限..." chown -R "$WEB_USER:$WEB_USER" "$PROJECT_DIR"
179 |     
180 |     run_command "重启服务以应用更新..." systemctl restart "$FLASK_APP_NAME"
181 |     
182 |     log_success "更新成功！请刷新浏览器页面查看新版本。"
183 | }
184 | 
185 | # --- 恢复函数 ---
186 | revert_app() {
187 |     print_line; echo -e "${C_BLUE}  ⏪  开始版本恢复流程  ⏪${C_NC}"; print_line
188 |     if [ ! -d "$BACKUP_DIR" ] || [ -z "$(ls -A "$BACKUP_DIR")" ]; then
189 |         log_warn "没有找到任何备份。无法执行恢复操作。"
190 |         return 0
191 |     fi
192 | 
193 |     log_info "发现以下备份版本（按时间倒序）："
194 |     local backups=(); while IFS= read -r line; do backups+=("$line"); done < <(ls -1r "$BACKUP_DIR")
195 |     local i=1
196 |     for backup in "${backups[@]}"; do
197 |         echo -e "    ${C_YELLOW}$i)${C_NC} ${C_CYAN}$backup${C_NC}"
198 |         i=$((i+1))
199 |     done
200 | 
201 |     local selection
202 |     read -rp "请输入您要恢复的备份版本编号 (1-${#backups[@]}): " selection
203 | 
204 |     if ! [[ "$selection" =~ ^[0-9]+$ ]] || [ "$selection" -lt 1 ] || [ "$selection" -gt ${#backups[@]} ]; then
205 |         log_error "无效的编号。操作已取消。"
206 |         return 1
207 |     fi
208 | 
209 |     local selected_backup_dir="$BACKUP_DIR/${backups[$((selection-1))]}"
210 |     log_info "您选择了恢复版本: ${backups[$((selection-1))]}"
211 |     read -rp "确定要用此版本覆盖当前文件吗？(y/N): " CONFIRM
212 | 
213 |     if [[ "$CONFIRM" =~ ^[yY]$ ]]; then
214 |         run_command "从 $selected_backup_dir 恢复文件..." \
215 |             cp "$selected_backup_dir/app.py" "$APP_PY_PATH" && \
216 |             cp "$selected_backup_dir/templates/index.html" "$INDEX_HTML_PATH"
217 |         run_command "重设文件权限..." chown -R "$WEB_USER:$WEB_USER" "$PROJECT_DIR"
218 |         run_command "重启服务以应用恢复..." systemctl restart "$FLASK_APP_NAME"
219 |         log_success "恢复成功！请刷新浏览器页面。"
220 |     else
221 |         log_info "恢复操作已取消。"
222 |     fi
223 | }
224 | 
225 | # --- 诊断函数 ---
226 | diagnose_and_fix() {
227 |     print_line; echo -e "${C_BLUE}  🩺  开始一键诊断流程  🩺${C_NC}"; print_line
228 |     
229 |     log_info "检查 MosDNS 服务..."
230 |     if curl --output /dev/null --silent --head --fail "$MOSDNS_ADMIN_URL/metrics"; then
231 |         log_green "✅ MosDNS 服务正常。"
232 |     else
233 |         log_warn "❌ MosDNS 服务无法访问。请手动检查。"
234 |     fi
235 | 
236 |     log_info "检查监控面板服务..."
237 |     if systemctl is-active --quiet "$FLASK_APP_NAME"; then
238 |         log_green "✅ 监控面板服务 ($FLASK_APP_NAME) 正在运行。"
239 |     else
240 |         log_warn "❌ 监控面板服务未运行。尝试重启..."
241 |         run_command "重启监控服务..." systemctl restart "$FLASK_APP_NAME" || log_error "重启失败，请查看日志: journalctl -u $FLASK_APP_NAME"
242 |     fi
243 | }
244 | 
245 | # --- 主程序逻辑 ---
246 | main() {
247 |     clear
248 |     print_line
249 |     echo -e "${C_PURPLE}  __  __  ____  ____    _   _ ____  _   _ ___  _   _${C_NC}"
250 |     echo -e "${C_PURPLE} |  \\/  |/ ___|/ ___|  | \\ | |  _ \\| \\ | |_ _|| \\ | |${C_NC}"
251 |     echo -e "${C_PURPLE} | |\\/| | |  _| |      |  \\| | | | |  \\| || | |  \\| |${C_NC}"
252 |     echo -e "${C_PURPLE} | |  | | |_| | |___   | |\\  | |_| | |\\  || | | |\\  |${C_NC}"
253 |     echo -e "${C_PURPLE} |_|  |_|\\____|\\____|  |_| \\_|____/|_| \\_|___||_| \\_|${C_NC}"
254 |     echo -e "${C_BLUE}           独立监控面板 - 管理脚本 v7.3${C_NC}"
255 |     print_line
256 |     echo ""
257 | 
258 |     if [[ $EUID -ne 0 ]]; then
259 |        log_error "此脚本必须以 root 用户运行。请使用 'sudo bash $0'"
260 |        exit 1
261 |     fi
262 | 
263 |     echo -e "${C_BOLD}请选择您要执行的操作:${C_NC}"
264 |     echo -e "    ${C_YELLOW}1)${C_NC} ${C_CYAN}部署 / 重装监控面板${C_NC}"
265 |     echo -e "    ${C_YELLOW}2)${C_NC} ${C_CYAN}一键更新 (从 GitHub)${C_NC}"
266 |     echo -e "    ${C_YELLOW}3)${C_NC} ${C_CYAN}一键恢复 (从本地备份)${C_NC}"
267 |     echo -e "    ${C_YELLOW}4)${C_NC} ${C_CYAN}一键诊断${C_NC}"
268 |     echo -e "    ${C_YELLOW}5)${C_NC} ${C_RED}卸载监控面板${C_NC}"
269 |     echo -e "    ${C_YELLOW}6)${C_NC} ${C_CYAN}退出脚本${C_NC}"
270 |     echo ""
271 |     
272 |     local choice
273 |     read -rp "请输入选项编号 [1-6]: " choice
274 | 
275 |     case $choice in
276 |         1)
277 |             read -rp "这将覆盖现有部署。确定吗？ (y/N): " CONFIRM
278 |             if [[ "$CONFIRM" =~ ^[yY]$ ]]; then
279 |                 uninstall_monitor
280 |                 deploy_monitor
281 |             else
282 |                 log_info "部署已取消。"
283 |             fi
284 |             ;;
285 |         2)
286 |             read -rp "这将备份当前版本并从GitHub下载最新版。确定吗？ (y/N): " CONFIRM
287 |             if [[ "$CONFIRM" =~ ^[yY]$ ]]; then
288 |                 update_app
289 |             else
290 |                 log_info "更新已取消。"
291 |             fi
292 |             ;;
293 |         3)
294 |             revert_app
295 |             ;;
296 |         4)
297 |             diagnose_and_fix
298 |             ;;
299 |         5)
300 |             read -rp "警告：这将删除所有相关文件、服务和备份！确定吗？(y/N): " CONFIRM
301 |             if [[ "$CONFIRM" =~ ^[yY]$ ]]; then
302 |                 uninstall_monitor
303 |             else
304 |                 log_info "卸载已取消。"
305 |             fi
306 |             ;;
307 |         6)
308 |             log_info "脚本已退出。"
309 |             exit 0
310 |             ;;
311 |         *) 
312 |             log_error "无效的选项。"
313 |             ;;
314 |     esac
315 |     
316 |     echo ""
317 |     print_line
318 |     echo -e "${C_BLUE}    -- 操作完成 --${C_NC}"
319 |     print_line
320 | }
321 | 
322 | # --- 脚本入口 ---
323 | main "$@"
324 | 


--------------------------------------------------------------------------------
/Beta/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>MosDNS 监控面板 (Beta)</title>
  7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  8 |     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
  9 |     <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
 10 |     <style>
 11 |         :root {
 12 |             --bg-color: #f7f9fd; --text-color: #2c3e50; --card-bg: #ffffff;
 13 |             --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); --border-color: #e0e6ec;
 14 |             --accent-color: #4a90e2; --error-color: #e74c3c; --label-color: #7f8c8d;
 15 |             --value-color: #34495e; --control-bg: #f0f4f7; --control-border: #d5dce2;
 16 |             --control-text: #5e727e; --control-hover-bg: #e5edf3;
 17 |             --control-active-bg: var(--accent-color); --control-active-text: #ffffff;
 18 |             --status-green: #2ecc71; --status-yellow: #f1c40f;
 19 |             --gradient-start: #4a90e2; --gradient-mid: #2e86de; --gradient-end: #4a90e2;
 20 |             --radius-main: 0.8rem; --radius-bar: 0.2rem; --radius-control: 0.5rem;
 21 |             --danger-bg-color: rgba(231, 76, 60, 0.1); --danger-border-color: rgba(231, 76, 60, 0.3);
 22 |             --danger-text-color: #e74c3c; --danger-hover-bg-color: #e74c3c; --danger-hover-text-color: #ffffff;
 23 |             /* [新] 毛玻璃强度变量 */
 24 |             --glass-blur-strength: 12px;
 25 |         }
 26 |         html { font-size: 16px; scroll-behavior: smooth; }
 27 |         body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; margin: 0; padding: 2rem; background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; transition: background-color 0.4s ease, color 0.4s ease, background-image 0.5s ease-in-out; min-height: 100vh; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
 28 |         body.custom-background { background-size: cover; background-position: center; background-attachment: fixed; }
 29 |         .header { text-align: center; width: 100%; max-width: 1200px; margin-bottom: 2rem; }
 30 |         .header h1 { font-size: 2.2rem; color: var(--text-color); margin: 0 0 0.5rem 0; font-weight: 700; letter-spacing: -0.03em; }
 31 |         .header .header-gradient-bar { width: 80px; height: 4px; margin: 0 auto 1.5rem auto; border-radius: var(--radius-bar); background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end)); }
 32 |         .card-title-gradient-bar { width: 100%; height: 3px; border-radius: var(--radius-bar); background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end), var(--gradient-start)); background-size: 200% auto; animation: gradient-scroll 6s linear infinite; transition: background-image 0.4s ease; }
 33 |         @keyframes gradient-scroll { 100% { background-position: 100% 0%; } }
 34 |         .main-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1.5rem; width: 100%; max-width: 1800px; flex-grow: 1; margin-bottom: 2rem; justify-content: center; align-items: start; }
 35 |         .card { background-color: var(--card-bg); border-radius: var(--radius-main); box-shadow: var(--card-shadow); padding: 1.5rem; display: none; flex-direction: column; box-sizing: border-box; transition: all 0.3s ease; border: 1px solid var(--border-color); }
 36 |         .card.visible { display: flex; }
 37 |         .card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); }
 38 |         h2 { font-size: 1.5rem; color: var(--text-color); margin: 0; font-weight: 600; display: flex; align-items: center; gap: 0.7rem; }
 39 |         h2 .title-text { flex-grow: 1; text-align: left; }
 40 |         h2 .status-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; transition: background-color 0.3s ease; flex-shrink: 0; }
 41 |         h2 .status-dot.status-green { background-color: var(--status-green); } h2 .status-dot.status-yellow { background-color: var(--status-yellow); }
 42 |         .card-title-gradient-bar { max-width: 100%; margin: 0.5rem 0 1.2rem 0; }
 43 |         .charts { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; gap: 1.2rem; align-items: center; width: 100%; padding-top: 1.2rem; margin-top: 1rem; border-top: 1px solid var(--border-color); }
 44 |         .chart-container { position: relative; width: 130px; height: 130px; }
 45 |         #loading-spinner { display: none; width: 40px; height: 40px; border: 4px solid var(--border-color); border-top-color: var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 4rem auto; }
 46 |         @keyframes spin { to { transform: rotate(360deg); } }
 47 |         .loading #loading-spinner { display: block; }
 48 |         .loading #main-content, .loading .control-panel, .loading footer { opacity: 0.5; pointer-events: none; }
 49 |         .error-message { color: var(--error-color); font-weight: bold; background-color: rgba(231, 76, 60, 0.1); border: 1px solid var(--error-color); padding: 2rem; border-radius: var(--radius-main); margin: 2rem auto; text-align:center; grid-column: 1 / -1; font-size: 1.2rem; width: fit-content; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
 50 |         .control-panel { display: grid; grid-template-columns: 2fr 1.2fr; gap: 1.5rem; align-items: stretch; width: 100%; max-width: 1800px; padding: 0; }
 51 |         .left-column, .right-column { display: flex; flex-direction: column; gap: 1.5rem; }
 52 |         .control-section { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-main); padding: 1.5rem; box-shadow: var(--card-shadow); display: flex; flex-direction: column; }
 53 |         .right-column .control-section { flex-grow: 1; }
 54 |         .section-title { font-size: 1.1rem; font-weight: 600; color: var(--text-color); margin: 0 0 1.2rem 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
 55 |         .section-title .fas, .section-title .fa-solid, .section-title .fa-brands { color: var(--accent-color); font-size: 1.1em; opacity: 0.9; }
 56 |         .control-section > *:not(.section-title) { margin: 0; }
 57 |         .control-section > *:not(.section-title) + *:not(.section-title) { margin-top: 1.2rem; }
 58 |         .refresh-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
 59 |         .auto-refresh-control { display: flex; align-items: center; gap: 0.8rem; }
 60 |         .switch-label { cursor: pointer; display: flex; align-items: center; gap: 0.8rem; }
 61 |         .switch-label-text { font-size: 0.95rem; font-weight: 500; color: var(--control-text); }
 62 |         .switch-input { opacity: 0; width: 0; height: 0; }
 63 |         .switch-slider { position: relative; width: 44px; height: 24px; background-color: var(--control-border); border-radius: 12px; transition: background-color 0.3s ease; }
 64 |         .switch-slider::before { content: ''; position: absolute; top: 2px; left: 3px; width: 18px; height: 18px; background-color: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.3s ease; }
 65 |         .switch-input:checked + .switch-slider { background-color: var(--status-green); }
 66 |         .switch-input:checked + .switch-slider::before { transform: translateX(19px); }
 67 |         #refresh-now-btn { background-color: var(--control-bg); color: var(--control-text); border: 1px solid var(--control-border); padding: 0.6rem 1.2rem; font-weight: 500; font-size: 0.95rem; border-radius: var(--radius-control); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
 68 |         #refresh-now-btn:hover { background-color: var(--control-hover-bg); border-color: var(--accent-color); }
 69 |         .rule-actions-group { display: flex; flex-direction: column; gap: 0.8rem; }
 70 |         .button-group-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
 71 |         .button-group-inline button, .rule-actions-group > button { padding: 0.8rem; font-size: 0.95rem; font-weight: 500; border-radius: var(--radius-control); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
 72 |         .button-group-inline button { background-color: var(--control-bg); color: var(--control-text); border: 1px solid var(--control-border); }
 73 |         .button-group-inline button:hover { background-color: var(--control-hover-bg); border-color: var(--accent-color); }
 74 |         button.danger { background-color: var(--danger-bg-color); border: 1px solid var(--danger-border-color); color: var(--danger-text-color); }
 75 |         button.danger:hover { background-color: var(--danger-hover-bg-color); color: var(--danger-hover-text-color); border-color: var(--danger-hover-bg-color); }
 76 |         .data-view-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
 77 |         .data-view-group button { background-color: var(--control-bg); color: var(--control-text); border: none; padding: 0.4rem 1rem; font-size: 0.9rem; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; }
 78 |         .data-view-group button:hover { background-color: var(--control-hover-bg); color: var(--accent-color); }
 79 |         .info-panel-tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 1.2rem; flex-shrink: 0; }
 80 |         .tab-button { background: none; border: none; padding: 0.8rem 1rem; cursor: pointer; color: var(--label-color); font-weight: 500; font-size: 1rem; position: relative; transition: color 0.2s ease; }
 81 |         .tab-button::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background-color: var(--accent-color); opacity: 0; transform: scaleX(0.5); transition: all 0.3s ease; }
 82 |         .tab-button.active { color: var(--accent-color); }
 83 |         .tab-button.active::after { opacity: 1; transform: scaleX(1); }
 84 |         .tab-content { display: none; flex-direction: column; gap: 1rem; }
 85 |         .tab-content.active { display: flex; }
 86 |         .tab-content#tab-system-info { flex-grow: 1; }
 87 |         .subsection-title { font-size: 0.9rem; font-weight: 500; color: var(--label-color); margin: 0.2rem 0 -0.2rem 0; letter-spacing: 0.02em; }
 88 |         .metrics-container { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1.2rem; align-items: center; }
 89 |         .metric-label { display: flex; align-items: center; gap: 0.7rem; font-weight: 500; color: var(--label-color); font-size: 0.95rem; }
 90 |         .metric-label .fas { color: var(--accent-color); width: 1.2em; text-align: center; }
 91 |         .metric-value { color: var(--value-color); font-weight: 600; text-align: right; font-size: 0.95rem; }
 92 |         .metric-value.accent { color: var(--accent-color); font-weight: 700; }
 93 |         #last_updated { font-size: 0.9rem; color: var(--label-color); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); width: 100%; display: flex; align-items: center; gap: 0.5rem; text-align: left; }
 94 |         .theme-selector, .card-toggle-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
 95 |         .control-base-label { background-color: var(--control-bg); border: 1px solid var(--control-border); padding: 0.6rem 0.9rem; color: var(--control-text); font-size: 0.95rem; font-weight: 500; cursor: pointer; border-radius: var(--radius-control); transition: all 0.2s ease; display: flex; align-items: center; justify-content: flex-start; gap: 0.8rem; }
 96 |         .control-base-label:hover { border-color: var(--accent-color); }
 97 |         .theme-selector .control-base-label { justify-content: center; }
 98 |         .control-base-label.active { background-color: var(--control-active-bg); color: var(--control-active-text); border-color: var(--accent-color); box-shadow: 0 3px 8px -2px var(--accent-color); font-weight: 600; }
 99 |         .card-toggle-group input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border: 2px solid var(--control-border); border-radius: 4px; background-color: var(--card-bg); position: relative; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; margin: 0; }
100 |         .card-toggle-group input[type="checkbox"]:checked { background-color: var(--accent-color); border-color: var(--accent-color); }
101 |         .card-toggle-group input[type="checkbox"]:checked::after { content: '\2713'; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color: white; }
102 |         footer { width: 100%; max-width: 1200px; text-align: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); font-size: 0.9rem; color: var(--label-color); transition: all 0.4s ease; }
103 |         footer .footer-content { display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
104 |         footer .footer-item { display: flex; align-items: center; gap: 0.6rem; }
105 |         footer .footer-icon { color: var(--accent-color); opacity: 0.8; font-size: 1.1em; }
106 |         footer .footer-separator { width: 1px; height: 16px; background-color: var(--border-color); }
107 |         .blur-control { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
108 |         .blur-control .switch-label { flex-shrink: 0; }
109 |         .blur-control input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--control-bg); outline: none; border-radius: 4px; transition: background 0.2s; }
110 |         .blur-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--accent-color); cursor: pointer; border-radius: 50%; border: 3px solid var(--card-bg); box-shadow: 0 0 5px rgba(0,0,0,0.2); }
111 |         .blur-control input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--accent-color); cursor: pointer; border-radius: 50%; border: 3px solid var(--card-bg); box-shadow: 0 0 5px rgba(0,0,0,0.2); }
112 |         
113 |         @media (max-width: 768px) { footer .footer-separator { display: none; } footer .footer-content { flex-direction: column; gap: 0.8rem; } }
114 |         @media (max-width: 1200px) { .control-panel { grid-template-columns: 1fr; } }
115 |         @media (max-width: 992px) { .main-container, .control-panel { grid-template-columns: 1fr; } body { padding: 1.5rem; } .card, .control-section { padding: 1.5rem; } }
116 |         @media (max-width: 768px) { html { font-size: 15px; } body { padding: 1rem; } .button-group-inline { grid-template-columns: 1fr; } .header h1 { font-size: 2rem; } .card, .control-section { padding: 1.2rem; } h2 { font-size: 1.4rem; } .chart-container { width: 110px; height: 110px; } }
117 |     </style>
118 | </head>
119 | <body>
120 |     <div class="header"><h1>MosDNS 监控面板 (Beta)</h1><div class="header-gradient-bar"></div></div>
121 |     <div id="loading-spinner"></div>
122 |     <div id="main-content" class="main-container"></div>
123 |     <div class="control-panel">
124 |         <div class="left-column">
125 |             <section class="control-section">
126 |                 <h4 class="section-title"><i class="fas fa-cogs"></i> 控制中心</h4>
127 |                 <div class="refresh-action-bar"><div class="auto-refresh-control"><label class="switch-label"><input type="checkbox" id="auto-refresh-toggle" class="switch-input"><span class="switch-slider"></span></label><span class="switch-label-text">自动刷新 (5s)</span></div><button id="refresh-now-btn"><i class="fas fa-sync-alt"></i> 立即刷新</button></div>
128 |                 <div class="rule-actions-group"><div class="button-group-inline"><button id="save-rules-btn"><i class="fas fa-save"></i> 保存分流规则</button><button id="flush-rules-btn" class="danger"><i class="fas fa-trash-alt"></i> 清空分流规则</button></div><button id="restart-mosdns-btn" class="danger"><i class="fas fa-redo"></i> 重启 MosDNS 服务</button></div>
129 |             </section>
130 |             <section class="control-section">
131 |                 <h4 class="section-title"><i class="fas fa-eye"></i> 数据查看</h4>
132 |                 <div class="data-view-group" id="data-view-buttons"></div>
133 |             </section>
134 |         </div>
135 |         <div class="right-column">
136 |             <section class="control-section">
137 |                 <div class="info-panel-tabs"><button class="tab-button active" data-tab="system-info"><i class="fas fa-server"></i> 系统信息</button><button class="tab-button" data-tab="appearance"><i class="fas fa-palette"></i> 外观设置</button></div>
138 |                 <div id="tab-system-info" class="tab-content active"><div class="metrics-container" id="metrics-system"></div><p id="last_updated"><i class="fas fa-clock"></i> </p></div>
139 |                 <div id="tab-appearance" class="tab-content">
140 |                     <h5 class="subsection-title">主题切换</h5>
141 |                     <div class="theme-selector" id="theme-selector"></div>
142 |                     <h5 class="subsection-title" style="margin-top: 1.2rem;">自定义背景</h5>
143 |                     <div class="button-group-inline">
144 |                         <button id="upload-bg-btn"><i class="fas fa-upload"></i> 上传背景</button>
145 |                         <button id="remove-bg-btn" class="danger"><i class="fas fa-trash"></i> 移除背景</button>
146 |                     </div>
147 |                     <input type="file" id="bg-upload-input" accept="image/*" style="display: none;">
148 |                     
149 |                     <h5 class="subsection-title" style="margin-top: 1.2rem;">毛玻璃强度</h5>
150 |                     <div class="blur-control">
151 |                          <label class="switch-label">
152 |                             <input type="checkbox" id="blur-toggle" class="switch-input">
153 |                             <span class="switch-slider"></span>
154 |                         </label>
155 |                         <input type="range" id="blur-slider" min="0" max="30" value="12" step="1">
156 |                     </div>
157 | 
158 |                     <h5 class="subsection-title" style="margin-top: 1.2rem;">显示缓存卡片</h5>
159 |                     <div class="card-toggle-group" id="card-toggles"></div>
160 |                 </div>
161 |             </section>
162 |         </div>
163 |     </div>
164 |     <footer>
165 |         <div class="footer-content">
166 |             <div class="footer-item"><i class="fas fa-code-branch footer-icon"></i><span>UI 版本: Beta v2.5</span></div>
167 |             <div class="footer-separator"></div>
168 |             <div class="footer-item"><i class="fas fa-users-cog footer-icon"></i><span>技术支持: Phil Horse & JimmyDADA</span></div>
169 |         </div>
170 |     </footer>
171 |     <script>
172 |         const API_URL = '/api/mosdns_status'; const REFRESH_INTERVAL = 5000;
173 |         let chartInstances = {}; let autoRefreshTimer = null; let currentTheme = 'light';
174 |         Chart.register(ChartDataLabels); Chart.defaults.plugins.legend.display = false; Chart.defaults.plugins.datalabels.font.weight = 'bold'; Chart.defaults.plugins.datalabels.font.size = 11; Chart.defaults.cutout = '70%'; Chart.defaults.responsive = true; Chart.defaults.maintainAspectRatio = false;
175 |         Chart.defaults.plugins.datalabels.formatter = (v, c) => { const s = c.chart.data.datasets[0].data.reduce((a, b) => a + b, 0); return s > 0 && v / s > 0.05 ? `${(v / s * 100).toFixed(0)}%` : ''; };
176 |         
177 |         const D = document; const getById = (id) => D.getElementById(id);
178 |         
179 |         function createElement(tag, className, innerText = '', id = '') { const el = D.createElement(tag); if (className) el.className = className; if (innerText) el.innerText = innerText; if (id) el.id = id; return el; }
180 |         function formatNumber(num) { if (typeof num !== 'number' && isNaN(num = parseFloat(num))) { return num; } return num.toLocaleString('en-US'); }
181 |         
182 |         const iconMap = { '请求总数': 'fa-globe', '缓存命中': 'fa-check-circle', '过期缓存命中': 'fa-history', '缓存命中率': 'fa-bullseye', '过期缓存命中率': 'fa-bullseye', '缓存条目数': 'fa-database', '启动时间': 'fa-power-off', 'CPU 时间': 'fa-microchip', '常驻内存 (RSS)': 'fa-memory', '待用堆内存 (Idle)': 'fa-box-open', 'Go 版本': 'fa-code-branch', '线程数': 'fa-sitemap', '打开文件描述符': 'fa-folder-open', };
183 |         const cacheOrder = ['cache_all', 'cache_cn', 'cache_google', 'cache_node']; const cacheTitles = { 'cache_all': '全部缓存', 'cache_cn': '国内缓存', 'cache_google': '国外缓存', 'cache_node': '节点缓存' };
184 |         
185 |         const themeMap = {
186 |             'light': { name: '默认亮色', icon: 'fa-sun', cssVars: { '--bg-color': '#f7f9fd', '--text-color': '#2c3e50', '--card-bg': '#ffffff', '--card-shadow': '0 6px 18px rgba(0, 0, 0, 0.08)', '--border-color': '#e0e6ec', '--accent-color': '#4a90e2', '--label-color': '#7f8c8d', '--value-color': '#34495e', '--control-bg': '#f0f4f7', '--control-border': '#d5dce2', '--control-text': '#5e727e', '--control-hover-bg': '#e5edf3', '--control-active-bg': '#4a90e2', '--control-active-text': '#ffffff', '--gradient-start': '#4a90e2', '--gradient-mid': '#2e86de', '--gradient-end': '#4a90e2' }, chartColors: { hit: 'rgba(74, 144, 226, 0.7)', miss: 'rgba(189, 195, 199, 0.3)', hitBorder: '#4a90e2', missBorder: '#bdc3c7', text: '#2c3e50' } },
187 |             'dark': { name: '默认暗色', icon: 'fa-moon', cssVars: { '--bg-color': '#1a1a1a', '--text-color': '#e0e0e0', '--card-bg': '#282828', '--card-shadow': '0 8px 25px rgba(0, 0, 0, 0.5)', '--border-color': '#3a3a3a', '--accent-color': '#5096ff', '--label-color': '#bbbbbb', '--value-color': '#ffffff', '--control-bg': '#353535', '--control-border': '#4a4a4a', '--control-text': '#e0e0e0', '--control-hover-bg': '#404040', '--control-active-bg': '#5096ff', '--control-active-text': '#ffffff', '--gradient-start': '#5096ff', '--gradient-mid': '#3a7ce0', '--gradient-end': '#5096ff' }, chartColors: { hit: 'rgba(80, 150, 255, 0.7)', miss: 'rgba(100, 100, 100, 0.3)', hitBorder: '#5096ff', missBorder: '#707070', text: '#e0e0e0' }, extraStyles: { 'h1, h2, h4, .section-title, .metric-label, .metric-value, .switch-label-text, .tab-button, footer, .control-base-label, .data-view-group button': 'text-shadow: 0 1px 3px rgba(0,0,0,0.5);', '.fas, .fa-solid, .fa-brands': 'filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));' } },
188 |             'glass': { name: '高光琉璃', icon: 'fa-gem', cssVars: { '--bg-color': 'transparent', '--text-color': '#ffffff', '--card-bg': 'rgba(255, 255, 255, 0.1)', '--card-shadow': '0 8px 32px 0 rgba(0, 0, 0, 0.37)', '--border-color': 'rgba(255, 255, 255, 0.2)', '--accent-color': '#90b8ff', '--label-color': '#d0d0d0', '--value-color': '#ffffff', '--control-bg': 'rgba(255, 255, 255, 0.15)', '--control-border': 'rgba(255, 255, 255, 0.2)', '--control-text': '#f0f0f0', '--control-hover-bg': 'rgba(255, 255, 255, 0.25)', '--control-active-bg': '#90b8ff', '--control-active-text': '#1a1a1a', '--gradient-start': '#82aaff', '--gradient-mid': '#c792ea', '--gradient-end': '#82aaff' }, chartColors: { hit: 'rgba(130, 170, 255, 0.7)', miss: 'rgba(255, 255, 255, 0.15)', hitBorder: '#82aaff', missBorder: '#cccccc', text: '#ffffff' }, extraStyles: { '.card, .control-section': 'backdrop-filter: blur(var(--glass-blur-strength)); -webkit-backdrop-filter: blur(var(--glass-blur-strength)); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%); box-shadow: inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.1), var(--card-shadow); border: none; transition: all 0.3s ease, backdrop-filter 0.2s ease-out, -webkit-backdrop-filter 0.2s ease-out;', 'h1, h2, h4, .section-title, .metric-label, .metric-value, .switch-label-text, .tab-button, footer, .control-base-label, .data-view-group button': 'text-shadow: 0 1px 4px rgba(0,0,0,0.6);', '.fas, .fa-solid, .fa-brands': 'filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));' } }
189 |         };
190 |         
191 |         let visibleCards = JSON.parse(localStorage.getItem('visibleMosdnsCards')) || cacheOrder;
192 |         
193 |         function updateThemeButtons(activeMode) { const ts = getById('theme-selector'); ts.innerHTML = ''; ['light', 'dark', 'glass'].forEach(mode => { if (!themeMap[mode]) return; const t = themeMap[mode]; const btn = createElement('button', 'control-base-label'); btn.dataset.theme = mode; btn.innerHTML = `<i class="fas ${t.icon}"></i> ${t.name}`; if (mode === activeMode) btn.classList.add('active'); btn.onclick = () => setTheme(mode); ts.appendChild(btn); }); }
194 |         function setTheme(mode) { currentTheme = mode; const theme = themeMap[mode]; if(!theme) return; Object.entries(theme.cssVars).forEach(([key, value]) => D.documentElement.style.setProperty(key, value)); const oldExtraStyle = getById('theme-extra-styles'); if (oldExtraStyle) oldExtraStyle.remove(); if (theme.extraStyles) { const style = createElement('style', '', '', 'theme-extra-styles'); style.textContent = Object.entries(theme.extraStyles).map(([sel, rule]) => `${sel} { ${rule} }`).join('\n'); D.head.appendChild(style); } localStorage.setItem('theme', mode); updateThemeButtons(mode); setTimeout(() => { Object.values(chartInstances).forEach(c => c.destroy()); chartInstances = {}; refreshData(true, true); }, 50); }
195 |         function setBackgroundImage(url) { D.body.style.backgroundImage = url ? `url(${url})` : ''; D.body.classList.toggle('custom-background', !!url); }
196 |         async function handleImageUpload(file) { const fd = new FormData(); fd.append('background_image', file); try { const res = await fetch('/api/upload_background', { method: 'POST', body: fd }); const r = await res.json(); if (r.success) { setBackgroundImage(r.url + '?t=' + Date.now()); alert('✅ 背景图片上传成功！'); } else { throw new Error(r.error || '上传失败'); } } catch (e) { alert(`❌ 上传失败: ${e.message}`); } }
197 |         async function handleRemoveBackground() { if (!confirm('确定要移除自定义背景吗？')) return; try { const res = await fetch('/api/remove_background', { method: 'POST' }); const r = await res.json(); if (r.success) { setBackgroundImage(null); alert('✅ 自定义背景已移除。'); } else { throw new Error(r.error || '移除失败'); } } catch(e) { alert(`❌ 移除失败: ${e.message}`); } }
198 |         async function fetchAPI(url) { try { const r = await fetch(url); if (!r.ok) throw new Error(`网络响应错误: ${r.statusText} (${r.status})`); return await r.json(); } catch (e) { console.error(`Fetch error from ${url}:`, e); return {error: e.message}; } }
199 |         function createCacheCard(tag, title) { const c = createElement('div', 'card'); c.dataset.tag = tag; c.innerHTML = `<h2><i class="fas fa-server"></i><span class="title-text">${title}</span><span class="status-dot" id="status-dot-${tag}"></span></h2><div class="card-title-gradient-bar"></div><div class="metrics-container" id="metrics-${tag}"></div><div class="charts" id="charts-${tag}"><div class="chart-container"><canvas id="chart-hit-${tag}"></canvas></div><div class="chart-container"><canvas id="chart-lazy-${tag}"></canvas></div></div>`; return c; }
200 |         function createOrUpdatePieChart(id, title, hit, total) { const ctx = getById(id); if (!ctx) return; const c = themeMap[currentTheme]?.chartColors || themeMap.light.chartColors; const d = { labels: ['命中', '未命中'], datasets: [{ data: [hit, Math.max(0, total - hit)], backgroundColor: [c.hit, c.miss], borderColor: [c.hitBorder, c.missBorder], borderWidth: 1.5 }] }; const o = { plugins: { title: { display: true, text: title, color: c.text, font: { size: 12, weight: 'bold' } }, datalabels: { color: c.text } } }; if (chartInstances[id]) { chartInstances[id].data = d; chartInstances[id].options = o; chartInstances[id].update('none'); } else { chartInstances[id] = new Chart(ctx, { type: 'doughnut', data: d, options: o }); } }
201 |         function updateMetrics(id, data) { const c = getById(id); if (!c) return; c.innerHTML = ''; data.forEach(m => { const p = createElement('div', 'metric-label'); p.innerHTML = `<i class="fas ${iconMap[m.label] || 'fa-question-circle'}"></i> <span>${m.label}:</span>`; const v = createElement('div', `metric-value${m.accent ? ' accent' : ''}`); v.innerText = (m.numericValue !== undefined) ? formatNumber(m.numericValue) : m.value; c.append(p, v); }); }
202 |         
203 |         async function refreshData(forceRebuild = false, updateCharts = false) {
204 |             D.body.classList.add('loading'); const data = await fetchAPI(API_URL); D.body.classList.remove('loading');
205 |             if (data.error) { getById('main-content').innerHTML = `<div class="error-message"><i class="fas fa-exclamation-triangle"></i><p>无法连接到 MosDNS API。</p><small>${data.error}</small></div>`; if (autoRefreshTimer) { clearInterval(autoRefreshTimer); autoRefreshTimer = null; getById('auto-refresh-toggle').checked = false; localStorage.setItem('autoRefresh', 'false');} return; }
206 |             if (forceRebuild) { getById('main-content').innerHTML = ''; Object.values(chartInstances).forEach(c => c.destroy()); chartInstances = {}; }
207 |             
208 |             cacheOrder.forEach(tag => {
209 |                 let card = D.querySelector(`.card[data-tag="${tag}"]`);
210 |                 const shouldBeVisible = visibleCards.includes(tag);
211 |                 const cardData = data.caches[tag];
212 |                 if (shouldBeVisible && !card) { card = createCacheCard(tag, cacheTitles[tag]); getById('main-content').appendChild(card); }
213 |                 if (!shouldBeVisible && card) { card.remove(); return; }
214 |                 if (card && cardData) {
215 |                     card.classList.add('visible');
216 |                     updateMetrics(`metrics-${tag}`, [{ label: '请求总数', numericValue: cardData.query_total }, { label: '缓存命中', numericValue: cardData.hit_total }, { label: '过期缓存命中', numericValue: cardData.lazy_hit_total }, { label: '缓存命中率', value: cardData.hit_rate, accent: true }, { label: '过期缓存命中率', value: cardData.lazy_hit_rate, accent: true }, { label: '缓存条目数', numericValue: cardData.size_current }, ]);
217 |                     getById(`status-dot-${tag}`).className = 'status-dot ' + (cardData.query_total > 0 ? 'status-green' : 'status-yellow');
218 |                     getById(`charts-${tag}`).style.display = cardData.query_total > 0 ? 'flex' : 'none';
219 |                     if ((forceRebuild || updateCharts) && cardData.query_total > 0) { createOrUpdatePieChart(`chart-hit-${tag}`, '命中', cardData.hit_total, cardData.query_total); createOrUpdatePieChart(`chart-lazy-${tag}`, '过期命中', cardData.lazy_hit_total, cardData.query_total); }
220 |                 }
221 |             });
222 |             updateMetrics('metrics-system', [{ label: '启动时间', value: data.system?.start_time }, { label: 'CPU 时间', value: data.system?.cpu_time }, { label: '常驻内存 (RSS)', value: data.system?.resident_memory }, { label: '待用堆内存 (Idle)', value: data.system?.heap_idle_memory }, { label: 'Go 版本', value: data.system?.go_version, accent: true }, { label: '线程数', numericValue: data.system?.threads }, { label: '打开文件描述符', numericValue: data.system?.open_fds }, ]);
223 |             getById('last_updated').innerHTML = `<i class="fas fa-clock"></i> 最后更新: ${new Date().toLocaleTimeString()}`;
224 |         }
225 |         
226 |         function setupCardToggles() { const c = getById('card-toggles'); c.innerHTML = ''; cacheOrder.forEach(t => { const l = createElement('label', 'control-base-label'); const i = createElement('input'); i.type = 'checkbox'; i.dataset.tag = t; i.checked = visibleCards.includes(t); i.onchange = (e) => { const tag = e.target.dataset.tag; if (e.target.checked) { if (!visibleCards.includes(tag)) visibleCards.push(tag); } else { visibleCards = visibleCards.filter(t => t !== tag); } localStorage.setItem('visibleMosdnsCards', JSON.stringify(visibleCards)); refreshData(true, true); }; l.append(i, createElement('span', 'toggle-label-text', cacheTitles[t])); c.appendChild(l); }); }
227 |         
228 |         function throttle(func, limit) { let inThrottle; return function() { const args = arguments; const context = this; if (!inThrottle) { func.apply(context, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } } }
229 | 
230 |         function setupEventListeners() {
231 |             getById('refresh-now-btn').onclick = () => refreshData(false, true);
232 |             const autoRefreshToggle = getById('auto-refresh-toggle');
233 |             autoRefreshToggle.onchange = (e) => { const isEnabled = e.target.checked; localStorage.setItem('autoRefresh', isEnabled); if (isEnabled) { if (!autoRefreshTimer) autoRefreshTimer = setInterval(() => refreshData(false, true), REFRESH_INTERVAL); } else if (autoRefreshTimer) { clearInterval(autoRefreshTimer); autoRefreshTimer = null; } };
234 |             const multiAction = (btnId, paths, msg) => { getById(btnId).addEventListener('click', () => { if (confirm(msg)) Promise.all(paths.map(p => fetch(`/plugins/${p}`))).then(() => alert('✅ 操作完成')).catch(e => alert(`❌ 操作失败: ${e.message}`)); }); };
235 |             multiAction('save-rules-btn', ['my_fakeiplist/save', 'my_nodenov4list/save', 'my_nodenov6list/save', 'my_notinlist/save', 'my_nov4list/save', 'my_nov6list/save', 'my_realiplist/save'], '确定保存所有分流规则吗?');
236 |             multiAction('flush-rules-btn', ['my_fakeiplist/flush', 'my_nodenov4list/flush', 'my_nodenov6list/flush', 'my_notinlist/flush', 'my_nov4list/flush', 'my_nov6list/flush', 'my_realiplist/flush'], '确定清空所有分流规则吗?');
237 |             getById('restart-mosdns-btn').onclick = () => { if (confirm('确定重启mosdns吗?')) fetch('/plugins/my_fakeiplist/restartall').then(() => setTimeout(() => location.reload(), 1000)); };
238 |             const showEndpoints = { 'fakeip 域名': 'my_fakeiplist', 'realip 域名': 'my_realiplist', '无 V4 域名': 'my_nov4list', '无 V6 域名': 'my_nov6list', '总缓存': 'cache_all', 'CN 缓存': 'cache_cn', '!CN 缓存': 'cache_google', '节点缓存': 'cache_node' };
239 |             const dvContainer = getById('data-view-buttons'); dvContainer.innerHTML = ''; Object.entries(showEndpoints).forEach(([name, path]) => { const btn = createElement('button', 'data-view-group-btn'); btn.textContent = name; btn.onclick = () => window.open(`/plugins/${path}/show`, '_blank'); dvContainer.appendChild(btn); });
240 |             const tabButtons = D.querySelectorAll('.tab-button'); const tabContents = D.querySelectorAll('.tab-content');
241 |             tabButtons.forEach(button => { button.addEventListener('click', () => { tabButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); tabContents.forEach(content => content.classList.toggle('active', content.id === `tab-${button.dataset.tab}`)); }); });
242 |             getById('upload-bg-btn').onclick = () => getById('bg-upload-input').click();
243 |             getById('remove-bg-btn').onclick = handleRemoveBackground;
244 |             getById('bg-upload-input').onchange = (e) => { if (e.target.files[0]) handleImageUpload(e.target.files[0]); e.target.value = ''; };
245 |             
246 |             const blurToggle = getById('blur-toggle');
247 |             const blurSlider = getById('blur-slider');
248 |             const setBlur = (value) => D.documentElement.style.setProperty('--glass-blur-strength', `${value}px`);
249 |             
250 |             blurToggle.onchange = () => { const isEnabled = blurToggle.checked; blurSlider.disabled = !isEnabled; const value = isEnabled ? blurSlider.value : 0; setBlur(value); localStorage.setItem('blurEnabled', isEnabled); };
251 |             blurSlider.addEventListener('input', throttle(() => { setBlur(blurSlider.value); }, 50));
252 |             blurSlider.onchange = () => localStorage.setItem('blurStrength', blurSlider.value);
253 |         }
254 |         
255 |         document.addEventListener('DOMContentLoaded', () => {
256 |             setupEventListeners(); setupCardToggles(); updateThemeButtons(localStorage.getItem('theme') || 'light');
257 |             fetch('/api/background_status').then(res => res.json()).then(data => { if (data.status === 'custom') setBackgroundImage(data.url); });
258 |             const blurEnabled = localStorage.getItem('blurEnabled') !== 'false';
259 |             const blurStrength = localStorage.getItem('blurStrength') || 12;
260 |             const blurToggle = getById('blur-toggle'); const blurSlider = getById('blur-slider');
261 |             blurToggle.checked = blurEnabled; blurSlider.value = blurStrength; blurSlider.disabled = !blurEnabled;
262 |             D.documentElement.style.setProperty('--glass-blur-strength', `${blurEnabled ? blurStrength : 0}px`);
263 |             setTheme(localStorage.getItem('theme') || 'light');
264 |             const autoRefresh = localStorage.getItem('autoRefresh') === 'true';
265 |             getById('auto-refresh-toggle').checked = autoRefresh;
266 |             if(autoRefresh) getById('auto-refresh-toggle').dispatchEvent(new Event('change'));
267 |             refreshData(true, true);
268 |         });
269 |     </script>
270 | </body>
271 | </html>
272 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>MosDNS 监控面板</title>
  7 | 
  8 |     <!-- Font Awesome for Icons -->
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 10 | 
 11 |     <!-- Chart.js 和 datalabels 插件 -->
 12 |     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
 13 |     <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
 14 | 
 15 |     <style>
 16 |         /* === START OF FINAL CSS === */
 17 |         :root {
 18 |             /* 主题变量，会由 JS 动态修改 */
 19 |             --bg-color: #f7f9fd; --text-color: #2c3e50; --card-bg: #ffffff;
 20 |             /* [MODIFIED] 优化了阴影效果，使其更柔和 */
 21 |             --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); --border-color: #e0e6ec;
 22 |             --accent-color: #4a90e2; --error-color: #e74c3c; --label-color: #7f8c8d;
 23 |             --value-color: #34495e; --control-bg: #f0f4f7; --control-border: #d5dce2;
 24 |             --control-text: #5e727e; --control-hover-bg: #e5edf3;
 25 |             --control-active-bg: var(--accent-color); --control-active-text: #ffffff;
 26 |             --status-green: #2ecc71; --status-yellow: #f1c40f;
 27 |             --gradient-start: #4a90e2; --gradient-mid: #2e86de; --gradient-end: #4a90e2;
 28 |             /* [MODIFIED] 调整了主要圆角，使其更统一 */
 29 |             --radius-main: 0.8rem; --radius-bar: 0.2rem; --radius-control: 0.5rem;
 30 |             --danger-bg-color: rgba(231, 76, 60, 0.1); --danger-border-color: rgba(231, 76, 60, 0.3);
 31 |             --danger-text-color: #e74c3c; --danger-hover-bg-color: #e74c3c; --danger-hover-text-color: #ffffff;
 32 |         }
 33 | 
 34 |         /* --- 基础与全局样式 --- */
 35 |         html { font-size: 16px; scroll-behavior: smooth; }
 36 |         body { font-family: 'SF Pro Text', 'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; margin: 0; padding: 2rem; background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; transition: background-color 0.4s ease, color 0.4s ease; min-height: 100vh; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
 37 |         
 38 |         /* --- 顶部 Header --- */
 39 |         .header { text-align: center; width: 100%; max-width: 1200px; margin-bottom: 2rem; }
 40 |         .header h1 { font-size: 2.2rem; color: var(--text-color); margin: 0 0 0.5rem 0; font-weight: 700; letter-spacing: -0.03em; }
 41 |         .header .header-gradient-bar { width: 80px; height: 4px; margin: 0 auto 1.5rem auto; border-radius: var(--radius-bar); background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end)); }
 42 |         .card-title-gradient-bar { width: 100%; height: 3px; border-radius: var(--radius-bar); background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end), var(--gradient-start)); background-size: 200% auto; animation: gradient-scroll 6s linear infinite; transition: background-image 0.4s ease; }
 43 |         @keyframes gradient-scroll { 100% { background-position: 100% 0%; } }
 44 | 
 45 |         /* --- 主要内容区 (缓存卡片) --- */
 46 |         .main-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1.5rem; width: 100%; max-width: 1800px; flex-grow: 1; margin-bottom: 2rem; justify-content: center; align-items: start; }
 47 |         .card { background-color: var(--card-bg); border-radius: var(--radius-main); box-shadow: var(--card-shadow); padding: 1.5rem; display: none; flex-direction: column; box-sizing: border-box; transition: all 0.3s ease; border: 1px solid var(--border-color); }
 48 |         .card.visible { display: flex; }
 49 |         .card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); }
 50 |         h2 { font-size: 1.5rem; color: var(--text-color); margin: 0; font-weight: 600; display: flex; align-items: center; gap: 0.7rem; }
 51 |         h2 .title-text { flex-grow: 1; text-align: left; }
 52 |         h2 .status-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; transition: background-color 0.3s ease; flex-shrink: 0; }
 53 |         h2 .status-dot.status-green { background-color: var(--status-green); } h2 .status-dot.status-yellow { background-color: var(--status-yellow); }
 54 |         .card-title-gradient-bar { max-width: 100%; margin: 0.5rem 0 1.2rem 0; }
 55 |         .charts { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; gap: 1.2rem; align-items: center; width: 100%; padding-top: 1.2rem; margin-top: 1rem; border-top: 1px solid var(--border-color); }
 56 |         .chart-container { position: relative; width: 130px; height: 130px; }
 57 |         
 58 |         /* --- 加载与错误状态 --- */
 59 |         #loading-spinner { display: none; width: 40px; height: 40px; border: 4px solid var(--border-color); border-top-color: var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 4rem auto; }
 60 |         @keyframes spin { to { transform: rotate(360deg); } }
 61 |         .loading #loading-spinner { display: block; }
 62 |         .loading #main-content, .loading .control-panel, .loading footer { opacity: 0.5; pointer-events: none; }
 63 |         .error-message { color: var(--error-color); font-weight: bold; background-color: rgba(231, 76, 60, 0.1); border: 1px solid var(--error-color); padding: 2rem; border-radius: var(--radius-main); margin: 2rem auto; text-align:center; grid-column: 1 / -1; font-size: 1.2rem; width: fit-content; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
 64 |         
 65 |         /* === 控制面板 === */
 66 |         .control-panel { display: grid; grid-template-columns: 2fr 1.2fr; gap: 1.5rem; align-items: stretch; width: 100%; max-width: 1800px; padding: 0; }
 67 |         .left-column, .right-column { display: flex; flex-direction: column; gap: 1.5rem; }
 68 |         .control-section { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-main); padding: 1.5rem; box-shadow: var(--card-shadow); display: flex; flex-direction: column; }
 69 |         .right-column .control-section { flex-grow: 1; }
 70 |         .section-title { font-size: 1.1rem; font-weight: 600; color: var(--text-color); margin: 0 0 1.2rem 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
 71 |         .section-title .fas, .section-title .fa-solid, .section-title .fa-brands { color: var(--accent-color); font-size: 1.1em; opacity: 0.9; }
 72 |         .control-section > *:not(.section-title) { margin: 0; }
 73 |         .control-section > *:not(.section-title) + *:not(.section-title) { margin-top: 1.2rem; }
 74 |         
 75 |         /* --- 左侧: 控制中心 --- */
 76 |         .refresh-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
 77 |         .auto-refresh-control { display: flex; align-items: center; gap: 0.8rem; }
 78 |         .switch-label { cursor: pointer; display: flex; align-items: center; gap: 0.8rem; }
 79 |         .switch-label-text { font-size: 0.95rem; font-weight: 500; color: var(--control-text); }
 80 |         .switch-input { opacity: 0; width: 0; height: 0; }
 81 |         .switch-slider { position: relative; width: 44px; height: 24px; background-color: var(--control-border); border-radius: 12px; transition: background-color 0.3s ease; }
 82 |         .switch-slider::before { content: ''; position: absolute; top: 2px; left: 3px; width: 18px; height: 18px; background-color: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.3s ease; }
 83 |         .switch-input:checked + .switch-slider { background-color: var(--status-green); }
 84 |         .switch-input:checked + .switch-slider::before { transform: translateX(19px); }
 85 |         #refresh-now-btn { background-color: var(--control-bg); color: var(--control-text); border: 1px solid var(--control-border); padding: 0.6rem 1.2rem; font-weight: 500; font-size: 0.95rem; border-radius: var(--radius-control); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
 86 |         #refresh-now-btn:hover { background-color: var(--control-hover-bg); border-color: var(--accent-color); }
 87 |         .rule-actions-group { display: flex; flex-direction: column; gap: 0.8rem; }
 88 |         .button-group-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
 89 |         .button-group-inline button, .rule-actions-group > button { padding: 0.8rem; font-size: 0.95rem; font-weight: 500; border-radius: var(--radius-control); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
 90 |         .button-group-inline button { background-color: var(--control-bg); color: var(--control-text); border: 1px solid var(--control-border); }
 91 |         .button-group-inline button:hover { background-color: var(--control-hover-bg); border-color: var(--accent-color); }
 92 |         button.danger { background-color: var(--danger-bg-color); border: 1px solid var(--danger-border-color); color: var(--danger-text-color); }
 93 |         button.danger:hover { background-color: var(--danger-hover-bg-color); color: var(--danger-hover-text-color); border-color: var(--danger-hover-bg-color); }
 94 |         
 95 |         /* --- 数据查看 --- */
 96 |         .data-view-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
 97 |         .data-view-group button { background-color: var(--control-bg); color: var(--control-text); border: none; padding: 0.4rem 1rem; font-size: 0.9rem; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; }
 98 |         .data-view-group button:hover { background-color: var(--control-hover-bg); color: var(--accent-color); }
 99 |         
100 |         /* --- 右侧面板: Tab 菜单 --- */
101 |         .info-panel-tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 1.2rem; flex-shrink: 0; }
102 |         .tab-button { background: none; border: none; padding: 0.8rem 1rem; cursor: pointer; color: var(--label-color); font-weight: 500; font-size: 1rem; position: relative; transition: color 0.2s ease; }
103 |         .tab-button::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background-color: var(--accent-color); opacity: 0; transform: scaleX(0.5); transition: all 0.3s ease; }
104 |         .tab-button.active { color: var(--accent-color); }
105 |         .tab-button.active::after { opacity: 1; transform: scaleX(1); }
106 |         .tab-content { display: none; flex-direction: column; gap: 1rem; }
107 |         .tab-content.active { display: flex; }
108 |         .tab-content#tab-system-info { flex-grow: 1; }
109 |         .subsection-title { font-size: 0.9rem; font-weight: 500; color: var(--label-color); margin: 0.2rem 0 -0.2rem 0; letter-spacing: 0.02em; }
110 |         /* [MODIFIED] 调整了系统信息指标的布局和间距，使其更清晰 */
111 |         .metrics-container { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1.2rem; align-items: center; }
112 |         .metric-label { display: flex; align-items: center; gap: 0.7rem; font-weight: 500; color: var(--label-color); font-size: 0.95rem; }
113 |         .metric-label .fas { color: var(--accent-color); width: 1.2em; text-align: center; }
114 |         .metric-value { color: var(--value-color); font-weight: 600; text-align: right; font-size: 0.95rem; }
115 |         .metric-value.accent { color: var(--accent-color); font-weight: 700; }
116 |         #last_updated { font-size: 0.9rem; color: var(--label-color); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); width: 100%; display: flex; align-items: center; gap: 0.5rem; text-align: left; }
117 |         
118 |         /* --- 外观设置 --- */
119 |         .theme-selector, .card-toggle-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
120 |         .control-base-label { background-color: var(--control-bg); border: 1px solid var(--control-border); padding: 0.6rem 0.9rem; color: var(--control-text); font-size: 0.95rem; font-weight: 500; cursor: pointer; border-radius: var(--radius-control); transition: all 0.2s ease; display: flex; align-items: center; justify-content: flex-start; gap: 0.8rem; }
121 |         .control-base-label:hover { border-color: var(--accent-color); }
122 |         .theme-selector .control-base-label { justify-content: center; }
123 |         .control-base-label.active { background-color: var(--control-active-bg); color: var(--control-active-text); border-color: var(--accent-color); box-shadow: 0 3px 8px -2px var(--accent-color); font-weight: 600; }
124 |         .card-toggle-group input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border: 2px solid var(--control-border); border-radius: 4px; background-color: var(--card-bg); position: relative; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; margin: 0; }
125 |         .card-toggle-group input[type="checkbox"]:checked { background-color: var(--accent-color); border-color: var(--accent-color); }
126 |         .card-toggle-group input[type="checkbox"]:checked::after { content: '\2713'; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color: white; }
127 | 
128 |         /* --- [NEW] 页脚样式 - 方案一 (精致简约) --- */
129 |         footer {
130 |             width: 100%;
131 |             max-width: 1200px;
132 |             text-align: center;
133 |             margin-top: 2.5rem;
134 |             padding-top: 1.5rem;
135 |             border-top: 1px solid var(--border-color);
136 |             font-size: 0.9rem;
137 |             color: var(--label-color);
138 |             transition: all 0.4s ease;
139 |         }
140 |         footer .footer-content {
141 |             display: flex;
142 |             justify-content: center;
143 |             align-items: center;
144 |             gap: 1.5rem;
145 |             flex-wrap: wrap; /* 在小屏幕上换行 */
146 |         }
147 |         footer .footer-item {
148 |             display: flex;
149 |             align-items: center;
150 |             gap: 0.6rem;
151 |         }
152 |         footer .footer-icon {
153 |             color: var(--accent-color);
154 |             opacity: 0.8;
155 |             font-size: 1.1em;
156 |         }
157 |         footer .footer-separator {
158 |             width: 1px;
159 |             height: 16px;
160 |             background-color: var(--border-color);
161 |         }
162 |         @media (max-width: 768px) {
163 |             footer .footer-separator {
164 |                 display: none; /* 在小屏幕上隐藏分隔线 */
165 |             }
166 |             footer .footer-content {
167 |                 flex-direction: column;
168 |                 gap: 0.8rem;
169 |             }
170 |         }
171 | 
172 |         /* --- 响应式调整 --- */
173 |         @media (max-width: 1200px) { .control-panel { grid-template-columns: 1fr; } }
174 |         @media (max-width: 992px) { .main-container, .control-panel { grid-template-columns: 1fr; } body { padding: 1.5rem; } .card, .control-section { padding: 1.5rem; } }
175 |         @media (max-width: 768px) { html { font-size: 15px; } body { padding: 1rem; } .button-group-inline { grid-template-columns: 1fr; } .header h1 { font-size: 2rem; } .card, .control-section { padding: 1.2rem; } h2 { font-size: 1.4rem; } .chart-container { width: 110px; height: 110px; } }
176 |     </style>
177 | </head>
178 | <body>
179 |     <div class="header">
180 |         <h1>MosDNS 监控面板</h1>
181 |         <div class="header-gradient-bar"></div>
182 |     </div>
183 | 
184 |     <div id="loading-spinner"></div>
185 | 
186 |     <div id="main-content" class="main-container"></div>
187 | 
188 |     <div class="control-panel">
189 |         <div class="left-column">
190 |             <section class="control-section">
191 |                 <h4 class="section-title"><i class="fas fa-cogs"></i> 控制中心</h4>
192 |                 <div class="refresh-action-bar">
193 |                     <div class="auto-refresh-control">
194 |                         <label class="switch-label">
195 |                             <input type="checkbox" id="auto-refresh-toggle" class="switch-input">
196 |                             <span class="switch-slider"></span>
197 |                         </label>
198 |                         <span class="switch-label-text">自动刷新 (5s)</span>
199 |                     </div>
200 |                     <button id="refresh-now-btn"><i class="fas fa-sync-alt"></i> 立即刷新</button>
201 |                 </div>
202 |                 <div class="rule-actions-group">
203 |                     <div class="button-group-inline">
204 |                         <button id="save-rules-btn"><i class="fas fa-save"></i> 保存分流规则</button>
205 |                         <button id="flush-rules-btn" class="danger"><i class="fas fa-trash-alt"></i> 清空分流规则</button>
206 |                     </div>
207 |                     <button id="restart-mosdns-btn" class="danger"><i class="fas fa-redo"></i> 重启 MosDNS 服务</button>
208 |                 </div>
209 |             </section>
210 | 
211 |             <section class="control-section">
212 |                 <h4 class="section-title"><i class="fas fa-eye"></i> 数据查看</h4>
213 |                 <div class="data-view-group">
214 |                     <button id="show-rules-btn1">fakeip 域名</button>
215 |                     <button id="show-rules-btn2">realip 域名</button>
216 |                     <button id="show-rules-btn3">无 V4 域名</button>
217 |                     <button id="show-rules-btn4">无 V6 域名</button>
218 |                     <button id="show-cache-btn1">总缓存</button>
219 |                     <button id="show-cache-btn2">CN 缓存</button>
220 |                     <button id="show-cache-btn3">!CN 缓存</button>
221 |                     <button id="show-cache-btn4">节点缓存</button>
222 |                 </div>
223 |             </section>
224 |         </div>
225 | 
226 |         <div class="right-column">
227 |             <section class="control-section">
228 |                 <div class="info-panel-tabs">
229 |                     <button class="tab-button active" data-tab="system-info"><i class="fas fa-server"></i> 系统信息</button>
230 |                     <button class="tab-button" data-tab="appearance"><i class="fas fa-palette"></i> 外观设置</button>
231 |                 </div>
232 |                 <div id="tab-system-info" class="tab-content active">
233 |                     <div class="metrics-container" id="metrics-system"></div>
234 |                     <p id="last_updated"><i class="fas fa-clock"></i> </p>
235 |                 </div>
236 |                 <div id="tab-appearance" class="tab-content">
237 |                     <h5 class="subsection-title">主题切换</h5>
238 |                     <div class="theme-selector" id="theme-selector"></div>
239 |                     <h5 class="subsection-title">显示缓存卡片</h5>
240 |                     <div class="card-toggle-group" id="card-toggles"></div>
241 |                 </div>
242 |             </section>
243 |         </div>
244 |     </div>
245 |     
246 |     <!-- [NEW] 采用方案一：精致简约风页脚 -->
247 |     <footer>
248 |         <div class="footer-content">
249 |             <div class="footer-item">
250 |                 <i class="fas fa-code-branch footer-icon"></i>
251 |                 <span>UI 版本: V1.1 (20250614)</span>
252 |             </div>
253 |             <div class="footer-separator"></div>
254 |             <div class="footer-item">
255 |                 <i class="fas fa-users-cog footer-icon"></i>
256 |                 <span>技术支持: Phil Horse & JimmyDADA</span>
257 |             </div>
258 |         </div>
259 |     </footer>
260 | 
261 |     <script>
262 |         // === START OF FULL, READABLE JAVASCRIPT ===
263 |         const API_URL = '/api/mosdns_status';
264 |         const REFRESH_INTERVAL = 5000;
265 | 
266 |         let chartInstances = {};
267 |         let autoRefreshTimer = null;
268 |         let isRefreshing = false;
269 |         let currentTheme = 'light';
270 | 
271 |         Chart.register(ChartDataLabels);
272 |         Chart.defaults.plugins.legend.display = false;
273 |         Chart.defaults.plugins.datalabels.font.weight = 'bold';
274 |         Chart.defaults.plugins.datalabels.font.size = 11;
275 |         Chart.defaults.cutout = '70%';
276 |         Chart.defaults.responsive = true;
277 |         Chart.defaults.maintainAspectRatio = false;
278 |         Chart.defaults.plugins.datalabels.formatter = (value, context) => { const sum = context.chart.data.datasets[0].data.reduce((a, b) => a + b, 0); if (sum === 0) return ''; const percentage = (value / sum * 100); return percentage > 5 ? `${percentage.toFixed(0)}%` : ''; };
279 | 
280 |         function createElement(tag, className, innerText = '', id = '') { const el = document.createElement(tag); if (className) el.className = className; if (innerText) el.innerText = innerText; if (id) el.id = id; return el; }
281 |         
282 |         function formatNumber(num) { if (typeof num !== 'number' && isNaN(num = parseFloat(num))) { return num; } return num.toLocaleString('en-US'); }
283 |         
284 |         const iconMap = { '请求总数': 'fa-globe', '缓存命中': 'fa-check-circle', '过期缓存命中': 'fa-history', '缓存命中率': 'fa-bullseye', '过期缓存命中率': 'fa-bullseye', '缓存条目数': 'fa-database', '启动时间': 'fa-power-off', 'CPU 时间': 'fa-microchip', '常驻内存 (RSS)': 'fa-memory', '待用堆内存 (Idle)': 'fa-box-open', 'Go 版本': 'fa-code-branch', '线程数': 'fa-sitemap', '打开文件描述符': 'fa-folder-open', };
285 |         const cacheOrder = ['cache_all', 'cache_cn', 'cache_google', 'cache_node'];
286 |         const cacheTitles = { 'cache_all': '全部缓存', 'cache_cn': '国内缓存', 'cache_google': '国外缓存', 'cache_node': '节点缓存' };
287 |         
288 |         const themeMap = {
289 |             'light': { name: '默认亮色', icon: 'fa-sun', cssVars: { '--bg-color': '#f7f9fd', '--text-color': '#2c3e50', '--card-bg': '#ffffff', '--card-shadow': '0 6px 18px rgba(0, 0, 0, 0.08)', '--border-color': '#e0e6ec', '--accent-color': '#4a90e2', '--error-color': '#e74c3c', '--label-color': '#7f8c8d', '--value-color': '#34495e', '--control-bg': '#f0f4f7', '--control-border': '#d5dce2', '--control-text': '#5e727e', '--control-hover-bg': '#e5edf3', '--control-active-bg': '#4a90e2', '--control-active-text': '#ffffff', '--gradient-start': '#4a90e2', '--gradient-mid': '#2e86de', '--gradient-end': '#4a90e2', '--danger-bg-color': 'rgba(231, 76, 60, 0.1)', '--danger-border-color': 'rgba(231, 76, 60, 0.3)', '--danger-text-color': '#e74c3c', '--danger-hover-bg-color': '#e74c3c', '--danger-hover-text-color': '#ffffff' }, chartColors: { hit: 'rgba(74, 144, 226, 0.7)', miss: 'rgba(189, 195, 199, 0.3)', hitBorder: '#4a90e2', missBorder: '#bdc3c7', text: '#2c3e50' }},
290 |             'dark': { name: '默认暗色', icon: 'fa-moon', cssVars: { '--bg-color': '#1a1a1a', '--text-color': '#e0e0e0', '--card-bg': '#282828', '--card-shadow': '0 8px 25px rgba(0, 0, 0, 0.5)', '--border-color': '#3a3a3a', '--accent-color': '#5096ff', '--error-color': '#e74c3c', '--label-color': '#bbbbbb', '--value-color': '#ffffff', '--control-bg': '#353535', '--control-border': '#4a4a4a', '--control-text': '#e0e0e0', '--control-hover-bg': '#404040', '--control-active-bg': '#5096ff', '--control-active-text': '#ffffff', '--gradient-start': '#5096ff', '--gradient-mid': '#3a7ce0', '--gradient-end': '#5096ff', '--danger-bg-color': 'rgba(231, 76, 60, 0.2)', '--danger-border-color': 'rgba(231, 76, 60, 0.5)', '--danger-text-color': '#e74c3c', '--danger-hover-bg-color': '#e74c3c', '--danger-hover-text-color': '#ffffff' }, chartColors: { hit: 'rgba(80, 150, 255, 0.7)', miss: 'rgba(100, 100, 100, 0.3)', hitBorder: '#5096ff', missBorder: '#707070', text: '#e0e0e0' }},
291 |             'cyberpunk': { name: '赛博朋克', icon: 'fa-robot', cssVars: { '--bg-color': '#0c0221', '--text-color': '#e0e1dd', '--card-bg': '#1a0f3d', '--card-shadow': '0 10px 30px rgba(42,7,102,.6)', '--border-color': '#3b2a60', '--accent-color': '#00f6ff', '--error-color': '#ff005c', '--label-color': '#a9a2c1', '--value-color': '#f0f0f0', '--control-bg': '#1e114d', '--control-border': '#4a3a79', '--control-text': '#a0a0e0', '--control-hover-bg': '#2e1e5d', '--control-active-bg': '#00f6ff', '--control-active-text': '#0c0221', '--gradient-start': '#00f6ff', '--gradient-mid': '#ff005c', '--gradient-end': '#00f6ff', '--danger-bg-color': 'rgba(255, 0, 92, 0.2)', '--danger-border-color': 'rgba(255, 0, 92, 0.5)', '--danger-text-color': '#ff005c', '--danger-hover-bg-color': '#ff005c', '--danger-hover-text-color': '#0c0221' }, chartColors: { hit: 'rgba(0,246,255,.7)', miss: 'rgba(255,0,92,.3)', hitBorder: '#00f6ff', missBorder: '#ff005c', text: '#e0e1dd' }},
292 |             'forest': { name: '静谧森林', icon: 'fa-tree', cssVars: { '--bg-color': '#e8f5e9', '--text-color': '#2e3d32', '--card-bg': '#fff', '--card-shadow': '0 6px 18px rgba(0,0,0,.06)', '--border-color': '#d0e0d0', '--accent-color': '#4a7c59', '--error-color': '#c0392b', '--label-color': '#607b6c', '--value-color': '#2e3d32', '--control-bg': '#e1f0e2', '--control-border': '#c8d8c8', '--control-text': '#506f5c', '--control-hover-bg': '#d6e8d7', '--control-active-bg': '#4a7c59', '--control-active-text': '#fff', '--gradient-start': '#4a7c59', '--gradient-mid': '#3a6246', '--gradient-end': '#4a7c59', '--danger-bg-color': 'rgba(192, 57, 43, 0.1)', '--danger-border-color': 'rgba(192, 57, 43, 0.3)', '--danger-text-color': '#c0392b', '--danger-hover-bg-color': '#c0392b', '--danger-hover-text-color': '#ffffff' }, chartColors: { hit: 'rgba(74,124,89,.7)', miss: 'rgba(160,180,165,.3)', hitBorder: '#4a7c59', missBorder: '#a0a0a0', text: '#2e3d32' }},
293 |             'sunset': { name: '日落余晖', icon: 'fa-cloud-sun-rain', cssVars: { '--bg-color': '#2c203a', '--text-color': '#fde8d7', '--card-bg': '#3a2a4e', '--card-shadow': '0 10px 30px rgba(44,32,58,.6)', '--border-color': '#553e70', '--accent-color': '#ff8c42', '--error-color': '#e74c3c', '--label-color': '#d3b7e8', '--value-color': '#fde8d7', '--control-bg': '#4a3360', '--control-border': '#5c4278', '--control-text': '#e0c8f5', '--control-hover-bg': '#5a4370', '--control-active-bg': '#ff8c42', '--control-active-text': '#2c203a', '--gradient-start': '#ff8c42', '--gradient-mid': '#ff4d6d', '--gradient-end': '#ff8c42', '--danger-bg-color': 'rgba(255, 77, 109, 0.2)', '--danger-border-color': 'rgba(255, 77, 109, 0.4)', '--danger-text-color': '#ff4d6d', '--danger-hover-bg-color': '#ff4d6d', '--danger-hover-text-color': '#ffffff' }, chartColors: { hit: 'rgba(255,140,66,.7)', miss: 'rgba(255,77,109,.3)', hitBorder: '#ff8c42', missBorder: '#ff4d6d', text: '#fde8d7' }},
294 |             'monochrome': { name: '高级灰', icon: 'fa-grip-lines', cssVars: { '--bg-color': '#eef1f4', '--text-color': '#2b2e31', '--card-bg': '#fff', '--card-shadow': '0 6px 18px rgba(0,0,0,.07)', '--border-color': '#d8dee3', '--accent-color': '#4a4a4a', '--error-color': '#b00020', '--label-color': '#7f8c8d', '--value-color': '#1a1a1a', '--control-bg': '#e1e4e7', '--control-border': '#c9ccd0', '--control-text': '#5e6872', '--control-hover-bg': '#d6dbdf', '--control-active-bg': '#4a4a4a', '--control-active-text': '#fff', '--gradient-start': '#666', '--gradient-mid': '#333', '--gradient-end': '#666', '--danger-bg-color': 'rgba(176, 0, 32, 0.1)', '--danger-border-color': 'rgba(176, 0, 32, 0.3)', '--danger-text-color': '#b00020', '--danger-hover-bg-color': '#b00020', '--danger-hover-text-color': '#ffffff' }, chartColors: { hit: 'rgba(74,74,74,.7)', miss: 'rgba(160,160,160,.3)', hitBorder: '#4a4a4a', missBorder: '#a0a0a0', text: '#2b2e31' }},
295 |             'google': { name: 'Google 风格', icon: 'fa-brands fa-google', cssVars: { '--bg-color': '#f8f9fa', '--text-color': '#212529', '--card-bg': '#ffffff', '--card-shadow': '0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.05)', '--border-color': '#e8e8e8', '--accent-color': '#34A853', '--error-color': '#EA4335', '--label-color': '#707070', '--value-color': '#3C4043', '--control-bg': '#e6f4ea', '--control-border': '#b1e0b9', '--control-text': '#34A853', '--control-hover-bg': '#d9f3de', '--control-active-bg': '#34A853', '--control-active-text': '#ffffff', '--gradient-start': '#4285F4', '--gradient-mid': '#FBBC05', '--gradient-end': '#EA4335', '--danger-bg-color': 'rgba(234, 67, 53, 0.1)', '--danger-border-color': 'rgba(234, 67, 53, 0.3)', '--danger-text-color': '#EA4335', '--danger-hover-bg-color': '#EA4335', '--danger-hover-text-color': '#ffffff' }, chartColors: { hit: 'rgba(52, 168, 83, 0.7)', miss: 'rgba(234, 67, 53, 0.3)', hitBorder: '#4285F4', missBorder: '#FBBC05', text: '#3C4043' }},
296 |             'mac': { name: 'Mac 风格', icon: 'fa-brands fa-apple', cssVars: { '--bg-color': '#F0F0F5', '--text-color': '#1c1c1e', '--card-bg': '#ffffff', '--card-shadow': '0 0.5px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04)', '--border-color': '#E5E5EA', '--accent-color': '#007AFF', '--error-color': '#FF3B30', '--label-color': '#666666', '--value-color': '#1c1c1e', '--control-bg': '#EFEFF4', '--control-border': '#D1D1D6', '--control-text': '#1c1c1e', '--control-hover-bg': '#DCDCE0', '--control-active-bg': '#007AFF', '--control-active-text': '#ffffff', '--gradient-start': '#007AFF', '--gradient-mid': '#34A8FF', '--gradient-end': '#007AFF', '--danger-bg-color': 'rgba(255, 59, 48, 0.1)', '--danger-border-color': 'rgba(255, 59, 48, 0.3)', '--danger-text-color': '#FF3B30', '--danger-hover-bg-color': '#FF3B30', '--danger-hover-text-color': '#ffffff' }, chartColors: { hit: 'rgba(0, 122, 255, 0.7)', miss: 'rgba(180, 180, 185, 0.2)', hitBorder: '#007aff', missBorder: '#d1d1d6', text: '#1c1c1e' }}
297 |         };
298 |         
299 |         let visibleCards = JSON.parse(localStorage.getItem('visibleMosdnsCards')) || cacheOrder;
300 |         
301 |         function updateThemeButtons(activeMode) { const themeSelector = document.getElementById('theme-selector'); themeSelector.innerHTML = ''; for (const mode in themeMap) { const theme = themeMap[mode]; const btn = createElement('button', 'control-base-label'); btn.dataset.theme = mode; btn.innerHTML = `<i class="${theme.icon}"></i> ${theme.name}`; if (mode === activeMode) btn.classList.add('active'); btn.addEventListener('click', () => setTheme(mode)); themeSelector.appendChild(btn); } }
302 |         function setTheme(mode) { currentTheme = mode; const root = document.documentElement; const themeVars = themeMap[mode].cssVars; for (const prop in themeVars) { root.style.setProperty(prop, themeVars[prop]); } localStorage.setItem('theme', mode); updateThemeButtons(mode); setTimeout(() => { Object.values(chartInstances).forEach(chart => chart.destroy()); chartInstances = {}; refreshData(true, true); }, 50); }
303 |         async function fetchAPI(url) { try { const r = await fetch(url); if (!r.ok) throw new Error(`网络响应错误: ${r.statusText} (${r.status})`); return await r.json(); } catch (e) { console.error(`Fetch error from ${url}:`, e); return null; } }
304 |         function createCacheCard(tag, title) { const card = createElement('div', 'card'); card.dataset.tag = tag; const h2 = createElement('h2'); h2.append(createElement('i', 'fas fa-server'), createElement('span', 'title-text', title), createElement('span', 'status-dot', '', `status-dot-${tag}`)); const gradientBar = createElement('div', 'card-title-gradient-bar'); const metricsContainer = createElement('div', 'metrics-container', '', `metrics-${tag}`); const chartsContainer = createElement('div', 'charts'); const totalHitChartContainer = createElement('div', 'chart-container'); totalHitChartContainer.appendChild(createElement('canvas', '', '', `chart-hit-${tag}`)); const lazyHitChartContainer = createElement('div', 'chart-container'); lazyHitChartContainer.appendChild(createElement('canvas', '', '', `chart-lazy-${tag}`)); chartsContainer.append(totalHitChartContainer, lazyHitChartContainer); const cardContent = createElement('div', 'card-content'); cardContent.append(metricsContainer, chartsContainer); card.append(h2, gradientBar, cardContent); return card; }
305 |         function createOrUpdatePieChart(id, title, hit, total) { const ctx = document.getElementById(id); if (!ctx) return; const colors = themeMap[currentTheme].chartColors; const data = { labels: ['命中', '未命中'], datasets: [{ data: [hit, Math.max(0, total - hit)], backgroundColor: [colors.hit, colors.miss], borderColor: [colors.hitBorder, colors.missBorder], borderWidth: 1.5 }] }; const options = { plugins: { title: { display: true, text: title, color: colors.text, font: { size: 12, weight: 'bold' } }, datalabels: { color: colors.text } } }; if (chartInstances[id]) { chartInstances[id].data = data; chartInstances[id].options = options; chartInstances[id].update('none'); } else { chartInstances[id] = new Chart(ctx, { type: 'doughnut', data, options }); } }
306 |         function updateMetrics(containerId, metricsData) { const container = document.getElementById(containerId); if (!container) return; container.innerHTML = ''; metricsData.forEach(metric => { const icon = createElement('i', `fas ${iconMap[metric.label] || 'fa-question-circle'}`); const labelContainer = createElement('div', 'metric-label'); labelContainer.append(icon, createElement('span', '', metric.label + ':')); const valueSpan = createElement('span', 'metric-value', (metric.numericValue !== undefined) ? formatNumber(metric.numericValue) : metric.value); if (metric.accent) valueSpan.classList.add('accent'); container.append(labelContainer, valueSpan); }); }
307 |         function setupCardToggles() { const toggleContainer = document.getElementById('card-toggles'); toggleContainer.innerHTML = ''; cacheOrder.forEach(tag => { const label = createElement('label', 'control-base-label'); const checkbox = createElement('input'); checkbox.type = 'checkbox'; checkbox.dataset.tag = tag; checkbox.checked = visibleCards.includes(tag); checkbox.addEventListener('change', (event) => { const tag = event.target.dataset.tag; if (event.target.checked) { if (!visibleCards.includes(tag)) visibleCards.push(tag); } else { visibleCards = visibleCards.filter(t => t !== tag); } localStorage.setItem('visibleMosdnsCards', JSON.stringify(visibleCards)); refreshData(true, true); }); label.append(checkbox, createElement('span', 'toggle-label-text', cacheTitles[tag])); toggleContainer.appendChild(label); }); }
308 |         
309 |         function startAutoRefresh() { if (autoRefreshTimer) return; autoRefreshTimer = setInterval(() => refreshData(false, true), REFRESH_INTERVAL); }
310 |         function stopAutoRefresh() { if (autoRefreshTimer) { clearInterval(autoRefreshTimer); autoRefreshTimer = null; } }
311 |         
312 |         async function refreshData(forceRebuild = false, updateCharts = false) {
313 |             document.body.classList.add('loading');
314 |             const data = await fetchAPI(API_URL);
315 |             document.body.classList.remove('loading');
316 |             
317 |             if (!data) {
318 |                 stopAutoRefresh();
319 |                 const toggle = document.getElementById('auto-refresh-toggle');
320 |                 if (toggle) toggle.checked = false;
321 |                 localStorage.setItem('autoRefresh', 'false');
322 |                 document.getElementById('main-content').innerHTML = `<div class="error-message"><i class="fas fa-exclamation-triangle"></i><p>无法连接到 MosDNS API。</p><small>请检查后端服务是否运行。</small></div>`;
323 |                 return;
324 |             }
325 |             
326 |             if (forceRebuild) {
327 |                 document.getElementById('main-content').innerHTML = '';
328 |                 Object.values(chartInstances).forEach(c => c.destroy());
329 |                 chartInstances = {};
330 |                 cacheOrder.forEach(tag => {
331 |                     if (data.caches[tag] && visibleCards.includes(tag)) {
332 |                         document.getElementById('main-content').appendChild(createCacheCard(tag, cacheTitles[tag]));
333 |                     }
334 |                 });
335 |             }
336 |             
337 |             cacheOrder.forEach(tag => {
338 |                 const card = document.querySelector(`.card[data-tag="${tag}"]`);
339 |                 if (card) {
340 |                     const isVisible = visibleCards.includes(tag);
341 |                     card.classList.toggle('visible', isVisible);
342 |                     if (isVisible && data.caches[tag]) {
343 |                         const cardData = data.caches[tag];
344 |                         updateMetrics(`metrics-${tag}`, [
345 |                             { label: '请求总数', numericValue: cardData.query_total }, { label: '缓存命中', numericValue: cardData.hit_total }, { label: '过期缓存命中', numericValue: cardData.lazy_hit_total },
346 |                             { label: '缓存命中率', value: cardData.hit_rate, accent: true }, { label: '过期缓存命中率', value: cardData.lazy_hit_rate, accent: true }, { label: '缓存条目数', numericValue: cardData.size_current },
347 |                         ]);
348 |                         const dot = card.querySelector(`#status-dot-${tag}`);
349 |                         if (dot) { dot.className = 'status-dot'; dot.classList.add(cardData.query_total > 0 ? 'status-green' : 'status-yellow'); }
350 |                         card.querySelector('.charts').style.display = cardData.query_total > 0 ? 'flex' : 'none';
351 |                         if ((forceRebuild || updateCharts) && cardData.query_total > 0) {
352 |                             createOrUpdatePieChart(`chart-hit-${tag}`, '命中', cardData.hit_total, cardData.query_total);
353 |                             createOrUpdatePieChart(`chart-lazy-${tag}`, '过期命中', cardData.lazy_hit_total, cardData.query_total);
354 |                         }
355 |                     }
356 |                 }
357 |             });
358 |             
359 |             updateMetrics('metrics-system', [
360 |                 { label: '启动时间', value: data.system?.start_time || 'N/A' },
361 |                 { label: 'CPU 时间', value: data.system?.cpu_time || 'N/A' }, 
362 |                 { label: '常驻内存 (RSS)', value: data.system?.resident_memory || 'N/A' },
363 |                 { label: '待用堆内存 (Idle)', value: data.system?.heap_idle_memory || 'N/A' }, 
364 |                 { label: 'Go 版本', value: data.system?.go_version || 'N/A', accent: true },
365 |                 { label: '线程数', numericValue: data.system?.threads || 'N/A' }, 
366 |                 { label: '打开文件描述符', numericValue: data.system?.open_fds || 'N/A' },
367 |             ]);
368 |             document.getElementById('last_updated').innerHTML = `<i class="fas fa-clock"></i> 最后更新: ${new Date().toLocaleTimeString()}`;
369 |         }
370 | 
371 |         function setupEventListeners() {
372 |             document.getElementById('refresh-now-btn').addEventListener('click', () => refreshData(false, true));
373 |             document.getElementById('auto-refresh-toggle').addEventListener('change', (event) => {
374 |                 const isEnabled = event.target.checked;
375 |                 localStorage.setItem('autoRefresh', isEnabled.toString());
376 |                 if (isEnabled) startAutoRefresh(); else stopAutoRefresh();
377 |             });
378 |             document.getElementById('save-rules-btn').addEventListener('click', () => { const endpoints = ['my_fakeiplist', 'my_nodenov4list', 'my_nodenov6list', 'my_notinlist', 'my_nov4list', 'my_nov6list', 'my_realiplist']; Promise.all(endpoints.map(p => fetch(`/plugins/${p}/save`))).then(() => alert('✅ 分流规则已保存')); });
379 |             document.getElementById('flush-rules-btn').addEventListener('click', () => { if (window.confirm('确定要清空所有分流规则吗？')) { const endpoints = ['my_fakeiplist', 'my_nodenov4list', 'my_nodenov6list', 'my_notinlist', 'my_nov4list', 'my_nov6list', 'my_realiplist']; Promise.all(endpoints.map(p => fetch(`/plugins/${p}/flush`))).then(() => alert('✅ 分流规则已清空')); } });
380 |             document.getElementById('restart-mosdns-btn').addEventListener('click', () => { if (window.confirm('确定要重启 mosdns 吗？')) { fetch('/plugins/my_fakeiplist/restartall').then(r => { if (!r.ok) throw new Error(r.statusText); alert('✅ MosDNS 重启命令已发送...'); setTimeout(() => location.reload(), 1000); }).catch(e => alert(`重启失败: ${e.message}`)); } });
381 |             const ruleBtnMap = { 'show-rules-btn1': 'my_fakeiplist', 'show-rules-btn2': 'my_realiplist', 'show-rules-btn3': 'my_nov4list', 'show-rules-btn4': 'my_nov6list' };
382 |             for(const id in ruleBtnMap) { document.getElementById(id).addEventListener('click', () => window.open(`/plugins/${ruleBtnMap[id]}/show`, '_blank')); }
383 |             const cacheBtnMap = { 'show-cache-btn1': 'cache_all', 'show-cache-btn2': 'cache_cn', 'show-cache-btn3': 'cache_google', 'show-cache-btn4': 'cache_node' };
384 |             for(const id in cacheBtnMap) { document.getElementById(id).addEventListener('click', () => window.open(`/plugins/${cacheBtnMap[id]}/show`, '_blank')); }
385 |             const tabButtons = document.querySelectorAll('.tab-button');
386 |             const tabContents = document.querySelectorAll('.tab-content');
387 |             tabButtons.forEach(button => {
388 |                 button.addEventListener('click', () => {
389 |                     tabButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active');
390 |                     tabContents.forEach(content => { content.classList.toggle('active', content.id === `tab-${button.dataset.tab}`); });
391 |                 });
392 |             });
393 |         }
394 | 
395 |         document.addEventListener('DOMContentLoaded', () => {
396 |             setupEventListeners();
397 |             setupCardToggles();
398 |             const initialTheme = localStorage.getItem('theme') || 'light';
399 |             setTheme(initialTheme);
400 |             const autoRefreshEnabled = (localStorage.getItem('autoRefresh') === 'true');
401 |             document.getElementById('auto-refresh-toggle').checked = autoRefreshEnabled;
402 |             refreshData(true, true).then(() => { if (autoRefreshEnabled) startAutoRefresh(); });
403 |         });
404 |         // === END OF FULL, READABLE JAVASCRIPT ===
405 |     </script>
406 | </body>
407 | </html>
408 | 


--------------------------------------------------------------------------------