275 lines
13 KiB
HTML
275 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>MosDNS 管理面板</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌐</text></svg>">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 头部 -->
|
||
<header class="header">
|
||
<div class="header-content">
|
||
<h1 class="logo">🌐 MosDNS 管理面板</h1>
|
||
<div class="header-info">
|
||
<span class="status-indicator online" id="status">在线</span>
|
||
<span class="version" id="version">v1.0.0</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="nav">
|
||
<div class="nav-content">
|
||
<button class="nav-item active" data-tab="dashboard">
|
||
📊 仪表板
|
||
</button>
|
||
<button class="nav-item" data-tab="mikrotik">
|
||
🔧 MikroTik 管理
|
||
</button>
|
||
<button class="nav-item" data-tab="domains">
|
||
📝 域名文件
|
||
</button>
|
||
<button class="nav-item" data-tab="logs">
|
||
📋 日志查看
|
||
</button>
|
||
<button class="nav-item" data-tab="stats">
|
||
📈 统计信息
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<main class="main">
|
||
<!-- 仪表板 -->
|
||
<div class="tab-content active" id="dashboard">
|
||
<div class="dashboard-grid">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>服务状态</h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="stat-item">
|
||
<span class="stat-label">运行状态:</span>
|
||
<span class="stat-value" id="service-status">运行中</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">运行时间:</span>
|
||
<span class="stat-value" id="uptime">-</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">DNS 端口:</span>
|
||
<span class="stat-value" id="dns-ports">-</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">API 地址:</span>
|
||
<span class="stat-value" id="api-address">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>查询统计</h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="stat-item">
|
||
<span class="stat-label">总查询数:</span>
|
||
<span class="stat-value" id="total-queries">-</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">缓存命中:</span>
|
||
<span class="stat-value" id="cache-hits">-</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">平均响应时间:</span>
|
||
<span class="stat-value" id="avg-response">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>快速操作</h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="button-group">
|
||
<button class="btn btn-primary" onclick="flushCache()">清空缓存</button>
|
||
<button class="btn btn-secondary" onclick="refreshStats()">刷新统计</button>
|
||
<button class="btn btn-secondary" onclick="restartService()">重启服务</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MikroTik 管理 -->
|
||
<div class="tab-content" id="mikrotik">
|
||
<!-- 已添加的配置列表（移到前面） -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>📋 已添加的 MikroTik 配置</h3>
|
||
<div class="card-actions">
|
||
<button class="btn btn-secondary" onclick="loadMikrotikList()">
|
||
<span>🔄</span>
|
||
<span>刷新</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="mikrotik-list" class="mikrotik-list">
|
||
<div class="loading">加载中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加新配置表单 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>➕ 添加 MikroTik 配置</h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="mikrotik-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="mikrotik-tag">
|
||
<span class="label-required">*</span>
|
||
<span>配置标签</span>
|
||
</label>
|
||
<input type="text" id="mikrotik-tag" placeholder="例如: mikrotik_openai" class="form-control">
|
||
<small class="form-hint">唯一标识，建议使用 mikrotik_ 前缀</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="mikrotik-addresslist">
|
||
<span class="label-required">*</span>
|
||
<span>地址列表名</span>
|
||
</label>
|
||
<input type="text" id="mikrotik-addresslist" placeholder="例如: OpenAI" class="form-control">
|
||
<small class="form-hint">MikroTik 中的地址列表名称</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="mikrotik-host">
|
||
<span class="label-required">*</span>
|
||
<span>MikroTik 地址</span>
|
||
</label>
|
||
<input type="text" id="mikrotik-host" placeholder="例如: 10.248.0.1" class="form-control">
|
||
<small class="form-hint">MikroTik 设备的 IP 地址</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="mikrotik-port">
|
||
<span>API 端口</span>
|
||
</label>
|
||
<input type="number" id="mikrotik-port" value="9728" class="form-control">
|
||
<small class="form-hint">默认 API 端口为 9728</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="mikrotik-username">
|
||
<span class="label-required">*</span>
|
||
<span>用户名</span>
|
||
</label>
|
||
<input type="text" id="mikrotik-username" placeholder="admin" value="admin" class="form-control">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="mikrotik-password">
|
||
<span class="label-required">*</span>
|
||
<span>密码</span>
|
||
</label>
|
||
<input type="password" id="mikrotik-password" class="form-control">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="mikrotik-domains">
|
||
<span class="label-required">*</span>
|
||
<span>域名文件路径</span>
|
||
</label>
|
||
<input type="text" id="mikrotik-domains" placeholder="例如: /usr/local/yltx-dns/config/openai.txt 或 ./mikrotik/openai.txt" class="form-control">
|
||
<small class="form-hint">支持绝对路径和相对路径（相对于运行目录）</small>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button class="btn btn-primary btn-lg" onclick="saveMikrotikConfig()">
|
||
<span>💾</span>
|
||
<span>保存配置</span>
|
||
</button>
|
||
<button class="btn btn-secondary btn-lg" onclick="clearMikrotikForm()">
|
||
<span>🔄</span>
|
||
<span>清空表单</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 域名文件 -->
|
||
<div class="tab-content" id="domains">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>域名文件管理</h3>
|
||
<div class="card-actions">
|
||
<button class="btn btn-primary" onclick="addDomainFile()">添加文件</button>
|
||
<button class="btn btn-secondary" onclick="refreshDomainFiles()">刷新列表</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="domain-files-list">
|
||
<div class="loading">加载中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日志查看 -->
|
||
<div class="tab-content" id="logs">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>系统日志</h3>
|
||
<div class="card-actions">
|
||
<button class="btn btn-secondary" onclick="clearLogs()">清空日志</button>
|
||
<button class="btn btn-secondary" onclick="refreshLogs()">刷新日志</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="logs-container">
|
||
<pre id="logs-content">日志内容将在这里显示...</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计信息 -->
|
||
<div class="tab-content" id="stats">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>详细统计</h3>
|
||
<div class="card-actions">
|
||
<button class="btn btn-secondary" onclick="exportStats()">导出统计</button>
|
||
<button class="btn btn-secondary" onclick="refreshDetailedStats()">刷新统计</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-content">
|
||
<div id="detailed-stats">
|
||
<div class="loading">加载中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- 消息提示 -->
|
||
<div id="message-container"></div>
|
||
|
||
<script src="/static/js/app.js"></script>
|
||
</body>
|
||
</html>
|