mirror of
https://github.com/NapNeko/NapCatQQ.git
synced 2026-02-12 16:00:27 +00:00
style: lint
This commit is contained in:
手瓜一十雪
@@ -1,15 +1,15 @@
|
||||
import { SettingList } from "./components/SettingList";
|
||||
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 { SettingList } from './components/SettingList';
|
||||
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';
|
||||
async function onSettingWindowCreated(view: Element) {
|
||||
const isEmpty = (value: any) => value === undefined || value === undefined || value === "";
|
||||
await OB11ConfigWrapper.Init(localStorage.getItem("auth") as string);
|
||||
let ob11Config: OB11Config = await OB11ConfigWrapper.GetOB11Config();
|
||||
const isEmpty = (value: any) => value === undefined || value === undefined || value === '';
|
||||
await OB11ConfigWrapper.Init(localStorage.getItem('auth') as string);
|
||||
const 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) {
|
||||
@@ -21,7 +21,7 @@ async function onSettingWindowCreated(view: Element) {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(
|
||||
[
|
||||
"<div>",
|
||||
'<div>',
|
||||
`<setting-section id="napcat-error">
|
||||
<setting-panel><pre><code></code></pre></setting-panel>
|
||||
</setting-section>`,
|
||||
@@ -29,39 +29,39 @@ async function onSettingWindowCreated(view: Element) {
|
||||
SettingItem(
|
||||
'<span id="napcat-update-title">Napcat</span>',
|
||||
undefined,
|
||||
SettingButton("V1.4.0", "napcat-update-button", "secondary")
|
||||
SettingButton('V1.4.0', 'napcat-update-button', 'secondary')
|
||||
),
|
||||
]),
|
||||
SettingList([
|
||||
SettingItem(
|
||||
"启用 HTTP 服务",
|
||||
'启用 HTTP 服务',
|
||||
undefined,
|
||||
SettingSwitch("ob11.http.enable", ob11Config.http.enable, {
|
||||
"control-display-id": "config-ob11-http-port",
|
||||
SettingSwitch('ob11.http.enable', ob11Config.http.enable, {
|
||||
'control-display-id': 'config-ob11-http-port',
|
||||
})
|
||||
),
|
||||
SettingItem(
|
||||
"HTTP 服务监听端口",
|
||||
'HTTP 服务监听端口',
|
||||
undefined,
|
||||
`<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-http-port",
|
||||
'config-ob11-http-port',
|
||||
ob11Config.http.enable
|
||||
),
|
||||
SettingItem(
|
||||
"启用 HTTP 心跳",
|
||||
'启用 HTTP 心跳',
|
||||
undefined,
|
||||
SettingSwitch("ob11.http.enableHeart", ob11Config.http.enableHeart, {
|
||||
"control-display-id": "config-ob11-HTTP.enableHeart",
|
||||
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-http-postUrls",
|
||||
SettingSwitch('ob11.http.enablePost', ob11Config.http.enablePost, {
|
||||
'control-display-id': 'config-ob11-http-postUrls',
|
||||
})
|
||||
),
|
||||
`<div class="config-host-list" id="config-ob11-http-postUrls" ${ob11Config.http.enablePost ? "" : "is-hidden"
|
||||
`<div class="config-host-list" id="config-ob11-http-postUrls" ${ob11Config.http.enablePost ? '' : 'is-hidden'
|
||||
}>
|
||||
<setting-item data-direction="row">
|
||||
<div>
|
||||
@@ -69,7 +69,7 @@ async function onSettingWindowCreated(view: Element) {
|
||||
</div>
|
||||
<div class="q-input">
|
||||
<input id="config-ob11-http-secret" class="q-input__inner" data-config-key="ob11.http.secret" type="text" value="${ob11Config.http.secret
|
||||
}" placeholder="未设置" />
|
||||
}" placeholder="未设置" />
|
||||
</div>
|
||||
</setting-item>
|
||||
<setting-item data-direction="row">
|
||||
@@ -81,27 +81,27 @@ async function onSettingWindowCreated(view: Element) {
|
||||
<div id="config-ob11-http-postUrls-list"></div>
|
||||
</div>`,
|
||||
SettingItem(
|
||||
"启用正向 WebSocket 服务",
|
||||
'启用正向 WebSocket 服务',
|
||||
undefined,
|
||||
SettingSwitch("ob11.ws.enable", ob11Config.ws.enable, {
|
||||
"control-display-id": "config-ob11-ws-port",
|
||||
SettingSwitch('ob11.ws.enable', ob11Config.ws.enable, {
|
||||
'control-display-id': 'config-ob11-ws-port',
|
||||
})
|
||||
),
|
||||
SettingItem(
|
||||
"正向 WebSocket 服务监听端口",
|
||||
'正向 WebSocket 服务监听端口',
|
||||
undefined,
|
||||
`<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-ws-port",
|
||||
'config-ob11-ws-port',
|
||||
ob11Config.ws.enable
|
||||
),
|
||||
SettingItem(
|
||||
"启用反向 WebSocket 服务",
|
||||
'启用反向 WebSocket 服务',
|
||||
undefined,
|
||||
SettingSwitch("ob11.reverseWs.enable", ob11Config.reverseWs.enable, {
|
||||
"control-display-id": "config-ob11-reverseWs-urls",
|
||||
SettingSwitch('ob11.reverseWs.enable', ob11Config.reverseWs.enable, {
|
||||
'control-display-id': 'config-ob11-reverseWs-urls',
|
||||
})
|
||||
),
|
||||
`<div class="config-host-list" id="config-ob11-reverseWs-urls" ${ob11Config.reverseWs.enable ? "" : "is-hidden"
|
||||
`<div class="config-host-list" id="config-ob11-reverseWs-urls" ${ob11Config.reverseWs.enable ? '' : 'is-hidden'
|
||||
}>
|
||||
<setting-item data-direction="row">
|
||||
<div>
|
||||
@@ -112,81 +112,81 @@ async function onSettingWindowCreated(view: Element) {
|
||||
<div id="config-ob11-reverseWs-urls-list"></div>
|
||||
</div>`,
|
||||
SettingItem(
|
||||
" WebSocket 服务心跳间隔",
|
||||
"控制每隔多久发送一个心跳包，单位为毫秒",
|
||||
' WebSocket 服务心跳间隔',
|
||||
'控制每隔多久发送一个心跳包，单位为毫秒',
|
||||
`<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(
|
||||
"Access token",
|
||||
'Access token',
|
||||
undefined,
|
||||
`<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(
|
||||
"新消息上报格式",
|
||||
"如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 <a href=\"javascript:LiteLoader.api.openExternal('https://github.com/botuniverse/onebot-11/tree/master/message#readme');\">OneBot v11 文档</a>",
|
||||
'新消息上报格式',
|
||||
'如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 <a href="javascript:LiteLoader.api.openExternal(\'https://github.com/botuniverse/onebot-11/tree/master/message#readme\');">OneBot v11 文档</a>',
|
||||
SettingSelect(
|
||||
[
|
||||
{ text: "消息段", value: "array" },
|
||||
{ text: "CQ码", value: "string" },
|
||||
{ text: '消息段', value: 'array' },
|
||||
{ text: 'CQ码', value: 'string' },
|
||||
],
|
||||
"ob11.messagePostFormat",
|
||||
'ob11.messagePostFormat',
|
||||
ob11Config.messagePostFormat
|
||||
)
|
||||
),
|
||||
SettingItem(
|
||||
"音乐卡片签名地址",
|
||||
'音乐卡片签名地址',
|
||||
undefined,
|
||||
`<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(
|
||||
"",
|
||||
'',
|
||||
undefined,
|
||||
SettingButton("保存", "config-ob11-save", "primary")
|
||||
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")
|
||||
'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")
|
||||
'Telegram 群',
|
||||
'https://t.me/+nLZEnpne-pQ1OWFl',
|
||||
SettingButton('进去逛逛', 'open-telegram')
|
||||
),
|
||||
SettingItem(
|
||||
"QQ 群",
|
||||
`545402644`,
|
||||
SettingButton("我要进去", "open-qq-group")
|
||||
'QQ 群',
|
||||
'545402644',
|
||||
SettingButton('我要进去', 'open-qq-group')
|
||||
),
|
||||
]),
|
||||
"</div>",
|
||||
].join(""),
|
||||
"text/html"
|
||||
'</div>',
|
||||
].join(''),
|
||||
'text/html'
|
||||
);
|
||||
|
||||
// 外链按钮
|
||||
doc.querySelector("#open-github")?.addEventListener("click", () => {
|
||||
window.open("https://napneko.github.io/", "_blank");
|
||||
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-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-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-docs')?.addEventListener('click', () => {
|
||||
window.open('https://github.com/NapNeko/NapCatQQ');
|
||||
});
|
||||
// 生成反向地址列表
|
||||
const buildHostListItem = (
|
||||
@@ -196,29 +196,29 @@ async function onSettingWindowCreated(view: Element) {
|
||||
inputAttrs: any = {}
|
||||
) => {
|
||||
const dom = {
|
||||
container: document.createElement("setting-item"),
|
||||
input: document.createElement("input"),
|
||||
inputContainer: document.createElement("div"),
|
||||
deleteBtn: document.createElement("setting-button"),
|
||||
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";
|
||||
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.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.addEventListener('input', () => {
|
||||
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.deleteBtn.innerHTML = "删除";
|
||||
dom.deleteBtn.dataset.type = "secondary";
|
||||
dom.deleteBtn.addEventListener("click", () => {
|
||||
ob11Config[type.split("-")[0]][type.split("-")[1]].splice(index, 1);
|
||||
dom.deleteBtn.innerHTML = '删除';
|
||||
dom.deleteBtn.dataset.type = 'secondary';
|
||||
dom.deleteBtn.addEventListener('click', () => {
|
||||
ob11Config[type.split('-')[0]][type.split('-')[1]].splice(index, 1);
|
||||
initReverseHost(type);
|
||||
});
|
||||
|
||||
@@ -245,7 +245,7 @@ async function onSettingWindowCreated(view: Element) {
|
||||
doc: Document = document,
|
||||
inputAttr: any = {}
|
||||
) => {
|
||||
type = type.replace(/\./g, "-");//替换操作
|
||||
type = type.replace(/\./g, '-');//替换操作
|
||||
|
||||
const hostContainerDom = doc.body.querySelector(
|
||||
`#config-ob11-${type}-list`
|
||||
@@ -253,22 +253,22 @@ async function onSettingWindowCreated(view: Element) {
|
||||
hostContainerDom?.appendChild(
|
||||
buildHostListItem(
|
||||
type,
|
||||
"",
|
||||
ob11Config[type.split("-")[0]][type.split("-")[1]].length,
|
||||
'',
|
||||
ob11Config[type.split('-')[0]][type.split('-')[1]].length,
|
||||
inputAttr
|
||||
)
|
||||
);
|
||||
ob11Config[type.split("-")[0]][type.split("-")[1]].push("");
|
||||
ob11Config[type.split('-')[0]][type.split('-')[1]].push('');
|
||||
};
|
||||
const initReverseHost = (type: string, doc: Document = document) => {
|
||||
type = type.replace(/\./g, "-");//替换操作
|
||||
type = type.replace(/\./g, '-');//替换操作
|
||||
const hostContainerDom = doc.body?.querySelector(
|
||||
`#config-ob11-${type}-list`
|
||||
);
|
||||
if (hostContainerDom) {
|
||||
[...hostContainerDom.childNodes].forEach((dom) => dom.remove());
|
||||
buildHostList(
|
||||
ob11Config[type.split("-")[0]][type.split("-")[1]],
|
||||
ob11Config[type.split('-')[0]][type.split('-')[1]],
|
||||
type
|
||||
).forEach((dom) => {
|
||||
hostContainerDom?.appendChild(dom);
|
||||
@@ -276,51 +276,51 @@ async function onSettingWindowCreated(view: Element) {
|
||||
}
|
||||
};
|
||||
|
||||
initReverseHost("http.postUrls", doc);
|
||||
initReverseHost("reverseWs.urls", doc);
|
||||
initReverseHost('http.postUrls', doc);
|
||||
initReverseHost('reverseWs.urls', doc);
|
||||
|
||||
doc
|
||||
.querySelector("#config-ob11-http-postUrls-add")
|
||||
?.addEventListener("click", () =>
|
||||
addReverseHost("http.postUrls", 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-reverseWs-urls-add")
|
||||
?.addEventListener("click", () =>
|
||||
addReverseHost("reverseWs.urls", 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]")
|
||||
.querySelectorAll('setting-switch[data-config-key]')
|
||||
.forEach((dom: Element) => {
|
||||
dom.addEventListener("click", () => {
|
||||
const active = dom.getAttribute("is-active") == undefined;
|
||||
//@ts-ignore 扩展
|
||||
dom.addEventListener('click', () => {
|
||||
const active = dom.getAttribute('is-active') == undefined;
|
||||
//@ts-expect-error 等待修复
|
||||
setOB11Config(dom.dataset.configKey, active);
|
||||
if (active) dom.setAttribute("is-active", "");
|
||||
else dom.removeAttribute("is-active");
|
||||
//@ts-ignore 等待修复
|
||||
if (active) dom.setAttribute('is-active', '');
|
||||
else dom.removeAttribute('is-active');
|
||||
//@ts-expect-error 等待修复
|
||||
if (!isEmpty(dom.dataset.controlDisplayId)) {
|
||||
const displayDom = document.querySelector(
|
||||
//@ts-ignore 等待修复
|
||||
//@ts-expect-error 等待修复
|
||||
`#${dom.dataset.controlDisplayId}`
|
||||
);
|
||||
if (active) displayDom?.removeAttribute("is-hidden");
|
||||
else displayDom?.setAttribute("is-hidden", "");
|
||||
if (active) displayDom?.removeAttribute('is-hidden');
|
||||
else displayDom?.setAttribute('is-hidden', '');
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -328,15 +328,15 @@ async function onSettingWindowCreated(view: Element) {
|
||||
// 输入框
|
||||
doc
|
||||
.querySelectorAll(
|
||||
"setting-item .q-input input.q-input__inner[data-config-key]"
|
||||
'setting-item .q-input input.q-input__inner[data-config-key]'
|
||||
)
|
||||
.forEach((dom: Element) => {
|
||||
dom.addEventListener("input", () => {
|
||||
const Type = dom.getAttribute("type");
|
||||
//@ts-ignore 等待修复
|
||||
dom.addEventListener('input', () => {
|
||||
const Type = dom.getAttribute('type');
|
||||
//@ts-expect-error等待修复
|
||||
const configKey = dom.dataset.configKey;
|
||||
const configValue =
|
||||
Type === "number"
|
||||
Type === 'number'
|
||||
? parseInt((dom as HTMLInputElement).value) >= 1
|
||||
? parseInt((dom as HTMLInputElement).value)
|
||||
: 1
|
||||
@@ -348,11 +348,11 @@ async function onSettingWindowCreated(view: Element) {
|
||||
|
||||
// 下拉框
|
||||
doc
|
||||
.querySelectorAll("ob-setting-select[data-config-key]")
|
||||
.querySelectorAll('ob-setting-select[data-config-key]')
|
||||
.forEach((dom: Element) => {
|
||||
//@ts-ignore 等待修复
|
||||
dom?.addEventListener("selected", (e: CustomEvent) => {
|
||||
//@ts-ignore 等待修复
|
||||
//@ts-expect-error等待修复
|
||||
dom?.addEventListener('selected', (e: CustomEvent) => {
|
||||
//@ts-expect-error等待修复
|
||||
const configKey = dom.dataset.configKey;
|
||||
const configValue = e.detail.value;
|
||||
setOB11Config(configKey, configValue);
|
||||
@@ -360,9 +360,9 @@ async function onSettingWindowCreated(view: Element) {
|
||||
});
|
||||
|
||||
// 保存按钮
|
||||
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);
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export const SettingButton = (text: string, id?: string, type: string = 'secondary') => {
|
||||
return `<setting-button ${type ? `data-type="${type}"` : ''} ${id ? `id="${id}"` : ''}>${text}</setting-button>`
|
||||
}
|
||||
return `<setting-button ${type ? `data-type="${type}"` : ''} ${id ? `id="${id}"` : ''}>${text}</setting-button>`;
|
||||
};
|
||||
@@ -11,5 +11,5 @@ export const SettingItem = (
|
||||
${subtitle ? `<setting-text data-type="secondary">${subtitle}</setting-text>` : ''}
|
||||
</div>
|
||||
${action ? `<div>${action}</div>` : ''}
|
||||
</setting-item>`
|
||||
}
|
||||
</setting-item>`;
|
||||
};
|
||||
@@ -1,14 +1,14 @@
|
||||
export const SettingList = (
|
||||
items: string[],
|
||||
title?: string,
|
||||
isCollapsible: boolean = false,
|
||||
direction: string = 'column',
|
||||
) => {
|
||||
return `<setting-section ${title && !isCollapsible ? `data-title="${title}"` : ''}>
|
||||
items: string[],
|
||||
title?: string,
|
||||
isCollapsible: boolean = false,
|
||||
direction: string = 'column',
|
||||
) => {
|
||||
return `<setting-section ${title && !isCollapsible ? `data-title="${title}"` : ''}>
|
||||
<setting-panel>
|
||||
<setting-list ${direction ? `data-direction="${direction}"` : ''} ${isCollapsible ? 'is-collapsible' : ''} ${title && isCollapsible ? `data-title="${title}"` : ''}>
|
||||
${items.join('')}
|
||||
</setting-list>
|
||||
</setting-panel>
|
||||
</setting-section>`
|
||||
}
|
||||
</setting-section>`;
|
||||
};
|
||||
@@ -1,3 +1,3 @@
|
||||
export const SettingOption = (text: string, value?: string, isSelected: boolean = false) => {
|
||||
return `<setting-option ${value ? `data-value="${value}"` : ''} ${isSelected ? 'is-selected' : ''}>${text}</setting-option>`
|
||||
}
|
||||
return `<setting-option ${value ? `data-value="${value}"` : ''} ${isSelected ? 'is-selected' : ''}>${text}</setting-option>`;
|
||||
};
|
||||
@@ -1,11 +1,11 @@
|
||||
import { SettingOption } from './SettingOption'
|
||||
import { SettingOption } from './SettingOption';
|
||||
|
||||
interface MouseEventExtend extends MouseEvent {
|
||||
target: HTMLElement
|
||||
}
|
||||
|
||||
// <ob-setting-select>
|
||||
const SelectTemplate = document.createElement('template')
|
||||
const SelectTemplate = document.createElement('template');
|
||||
SelectTemplate.innerHTML = `<style>
|
||||
.hidden { display: none !important; }
|
||||
</style>
|
||||
@@ -17,19 +17,19 @@ SelectTemplate.innerHTML = `<style>
|
||||
</svg>
|
||||
</div>
|
||||
<ul class="hidden" part="option-list"><slot></slot></ul>
|
||||
</div>`
|
||||
</div>`;
|
||||
|
||||
window.customElements.define(
|
||||
'ob-setting-select',
|
||||
class extends HTMLElement {
|
||||
readonly _button: HTMLDivElement
|
||||
readonly _text: HTMLInputElement
|
||||
readonly _context: HTMLUListElement
|
||||
readonly _button: HTMLDivElement;
|
||||
readonly _text: HTMLInputElement;
|
||||
readonly _context: HTMLUListElement;
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
super();
|
||||
|
||||
this.attachShadow({ mode: 'open' })
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.shadowRoot?.append(SelectTemplate.content.cloneNode(true));
|
||||
|
||||
this._button = this.shadowRoot.querySelector('div[part="button"]');
|
||||
@@ -39,21 +39,21 @@ window.customElements.define(
|
||||
const buttonClick = () => {
|
||||
const isHidden = this._context.classList.toggle('hidden');
|
||||
window[`${isHidden ? 'remove' : 'add'}EventListener`]('pointerdown', windowPointerDown);
|
||||
}
|
||||
};
|
||||
|
||||
const windowPointerDown = ({ target }) => {
|
||||
if (!this.contains(target)) buttonClick()
|
||||
}
|
||||
if (!this.contains(target)) buttonClick();
|
||||
};
|
||||
|
||||
this._button.addEventListener('click', buttonClick)
|
||||
this._button.addEventListener('click', buttonClick);
|
||||
this._context.addEventListener('click', ({ target }: MouseEventExtend) => {
|
||||
if (target.tagName !== 'SETTING-OPTION') return
|
||||
buttonClick()
|
||||
if (target.tagName !== 'SETTING-OPTION') return;
|
||||
buttonClick();
|
||||
|
||||
if (target.hasAttribute('is-selected')) return
|
||||
if (target.hasAttribute('is-selected')) return;
|
||||
|
||||
this.querySelectorAll('setting-option[is-selected]').forEach((dom) => dom.toggleAttribute('is-selected'))
|
||||
target.toggleAttribute('is-selected')
|
||||
this.querySelectorAll('setting-option[is-selected]').forEach((dom) => dom.toggleAttribute('is-selected'));
|
||||
target.toggleAttribute('is-selected');
|
||||
|
||||
this._text.value = target.textContent as string;
|
||||
this.dispatchEvent(
|
||||
@@ -65,20 +65,20 @@ window.customElements.define(
|
||||
value: target.dataset.value,
|
||||
},
|
||||
}),
|
||||
)
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
this._text.value = this.querySelector('setting-option[is-selected]')?.textContent as string;
|
||||
}
|
||||
},
|
||||
)
|
||||
);
|
||||
|
||||
export const SettingSelect = (items: Array<{ text: string; value: string }>, configKey?: string, configValue?: any) => {
|
||||
return `<ob-setting-select ${configKey ? `data-config-key="${configKey}"` : ''}>
|
||||
${items
|
||||
.map((e, i) => {
|
||||
return SettingOption(e.text, e.value, configKey && configValue ? configValue === e.value : i === 0)
|
||||
})
|
||||
.join('')}
|
||||
</ob-setting-select>`
|
||||
}
|
||||
.map((e, i) => {
|
||||
return SettingOption(e.text, e.value, configKey && configValue ? configValue === e.value : i === 0);
|
||||
})
|
||||
.join('')}
|
||||
</ob-setting-select>`;
|
||||
};
|
||||
@@ -1,8 +1,8 @@
|
||||
export const SettingSwitch = (configKey?: string, isActive: boolean = false, extraData?: Record<string, string>) => {
|
||||
return `<setting-switch
|
||||
return `<setting-switch
|
||||
${configKey ? `data-config-key="${configKey}"` : ''}
|
||||
${isActive ? 'is-active' : ''}
|
||||
${extraData ? Object.keys(extraData).map((key) => `data-${key}="${extraData[key]}"`) : ''}
|
||||
>
|
||||
</setting-switch>`
|
||||
}
|
||||
</setting-switch>`;
|
||||
};
|
||||
@@ -2,16 +2,16 @@ export interface OB11Config {
|
||||
[key: string]: any;
|
||||
http: {
|
||||
enable: boolean;
|
||||
host: "";
|
||||
host: '';
|
||||
port: number;
|
||||
secret: "";
|
||||
secret: '';
|
||||
enableHeart: boolean;
|
||||
enablePost: boolean;
|
||||
postUrls: string[];
|
||||
};
|
||||
ws: {
|
||||
enable: boolean;
|
||||
host: "";
|
||||
host: '';
|
||||
port: number;
|
||||
};
|
||||
reverseWs: {
|
||||
@@ -21,45 +21,45 @@ export interface OB11Config {
|
||||
|
||||
debug: boolean;
|
||||
heartInterval: number;
|
||||
messagePostFormat: "array" | "string";
|
||||
messagePostFormat: 'array' | 'string';
|
||||
enableLocalFile2Url: boolean;
|
||||
musicSignUrl: "";
|
||||
musicSignUrl: '';
|
||||
reportSelfMessage: boolean;
|
||||
token: "";
|
||||
token: '';
|
||||
}
|
||||
|
||||
class WebUiApiOB11ConfigWrapper {
|
||||
private retCredential: string = "";
|
||||
private retCredential: string = '';
|
||||
async Init(Credential: string) {
|
||||
this.retCredential = Credential;
|
||||
}
|
||||
async GetOB11Config(): Promise<OB11Config> {
|
||||
let ConfigResponse = await fetch("/api/OB11Config/GetConfig", {
|
||||
method: "POST",
|
||||
const ConfigResponse = await fetch('/api/OB11Config/GetConfig', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: "Bearer " + this.retCredential,
|
||||
"Content-Type": "application/json",
|
||||
Authorization: 'Bearer ' + this.retCredential,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
if (ConfigResponse.status == 200) {
|
||||
let ConfigResponseJson = await ConfigResponse.json();
|
||||
const ConfigResponseJson = await ConfigResponse.json();
|
||||
if (ConfigResponseJson.code == 0) {
|
||||
return ConfigResponseJson?.data;
|
||||
}
|
||||
}
|
||||
return {} as OB11Config;
|
||||
}
|
||||
async SetOB11Config(config: OB11Config): Promise<Boolean> {
|
||||
let ConfigResponse = await fetch("/api/OB11Config/SetConfig", {
|
||||
method: "POST",
|
||||
async SetOB11Config(config: OB11Config): Promise<boolean> {
|
||||
const ConfigResponse = await fetch('/api/OB11Config/SetConfig', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: "Bearer " + this.retCredential,
|
||||
"Content-Type": "application/json",
|
||||
Authorization: 'Bearer ' + this.retCredential,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ config: JSON.stringify(config) }),
|
||||
});
|
||||
if (ConfigResponse.status == 200) {
|
||||
let ConfigResponseJson = await ConfigResponse.json();
|
||||
const ConfigResponseJson = await ConfigResponse.json();
|
||||
if (ConfigResponseJson.code == 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user