fxdyz

pages/server-management/app.js

@@ -1,5 +1,6 @@
 const bridge = window.AstrBotPluginPage;
 const state = { bindings: [], subscriptions: [], aliases: [], kungfu: [], servers: [], events: {} };
+const editing = { aliasServer: null, kungfuPzid: null };
 let toastTimer;
 
 const byId = (id) => document.getElementById(id);
@@ -32,6 +33,42 @@ function emptyRow(columnCount, message) {
   return row;
 }
 
+function aliasText(aliases) {
+  return aliases.length ? aliases.join("、") : "无";
+}
+
+function inlineAliasEditor(aliases, label, onSave, onCancel) {
+  const input = document.createElement("input");
+  input.className = "inline-editor";
+  input.value = aliases.join(", ");
+  input.placeholder = "多个别名用逗号分隔";
+  input.setAttribute("aria-label", label);
+
+  const saveButton = button("保存", "", async () => {
+    saveButton.disabled = true;
+    cancelButton.disabled = true;
+    const saved = await onSave(input.value);
+    if (!saved) {
+      saveButton.disabled = false;
+      cancelButton.disabled = false;
+      input.focus();
+    }
+  });
+  const cancelButton = button("取消", "", onCancel);
+
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      saveButton.click();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      cancelButton.click();
+    }
+  });
+  queueMicrotask(() => input.focus());
+  return { input, controls: [saveButton, cancelButton] };
+}
+
 function bindingMap() {
   return new Map(state.bindings.map((item) => [item.session_id, item.server]));
 }
@@ -128,11 +165,22 @@ function renderSubscriptions() {
 
 function renderAliases() {
   const body = byId("aliases-body");
-  if (!state.aliases.length) {
-    body.replaceChildren(emptyRow(3, "暂无区服别名配置"));
+  const aliasesByServer = new Map(
+    state.aliases.map((item) => [item.server, item.aliases]),
+  );
+  const servers = [...new Set([
+    ...state.servers,
+    ...aliasesByServer.keys(),
+  ])].sort((left, right) => left.localeCompare(right, "zh-CN"));
+  if (!servers.length) {
+    body.replaceChildren(emptyRow(3, "暂无标准区服数据"));
     return;
   }
-  body.replaceChildren(...state.aliases.map((item) => {
+  body.replaceChildren(...servers.map((serverName) => {
+    const item = {
+      server: serverName,
+      aliases: aliasesByServer.get(serverName) || [],
+    };
     const row = document.createElement("tr");
     const server = document.createElement("td");
     const aliases = document.createElement("td");
@@ -141,19 +189,40 @@ function renderAliases() {
     aliases.dataset.label = "别名";
     actions.dataset.label = "操作";
     server.textContent = item.server;
-    aliases.textContent = item.aliases.length ? item.aliases.join("、") : "无";
+    aliases.className = "alias-cell";
     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 }, "别名已删除");
-      }),
-    );
+    if (editing.aliasServer === item.server) {
+      row.classList.add("is-editing");
+      const editor = inlineAliasEditor(
+        item.aliases,
+        `${item.server}的区服别名`,
+        async (value) => {
+          editing.aliasServer = null;
+          const saved = await mutate(
+            "aliases/save",
+            { server: item.server, aliases: value },
+            "区服别名已保存",
+          );
+          if (!saved) {
+            editing.aliasServer = item.server;
+            renderAliases();
+          }
+          return saved;
+        },
+        () => {
+          editing.aliasServer = null;
+          renderAliases();
+        },
+      );
+      aliases.append(editor.input);
+      actions.append(...editor.controls);
+    } else {
+      aliases.textContent = aliasText(item.aliases);
+      actions.append(button("编辑", "", () => {
+        editing.aliasServer = item.server;
+        renderAliases();
+      }));
+    }
     row.append(server, aliases, actions);
     return row;
   }));
@@ -162,30 +231,53 @@ function renderAliases() {
 function renderKungfu() {
   const body = byId("kungfu-body");
   if (!state.kungfu.length) {
-    body.replaceChildren(emptyRow(4, "暂无心法配置"));
+    body.replaceChildren(emptyRow(3, "暂无心法配置"));
     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("、") : "无";
+    aliases.className = "alias-cell";
     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);
+    if (editing.kungfuPzid === item.pzid) {
+      row.classList.add("is-editing");
+      const editor = inlineAliasEditor(
+        item.aliases,
+        `${item.name}的心法别名`,
+        async (value) => {
+          editing.kungfuPzid = null;
+          const saved = await mutate(
+            "kungfu/save",
+            { pzid: item.pzid, aliases: value },
+            "心法别名已保存",
+          );
+          if (!saved) {
+            editing.kungfuPzid = item.pzid;
+            renderKungfu();
+          }
+          return saved;
+        },
+        () => {
+          editing.kungfuPzid = null;
+          renderKungfu();
+        },
+      );
+      aliases.append(editor.input);
+      actions.append(...editor.controls);
+    } else {
+      aliases.textContent = aliasText(item.aliases);
+      actions.append(button("编辑", "", () => {
+        editing.kungfuPzid = item.pzid;
+        renderKungfu();
+      }));
+    }
+    row.append(name, aliases, actions);
     return row;
   }));
 }
@@ -241,25 +333,6 @@ byId("binding-form").addEventListener("submit", async (event) => {
   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;