GuanM/NapCatQQ
1
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2024-11-21 09:36:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: webui renderer

Browse Source
This commit is contained in:
手瓜一十雪 2024-05-15 12:06:17 +08:00
parent 17ed3692d0
commit 1c2bbeb26d
3 changed files with 102 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/webui/index.ts
View File

@ -26,6 +26,7 @@ export async function InitWebUi() {
app.use('/api', ALLRouter); app.use('/api', ALLRouter);
app.listen(config.port, async () => { app.listen(config.port, async () => {
console.log(`[NapCat] [WebUi] Current WebUi is running at IP:${config.port}`); console.log(`[NapCat] [WebUi] Current WebUi is running at IP:${config.port}`);
console.log(`[NapCat] [WebUi] Login Token is ${config.token}`);
}) })
} }

15
src/webui/ui/NapCat.ts
View File

@ -62,17 +62,15 @@ async function onSettingWindowCreated(view: Element) {
"control-display-id": "config-ob11-http.postUrls", "control-display-id": "config-ob11-http.postUrls",
}) })
), ),
`<div class="config-host-list" id="config-ob11-http.postUrls" ${ `<div class="config-host-list" id="config-ob11-http.postUrls" ${ob11Config.http.enablePost ? "" : "is-hidden"
ob11Config.http.enablePost ? "" : "is-hidden"
}> }>
<setting-item data-direction="row"> <setting-item data-direction="row">
<div> <div>
<setting-text>HTTP 事件上报密钥</setting-text> <setting-text>HTTP 事件上报密钥</setting-text>
</div> </div>
<div class="q-input"> <div class="q-input">
<input id="config-ob11-http.secret" class="q-input__inner" data-config-key="ob11.http.secret" type="text" value="${ <input id="config-ob11-http.secret" class="q-input__inner" data-config-key="ob11.http.secret" type="text" value="${ob11Config.http.secret
ob11Config.http.secret }" placeholder="未设置" />
}" placeholder="未设置" />
</div> </div>
</setting-item> </setting-item>
<setting-item data-direction="row"> <setting-item data-direction="row">
@ -104,8 +102,7 @@ async function onSettingWindowCreated(view: Element) {
"control-display-id": "config-ob11-reverseWs.urls", "control-display-id": "config-ob11-reverseWs.urls",
}) })
), ),
`<div class="config-host-list" id="config-ob11-reverseWs.urls" ${ `<div class="config-host-list" id="config-ob11-reverseWs.urls" ${ob11Config.reverseWs.enable ? "" : "is-hidden"
ob11Config.reverseWs.enable ? "" : "is-hidden"
}> }>
<setting-item data-direction="row"> <setting-item data-direction="row">
<div> <div>
@ -238,7 +235,7 @@ async function onSettingWindowCreated(view: Element) {
) => { ) => {
const result: HTMLElement[] = []; const result: HTMLElement[] = [];
hosts.forEach((host, index) => { hosts?.forEach((host, index) => {
result.push(buildHostListItem(type, host, index, inputAttr)); result.push(buildHostListItem(type, host, index, inputAttr));
}); });
@ -314,8 +311,8 @@ async function onSettingWindowCreated(view: Element) {
else dom.removeAttribute("is-active"); else dom.removeAttribute("is-active");
//@ts-ignore 等待修复 //@ts-ignore 等待修复
if (!isEmpty(dom.dataset.controlDisplayId)) { if (!isEmpty(dom.dataset.controlDisplayId)) {
//@ts-ignore 等待修复
const displayDom = document.querySelector( const displayDom = document.querySelector(
//@ts-ignore 等待修复
`#${dom.dataset.controlDisplayId}` `#${dom.dataset.controlDisplayId}`
); );
if (active) displayDom?.removeAttribute("is-hidden"); if (active) displayDom?.removeAttribute("is-hidden");

148
static/assets/renderer.js
View File

@ -111,7 +111,7 @@ class WebUiApiOB11ConfigWrapper {
let ConfigResponse = await fetch("/api/OB11Config/GetConfig", { let ConfigResponse = await fetch("/api/OB11Config/GetConfig", {
method: "POST", method: "POST",
headers: { headers: {
"Authorization": "Bearer " + this.retCredential, Authorization: "Bearer " + this.retCredential,
"Content-Type": "application/json" "Content-Type": "application/json"
} }
}); });
@ -124,17 +124,14 @@ class WebUiApiOB11ConfigWrapper {
return {}; return {};
} }
async SetOB11Config(config) { async SetOB11Config(config) {
let ConfigResponse = await fetch( let ConfigResponse = await fetch("/api/OB11Config/SetConfig", {
"/api/OB11Config/SetConfig", method: "POST",
{ headers: {
method: "POST", Authorization: "Bearer " + this.retCredential,
headers: { "Content-Type": "application/json"
"Authorization": "Bearer " + this.retCredential, },
"Content-Type": "application/json" body: JSON.stringify({ config: JSON.stringify(config) })
}, });
body: JSON.stringify({ config: JSON.stringify(config) })
}
);
if (ConfigResponse.status == 200) { if (ConfigResponse.status == 200) {
let ConfigResponseJson = await ConfigResponse.json(); let ConfigResponseJson = await ConfigResponse.json();
if (ConfigResponseJson.code == 0) { if (ConfigResponseJson.code == 0) {
@ -154,6 +151,8 @@ async function onSettingWindowCreated(view) {
const configKey = key.split("."); const configKey = key.split(".");
if (configKey.length === 2) { if (configKey.length === 2) {
ob11Config[configKey[1]] = value; ob11Config[configKey[1]] = value;
} else if (configKey.length === 3) {
ob11Config[configKey[1]][configKey[2]] = value;
} }
OB11ConfigWrapper.SetOB11Config(ob11Config); OB11ConfigWrapper.SetOB11Config(ob11Config);
}; };
@ -175,73 +174,77 @@ async function onSettingWindowCreated(view) {
SettingItem( SettingItem(
"启用 HTTP 服务", "启用 HTTP 服务",
void 0, 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( SettingItem(
"HTTP 服务监听端口", "HTTP 服务监听端口",
void 0, void 0,
`<div class="q-input"><input class="q-input__inner" data-config-key="ob11.httpPort" type="number" min="1" max="65534" value="${ob11Config.httpPort}" placeholder="${ob11Config.httpPort}" /></div>`, `<div class="q-input"><input class="q-input__inner" data-config-key="ob11.http.port" type="number" min="1" max="65534" value="${ob11Config.http.port}" placeholder="${ob11Config.http.port}" /></div>`,
"config-ob11-httpPort", "config-ob11-http.port",
ob11Config.enableHttp ob11Config.http.enable
), ),
SettingItem( SettingItem(
"启用 HTTP 心跳", "启用 HTTP 心跳",
void 0, void 0,
SettingSwitch("ob11.enableHttpHeart", ob11Config.enableHttpHeart, { SettingSwitch("ob11.http.enableHeart", ob11Config.http.enableHeart, {
"control-display-id": "config-ob11-enableHttpHeart" "control-display-id": "config-ob11-HTTP.enableHeart"
}) })
), ),
SettingItem( SettingItem(
"启用 HTTP 事件上报", "启用 HTTP 事件上报",
void 0, void 0,
SettingSwitch("ob11.enableHttpPost", ob11Config.enableHttpPost, { SettingSwitch("ob11.http.enablePost", ob11Config.http.enablePost, {
"control-display-id": "config-ob11-httpPostUrls" "control-display-id": "config-ob11-http.postUrls"
}) })
), ),
`<div class="config-host-list" id="config-ob11-httpPostUrls" ${ob11Config.enableHttpPost ? "" : "is-hidden"}> `<div class="config-host-list" id="config-ob11-http.postUrls" ${ob11Config.http.enablePost ? "" : "is-hidden"}>
<setting-item data-direction="row"> <setting-item data-direction="row">
<div> <div>
<setting-text>HTTP 事件上报密钥</setting-text> <setting-text>HTTP 事件上报密钥</setting-text>
</div> </div>
<div class="q-input"> <div class="q-input">
<input id="config-ob11-httpSecret" class="q-input__inner" data-config-key="ob11.httpSecret" type="text" value="${ob11Config.httpSecret}" placeholder="未设置" /> <input id="config-ob11-http.secret" class="q-input__inner" data-config-key="ob11.http.secret" type="text" value="${ob11Config.http.secret}" placeholder="未设置" />
</div> </div>
</setting-item> </setting-item>
<setting-item data-direction="row"> <setting-item data-direction="row">
<div> <div>
<setting-text>HTTP 事件上报地址</setting-text> <setting-text>HTTP 事件上报地址</setting-text>
</div> </div>
<setting-button id="config-ob11-httpPostUrls-add" data-type="primary">添加</setting-button> <setting-button id="config-ob11-http.postUrls-add" data-type="primary">添加</setting-button>
</setting-item> </setting-item>
<div id="config-ob11-httpPostUrls-list"></div> <div id="config-ob11-http.postUrls-list"></div>
</div>`, </div>`,
SettingItem( SettingItem(
"启用正向 WebSocket 服务", "启用正向 WebSocket 服务",
void 0, 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( SettingItem(
"正向 WebSocket 服务监听端口", "正向 WebSocket 服务监听端口",
void 0, void 0,
`<div class="q-input"><input class="q-input__inner" data-config-key="ob11.wsPort" type="number" min="1" max="65534" value="${ob11Config.wsPort}" placeholder="${ob11Config.wsPort}" /></div>`, `<div class="q-input"><input class="q-input__inner" data-config-key="ob11.ws.port" type="number" min="1" max="65534" value="${ob11Config.ws.port}" placeholder="${ob11Config.ws.port}" /></div>`,
"config-ob11-wsPort", "config-ob11-ws.port",
ob11Config.enableWs ob11Config.ws.enable
), ),
SettingItem( SettingItem(
"启用反向 WebSocket 服务", "启用反向 WebSocket 服务",
void 0, void 0,
SettingSwitch("ob11.enableWsReverse", ob11Config.enableWsReverse, { SettingSwitch("ob11.reverseWs.enable", ob11Config.reverseWs.enable, {
"control-display-id": "config-ob11-wsReverseUrls" "control-display-id": "config-ob11-reverseWs.urls"
}) })
), ),
`<div class="config-host-list" id="config-ob11-wsReverseUrls" ${ob11Config.enableWsReverse ? "" : "is-hidden"}> `<div class="config-host-list" id="config-ob11-reverseWs.urls" ${ob11Config.reverseWs.enable ? "" : "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-wsReverseUrls-add" data-type="primary">添加</setting-button> <setting-button id="config-ob11-reverseWs.urls-add" data-type="primary">添加</setting-button>
</setting-item> </setting-item>
<div id="config-ob11-wsReverseUrls-list"></div> <div id="config-ob11-reverseWs.urls-list"></div>
</div>`, </div>`,
SettingItem( SettingItem(
" WebSocket 服务心跳间隔", " WebSocket 服务心跳间隔",
@ -271,7 +274,11 @@ async function onSettingWindowCreated(view) {
`<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="ob11.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>`,
"ob11.musicSignUrl" "ob11.musicSignUrl"
), ),
SettingItem("", void 0, SettingButton("保存", "config-ob11-save", "primary")) SettingItem(
"",
void 0,
SettingButton("保存", "config-ob11-save", "primary")
)
]), ]),
SettingList([ SettingList([
SettingItem( SettingItem(
@ -281,10 +288,22 @@ async function onSettingWindowCreated(view) {
) )
]), ]),
SettingList([ 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("NapCat 文档", ``, SettingButton("看看文档", "open-docs")),
SettingItem("Telegram 群", `https://t.me/+nLZEnpne-pQ1OWFl`, SettingButton("进去逛逛", "open-telegram")), SettingItem(
SettingItem("QQ 群", `545402644`, SettingButton("我要进去", "open-qq-group")) "Telegram 群",
`https://t.me/+nLZEnpne-pQ1OWFl`,
SettingButton("进去逛逛", "open-telegram")
),
SettingItem(
"QQ 群",
`545402644`,
SettingButton("我要进去", "open-qq-group")
)
]), ]),
"</div>" "</div>"
].join(""), ].join(""),
@ -316,14 +335,14 @@ async function onSettingWindowCreated(view) {
dom.input.type = "url"; dom.input.type = "url";
dom.input.value = host; dom.input.value = host;
dom.input.addEventListener("input", () => { 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.classList.add("q-input");
dom.inputContainer.appendChild(dom.input); dom.inputContainer.appendChild(dom.input);
dom.deleteBtn.innerHTML = "删除"; dom.deleteBtn.innerHTML = "删除";
dom.deleteBtn.dataset.type = "secondary"; dom.deleteBtn.dataset.type = "secondary";
dom.deleteBtn.addEventListener("click", () => { dom.deleteBtn.addEventListener("click", () => {
ob11Config[type].splice(index, 1); ob11Config[type.split(".")[0]][type.split(".")[-1]].splice(index, 1);
initReverseHost(type); initReverseHost(type);
}); });
dom.container.appendChild(dom.inputContainer); dom.container.appendChild(dom.inputContainer);
@ -332,34 +351,52 @@ async function onSettingWindowCreated(view) {
}; };
const buildHostList = (hosts, type, inputAttr = {}) => { const buildHostList = (hosts, type, inputAttr = {}) => {
const result = []; const result = [];
hosts.forEach((host, index) => { hosts?.forEach((host, index) => {
result.push(buildHostListItem(type, host, index, inputAttr)); result.push(buildHostListItem(type, host, index, inputAttr));
}); });
return result; 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(
hostContainerDom?.appendChild(buildHostListItem(type, "", ob11Config[type].length, inputAttr)); `#config-ob11-${type}-list`
ob11Config[type].push(""); );
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 initReverseHost = (type, doc2 = document) => {
const hostContainerDom = doc2.body?.querySelector(`#config-ob11-${type}-list`); const hostContainerDom = doc2.body?.querySelector(
`#config-ob11-${type}-list`
);
if (hostContainerDom) { if (hostContainerDom) {
[...hostContainerDom.childNodes].forEach((dom) => dom.remove()); [...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); hostContainerDom?.appendChild(dom);
}); });
} }
}; };
initReverseHost("httpPostUrls", doc); initReverseHost("http.postUrls", doc);
initReverseHost("wsReverseUrls", doc); initReverseHost("reverseWs.urls", doc);
doc.querySelector("#config-ob11-httpPostUrls-add")?.addEventListener( doc.querySelector("#config-ob11-http.postUrls-add")?.addEventListener(
"click", "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", "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", () => { doc.querySelector("#config-ffmpeg-select")?.addEventListener("click", () => {
}); });
@ -374,7 +411,10 @@ async function onSettingWindowCreated(view) {
else else
dom.removeAttribute("is-active"); dom.removeAttribute("is-active");
if (!isEmpty(dom.dataset.controlDisplayId)) { if (!isEmpty(dom.dataset.controlDisplayId)) {
const displayDom = document.querySelector(`#${dom.dataset.controlDisplayId}`); const displayDom = document.querySelector(
//@ts-ignore 等待修复
`#${dom.dataset.controlDisplayId}`
);
if (active) if (active)
displayDom?.removeAttribute("is-hidden"); displayDom?.removeAttribute("is-hidden");
else 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", () => { dom.addEventListener("input", () => {
const Type = dom.getAttribute("type"); const Type = dom.getAttribute("type");
const configKey = dom.dataset.configKey; const configKey = dom.dataset.configKey;