mirror of
https://github.com/NapNeko/NapCatQQ.git
synced 2024-11-21 09:36:35 +00:00
294 lines
12 KiB
TypeScript
294 lines
12 KiB
TypeScript
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 === '';
|
||
let ob11Config: OB11Config = await OB11ConfigWrapper.GetOB11Config();
|
||
const setOB11Config = (key: string, value: any) => {
|
||
const configKey = key.split('.');
|
||
if (configKey.length === 2) {
|
||
ob11Config[configKey[1]] = value;
|
||
}
|
||
OB11ConfigWrapper.SetOB11Config(ob11Config);
|
||
}
|
||
|
||
const parser = new DOMParser();
|
||
const doc = parser.parseFromString(
|
||
[
|
||
'<div>',
|
||
`<setting-section id="napcat-error">
|
||
<setting-panel><pre><code></code></pre></setting-panel>
|
||
</setting-section>`,
|
||
SettingList([
|
||
SettingItem(
|
||
'<span id="napcat-update-title">Napcat</span>',
|
||
undefined,
|
||
SettingButton('V1.3.0', 'napcat-update-button', 'secondary'),
|
||
),
|
||
]),
|
||
SettingList([
|
||
SettingItem(
|
||
'启用 HTTP 服务',
|
||
undefined,
|
||
SettingSwitch('ob11.enableHttp', ob11Config.enableHttp, { 'control-display-id': 'config-ob11-httpPort' }),
|
||
),
|
||
SettingItem(
|
||
'HTTP 服务监听端口',
|
||
undefined,
|
||
`<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>`,
|
||
'config-ob11-httpPort',
|
||
ob11Config.enableHttp,
|
||
),
|
||
SettingItem(
|
||
'启用 HTTP 心跳',
|
||
undefined,
|
||
SettingSwitch('ob11.enableHttpHeart', ob11Config.enableHttpHeart, {
|
||
'control-display-id': 'config-ob11-enableHttpHeart',
|
||
}),
|
||
),
|
||
SettingItem(
|
||
'启用 HTTP 事件上报',
|
||
undefined,
|
||
SettingSwitch('ob11.enableHttpPost', ob11Config.enableHttpPost, {
|
||
'control-display-id': 'config-ob11-httpHosts',
|
||
}),
|
||
),
|
||
`<div class="config-host-list" id="config-ob11-httpHosts" ${ob11Config.enableHttpPost ? '' : 'is-hidden'}>
|
||
<setting-item data-direction="row">
|
||
<div>
|
||
<setting-text>HTTP 事件上报密钥</setting-text>
|
||
</div>
|
||
<div class="q-input">
|
||
<input id="config-ob11-httpSecret" class="q-input__inner" data-config-key="ob11.httpSecret" type="text" value="${ob11Config.httpSecret
|
||
}" placeholder="未设置" />
|
||
</div>
|
||
</setting-item>
|
||
<setting-item data-direction="row">
|
||
<div>
|
||
<setting-text>HTTP 事件上报地址</setting-text>
|
||
</div>
|
||
<setting-button id="config-ob11-httpHosts-add" data-type="primary">添加</setting-button>
|
||
</setting-item>
|
||
<div id="config-ob11-httpHosts-list"></div>
|
||
</div>`,
|
||
SettingItem(
|
||
'启用正向 WebSocket 服务',
|
||
undefined,
|
||
SettingSwitch('ob11.enableWs', ob11Config.enableWs, { 'control-display-id': 'config-ob11-wsPort' }),
|
||
),
|
||
SettingItem(
|
||
'正向 WebSocket 服务监听端口',
|
||
undefined,
|
||
`<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>`,
|
||
'config-ob11-wsPort',
|
||
ob11Config.enableWs,
|
||
),
|
||
SettingItem(
|
||
'启用反向 WebSocket 服务',
|
||
undefined,
|
||
SettingSwitch('ob11.enableWsReverse', ob11Config.enableWsReverse, {
|
||
'control-display-id': 'config-ob11-wsHosts',
|
||
}),
|
||
),
|
||
`<div class="config-host-list" id="config-ob11-wsHosts" ${ob11Config.enableWsReverse ? '' : 'is-hidden'}>
|
||
<setting-item data-direction="row">
|
||
<div>
|
||
<setting-text>反向 WebSocket 监听地址</setting-text>
|
||
</div>
|
||
<setting-button id="config-ob11-wsHosts-add" data-type="primary">添加</setting-button>
|
||
</setting-item>
|
||
<div id="config-ob11-wsHosts-list"></div>
|
||
</div>`,
|
||
SettingItem(
|
||
' 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>`,
|
||
),
|
||
SettingItem(
|
||
'Access token',
|
||
undefined,
|
||
`<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="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>',
|
||
SettingSelect(
|
||
[
|
||
{ text: '消息段', value: 'array' },
|
||
{ text: 'CQ码', value: 'string' },
|
||
],
|
||
'ob11.messagePostFormat',
|
||
ob11Config.messagePostFormat,
|
||
),
|
||
),
|
||
SettingItem(
|
||
'音乐卡片签名地址',
|
||
undefined,
|
||
`<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="musicSignUrl" type="text" value="${ob11Config.musicSignUrl}" placeholder="未设置" /></div>`,
|
||
'config-musicSignUrl',
|
||
),
|
||
SettingItem('', undefined, SettingButton('保存', 'config-ob11-save', 'primary')),
|
||
]),
|
||
SettingList([
|
||
SettingItem(
|
||
'上报 Bot 自身发送的消息',
|
||
'上报 event 为 message_sent',
|
||
SettingSwitch('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')),
|
||
]),
|
||
'</div>',
|
||
].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')
|
||
})
|
||
// 生成反向地址列表
|
||
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
|
||
})
|
||
|
||
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.container.appendChild(dom.inputContainer)
|
||
dom.container.appendChild(dom.deleteBtn)
|
||
|
||
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))
|
||
})
|
||
|
||
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('');
|
||
}
|
||
const initReverseHost = (type: string, doc: Document = document) => {
|
||
const hostContainerDom = doc.body?.querySelector(`#config-ob11-${type}-list`);
|
||
/*[...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('click', () =>
|
||
addReverseHost('httpHosts', document, { placeholder: '如：http://127.0.0.1:5140/onebot' }),
|
||
)
|
||
doc
|
||
.querySelector('#config-ob11-wsHosts-add')
|
||
?.addEventListener('click', () =>
|
||
addReverseHost('wsHosts', document, { placeholder: '如：ws://127.0.0.1:5140/onebot' }),
|
||
)
|
||
|
||
doc.querySelector('#config-ffmpeg-select')?.addEventListener('click', () => {
|
||
//选择ffmpeg
|
||
})
|
||
|
||
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)) {
|
||
//@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]')
|
||
.forEach((dom: Element) => {
|
||
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
|
||
|
||
setOB11Config(configKey, configValue)
|
||
})
|
||
})
|
||
|
||
// 下拉框
|
||
doc.querySelectorAll('ob-setting-select[data-config-key]').forEach((dom: Element) => {
|
||
//@ts-ignore 等待修复
|
||
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', () => {
|
||
OB11ConfigWrapper.SetOB11Config(ob11Config);
|
||
alert('保存成功');
|
||
})
|
||
doc.body.childNodes.forEach((node) => {
|
||
view.appendChild(node)
|
||
})
|
||
}
|
||
export { onSettingWindowCreated }; |