feat:webui finish

This commit is contained in:
手瓜一十雪 2024-05-08 21:40:30 +08:00
parent 4d8edd5da9
commit f1ca8b15c8
2 changed files with 47 additions and 34 deletions

View File

@ -54,10 +54,10 @@ async function onSettingWindowCreated(view: Element) {
'启用 HTTP 事件上报', '启用 HTTP 事件上报',
undefined, undefined,
SettingSwitch('ob11.enableHttpPost', ob11Config.enableHttpPost, { SettingSwitch('ob11.enableHttpPost', ob11Config.enableHttpPost, {
'control-display-id': 'config-ob11-httpHosts', 'control-display-id': 'config-ob11-httpPostUrls',
}), }),
), ),
`<div class="config-host-list" id="config-ob11-httpHosts" ${ob11Config.enableHttpPost ? '' : 'is-hidden'}> `<div class="config-host-list" id="config-ob11-httpPostUrls" ${ob11Config.enableHttpPost ? '' : 'is-hidden'}>
<setting-item data-direction="row"> <setting-item data-direction="row">
<div> <div>
<setting-text>HTTP </setting-text> <setting-text>HTTP </setting-text>
@ -71,9 +71,9 @@ async function onSettingWindowCreated(view: Element) {
<div> <div>
<setting-text>HTTP </setting-text> <setting-text>HTTP </setting-text>
</div> </div>
<setting-button id="config-ob11-httpHosts-add" data-type="primary"></setting-button> <setting-button id="config-ob11-httpPostUrls-add" data-type="primary"></setting-button>
</setting-item> </setting-item>
<div id="config-ob11-httpHosts-list"></div> <div id="config-ob11-httpPostUrls-list"></div>
</div>`, </div>`,
SettingItem( SettingItem(
'启用正向 WebSocket 服务', '启用正向 WebSocket 服务',
@ -91,17 +91,17 @@ async function onSettingWindowCreated(view: Element) {
'启用反向 WebSocket 服务', '启用反向 WebSocket 服务',
undefined, undefined,
SettingSwitch('ob11.enableWsReverse', ob11Config.enableWsReverse, { SettingSwitch('ob11.enableWsReverse', ob11Config.enableWsReverse, {
'control-display-id': 'config-ob11-wsHosts', 'control-display-id': 'config-ob11-wsReverseUrls',
}), }),
), ),
`<div class="config-host-list" id="config-ob11-wsHosts" ${ob11Config.enableWsReverse ? '' : 'is-hidden'}> `<div class="config-host-list" id="config-ob11-wsReverseUrls" ${ob11Config.enableWsReverse ? '' : 'is-hidden'}>
<setting-item data-direction="row"> <setting-item data-direction="row">
<div> <div>
<setting-text> WebSocket </setting-text> <setting-text> WebSocket </setting-text>
</div> </div>
<setting-button id="config-ob11-wsHosts-add" data-type="primary"></setting-button> <setting-button id="config-ob11-wsReverseUrls-add" data-type="primary"></setting-button>
</setting-item> </setting-item>
<div id="config-ob11-wsHosts-list"></div> <div id="config-ob11-wsReverseUrls-list"></div>
</div>`, </div>`,
SettingItem( SettingItem(
' WebSocket 服务心跳间隔', ' WebSocket 服务心跳间隔',
@ -220,18 +220,18 @@ async function onSettingWindowCreated(view: Element) {
}) })
} }
} }
initReverseHost('httpHosts', doc); initReverseHost('httpPostUrls', doc);
initReverseHost('wsHosts', doc); initReverseHost('wsReverseUrls', doc);
doc doc
.querySelector('#config-ob11-httpHosts-add') .querySelector('#config-ob11-httpPostUrls-add')
?.addEventListener('click', () => ?.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 doc
.querySelector('#config-ob11-wsHosts-add') .querySelector('#config-ob11-wsReverseUrls-add')
?.addEventListener('click', () => ?.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', () => { doc.querySelector('#config-ffmpeg-select')?.addEventListener('click', () => {

View File

@ -195,10 +195,10 @@ async function onSettingWindowCreated(view) {
"启用 HTTP 事件上报", "启用 HTTP 事件上报",
void 0, void 0,
SettingSwitch("ob11.enableHttpPost", ob11Config.enableHttpPost, { SettingSwitch("ob11.enableHttpPost", ob11Config.enableHttpPost, {
"control-display-id": "config-ob11-httpHosts" "control-display-id": "config-ob11-httpPostUrls"
}) })
), ),
`<div class="config-host-list" id="config-ob11-httpHosts" ${ob11Config.enableHttpPost ? "" : "is-hidden"}> `<div class="config-host-list" id="config-ob11-httpPostUrls" ${ob11Config.enableHttpPost ? "" : "is-hidden"}>
<setting-item data-direction="row"> <setting-item data-direction="row">
<div> <div>
<setting-text>HTTP 事件上报密钥</setting-text> <setting-text>HTTP 事件上报密钥</setting-text>
@ -211,9 +211,9 @@ async function onSettingWindowCreated(view) {
<div> <div>
<setting-text>HTTP 事件上报地址</setting-text> <setting-text>HTTP 事件上报地址</setting-text>
</div> </div>
<setting-button id="config-ob11-httpHosts-add" data-type="primary">添加</setting-button> <setting-button id="config-ob11-httpPostUrls-add" data-type="primary">添加</setting-button>
</setting-item> </setting-item>
<div id="config-ob11-httpHosts-list"></div> <div id="config-ob11-httpPostUrls-list"></div>
</div>`, </div>`,
SettingItem( SettingItem(
"启用正向 WebSocket 服务", "启用正向 WebSocket 服务",
@ -231,27 +231,27 @@ async function onSettingWindowCreated(view) {
"启用反向 WebSocket 服务", "启用反向 WebSocket 服务",
void 0, void 0,
SettingSwitch("ob11.enableWsReverse", ob11Config.enableWsReverse, { SettingSwitch("ob11.enableWsReverse", ob11Config.enableWsReverse, {
"control-display-id": "config-ob11-wsHosts" "control-display-id": "config-ob11-wsReverseUrls"
}) })
), ),
`<div class="config-host-list" id="config-ob11-wsHosts" ${ob11Config.enableWsReverse ? "" : "is-hidden"}> `<div class="config-host-list" id="config-ob11-wsReverseUrls" ${ob11Config.enableWsReverse ? "" : "is-hidden"}>
<setting-item data-direction="row"> <setting-item data-direction="row">
<div> <div>
<setting-text>反向 WebSocket 监听地址</setting-text> <setting-text>反向 WebSocket 监听地址</setting-text>
</div> </div>
<setting-button id="config-ob11-wsHosts-add" data-type="primary">添加</setting-button> <setting-button id="config-ob11-wsReverseUrls-add" data-type="primary">添加</setting-button>
</setting-item> </setting-item>
<div id="config-ob11-wsHosts-list"></div> <div id="config-ob11-wsReverseUrls-list"></div>
</div>`, </div>`,
SettingItem( SettingItem(
" WebSocket 服务心跳间隔", " WebSocket 服务心跳间隔",
"控制每隔多久发送一个心跳包,单位为毫秒", "控制每隔多久发送一个心跳包,单位为毫秒",
`<div class="q-input"><input class="q-input__inner" data-config-key="heartInterval" type="number" min="1000" value="${ob11Config.heartInterval}" placeholder="${ob11Config.heartInterval}" /></div>` `<div class="q-input"><input class="q-input__inner" data-config-key="ob11.heartInterval" type="number" min="1000" value="${ob11Config.heartInterval}" placeholder="${ob11Config.heartInterval}" /></div>`
), ),
SettingItem( SettingItem(
"Access token", "Access token",
void 0, void 0,
`<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="token" type="text" value="${ob11Config.token}" placeholder="未设置" /></div>` `<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="ob11.token" type="text" value="${ob11Config.token}" placeholder="未设置" /></div>`
), ),
SettingItem( SettingItem(
"新消息上报格式", "新消息上报格式",
@ -268,8 +268,8 @@ async function onSettingWindowCreated(view) {
SettingItem( SettingItem(
"音乐卡片签名地址", "音乐卡片签名地址",
void 0, void 0,
`<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="musicSignUrl" type="text" value="${ob11Config.musicSignUrl}" placeholder="未设置" /></div>`, `<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="ob11.musicSignUrl" type="text" value="${ob11Config.musicSignUrl}" placeholder="未设置" /></div>`,
"config-musicSignUrl" "ob11.musicSignUrl"
), ),
SettingItem("", void 0, SettingButton("保存", "config-ob11-save", "primary")) SettingItem("", void 0, SettingButton("保存", "config-ob11-save", "primary"))
]), ]),
@ -277,7 +277,7 @@ async function onSettingWindowCreated(view) {
SettingItem( SettingItem(
"上报 Bot 自身发送的消息", "上报 Bot 自身发送的消息",
"上报 event 为 message_sent", "上报 event 为 message_sent",
SettingSwitch("reportSelfMessage", ob11Config.reportSelfMessage) SettingSwitch("ob11.reportSelfMessage", ob11Config.reportSelfMessage)
) )
]), ]),
SettingList([ SettingList([
@ -330,23 +330,36 @@ async function onSettingWindowCreated(view) {
dom.container.appendChild(dom.deleteBtn); dom.container.appendChild(dom.deleteBtn);
return dom.container; 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 addReverseHost = (type, doc2 = document, inputAttr = {}) => {
const hostContainerDom = doc2.body.querySelector(`#config-ob11-${type}-list`); const hostContainerDom = doc2.body.querySelector(`#config-ob11-${type}-list`);
hostContainerDom?.appendChild(buildHostListItem(type, "", ob11Config[type].length, inputAttr)); hostContainerDom?.appendChild(buildHostListItem(type, "", ob11Config[type].length, inputAttr));
ob11Config[type].push(""); ob11Config[type].push("");
}; };
const initReverseHost = (type, doc2 = document) => { 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("httpPostUrls", doc);
initReverseHost("wsHosts", doc); initReverseHost("wsReverseUrls", doc);
doc.querySelector("#config-ob11-httpHosts-add")?.addEventListener( doc.querySelector("#config-ob11-httpPostUrls-add")?.addEventListener(
"click", "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", "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", () => { doc.querySelector("#config-ffmpeg-select")?.addEventListener("click", () => {
}); });