增加webui界面

pages/server-management/app.js

@@ -0,0 +1,282 @@
+const bridge = window.AstrBotPluginPage;
+const state = { bindings: [], subscriptions: [], aliases: [], kungfu: [], servers: [], events: {} };
+let toastTimer;
+
+const byId = (id) => document.getElementById(id);
+
+function showToast(message, isError = false) {
+  const toast = byId("toast");
+  toast.textContent = message;
+  toast.classList.toggle("is-error", isError);
+  toast.classList.add("is-visible");
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => toast.classList.remove("is-visible"), 2600);
+}
+
+function button(label, className, onClick) {
+  const element = document.createElement("button");
+  element.type = "button";
+  element.className = `link-button ${className || ""}`.trim();
+  element.textContent = label;
+  element.addEventListener("click", onClick);
+  return element;
+}
+
+function emptyRow(columnCount, message) {
+  const row = document.createElement("tr");
+  const cell = document.createElement("td");
+  cell.colSpan = columnCount;
+  cell.className = "empty";
+  cell.textContent = message;
+  row.append(cell);
+  return row;
+}
+
+function bindingMap() {
+  return new Map(state.bindings.map((item) => [item.session_id, item.server]));
+}
+
+function renderSummary() {
+  byId("binding-count").textContent = String(state.bindings.length);
+  byId("subscription-count").textContent = String(state.subscriptions.filter((item) => item.enabled).length);
+  byId("alias-count").textContent = String(state.aliases.reduce((total, item) => total + item.aliases.length, 0));
+  byId("kungfu-count").textContent = String(state.kungfu.length);
+}
+
+function renderServerOptions() {
+  const list = byId("server-options");
+  list.replaceChildren(...state.servers.map((server) => {
+    const option = document.createElement("option");
+    option.value = server;
+    return option;
+  }));
+}
+
+function renderBindings() {
+  const body = byId("bindings-body");
+  if (!state.bindings.length) {
+    body.replaceChildren(emptyRow(3, "暂无会话绑定"));
+    return;
+  }
+  body.replaceChildren(...state.bindings.map((item) => {
+    const row = document.createElement("tr");
+    const session = document.createElement("td");
+    const server = document.createElement("td");
+    const actions = document.createElement("td");
+    session.dataset.label = "会话 ID";
+    server.dataset.label = "绑定区服";
+    actions.dataset.label = "操作";
+    session.textContent = item.session_id;
+    server.textContent = item.server;
+    actions.className = "actions";
+    actions.append(
+      button("编辑", "", () => {
+        byId("binding-session").value = item.session_id;
+        byId("binding-server").value = item.server;
+        byId("binding-server").focus();
+      }),
+      button("解除绑定", "link-button--danger", async () => {
+        if (!window.confirm(`确认解除会话 ${item.session_id} 的区服绑定？`)) return;
+        await mutate("bindings/delete", { session_id: item.session_id }, "绑定已解除");
+      }),
+    );
+    row.append(session, server, actions);
+    return row;
+  }));
+}
+
+function renderSubscriptions() {
+  const body = byId("subscriptions-body");
+  const bindings = bindingMap();
+  if (!state.subscriptions.length) {
+    body.replaceChildren(emptyRow(4, "暂无事件订阅会话"));
+    return;
+  }
+  body.replaceChildren(...state.subscriptions.map((item) => {
+    const row = document.createElement("tr");
+    const session = document.createElement("td");
+    const server = document.createElement("td");
+    const enabled = document.createElement("td");
+    const actions = document.createElement("td");
+    session.dataset.label = "会话 ID";
+    server.dataset.label = "绑定区服";
+    enabled.dataset.label = "总开关";
+    actions.dataset.label = "已订阅事件";
+    session.textContent = item.session_id;
+    server.textContent = bindings.get(item.session_id) || "未绑定（全部区服）";
+    const stateLabel = document.createElement("span");
+    stateLabel.className = `state ${item.enabled ? "state--on" : "state--off"}`;
+    stateLabel.textContent = item.enabled ? "开启" : "关闭";
+    enabled.append(stateLabel);
+    const tags = document.createElement("div");
+    tags.className = "tags";
+    if (item.actions.length) {
+      item.actions.forEach((action) => {
+        const tag = document.createElement("span");
+        tag.className = "tag";
+        tag.textContent = `${action} ${state.events[String(action)] || "未知事件"}`;
+        tags.append(tag);
+      });
+    } else {
+      tags.textContent = "无";
+    }
+    actions.append(tags);
+    row.append(session, server, enabled, actions);
+    return row;
+  }));
+}
+
+function renderAliases() {
+  const body = byId("aliases-body");
+  if (!state.aliases.length) {
+    body.replaceChildren(emptyRow(3, "暂无区服别名配置"));
+    return;
+  }
+  body.replaceChildren(...state.aliases.map((item) => {
+    const row = document.createElement("tr");
+    const server = document.createElement("td");
+    const aliases = document.createElement("td");
+    const actions = document.createElement("td");
+    server.dataset.label = "标准区服名";
+    aliases.dataset.label = "别名";
+    actions.dataset.label = "操作";
+    server.textContent = item.server;
+    aliases.textContent = item.aliases.length ? item.aliases.join("、") : "无";
+    actions.className = "actions";
+    actions.append(
+      button("编辑", "", () => {
+        byId("alias-server").value = item.server;
+        byId("alias-values").value = item.aliases.join(", ");
+        byId("alias-values").focus();
+      }),
+      button("删除", "link-button--danger", async () => {
+        if (!window.confirm(`确认删除 ${item.server} 的全部别名？`)) return;
+        await mutate("aliases/delete", { server: item.server }, "别名已删除");
+      }),
+    );
+    row.append(server, aliases, actions);
+    return row;
+  }));
+}
+
+function renderKungfu() {
+  const body = byId("kungfu-body");
+  if (!state.kungfu.length) {
+    body.replaceChildren(emptyRow(4, "暂无心法配置"));
+    return;
+  }
+  body.replaceChildren(...state.kungfu.map((item) => {
+    const row = document.createElement("tr");
+    const pzid = document.createElement("td");
+    const name = document.createElement("td");
+    const aliases = document.createElement("td");
+    const actions = document.createElement("td");
+    pzid.dataset.label = "心法 ID";
+    name.dataset.label = "标准心法名";
+    aliases.dataset.label = "别名";
+    actions.dataset.label = "操作";
+    pzid.textContent = String(item.pzid);
+    name.textContent = item.name;
+    aliases.textContent = item.aliases.length ? item.aliases.join("、") : "无";
+    actions.className = "actions";
+    actions.append(button("编辑", "", () => {
+      byId("kungfu-pzid").value = String(item.pzid);
+      byId("kungfu-name").value = item.name;
+      byId("kungfu-aliases").value = item.aliases.join(", ");
+      byId("kungfu-aliases").focus();
+    }));
+    row.append(pzid, name, aliases, actions);
+    return row;
+  }));
+}
+
+function render() {
+  renderSummary();
+  renderServerOptions();
+  renderBindings();
+  renderSubscriptions();
+  renderAliases();
+  renderKungfu();
+}
+
+async function loadData() {
+  const data = await bridge.apiGet("dashboard");
+  Object.assign(state, data);
+  render();
+}
+
+async function mutate(endpoint, payload, successMessage) {
+  try {
+    await bridge.apiPost(endpoint, payload);
+    await loadData();
+    showToast(successMessage);
+    return true;
+  } catch (error) {
+    showToast(error?.message || "操作失败", true);
+    return false;
+  }
+}
+
+document.querySelectorAll(".tab").forEach((tab) => {
+  tab.addEventListener("click", () => {
+    document.querySelectorAll(".tab").forEach((item) => {
+      const active = item === tab;
+      item.classList.toggle("is-active", active);
+      item.setAttribute("aria-selected", String(active));
+    });
+    document.querySelectorAll(".panel").forEach((panel) => {
+      const active = panel.id === `${tab.dataset.tab}-panel`;
+      panel.classList.toggle("is-active", active);
+      panel.hidden = !active;
+    });
+  });
+});
+
+byId("binding-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const saved = await mutate("bindings/save", {
+    session_id: byId("binding-session").value,
+    server: byId("binding-server").value,
+  }, "绑定信息已保存");
+  if (saved) event.currentTarget.reset();
+});
+
+byId("alias-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const saved = await mutate("aliases/save", {
+    server: byId("alias-server").value,
+    aliases: byId("alias-values").value,
+  }, "区服别名已保存");
+  if (saved) event.currentTarget.reset();
+});
+
+byId("kungfu-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const saved = await mutate("kungfu/save", {
+    pzid: byId("kungfu-pzid").value,
+    name: byId("kungfu-name").value,
+    aliases: byId("kungfu-aliases").value,
+  }, "心法配置已保存");
+  if (saved) event.currentTarget.reset();
+});
+
+byId("refresh").addEventListener("click", async (event) => {
+  const control = event.currentTarget;
+  control.disabled = true;
+  try {
+    await bridge.apiPost("servers/refresh", {});
+    await loadData();
+    showToast("区服目录与页面数据已刷新");
+  } catch (error) {
+    showToast(error?.message || "刷新失败", true);
+  } finally {
+    control.disabled = false;
+  }
+});
+
+await bridge.ready();
+try {
+  await loadData();
+} catch (error) {
+  showToast(error?.message || "管理数据加载失败", true);
+}

pages/server-management/index.html

@@ -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>

pages/server-management/style.css

@@ -0,0 +1,115 @@
+:root {
+  color-scheme: light;
+  --bg: #f7f7f8;
+  --surface: #ffffff;
+  --surface-subtle: #fafafa;
+  --text: #131a2a;
+  --muted: #687080;
+  --border: #e1e3e8;
+  --accent: #c6342d;
+  --accent-hover: #a92823;
+  --accent-soft: #fff0ee;
+  --success: #2f7d4a;
+  --danger: #b82d28;
+  --focus: #8dafed;
+  --shadow: 0 10px 28px rgba(24, 30, 44, 0.07);
+  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #111318;
+  --surface: #191c23;
+  --surface-subtle: #15181e;
+  --text: #f1f3f7;
+  --muted: #a2a9b5;
+  --border: #30343d;
+  --accent: #e65b53;
+  --accent-hover: #f1746d;
+  --accent-soft: #38211f;
+  --success: #65b77e;
+  --danger: #f1746d;
+  --focus: #86aef4;
+  --shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55; }
+button, input { font: inherit; }
+.shell { width: min(1260px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 56px; }
+.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
+h1 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.025em; }
+.page-header p, .section-intro p { margin: 7px 0 0; color: var(--muted); }
+.button { min-height: 42px; padding: 9px 18px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-weight: 650; transition: 160ms ease; white-space: nowrap; }
+.button:focus-visible, .tab:focus-visible, input:focus-visible, .link-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 2px; }
+.button:disabled { cursor: wait; opacity: .65; }
+.button--primary { color: #fff; background: var(--accent); box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 20%, transparent); }
+.button--primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
+.button--secondary { color: var(--text); background: var(--surface); border-color: var(--border); }
+.button--secondary:hover { border-color: color-mix(in srgb, var(--text) 24%, var(--border)); }
+.summary { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
+.summary__item { display: flex; min-height: 112px; flex-direction: column; justify-content: center; padding: 22px 30px; }
+.summary__item + .summary__item { border-left: 1px solid var(--border); }
+.summary span { color: var(--muted); font-weight: 600; }
+.summary strong { margin-top: 2px; font-size: 30px; line-height: 1.2; }
+.tabs { display: flex; gap: 30px; margin-top: 24px; border-bottom: 1px solid var(--border); }
+.tab { position: relative; padding: 14px 4px 15px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-weight: 650; }
+.tab:hover, .tab.is-active { color: var(--accent); }
+.tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); content: ""; }
+.panel { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
+.panel[hidden] { display: none; }
+.editor { display: grid; grid-template-columns: minmax(260px, 1.35fr) minmax(210px, 1fr) auto; align-items: end; gap: 16px; padding: 22px; background: var(--surface-subtle); border-bottom: 1px solid var(--border); }
+.editor--aliases { grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.5fr) auto; }
+.editor--kungfu { grid-template-columns: minmax(210px, .65fr) minmax(210px, .8fr) minmax(300px, 1.35fr) auto; }
+label { display: grid; gap: 7px; color: var(--text); font-size: 13px; font-weight: 650; }
+input { width: 100%; height: 42px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); transition: border 160ms ease, box-shadow 160ms ease; }
+input::placeholder { color: color-mix(in srgb, var(--muted) 76%, transparent); }
+input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); outline: none; }
+.section-intro { padding: 22px; border-bottom: 1px solid var(--border); }
+.section-intro h2 { margin: 0; font-size: 18px; }
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; }
+th, td { padding: 15px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
+th { background: var(--surface-subtle); color: var(--muted); font-size: 13px; font-weight: 700; }
+tbody tr:last-child td { border-bottom: 0; }
+tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 42%, transparent); }
+.actions { width: 170px; white-space: nowrap; }
+.link-button { padding: 4px 7px; border: 0; border-radius: 5px; background: transparent; color: #3568ae; cursor: pointer; font-weight: 650; }
+[data-theme="dark"] .link-button { color: #8db9f4; }
+.link-button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
+.link-button--danger { color: var(--danger); }
+.state { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; }
+.state::before { width: 8px; height: 8px; border-radius: 50%; background: currentColor; content: ""; }
+.state--on { color: var(--success); }
+.state--off { color: var(--muted); }
+.tags { display: flex; flex-wrap: wrap; gap: 7px; max-width: 620px; }
+.tag { display: inline-flex; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 650; }
+.empty { padding: 42px 20px; color: var(--muted); text-align: center; }
+.toast { position: fixed; right: 24px; bottom: 24px; z-index: 5; max-width: min(380px, calc(100vw - 48px)); padding: 13px 18px; border-left: 4px solid var(--success); border-radius: 8px; background: var(--surface); box-shadow: 0 14px 38px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; transform: translateY(14px); transition: 180ms ease; }
+.toast.is-visible { opacity: 1; transform: translateY(0); }
+.toast.is-error { border-left-color: var(--danger); }
+
+@media (max-width: 760px) {
+  .shell { width: min(100% - 24px, 1260px); padding-top: 20px; }
+  .page-header { align-items: stretch; flex-direction: column; }
+  .summary { grid-template-columns: 1fr; }
+  .summary__item { min-height: 86px; padding: 16px 20px; }
+  .summary__item + .summary__item { border-top: 1px solid var(--border); border-left: 0; }
+  .tabs { gap: 16px; overflow-x: auto; }
+  .tab { flex: 0 0 auto; }
+  .editor, .editor--aliases, .editor--kungfu { grid-template-columns: 1fr; }
+  .table-wrap { overflow: visible; }
+  table, tbody, tr, td { display: block; width: 100%; }
+  thead { display: none; }
+  tbody tr { padding: 7px 0; border-bottom: 1px solid var(--border); }
+  tbody tr:last-child { border-bottom: 0; }
+  td { display: grid; grid-template-columns: minmax(92px, 30%) minmax(0, 1fr); gap: 12px; padding: 8px 16px; border: 0; overflow-wrap: anywhere; }
+  td::before { color: var(--muted); content: attr(data-label); font-size: 12px; font-weight: 700; }
+  td.actions { grid-template-columns: minmax(92px, 30%) auto auto; align-items: start; justify-content: start; width: 100%; white-space: normal; }
+  td.empty { display: block; padding: 36px 16px; }
+  td.empty::before { content: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
+}