aps更新
This commit is contained in:
ray
152
aliyun-sync/aliyun-aps-sync/web-console/index.html
Normal file
152
aliyun-sync/aliyun-aps-sync/web-console/index.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>APS Console</title>
|
||||
<link rel="stylesheet" href="/assets/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<div class="brand-badge">APS</div>
|
||||
<div>
|
||||
<h1>Control Console</h1>
|
||||
<p>配置、命令与日志统一管理</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<button data-tab="commands" class="nav-link active">运行命令</button>
|
||||
<button data-tab="config" class="nav-link">环境配置</button>
|
||||
<button data-tab="history" class="nav-link">运行记录</button>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="workspace">
|
||||
<section class="hero-card">
|
||||
<div>
|
||||
<span class="eyebrow">Local orchestration</span>
|
||||
<h2>把 `.env`、启动命令和运行日志整合进一个页面</h2>
|
||||
<p>用于本地管理 APS 抓取工具：保存配置、执行常用命令、实时查看输出，不再来回切换命令行和配置文件。</p>
|
||||
</div>
|
||||
<div class="hero-status" id="activeRunSummary">当前无运行任务</div>
|
||||
</section>
|
||||
|
||||
<section class="stats-grid" id="summaryCards"></section>
|
||||
|
||||
<section class="scheduler-strip">
|
||||
<article class="scheduler-card">
|
||||
<div class="analytics-header">
|
||||
<h3>定时任务专区</h3>
|
||||
<p>专门展示 bills 与 hot 双轨调度的运行策略和配置。</p>
|
||||
</div>
|
||||
<div id="schedulerMeta" class="scheduler-meta"></div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="analytics-strip">
|
||||
<article class="analytics-card">
|
||||
<div class="analytics-header">
|
||||
<h3>消息分类统计</h3>
|
||||
<p>最近数据库中的消息分类分布</p>
|
||||
</div>
|
||||
<div id="messageClassificationStats" class="analytics-list"></div>
|
||||
</article>
|
||||
<article class="analytics-card">
|
||||
<div class="analytics-header">
|
||||
<h3>账号 ID 命中统计</h3>
|
||||
<p>释放/预警类消息中出现最多的账号 ID</p>
|
||||
</div>
|
||||
<div id="messageAccountStats" class="analytics-list"></div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="utility-strip">
|
||||
<button id="testDbBtn" class="ghost">测试数据库连接</button>
|
||||
<button id="checkLoginBtn" class="ghost">检查登录态</button>
|
||||
<button id="clearCheckpointBtn" class="ghost">清消息 Checkpoint</button>
|
||||
<button id="clearMessageDataBtn" class="ghost danger">清消息数据库</button>
|
||||
<div id="utilityFeedback" class="utility-feedback">等待检测…</div>
|
||||
</section>
|
||||
|
||||
<section class="result-strip">
|
||||
<div id="maintenanceResultCard" class="result-card hidden"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel active" data-panel="commands">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h3>命令控制台</h3>
|
||||
<p>常用同步任务一键启动，可选 resume / incremental 参数。</p>
|
||||
</div>
|
||||
<button id="stopRunBtn" class="ghost danger">停止当前任务</button>
|
||||
</div>
|
||||
<div class="command-grid" id="commandGrid"></div>
|
||||
<div class="log-card">
|
||||
<div class="log-card-header">
|
||||
<h4>运行输出</h4>
|
||||
<div class="log-tools">
|
||||
<label class="mini-toggle">
|
||||
<input id="autoScrollToggle" type="checkbox" checked />
|
||||
<span>自动滚动</span>
|
||||
</label>
|
||||
<input id="logFilterInput" class="log-filter-input" type="text" placeholder="过滤日志关键词" />
|
||||
<button id="exportLogBtn" class="ghost">导出日志</button>
|
||||
<span id="runStatusPill" class="pill idle">idle</span>
|
||||
</div>
|
||||
</div>
|
||||
<pre id="runOutput" class="log-output">等待任务启动…</pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" data-panel="config">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h3>环境变量配置</h3>
|
||||
<p>按分组查看和编辑 `.env`，保存后下次启动任务会读取新值。</p>
|
||||
</div>
|
||||
<button id="saveEnvBtn" class="primary">保存配置</button>
|
||||
</div>
|
||||
<div id="configGroups" class="config-groups"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel" data-panel="history">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h3>运行历史</h3>
|
||||
<p>保留最近任务状态与命令参数，便于快速回看。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="historyList" class="history-list"></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="commandCardTemplate">
|
||||
<article class="command-card">
|
||||
<div class="command-card-head">
|
||||
<div>
|
||||
<h4 class="command-title"></h4>
|
||||
<p class="command-description"></p>
|
||||
</div>
|
||||
<span class="command-key"></span>
|
||||
</div>
|
||||
<div class="command-options"></div>
|
||||
<button class="primary run-command-btn">启动</button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<template id="historyItemTemplate">
|
||||
<article class="history-item">
|
||||
<div>
|
||||
<h4 class="history-title"></h4>
|
||||
<p class="history-meta"></p>
|
||||
</div>
|
||||
<span class="pill history-status"></span>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script type="module" src="/assets/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user