增加webui界面
This commit is contained in:
@@ -0,0 +1,127 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>剑网三插件管理</title>
|
||||
<link rel="icon" href="data:," />
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<h1>剑网三插件管理</h1>
|
||||
<p>管理会话区服绑定、事件订阅状态、区服别名与心法别名。</p>
|
||||
</div>
|
||||
<button class="button button--secondary" id="refresh" type="button">刷新数据</button>
|
||||
</header>
|
||||
|
||||
<section class="summary" aria-label="数据概览">
|
||||
<div class="summary__item">
|
||||
<span>已绑定会话</span>
|
||||
<strong id="binding-count">—</strong>
|
||||
</div>
|
||||
<div class="summary__item">
|
||||
<span>事件推送会话</span>
|
||||
<strong id="subscription-count">—</strong>
|
||||
</div>
|
||||
<div class="summary__item">
|
||||
<span>区服别名</span>
|
||||
<strong id="alias-count">—</strong>
|
||||
</div>
|
||||
<div class="summary__item">
|
||||
<span>心法条目</span>
|
||||
<strong id="kungfu-count">—</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav class="tabs" aria-label="管理分类" role="tablist">
|
||||
<button class="tab is-active" type="button" role="tab" aria-selected="true" data-tab="bindings">会话绑定</button>
|
||||
<button class="tab" type="button" role="tab" aria-selected="false" data-tab="subscriptions">事件订阅</button>
|
||||
<button class="tab" type="button" role="tab" aria-selected="false" data-tab="aliases">区服别名</button>
|
||||
<button class="tab" type="button" role="tab" aria-selected="false" data-tab="kungfu">心法别名</button>
|
||||
</nav>
|
||||
|
||||
<section class="panel is-active" id="bindings-panel" role="tabpanel">
|
||||
<form class="editor" id="binding-form">
|
||||
<label>
|
||||
<span>会话 ID</span>
|
||||
<input id="binding-session" name="session_id" maxlength="512" placeholder="例如：QQ:GroupMessage:123456" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>绑定区服</span>
|
||||
<input id="binding-server" name="server" maxlength="64" list="server-options" placeholder="选择或输入标准区服名/别名" required />
|
||||
</label>
|
||||
<button class="button button--primary" type="submit">保存绑定</button>
|
||||
</form>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead><tr><th>会话 ID</th><th>绑定区服</th><th class="actions">操作</th></tr></thead>
|
||||
<tbody id="bindings-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="subscriptions-panel" role="tabpanel" hidden>
|
||||
<div class="section-intro">
|
||||
<div><h2>所有会话事件状态</h2><p>总开关和已订阅事件均来自本地订阅表。</p></div>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead><tr><th>会话 ID</th><th>绑定区服</th><th>总开关</th><th>已订阅事件</th></tr></thead>
|
||||
<tbody id="subscriptions-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="aliases-panel" role="tabpanel" hidden>
|
||||
<form class="editor editor--aliases" id="alias-form">
|
||||
<label>
|
||||
<span>标准区服名</span>
|
||||
<input id="alias-server" name="server" maxlength="64" list="server-options" placeholder="例如：梦江南" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>别名（多个别名用逗号分隔）</span>
|
||||
<input id="alias-values" name="aliases" placeholder="例如：梦江、梦江南服、MJ" />
|
||||
</label>
|
||||
<button class="button button--primary" type="submit">保存别名</button>
|
||||
</form>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead><tr><th>标准区服名</th><th>别名</th><th class="actions">操作</th></tr></thead>
|
||||
<tbody id="aliases-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="kungfu-panel" role="tabpanel" hidden>
|
||||
<form class="editor editor--kungfu" id="kungfu-form">
|
||||
<label>
|
||||
<span>心法 ID（JX3BOX 配装 ID）</span>
|
||||
<input id="kungfu-pzid" name="pzid" type="number" min="1" step="1" placeholder="例如：10014" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>标准心法名</span>
|
||||
<input id="kungfu-name" name="name" maxlength="64" placeholder="例如：紫霞功" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>别名（最多 5 个，用逗号分隔）</span>
|
||||
<input id="kungfu-aliases" name="aliases" placeholder="例如：气纯、紫霞" />
|
||||
</label>
|
||||
<button class="button button--primary" type="submit">保存心法</button>
|
||||
</form>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead><tr><th>心法 ID</th><th>标准心法名</th><th>别名</th><th class="actions">操作</th></tr></thead>
|
||||
<tbody id="kungfu-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<datalist id="server-options"></datalist>
|
||||
<div class="toast" id="toast" role="status" aria-live="polite"></div>
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user