129 lines
4.5 KiB
HTML
129 lines
4.5 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>AI Balance Monitor</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 登录视图 -->
|
|
<div id="login-view" class="login-view">
|
|
<div class="login-card">
|
|
<div class="login-logo">◉</div>
|
|
<h1>AI Balance Monitor</h1>
|
|
<p class="login-sub">多平台 AI 余额监控面板</p>
|
|
<input id="login-password" type="password" placeholder="管理密码" autocomplete="current-password">
|
|
<button id="login-btn" class="btn primary block">登录</button>
|
|
<p id="login-error" class="login-error"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主应用 -->
|
|
<div id="app-view" class="app-view hidden">
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="brand-dot"></span>
|
|
<span class="brand-name">AI Balance Monitor</span>
|
|
</div>
|
|
<nav class="tabs">
|
|
<button class="tab active" data-view="monitor">监控</button>
|
|
<button class="tab" data-view="platforms">平台</button>
|
|
<button class="tab" data-view="settings">设置</button>
|
|
</nav>
|
|
<div class="topbar-right">
|
|
<span id="refresh-time" class="refresh-time"></span>
|
|
<button id="logout-btn" class="btn ghost sm">登出</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
|
|
<!-- 监控视图 -->
|
|
<section id="view-monitor" class="view">
|
|
<div class="stats-bar">
|
|
<div class="stat"><span id="stat-total">0</span><label>账号</label></div>
|
|
<div class="stat ok"><span id="stat-ok">0</span><label>正常</label></div>
|
|
<div class="stat warn"><span id="stat-below">0</span><label>低于阈值</label></div>
|
|
<div class="stat err"><span id="stat-error">0</span><label>异常</label></div>
|
|
<div class="stat disabled"><span id="stat-disabled">0</span><label>已禁用</label></div>
|
|
<div class="stat pending"><span id="stat-pending">0</span><label>待检查</label></div>
|
|
</div>
|
|
<div id="account-grid" class="account-grid"></div>
|
|
<div id="empty-hint" class="empty-hint hidden">
|
|
<p>还没有账号。先到「平台」页添加一个平台，再回来添加账号。</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 平台视图 -->
|
|
<section id="view-platforms" class="view hidden">
|
|
<div class="view-head">
|
|
<h2>平台配置</h2>
|
|
<button id="add-platform-btn" class="btn primary">+ 添加平台</button>
|
|
</div>
|
|
<div id="platform-list" class="platform-list"></div>
|
|
</section>
|
|
|
|
<!-- 设置视图 -->
|
|
<section id="view-settings" class="view hidden">
|
|
<div class="view-head"><h2>设置</h2></div>
|
|
<div class="settings-card">
|
|
<h3>监控</h3>
|
|
<div class="form-row">
|
|
<label>全局监控间隔（秒）</label>
|
|
<input id="set-interval" type="number" min="10">
|
|
</div>
|
|
<div class="form-row">
|
|
<label>默认重试次数</label>
|
|
<input id="set-retry" type="number" min="0" max="10">
|
|
</div>
|
|
<div class="form-row">
|
|
<label>默认超时（秒）</label>
|
|
<input id="set-timeout" type="number" min="1" max="120">
|
|
</div>
|
|
<div class="form-row">
|
|
<label>并发数</label>
|
|
<input id="set-workers" type="number" min="1" max="64">
|
|
</div>
|
|
</div>
|
|
<div class="settings-card">
|
|
<h3>Telegram 提醒</h3>
|
|
<div class="form-row">
|
|
<label>Bot Token</label>
|
|
<input id="set-token" type="password" placeholder="123456:ABC-DEF...">
|
|
</div>
|
|
<div class="form-row">
|
|
<label>Chat ID</label>
|
|
<input id="set-chatid" type="text" placeholder="如 123456789">
|
|
</div>
|
|
</div>
|
|
<div class="settings-card">
|
|
<h3>安全</h3>
|
|
<div class="form-row">
|
|
<label>旧密码</label>
|
|
<input id="set-oldpwd" type="password" autocomplete="current-password">
|
|
</div>
|
|
<div class="form-row">
|
|
<label>新密码（≥4 位）</label>
|
|
<input id="set-newpwd" type="password" autocomplete="new-password">
|
|
</div>
|
|
</div>
|
|
<div class="settings-actions">
|
|
<button id="save-settings-btn" class="btn primary">保存设置</button>
|
|
<button id="change-pwd-btn" class="btn">修改密码</button>
|
|
<span class="settings-hint">端口需修改 config.json 后重启生效。</span>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 模态框 -->
|
|
<div id="modal-root"></div>
|
|
<div id="toast-root"></div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|