From b668f948dffde01a6f3b2351eeb33e6bbc6a9890 Mon Sep 17 00:00:00 2001 From: Misa Liu Date: Mon, 4 Mar 2024 21:30:55 +0800 Subject: [PATCH] feat: Init new setting page --- src/renderer/index.ts | 459 +++++++++-------------------------------- src/renderer/style.css | 39 ++++ 2 files changed, 141 insertions(+), 357 deletions(-) create mode 100644 src/renderer/style.css diff --git a/src/renderer/index.ts b/src/renderer/index.ts index 7611793..a15c791 100644 --- a/src/renderer/index.ts +++ b/src/renderer/index.ts @@ -1,365 +1,110 @@ -/// +/// +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 === '' - const config = await window.llonebot.getConfig() - const httpClass = 'http' - const httpPostClass = 'http-post' - const wsClass = 'ws' - const reverseWSClass = 'reverse-ws' - const llonebotError = await window.llonebot.getError() - window.llonebot.log('获取error' + JSON.stringify(llonebotError)) +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() - function createHttpHostEleStr (host: string) { - const eleStr = ` - -

HTTP事件上报地址(http)

- - - ` - return eleStr - } + const parser = new DOMParser(); + const doc = parser.parseFromString([ + '
', + ``, + SettingList([ + SettingItem('启用 HTTP 服务', null, + SettingSwitch('ob11.enableHttp', config.ob11.enableHttp, { 'control-display-id': 'config-ob11-httpPort' }), + ), + SettingItem('HTTP 服务监听端口', null, + '
', + 'config-ob11-httpPort', config.ob11.enableHttp + ), + SettingItem('启用 HTTP 事件上报', null, + SettingSwitch('ob11.enableHttpPost', config.ob11.enableHttpPost, { 'control-display-id': 'config-ob11-httpPost' }), + ), + SettingItem('HTTP 事件上报地址', null, + '
', + 'config-ob11-httpPost', config.ob11.enableHttpPost + ), + SettingItem('启用正向 WebSocket 服务', null, + SettingSwitch('ob11.enableWs', config.ob11.enableWs, { 'config-display-id': 'config-ob11-wsPort' }), + ), + SettingItem('正向 WebSocket 服务监听端口', null, + '
', + 'config-ob11-wsPort', config.ob11.enableWs + ), + SettingItem('启用反向 WebSocket 服务', null, + SettingSwitch('ob11.enableWsReverse', config.ob11.enableWsReverse, { 'config-display-id': 'config-ob11-wsHosts' }), + ), + SettingItem('反向 WebSocket 监听地址', null, + '
', + 'config-ob11-wsHosts', config.ob11.enableWsReverse + ), + SettingItem( + 'ffmpeg 路径', `${!isEmpty(config.ffmpeg) ? config.ffmpeg : '未指定'}`, + SettingButton('选择', 'config-ffmpeg-select'), + 'config-ffmpeg-path', + ), + SettingItem( + '', null, + SettingButton('保存', 'config-ob11-save', 'primary'), + ) + ]), + SettingList([ + SettingItem( + '消息上报格式类型', + '如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 OneBot v11 文档', + SettingSelect([ + { text: '消息段', value: 'array' }, + { text: 'CQ码', value: 'string' }, + ], 'ob11.messagePostFormat', config.ob11.messagePostFormat), + ), + SettingItem( + '使用 Base64 编码获取文件', + '开启后，调用 /get_image、/get_record 时，获取不到 url 时添加一个 Base64 字段', + SettingSwitch('enableLocalFile2Url', config.enableLocalFile2Url), + ), + SettingItem( + '调试模式', + '开启后上报信息会添加 raw 字段以附带原始信息', + SettingSwitch('debug', config.debug), + ), + SettingItem( + '上报 Bot 自身发送的消息', + '慎用，可能会导致自己跟自己聊个不停', + SettingSwitch('reportSelfMessage', config.reportSelfMessage), + ), + SettingItem( + '写入日志', + `日志文件目录：${window.LiteLoader.plugins['LLOneBot'].path.data}`, + SettingButton('打开', 'config-open-log-path'), + ), + SettingItem( + '自动删除收到的文件', + '在收到文件后的指定时间内删除该文件', + SettingSwitch('autoDeleteFile', config.autoDeleteFile, { 'config-display-id': 'config-auto-delete-file-second' }), + ), + SettingItem( + '自动删除文件时间', + '单位为秒', + '
', + 'config-auto-delete-file-second', config.autoDeleteFile + ), + ]), + '
', + ].join(''), "text/html"); - function createWsHostEleStr (host: string) { - const eleStr = ` - -

反向websocket地址:

- - - ` - return eleStr - } - - let httpHostsEleStr = '' - for (const host of config.ob11.httpHosts) { - httpHostsEleStr += createHttpHostEleStr(host) - } - - let wsHostsEleStr = '' - for (const host of config.ob11.wsHosts) { - wsHostsEleStr += createWsHostEleStr(host) - } - - const html = ` -
- - - - ${llonebotError.ffmpegError} - - - ${llonebotError.otherError} - - - - - -
-
启用HTTP服务
-
- - - - HTTP监听端口 - - - -
-
启用HTTP事件上报
-
- - -
-
- -
-
- ${httpHostsEleStr} -
-
- -
-
启用正向Websocket协议
-
- - - - 正向Websocket监听端口 - - - - -
-
启用反向Websocket协议
-
- - -
-
- -
-
- ${wsHostsEleStr} -
-
- - Access Token - - - - - ffmpeg路径 - - - - - - - - - - -
- 消息上报数据类型 - 如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 OneBot v11 文档 -
- - 消息段 - CQ码 - - - -
-
获取文件使用base64编码
-
开启后，调用/get_image、/get_record时，获取不到url时添加一个base64字段
-
- - - -
-
debug模式
-
开启后上报消息添加raw字段附带原始消息
-
- - - -
-
上报自身发送消息
-
-
- - - -
-
日志
-
目录:${window.LiteLoader.plugins.LLOneBot.path.data}
-
- - - -
-
自动删除收到的文件
-
- 收到文件 - 秒后自动删除 -
-
- - - - -
- - ` - - const parser = new DOMParser() - const doc = parser.parseFromString(html, 'text/html') - - const getError = async () => { - const llonebotError = await window.llonebot.getError() - console.log(llonebotError) - const llonebotErrorEle = document.getElementById('llonebotError') - const ffmpegErrorEle = document.getElementById('ffmpegError') - const otherErrorEle = document.getElementById('otherError') - if (llonebotError.otherError || llonebotError.ffmpegError) { - llonebotErrorEle.style.display = '' - } else { - llonebotErrorEle.style.display = 'none' - } - if (llonebotError.ffmpegError) { - const errContentEle = doc.querySelector('#ffmpegError .err-content') - // const errContent = ffmpegErrorEle.getElementsByClassName("err-content")[0]; - errContentEle.textContent = llonebotError.ffmpegError; - (ffmpegErrorEle).style.display = '' - } else { - ffmpegErrorEle.style.display = '' - } - if (llonebotError.otherError) { - const errContentEle = doc.querySelector('#otherError .err-content') - errContentEle.textContent = llonebotError.otherError - otherErrorEle.style.display = '' - } else { - otherErrorEle.style.display = 'none' - } - } - - function addHostEle (type: string, initValue: string = '') { - let addressEle, hostItemsEle - if (type === 'ws') { - const addressDoc = parser.parseFromString(createWsHostEleStr(initValue), 'text/html') - addressEle = addressDoc.querySelector('setting-item') - hostItemsEle = document.getElementById('wsHostItems') - } else { - const addressDoc = parser.parseFromString(createHttpHostEleStr(initValue), 'text/html') - addressEle = addressDoc.querySelector('setting-item') - hostItemsEle = document.getElementById('httpHostItems') - } - - hostItemsEle.appendChild(addressEle) - } - - doc.getElementById('addHttpHost').addEventListener('click', () => { - addHostEle('http') - }) - doc.getElementById('addWsHost').addEventListener('click', () => { - addHostEle('ws') - }) - doc.getElementById('messagePostFormat').addEventListener('selected', (e: CustomEvent) => { - config.ob11.messagePostFormat = e.detail && !isEmpty(e.detail.value) ? e.detail.value : 'array' - window.llonebot.setConfig(config) - }) - - function switchClick (eleId: string, configKey: string, _config = null) { - if (!_config) { - _config = config - } - doc.getElementById(eleId)?.addEventListener('click', (e) => { - const switchEle = e.target as HTMLInputElement - if (_config[configKey]) { - _config[configKey] = false - switchEle.removeAttribute('is-active') - } else { - _config[configKey] = true - switchEle.setAttribute('is-active', '') - } - // 妈蛋，手动操作DOM越写越麻烦，要不用vue算了 - const keyClassMap = { - enableHttp: httpClass, - enableHttpPost: httpPostClass, - enableWs: wsClass, - enableWsReverse: reverseWSClass - } - for (const e of document.getElementsByClassName(keyClassMap[configKey])) { - (e as HTMLElement).style.display = _config[configKey] ? '' : 'none' - } - - window.llonebot.setConfig(config) - }) - } - - switchClick('http', 'enableHttp', config.ob11) - switchClick('httpPost', 'enableHttpPost', config.ob11) - switchClick('websocket', 'enableWs', config.ob11) - switchClick('websocketReverse', 'enableWsReverse', config.ob11) - switchClick('debug', 'debug') - switchClick('switchFileUrl', 'enableLocalFile2Url') - switchClick('reportSelfMessage', 'reportSelfMessage') - switchClick('log', 'log') - switchClick('autoDeleteFile', 'autoDeleteFile') - - doc.getElementById('save')?.addEventListener('click', - () => { - const httpPortEle: HTMLInputElement = document.getElementById('httpPort') as HTMLInputElement - const httpHostEles: HTMLCollectionOf = document.getElementsByClassName('httpHost') as HTMLCollectionOf - const wsPortEle: HTMLInputElement = document.getElementById('wsPort') as HTMLInputElement - const wsHostEles: HTMLCollectionOf = document.getElementsByClassName('wsHost') as HTMLCollectionOf - const tokenEle = document.getElementById('token') as HTMLInputElement - const ffmpegPathEle = document.getElementById('ffmpegPath') as HTMLInputElement - - // 获取端口和host - const httpPort = httpPortEle.value - const httpHosts: string[] = [] - - for (const hostEle of httpHostEles) { - const value = hostEle.value.trim() - value && httpHosts.push(value) - } - - const wsPort = wsPortEle.value - const token = tokenEle.value.trim() - const wsHosts: string[] = [] - - for (const hostEle of wsHostEles) { - const value = hostEle.value.trim() - value && wsHosts.push(value) - } - - config.ob11.httpPort = parseInt(httpPort) - config.ob11.httpHosts = httpHosts - config.ob11.wsPort = parseInt(wsPort) - config.ob11.wsHosts = wsHosts - config.token = token - config.ffmpeg = ffmpegPathEle.value.trim() - window.llonebot.setConfig(config) - setTimeout(() => { - getError().then() - }, 1000) - alert('保存成功') - }) - - doc.getElementById('selectFFMPEG')?.addEventListener('click', () => { - window.llonebot.selectFile().then(selectPath => { - if (selectPath) { - config.ffmpeg = (document.getElementById('ffmpegPath') as HTMLInputElement).value = selectPath - // window.llonebot.setConfig(config); - } - }) - }) - - // 自动保存删除文件延时时间 - const autoDeleteMinEle = doc.getElementById('autoDeleteMin') as HTMLInputElement - let st = null - autoDeleteMinEle.addEventListener('change', () => { - if (st) { - clearTimeout(st) - } - st = setTimeout(() => { - console.log('auto delete file minute change') - config.autoDeleteFileSecond = parseInt(autoDeleteMinEle.value) || 1 - window.llonebot.setConfig(config) - }, 1000) - }) - - doc.body.childNodes.forEach(node => { - view.appendChild(node) - }) + doc.body.childNodes.forEach(node => { + view.appendChild(node); + }); } function init () { diff --git a/src/renderer/style.css b/src/renderer/style.css new file mode 100644 index 0000000..421117b --- /dev/null +++ b/src/renderer/style.css @@ -0,0 +1,39 @@ +setting-item[is-hidden], +setting-item[is-hidden] + setting-divider { + display: none !important; +} + +setting-item .q-input { + height: 24px; + width: 100px; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + box-sizing: border-box; + position: relative; + background: var(--bg_bottom_light); + border: 1px solid var(--border_dark); +} + +setting-item .q-input .q-input__inner { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + box-sizing: border-box; + color: var(--text_primary); + font-family: inherit; + font-size: 12px; + height: 24px; + line-height: 24px; + width: 100%; + border: 1px solid transparent; + padding: 0px 8px; +} + +setting-item .q-input input[type=number].q-input__inner::-webkit-outer-spin-button, +setting-item .q-input input[type=number].q-input__inner::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +}