From f1ca8b15c8ed1c0f172be069cc534e99efad8947 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, 8 May 2024 21:40:30 +0800 Subject: [PATCH] feat:webui finish --- src/webui/ui/NapCat.ts | 28 ++++++++++----------- static/assets/renderer.js | 53 ++++++++++++++++++++++++--------------- 2 files changed, 47 insertions(+), 34 deletions(-) diff --git a/src/webui/ui/NapCat.ts b/src/webui/ui/NapCat.ts index 4c9e1e11..10e3a009 100644 --- a/src/webui/ui/NapCat.ts +++ b/src/webui/ui/NapCat.ts @@ -54,10 +54,10 @@ async function onSettingWindowCreated(view: Element) { '启用 HTTP 事件上报', undefined, SettingSwitch('ob11.enableHttpPost', ob11Config.enableHttpPost, { - 'control-display-id': 'config-ob11-httpHosts', + 'control-display-id': 'config-ob11-httpPostUrls', }), ), - `
+ `
HTTP 事件上报密钥 @@ -71,9 +71,9 @@ async function onSettingWindowCreated(view: Element) {
HTTP 事件上报地址
- 添加 + 添加 -
+
`, SettingItem( '启用正向 WebSocket 服务', @@ -91,17 +91,17 @@ async function onSettingWindowCreated(view: Element) { '启用反向 WebSocket 服务', undefined, SettingSwitch('ob11.enableWsReverse', ob11Config.enableWsReverse, { - 'control-display-id': 'config-ob11-wsHosts', + 'control-display-id': 'config-ob11-wsReverseUrls', }), ), - `
+ `
反向 WebSocket 监听地址
- 添加 + 添加 -
+
`, SettingItem( ' WebSocket 服务心跳间隔', @@ -220,18 +220,18 @@ async function onSettingWindowCreated(view: Element) { }) } } - initReverseHost('httpHosts', doc); - initReverseHost('wsHosts', doc); + initReverseHost('httpPostUrls', doc); + initReverseHost('wsReverseUrls', doc); doc - .querySelector('#config-ob11-httpHosts-add') + .querySelector('#config-ob11-httpPostUrls-add') ?.addEventListener('click', () => - addReverseHost('httpHosts', document, { placeholder: '如：http://127.0.0.1:5140/onebot' }), + addReverseHost('httpPostUrls', document, { placeholder: '如：http://127.0.0.1:5140/onebot' }), ) doc - .querySelector('#config-ob11-wsHosts-add') + .querySelector('#config-ob11-wsReverseUrls-add') ?.addEventListener('click', () => - addReverseHost('wsHosts', document, { placeholder: '如：ws://127.0.0.1:5140/onebot' }), + addReverseHost('wsReverseUrls', document, { placeholder: '如：ws://127.0.0.1:5140/onebot' }), ) doc.querySelector('#config-ffmpeg-select')?.addEventListener('click', () => { diff --git a/static/assets/renderer.js b/static/assets/renderer.js index 3c3ba3a9..01632a17 100644 --- a/static/assets/renderer.js +++ b/static/assets/renderer.js @@ -195,10 +195,10 @@ async function onSettingWindowCreated(view) { "启用 HTTP 事件上报", void 0, SettingSwitch("ob11.enableHttpPost", ob11Config.enableHttpPost, { - "control-display-id": "config-ob11-httpHosts" + "control-display-id": "config-ob11-httpPostUrls" }) ), - `
+ `
HTTP 事件上报密钥 @@ -211,9 +211,9 @@ async function onSettingWindowCreated(view) {
HTTP 事件上报地址
- 添加 + 添加 -
+
`, SettingItem( "启用正向 WebSocket 服务", @@ -231,27 +231,27 @@ async function onSettingWindowCreated(view) { "启用反向 WebSocket 服务", void 0, SettingSwitch("ob11.enableWsReverse", ob11Config.enableWsReverse, { - "control-display-id": "config-ob11-wsHosts" + "control-display-id": "config-ob11-wsReverseUrls" }) ), - `
+ `
反向 WebSocket 监听地址
- 添加 + 添加 -
+
`, SettingItem( " WebSocket 服务心跳间隔", "控制每隔多久发送一个心跳包，单位为毫秒", - `
` + `
` ), SettingItem( "Access token", void 0, - `
` + `
` ), SettingItem( "新消息上报格式", @@ -268,8 +268,8 @@ async function onSettingWindowCreated(view) { SettingItem( "音乐卡片签名地址", void 0, - `
`, - "config-musicSignUrl" + `
`, + "ob11.musicSignUrl" ), SettingItem("", void 0, SettingButton("保存", "config-ob11-save", "primary")) ]), @@ -277,7 +277,7 @@ async function onSettingWindowCreated(view) { SettingItem( "上报 Bot 自身发送的消息", "上报 event 为 message_sent", - SettingSwitch("reportSelfMessage", ob11Config.reportSelfMessage) + SettingSwitch("ob11.reportSelfMessage", ob11Config.reportSelfMessage) ) ]), SettingList([ @@ -330,23 +330,36 @@ async function onSettingWindowCreated(view) { dom.container.appendChild(dom.deleteBtn); return dom.container; }; + const buildHostList = (hosts, type, inputAttr = {}) => { + const result = []; + 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 initReverseHost = (type, doc2 = document) => { - 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) => { + hostContainerDom?.appendChild(dom); + }); + } }; - initReverseHost("httpHosts", doc); - initReverseHost("wsHosts", doc); - doc.querySelector("#config-ob11-httpHosts-add")?.addEventListener( + initReverseHost("httpPostUrls", doc); + initReverseHost("wsReverseUrls", doc); + doc.querySelector("#config-ob11-httpPostUrls-add")?.addEventListener( "click", - () => addReverseHost("httpHosts", document, { placeholder: "如：http://127.0.0.1:5140/onebot" }) + () => addReverseHost("httpPostUrls", document, { placeholder: "如：http://127.0.0.1:5140/onebot" }) ); - doc.querySelector("#config-ob11-wsHosts-add")?.addEventListener( + doc.querySelector("#config-ob11-wsReverseUrls-add")?.addEventListener( "click", - () => addReverseHost("wsHosts", document, { placeholder: "如：ws://127.0.0.1:5140/onebot" }) + () => addReverseHost("wsReverseUrls", document, { placeholder: "如：ws://127.0.0.1:5140/onebot" }) ); doc.querySelector("#config-ffmpeg-select")?.addEventListener("click", () => { });