mirror of
https://github.com/LLOneBot/LLOneBot.git
synced 2024-11-22 01:56:33 +00:00
345 lines
15 KiB
TypeScript
345 lines
15 KiB
TypeScript
/// <reference path="../global.d.ts" />
|
||
import { CheckVersion } from '../common/types';
|
||
import {
|
||
SettingButton,
|
||
SettingItem,
|
||
SettingList,
|
||
SettingSelect,
|
||
SettingSwitch
|
||
} from './components';
|
||
import StyleRaw from './style.css?raw';
|
||
|
||
// 打开设置界面时触发
|
||
|
||
async function onSettingWindowCreated(view: Element) {
|
||
window.llonebot.log("setting window created");
|
||
const isEmpty = (value: any) => value === undefined || value === null || value === '';
|
||
let config = await window.llonebot.getConfig();
|
||
let ob11Config = { ...config.ob11 };
|
||
const setConfig = (key: string, value: any) => {
|
||
const configKey = key.split('.');
|
||
|
||
if (key.indexOf('ob11') === 0) {
|
||
if (configKey.length === 2) ob11Config[configKey[1]] = value;
|
||
else ob11Config[key] = value;
|
||
} else {
|
||
if (configKey.length === 2) config[configKey[0]][configKey[1]] = value;
|
||
else config[key] = value;
|
||
|
||
if (!['heartInterval', 'token', 'ffmpeg'].includes(key)) {
|
||
window.llonebot.setConfig(config);
|
||
}
|
||
}
|
||
};
|
||
|
||
const parser = new DOMParser();
|
||
const doc = parser.parseFromString([
|
||
'<div>',
|
||
`<style>${StyleRaw}</style>`,
|
||
`<setting-section>
|
||
<setting-panel>
|
||
<setting-list data-direction="column" class="new">
|
||
<setting-item data-direction="row">
|
||
<setting-text class="llonebot-update-title">正在检查LLOneBot版本中</setting-text>
|
||
<setting-button data-type="secondary" class="llonebot-update-button">重新发现</setting-button>
|
||
</setting-item>
|
||
</setting-list>
|
||
</setting-panel>
|
||
<setting-section>`,
|
||
SettingList([
|
||
SettingItem('启用 HTTP 服务', null,
|
||
SettingSwitch('ob11.enableHttp', config.ob11.enableHttp, { 'control-display-id': 'config-ob11-httpPort' }),
|
||
),
|
||
SettingItem('HTTP 服务监听端口', null,
|
||
`<div class="q-input"><input class="q-input__inner" data-config-key="ob11.httpPort" type="number" min="1" max="65534" value="${config.ob11.httpPort}" placeholder="${config.ob11.httpPort}" /></div>`,
|
||
'config-ob11-httpPort', config.ob11.enableHttp
|
||
),
|
||
SettingItem('启用 HTTP 事件上报', null,
|
||
SettingSwitch('ob11.enableHttpPost', config.ob11.enableHttpPost, { 'control-display-id': 'config-ob11-httpHosts' }),
|
||
),
|
||
`<div class="config-host-list" id="config-ob11-httpHosts" ${config.ob11.enableHttpPost ? '' : 'is-hidden'}>
|
||
<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 服务', null,
|
||
SettingSwitch('ob11.enableWs', config.ob11.enableWs, { 'control-display-id': 'config-ob11-wsPort' }),
|
||
),
|
||
SettingItem('正向 WebSocket 服务监听端口', null,
|
||
`<div class="q-input"><input class="q-input__inner" data-config-key="ob11.wsPort" type="number" min="1" max="65534" value="${config.ob11.wsPort}" placeholder="${config.ob11.wsPort}" /></div>`,
|
||
'config-ob11-wsPort', config.ob11.enableWs
|
||
),
|
||
SettingItem('启用反向 WebSocket 服务', null,
|
||
SettingSwitch('ob11.enableWsReverse', config.ob11.enableWsReverse, { 'control-display-id': 'config-ob11-wsHosts' }),
|
||
),
|
||
`<div class="config-host-list" id="config-ob11-wsHosts" ${config.ob11.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="${config.heartInterval}" placeholder="${config.heartInterval}" /></div>`,
|
||
),
|
||
SettingItem('Access token', null,
|
||
`<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="token" type="text" value="${config.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', config.ob11.messagePostFormat),
|
||
),
|
||
SettingItem(
|
||
'ffmpeg 路径，发送语音、视频需要，同时保证ffprobe和ffmpeg在一起', ` <a href="javascript:LiteLoader.api.openExternal(\'https://llonebot.github.io/zh-CN/guide/ffmpeg\');">下载地址</a> <span id="config-ffmpeg-path-text">, 路径:${!isEmpty(config.ffmpeg) ? config.ffmpeg : '未指定'}</span>`,
|
||
SettingButton('选择ffmpeg', 'config-ffmpeg-select'),
|
||
),
|
||
SettingItem(
|
||
'', null,
|
||
SettingButton('保存', 'config-ob11-save', 'primary'),
|
||
)
|
||
]),
|
||
SettingList([
|
||
SettingItem(
|
||
'接收戳一戳消息, 暂时只支持Windows版的LLOneBot',
|
||
`重启QQ后生效，如果导致QQ崩溃请勿开启此项`,
|
||
SettingSwitch('enablePoke', config.enablePoke),
|
||
),
|
||
SettingItem(
|
||
'使用 Base64 编码获取文件',
|
||
'开启后，调用 /get_image、/get_record 时，获取不到 url 时添加一个 Base64 字段',
|
||
SettingSwitch('enableLocalFile2Url', config.enableLocalFile2Url),
|
||
),
|
||
SettingItem(
|
||
'调试模式',
|
||
'开启后上报信息会添加 raw 字段以附带原始信息',
|
||
SettingSwitch('debug', config.debug),
|
||
),
|
||
SettingItem(
|
||
'上报 Bot 自身发送的消息',
|
||
'上报 event 为 message_sent',
|
||
SettingSwitch('reportSelfMessage', config.reportSelfMessage),
|
||
),
|
||
SettingItem(
|
||
'自动删除收到的文件',
|
||
'在收到文件后的指定时间内删除该文件',
|
||
SettingSwitch('autoDeleteFile', config.autoDeleteFile, { 'control-display-id': 'config-auto-delete-file-second' }),
|
||
),
|
||
SettingItem(
|
||
'自动删除文件时间',
|
||
'单位为秒',
|
||
`<div class="q-input"><input class="q-input__inner" data-config-key="autoDeleteFileSecond" type="number" min="1" value="${config.autoDeleteFileSecond}" placeholder="${config.autoDeleteFileSecond}" /></div>`,
|
||
'config-auto-delete-file-second', config.autoDeleteFile
|
||
),
|
||
SettingItem(
|
||
'写入日志',
|
||
`将日志文件写入插件的数据文件夹`,
|
||
SettingSwitch('log', config.log),
|
||
),
|
||
SettingItem(
|
||
'日志文件目录',
|
||
`${window.LiteLoader.plugins['LLOneBot'].path.data}`,
|
||
SettingButton('打开', 'config-open-log-path'),
|
||
),
|
||
]),
|
||
SettingList([
|
||
SettingItem(
|
||
'GitHub 仓库',
|
||
`https://github.com/LLOneBot/LLOneBot`,
|
||
SettingButton('点个星星', 'open-github'),
|
||
),
|
||
SettingItem(
|
||
'LLOneBot 文档',
|
||
`https://llonebot.github.io/`,
|
||
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.LiteLoader.api.openExternal('https://github.com/LLOneBot/LLOneBot')
|
||
})
|
||
doc.querySelector('#open-telegram').addEventListener('click', () => {
|
||
window.LiteLoader.api.openExternal('https://t.me/+nLZEnpne-pQ1OWFl')
|
||
})
|
||
doc.querySelector('#open-qq-group').addEventListener('click', () => {
|
||
window.LiteLoader.api.openExternal('https://qm.qq.com/q/bDnHRG38aI')
|
||
})
|
||
doc.querySelector('#open-docs').addEventListener('click', () => {
|
||
window.LiteLoader.api.openExternal('https://llonebot.github.io/')
|
||
})
|
||
// 生成反向地址列表
|
||
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', () => {
|
||
window.llonebot.selectFile()
|
||
.then(path => {
|
||
if (!isEmpty(path)) {
|
||
setConfig('ffmpeg', path);
|
||
document.querySelector('#config-ffmpeg-path-text').innerHTML = path;
|
||
}
|
||
})
|
||
});
|
||
|
||
doc.querySelector('#config-open-log-path').addEventListener('click', () => {
|
||
window.LiteLoader.api.openPath(window.LiteLoader.plugins['LLOneBot'].path.data);
|
||
})
|
||
|
||
// 开关
|
||
doc.querySelectorAll('setting-switch[data-config-key]').forEach((dom: HTMLElement) => {
|
||
dom.addEventListener('click', () => {
|
||
const active = dom.getAttribute('is-active') === null;
|
||
|
||
setConfig(dom.dataset.configKey, active);
|
||
|
||
if (active) dom.setAttribute('is-active', '');
|
||
else dom.removeAttribute('is-active');
|
||
|
||
if (!isEmpty(dom.dataset.controlDisplayId)) {
|
||
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: HTMLInputElement) => {
|
||
dom.addEventListener('input', () => {
|
||
const Type = dom.getAttribute('type');
|
||
const configKey = dom.dataset.configKey;
|
||
const configValue = Type === 'number' ? (parseInt(dom.value) >= 1 ? parseInt(dom.value) : 1) : dom.value;
|
||
|
||
setConfig(configKey, configValue);
|
||
});
|
||
});
|
||
|
||
// 下拉框
|
||
doc.querySelectorAll('setting-select').forEach((dom: HTMLElement) => {
|
||
dom.addEventListener('selected', (e: CustomEvent) => {
|
||
const configKey = dom.dataset.configKey;
|
||
const configValue = e.detail.value;
|
||
|
||
setConfig(configKey, configValue);
|
||
});
|
||
});
|
||
|
||
// 保存按钮
|
||
doc.querySelector('#config-ob11-save').addEventListener('click', () => {
|
||
config.ob11 = ob11Config;
|
||
|
||
window.llonebot.setConfig(config);
|
||
alert('保存成功');
|
||
});
|
||
|
||
doc.body.childNodes.forEach(node => {
|
||
view.appendChild(node);
|
||
});
|
||
window.llonebot.checkVersion().then((ResultVersion: CheckVersion) => {
|
||
if (ResultVersion.result) {
|
||
view.querySelector(".llonebot-update-title").innerHTML = "当前已是最新版本 V" + ResultVersion.version;
|
||
view.querySelector(".llonebot-update-button").innerHTML = "无需更新";
|
||
} else {
|
||
view.querySelector(".llonebot-update-title").innerHTML = "已监测到最新版本 V" + ResultVersion.version;
|
||
view.querySelector(".llonebot-update-button").innerHTML = "点击更新";
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
function init() {
|
||
const hash = location.hash
|
||
if (hash === '#/blank') {
|
||
|
||
}
|
||
}
|
||
|
||
if (location.hash === '#/blank') {
|
||
(window as any).navigation.addEventListener('navigatesuccess', init, { once: true })
|
||
} else {
|
||
init()
|
||
}
|
||
|
||
export {
|
||
onSettingWindowCreated
|
||
}
|