From 1c2bbeb26dd34c9a28aa3e00446f3eba35ee47eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?= Date: Wed, 15 May 2024 12:06:17 +0800 Subject: [PATCH] fix: webui renderer --- src/webui/index.ts | 1 + src/webui/ui/NapCat.ts | 15 ++-- static/assets/renderer.js | 148 ++++++++++++++++++++++++-------------- 3 files changed, 102 insertions(+), 62 deletions(-) diff --git a/src/webui/index.ts b/src/webui/index.ts index 3a071ff2..0ec5ea4a 100644 --- a/src/webui/index.ts +++ b/src/webui/index.ts @@ -26,6 +26,7 @@ export async function InitWebUi() { app.use('/api', ALLRouter); app.listen(config.port, async () => { console.log(`[NapCat] [WebUi] Current WebUi is running at IP:${config.port}`); + console.log(`[NapCat] [WebUi] Login Token is ${config.token}`); }) } \ No newline at end of file diff --git a/src/webui/ui/NapCat.ts b/src/webui/ui/NapCat.ts index 15b909de..546018dc 100644 --- a/src/webui/ui/NapCat.ts +++ b/src/webui/ui/NapCat.ts @@ -62,17 +62,15 @@ async function onSettingWindowCreated(view: Element) { "control-display-id": "config-ob11-http.postUrls", }) ), - `
HTTP 事件上报密钥
- +
@@ -104,8 +102,7 @@ async function onSettingWindowCreated(view: Element) { "control-display-id": "config-ob11-reverseWs.urls", }) ), - `
@@ -238,7 +235,7 @@ async function onSettingWindowCreated(view: Element) { ) => { const result: HTMLElement[] = []; - hosts.forEach((host, index) => { + hosts?.forEach((host, index) => { result.push(buildHostListItem(type, host, index, inputAttr)); }); @@ -314,8 +311,8 @@ async function onSettingWindowCreated(view: Element) { else dom.removeAttribute("is-active"); //@ts-ignore 等待修复 if (!isEmpty(dom.dataset.controlDisplayId)) { - //@ts-ignore 等待修复 const displayDom = document.querySelector( + //@ts-ignore 等待修复 `#${dom.dataset.controlDisplayId}` ); if (active) displayDom?.removeAttribute("is-hidden"); diff --git a/static/assets/renderer.js b/static/assets/renderer.js index 900f398c..a1ec1193 100644 --- a/static/assets/renderer.js +++ b/static/assets/renderer.js @@ -111,7 +111,7 @@ class WebUiApiOB11ConfigWrapper { let ConfigResponse = await fetch("/api/OB11Config/GetConfig", { method: "POST", headers: { - "Authorization": "Bearer " + this.retCredential, + Authorization: "Bearer " + this.retCredential, "Content-Type": "application/json" } }); @@ -124,17 +124,14 @@ class WebUiApiOB11ConfigWrapper { return {}; } async SetOB11Config(config) { - let ConfigResponse = await fetch( - "/api/OB11Config/SetConfig", - { - method: "POST", - headers: { - "Authorization": "Bearer " + this.retCredential, - "Content-Type": "application/json" - }, - body: JSON.stringify({ config: JSON.stringify(config) }) - } - ); + let ConfigResponse = await fetch("/api/OB11Config/SetConfig", { + method: "POST", + headers: { + Authorization: "Bearer " + this.retCredential, + "Content-Type": "application/json" + }, + body: JSON.stringify({ config: JSON.stringify(config) }) + }); if (ConfigResponse.status == 200) { let ConfigResponseJson = await ConfigResponse.json(); if (ConfigResponseJson.code == 0) { @@ -154,6 +151,8 @@ async function onSettingWindowCreated(view) { const configKey = key.split("."); if (configKey.length === 2) { ob11Config[configKey[1]] = value; + } else if (configKey.length === 3) { + ob11Config[configKey[1]][configKey[2]] = value; } OB11ConfigWrapper.SetOB11Config(ob11Config); }; @@ -175,73 +174,77 @@ async function onSettingWindowCreated(view) { SettingItem( "启用 HTTP 服务", void 0, - SettingSwitch("ob11.enableHttp", ob11Config.enableHttp, { "control-display-id": "config-ob11-httpPort" }) + SettingSwitch("ob11.http.enable", ob11Config.http.enable, { + "control-display-id": "config-ob11-http.port" + }) ), SettingItem( "HTTP 服务监听端口", void 0, - `
`, - "config-ob11-httpPort", - ob11Config.enableHttp + `
`, + "config-ob11-http.port", + ob11Config.http.enable ), SettingItem( "启用 HTTP 心跳", void 0, - SettingSwitch("ob11.enableHttpHeart", ob11Config.enableHttpHeart, { - "control-display-id": "config-ob11-enableHttpHeart" + SettingSwitch("ob11.http.enableHeart", ob11Config.http.enableHeart, { + "control-display-id": "config-ob11-HTTP.enableHeart" }) ), SettingItem( "启用 HTTP 事件上报", void 0, - SettingSwitch("ob11.enableHttpPost", ob11Config.enableHttpPost, { - "control-display-id": "config-ob11-httpPostUrls" + SettingSwitch("ob11.http.enablePost", ob11Config.http.enablePost, { + "control-display-id": "config-ob11-http.postUrls" }) ), - `
+ `
HTTP 事件上报密钥
- +
HTTP 事件上报地址
- 添加 + 添加 -
+
`, SettingItem( "启用正向 WebSocket 服务", void 0, - SettingSwitch("ob11.enableWs", ob11Config.enableWs, { "control-display-id": "config-ob11-wsPort" }) + SettingSwitch("ob11.ws.enable", ob11Config.ws.enable, { + "control-display-id": "config-ob11-ws.port" + }) ), SettingItem( "正向 WebSocket 服务监听端口", void 0, - `
`, - "config-ob11-wsPort", - ob11Config.enableWs + `
`, + "config-ob11-ws.port", + ob11Config.ws.enable ), SettingItem( "启用反向 WebSocket 服务", void 0, - SettingSwitch("ob11.enableWsReverse", ob11Config.enableWsReverse, { - "control-display-id": "config-ob11-wsReverseUrls" + SettingSwitch("ob11.reverseWs.enable", ob11Config.reverseWs.enable, { + "control-display-id": "config-ob11-reverseWs.urls" }) ), - `
+ `
反向 WebSocket 监听地址
- 添加 + 添加 -
+
`, SettingItem( " WebSocket 服务心跳间隔", @@ -271,7 +274,11 @@ async function onSettingWindowCreated(view) { `
`, "ob11.musicSignUrl" ), - SettingItem("", void 0, SettingButton("保存", "config-ob11-save", "primary")) + SettingItem( + "", + void 0, + SettingButton("保存", "config-ob11-save", "primary") + ) ]), SettingList([ SettingItem( @@ -281,10 +288,22 @@ async function onSettingWindowCreated(view) { ) ]), SettingList([ - SettingItem("GitHub 仓库", `https://github.com/NapNeko/NapCatQQ`, SettingButton("点个星星", "open-github")), + SettingItem( + "GitHub 仓库", + `https://github.com/NapNeko/NapCatQQ`, + SettingButton("点个星星", "open-github") + ), SettingItem("NapCat 文档", ``, SettingButton("看看文档", "open-docs")), - SettingItem("Telegram 群", `https://t.me/+nLZEnpne-pQ1OWFl`, SettingButton("进去逛逛", "open-telegram")), - SettingItem("QQ 群", `545402644`, SettingButton("我要进去", "open-qq-group")) + SettingItem( + "Telegram 群", + `https://t.me/+nLZEnpne-pQ1OWFl`, + SettingButton("进去逛逛", "open-telegram") + ), + SettingItem( + "QQ 群", + `545402644`, + SettingButton("我要进去", "open-qq-group") + ) ]), "
" ].join(""), @@ -316,14 +335,14 @@ async function onSettingWindowCreated(view) { dom.input.type = "url"; dom.input.value = host; dom.input.addEventListener("input", () => { - ob11Config[type][index] = dom.input.value; + ob11Config[type.split(".")[0]][type.split(".")[-1]][index] = dom.input.value; }); dom.inputContainer.classList.add("q-input"); dom.inputContainer.appendChild(dom.input); dom.deleteBtn.innerHTML = "删除"; dom.deleteBtn.dataset.type = "secondary"; dom.deleteBtn.addEventListener("click", () => { - ob11Config[type].splice(index, 1); + ob11Config[type.split(".")[0]][type.split(".")[-1]].splice(index, 1); initReverseHost(type); }); dom.container.appendChild(dom.inputContainer); @@ -332,34 +351,52 @@ async function onSettingWindowCreated(view) { }; const buildHostList = (hosts, type, inputAttr = {}) => { const result = []; - hosts.forEach((host, index) => { + hosts?.forEach((host, index) => { result.push(buildHostListItem(type, host, index, inputAttr)); }); return result; }; const addReverseHost = (type, doc2 = document, inputAttr = {}) => { - const hostContainerDom = doc2.body.querySelector(`#config-ob11-${type}-list`); - hostContainerDom?.appendChild(buildHostListItem(type, "", ob11Config[type].length, inputAttr)); - ob11Config[type].push(""); + const hostContainerDom = doc2.body.querySelector( + `#config-ob11-${type}-list` + ); + hostContainerDom?.appendChild( + buildHostListItem( + type, + "", + ob11Config[type.split(".")[0]][type.split(".")[-1]].length, + inputAttr + ) + ); + ob11Config[type.split(".")[0]][type.split(".")[-1]].push(""); }; const initReverseHost = (type, doc2 = document) => { - const hostContainerDom = doc2.body?.querySelector(`#config-ob11-${type}-list`); + const hostContainerDom = doc2.body?.querySelector( + `#config-ob11-${type}-list` + ); if (hostContainerDom) { [...hostContainerDom.childNodes].forEach((dom) => dom.remove()); - buildHostList(ob11Config[type], type).forEach((dom) => { + buildHostList( + ob11Config[type.split(".")[0]][type.split(".")[-1]], + type + ).forEach((dom) => { hostContainerDom?.appendChild(dom); }); } }; - initReverseHost("httpPostUrls", doc); - initReverseHost("wsReverseUrls", doc); - doc.querySelector("#config-ob11-httpPostUrls-add")?.addEventListener( + initReverseHost("http.postUrls", doc); + initReverseHost("reverseWs.urls", doc); + doc.querySelector("#config-ob11-http.postUrls-add")?.addEventListener( "click", - () => addReverseHost("httpPostUrls", document, { placeholder: "如：http://127.0.0.1:5140/onebot" }) + () => addReverseHost("http.postUrls", document, { + placeholder: "如：http://127.0.0.1:5140/onebot" + }) ); - doc.querySelector("#config-ob11-wsReverseUrls-add")?.addEventListener( + doc.querySelector("#config-ob11-reverseWs.urls-add")?.addEventListener( "click", - () => addReverseHost("wsReverseUrls", document, { placeholder: "如：ws://127.0.0.1:5140/onebot" }) + () => addReverseHost("reverseWs.urls", document, { + placeholder: "如：ws://127.0.0.1:5140/onebot" + }) ); doc.querySelector("#config-ffmpeg-select")?.addEventListener("click", () => { }); @@ -374,7 +411,10 @@ async function onSettingWindowCreated(view) { else dom.removeAttribute("is-active"); if (!isEmpty(dom.dataset.controlDisplayId)) { - const displayDom = document.querySelector(`#${dom.dataset.controlDisplayId}`); + const displayDom = document.querySelector( + //@ts-ignore 等待修复 + `#${dom.dataset.controlDisplayId}` + ); if (active) displayDom?.removeAttribute("is-hidden"); else @@ -382,7 +422,9 @@ async function onSettingWindowCreated(view) { } }); }); - doc.querySelectorAll("setting-item .q-input input.q-input__inner[data-config-key]").forEach((dom) => { + doc.querySelectorAll( + "setting-item .q-input input.q-input__inner[data-config-key]" + ).forEach((dom) => { dom.addEventListener("input", () => { const Type = dom.getAttribute("type"); const configKey = dom.dataset.configKey;