diff --git a/src/webui/ui/NapCat.ts b/src/webui/ui/NapCat.ts index aa288307..15b909de 100644 --- a/src/webui/ui/NapCat.ts +++ b/src/webui/ui/NapCat.ts @@ -3,23 +3,26 @@ import { SettingItem } from "./components/SettingItem"; import { SettingButton } from "./components/SettingButton"; import { SettingSwitch } from "./components/SettingSwitch"; import { SettingSelect } from "./components/SettingSelect"; -import { OB11Config, OB11ConfigWrapper } from "./components/WebUiApiOB11Config" +import { OB11Config, OB11ConfigWrapper } from "./components/WebUiApiOB11Config"; async function onSettingWindowCreated(view: Element) { - const isEmpty = (value: any) => value === undefined || value === undefined || value === ''; - await OB11ConfigWrapper.Init(localStorage.getItem('auth') as string); + const isEmpty = (value: any) => + value === undefined || value === undefined || value === ""; + await OB11ConfigWrapper.Init(localStorage.getItem("auth") as string); let ob11Config: OB11Config = await OB11ConfigWrapper.GetOB11Config(); const setOB11Config = (key: string, value: any) => { - const configKey = key.split('.'); + 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); - } + }; const parser = new DOMParser(); const doc = parser.parseFromString( [ - '
', + "
", `
`, @@ -27,271 +30,341 @@ async function onSettingWindowCreated(view: Element) { SettingItem( 'Napcat', undefined, - SettingButton('V1.3.5', 'napcat-update-button', 'secondary'), + SettingButton("V1.3.5", "napcat-update-button", "secondary") ), ]), SettingList([ SettingItem( - '启用 HTTP 服务', + "启用 HTTP 服务", undefined, - SettingSwitch('ob11.http.enable', ob11Config.http.enable, { 'control-display-id': 'config-ob11-httpPort' }), + SettingSwitch("ob11.http.enable", ob11Config.http.enable, { + "control-display-id": "config-ob11-http.port", + }) ), SettingItem( - 'HTTP 服务监听端口', + "HTTP 服务监听端口", undefined, - `
`, - 'config-ob11-httpPort', - ob11Config.http.enable, + `
`, + "config-ob11-http.port", + ob11Config.http.enable ), SettingItem( - '启用 HTTP 心跳', + "启用 HTTP 心跳", undefined, - SettingSwitch('ob11.http.enableHeart', ob11Config.http.enableHeart, { - 'control-display-id': 'config-ob11-enableHttpHeart', - }), + SettingSwitch("ob11.http.enableHeart", ob11Config.http.enableHeart, { + "control-display-id": "config-ob11-HTTP.enableHeart", + }) ), SettingItem( - '启用 HTTP 事件上报', + "启用 HTTP 事件上报", undefined, - SettingSwitch('ob11.http.enablePost', ob11Config.http.enablePost, { - 'control-display-id': 'config-ob11-httpPostUrls', - }), + SettingSwitch("ob11.http.enablePost", ob11Config.http.enablePost, { + "control-display-id": "config-ob11-http.postUrls", + }) ), - `
+ `
HTTP 事件上报密钥
- +
HTTP 事件上报地址
- 添加 + 添加 -
+
`, SettingItem( - '启用正向 WebSocket 服务', + "启用正向 WebSocket 服务", undefined, - 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 服务监听端口', + "正向 WebSocket 服务监听端口", undefined, - `
`, - 'config-ob11-wsPort', - ob11Config.enableWs, + `
`, + "config-ob11-ws.port", + ob11Config.ws.enable ), SettingItem( - '启用反向 WebSocket 服务', + "启用反向 WebSocket 服务", undefined, - 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 服务心跳间隔', - '控制每隔多久发送一个心跳包，单位为毫秒', - `
`, + " WebSocket 服务心跳间隔", + "控制每隔多久发送一个心跳包，单位为毫秒", + `
` ), SettingItem( - 'Access token', + "Access token", undefined, - `
`, + `
` ), SettingItem( - '新消息上报格式', - '如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 OneBot v11 文档', + "新消息上报格式", + "如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 OneBot v11 文档", SettingSelect( [ - { text: '消息段', value: 'array' }, - { text: 'CQ码', value: 'string' }, + { text: "消息段", value: "array" }, + { text: "CQ码", value: "string" }, ], - 'ob11.messagePostFormat', - ob11Config.messagePostFormat, - ), + "ob11.messagePostFormat", + ob11Config.messagePostFormat + ) ), SettingItem( - '音乐卡片签名地址', + "音乐卡片签名地址", undefined, `
`, - 'ob11.musicSignUrl', + "ob11.musicSignUrl" + ), + SettingItem( + "", + undefined, + SettingButton("保存", "config-ob11-save", "primary") ), - SettingItem('', undefined, SettingButton('保存', 'config-ob11-save', 'primary')), ]), SettingList([ SettingItem( - '上报 Bot 自身发送的消息', - '上报 event 为 message_sent', - SettingSwitch('ob11.reportSelfMessage', ob11Config.reportSelfMessage), - ) + "上报 Bot 自身发送的消息", + "上报 event 为 message_sent", + SettingSwitch("ob11.reportSelfMessage", ob11Config.reportSelfMessage) + ), ]), SettingList([ - 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( + "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") + ), ]), - '
', - ].join(''), - 'text/html', - ) + "
", + ].join(""), + "text/html" + ); // 外链按钮 - doc.querySelector('#open-github')?.addEventListener('click', () => { - window.open("https://napneko.github.io/", '_blank'); - }) - doc.querySelector('#open-telegram')?.addEventListener('click', () => { - window.open('https://t.me/+nLZEnpne-pQ1OWFl') - }) - doc.querySelector('#open-qq-group')?.addEventListener('click', () => { - window.open('https://qm.qq.com/q/bDnHRG38aI') - }) - doc.querySelector('#open-docs')?.addEventListener('click', () => { - window.open('https://github.com/NapNeko/NapCatQQ') - }) + doc.querySelector("#open-github")?.addEventListener("click", () => { + window.open("https://napneko.github.io/", "_blank"); + }); + doc.querySelector("#open-telegram")?.addEventListener("click", () => { + window.open("https://t.me/+nLZEnpne-pQ1OWFl"); + }); + doc.querySelector("#open-qq-group")?.addEventListener("click", () => { + window.open("https://qm.qq.com/q/bDnHRG38aI"); + }); + doc.querySelector("#open-docs")?.addEventListener("click", () => { + window.open("https://github.com/NapNeko/NapCatQQ"); + }); // 生成反向地址列表 - const buildHostListItem = (type: string, host: string, index: number, inputAttrs: any = {}) => { + const buildHostListItem = ( + type: string, + host: string, + index: number, + inputAttrs: any = {} + ) => { const dom = { - container: document.createElement('setting-item'), - input: document.createElement('input'), - inputContainer: document.createElement('div'), - deleteBtn: document.createElement('setting-button'), - } - dom.container.classList.add('setting-host-list-item') - dom.container.dataset.direction = 'row' - Object.assign(dom.input, inputAttrs) - dom.input.classList.add('q-input__inner') - dom.input.type = 'url' - dom.input.value = host - dom.input.addEventListener('input', () => { - ob11Config[type][index] = dom.input.value - }) + container: document.createElement("setting-item"), + input: document.createElement("input"), + inputContainer: document.createElement("div"), + deleteBtn: document.createElement("setting-button"), + }; + dom.container.classList.add("setting-host-list-item"); + dom.container.dataset.direction = "row"; + Object.assign(dom.input, inputAttrs); + dom.input.classList.add("q-input__inner"); + dom.input.type = "url"; + dom.input.value = host; + dom.input.addEventListener("input", () => { + ob11Config[type.split(".")[0]][type.split(".")[-1]][index] = + dom.input.value; + }); - dom.inputContainer.classList.add('q-input') - dom.inputContainer.appendChild(dom.input) + 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) - initReverseHost(type) - }) + dom.deleteBtn.innerHTML = "删除"; + dom.deleteBtn.dataset.type = "secondary"; + dom.deleteBtn.addEventListener("click", () => { + ob11Config[type.split(".")[0]][type.split(".")[-1]].splice(index, 1); + initReverseHost(type); + }); - dom.container.appendChild(dom.inputContainer) - dom.container.appendChild(dom.deleteBtn) + dom.container.appendChild(dom.inputContainer); + dom.container.appendChild(dom.deleteBtn); - return dom.container - } - const buildHostList = (hosts: string[], type: string, inputAttr: any = {}) => { - const result: HTMLElement[] = [] + return dom.container; + }; + const buildHostList = ( + hosts: string[], + type: string, + inputAttr: any = {} + ) => { + const result: HTMLElement[] = []; hosts.forEach((host, index) => { - result.push(buildHostListItem(type, host, index, inputAttr)) - }) + result.push(buildHostListItem(type, host, index, inputAttr)); + }); - return result - } - const addReverseHost = (type: string, doc: Document = document, inputAttr: any = {}) => { - const hostContainerDom = doc.body.querySelector(`#config-ob11-${type}-list`); - hostContainerDom?.appendChild(buildHostListItem(type, '', ob11Config[type].length, inputAttr)); - ob11Config[type].push(''); - } + return result; + }; + const addReverseHost = ( + type: string, + doc: Document = document, + inputAttr: any = {} + ) => { + const hostContainerDom = doc.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: string, doc: Document = document) => { - const hostContainerDom = doc.body?.querySelector(`#config-ob11-${type}-list`); + const hostContainerDom = doc.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); + }; + initReverseHost("http.postUrls", doc); + initReverseHost("reverseWs.urls", doc); doc - .querySelector('#config-ob11-httpPostUrls-add') - ?.addEventListener('click', () => - addReverseHost('httpPostUrls', document, { placeholder: '如：http://127.0.0.1:5140/onebot' }), - ) + .querySelector("#config-ob11-http.postUrls-add") + ?.addEventListener("click", () => + addReverseHost("http.postUrls", document, { + placeholder: "如：http://127.0.0.1:5140/onebot", + }) + ); doc - .querySelector('#config-ob11-wsReverseUrls-add') - ?.addEventListener('click', () => - addReverseHost('wsReverseUrls', document, { placeholder: '如：ws://127.0.0.1:5140/onebot' }), - ) + .querySelector("#config-ob11-reverseWs.urls-add") + ?.addEventListener("click", () => + addReverseHost("reverseWs.urls", document, { + placeholder: "如：ws://127.0.0.1:5140/onebot", + }) + ); - doc.querySelector('#config-ffmpeg-select')?.addEventListener('click', () => { + doc.querySelector("#config-ffmpeg-select")?.addEventListener("click", () => { //选择ffmpeg - }) + }); - doc.querySelector('#config-open-log-path')?.addEventListener('click', () => { + doc.querySelector("#config-open-log-path")?.addEventListener("click", () => { //打开日志 - }) + }); // 开关 - doc.querySelectorAll('setting-switch[data-config-key]').forEach((dom: Element) => { - dom.addEventListener('click', () => { - const active = dom.getAttribute('is-active') == undefined; - //@ts-ignore 扩展 - setOB11Config(dom.dataset.configKey, active) - if (active) dom.setAttribute('is-active', '') - else dom.removeAttribute('is-active') - //@ts-ignore 等待修复 - if (!isEmpty(dom.dataset.controlDisplayId)) { + doc + .querySelectorAll("setting-switch[data-config-key]") + .forEach((dom: Element) => { + dom.addEventListener("click", () => { + const active = dom.getAttribute("is-active") == undefined; + //@ts-ignore 扩展 + setOB11Config(dom.dataset.configKey, active); + if (active) dom.setAttribute("is-active", ""); + else dom.removeAttribute("is-active"); //@ts-ignore 等待修复 - const displayDom = document.querySelector(`#${dom.dataset.controlDisplayId}`) - if (active) displayDom?.removeAttribute('is-hidden') - else displayDom?.setAttribute('is-hidden', '') - } - }) - }) + if (!isEmpty(dom.dataset.controlDisplayId)) { + //@ts-ignore 等待修复 + const displayDom = document.querySelector( + `#${dom.dataset.controlDisplayId}` + ); + if (active) displayDom?.removeAttribute("is-hidden"); + else displayDom?.setAttribute("is-hidden", ""); + } + }); + }); // 输入框 doc - .querySelectorAll('setting-item .q-input input.q-input__inner[data-config-key]') + .querySelectorAll( + "setting-item .q-input input.q-input__inner[data-config-key]" + ) .forEach((dom: Element) => { - dom.addEventListener('input', () => { - const Type = dom.getAttribute('type') + dom.addEventListener("input", () => { + const Type = dom.getAttribute("type"); //@ts-ignore 等待修复 - const configKey = dom.dataset.configKey - const configValue = Type === 'number' ? (parseInt((dom as HTMLInputElement).value) >= 1 ? parseInt((dom as HTMLInputElement).value) : 1) : (dom as HTMLInputElement).value + const configKey = dom.dataset.configKey; + const configValue = + Type === "number" + ? parseInt((dom as HTMLInputElement).value) >= 1 + ? parseInt((dom as HTMLInputElement).value) + : 1 + : (dom as HTMLInputElement).value; - setOB11Config(configKey, configValue) - }) - }) + setOB11Config(configKey, configValue); + }); + }); // 下拉框 - doc.querySelectorAll('ob-setting-select[data-config-key]').forEach((dom: Element) => { - //@ts-ignore 等待修复 - dom?.addEventListener('selected', (e: CustomEvent) => { + doc + .querySelectorAll("ob-setting-select[data-config-key]") + .forEach((dom: Element) => { //@ts-ignore 等待修复 - const configKey = dom.dataset.configKey - const configValue = e.detail.value - setOB11Config(configKey, configValue); - }) - }) + dom?.addEventListener("selected", (e: CustomEvent) => { + //@ts-ignore 等待修复 + const configKey = dom.dataset.configKey; + const configValue = e.detail.value; + setOB11Config(configKey, configValue); + }); + }); // 保存按钮 - doc.querySelector('#config-ob11-save')?.addEventListener('click', () => { + doc.querySelector("#config-ob11-save")?.addEventListener("click", () => { OB11ConfigWrapper.SetOB11Config(ob11Config); - alert('保存成功'); - }) + alert("保存成功"); + }); doc.body.childNodes.forEach((node) => { - view.appendChild(node) - }) + view.appendChild(node); + }); } -export { onSettingWindowCreated }; \ No newline at end of file +export { onSettingWindowCreated };