From ed476b77939ae5073d86021857735a51e87116f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?= Date: Sun, 5 May 2024 12:43:32 +0800 Subject: [PATCH 1/5] fix --- static/index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 static/index.html diff --git a/static/index.html b/static/index.html new file mode 100644 index 00000000..8cd223a1 --- /dev/null +++ b/static/index.html @@ -0,0 +1,11 @@ + + + + + + NapCat-WebUi + + + + + \ No newline at end of file From 193b0ad0f009066d846d923aa8ed2a2e40c5aa90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?= Date: Sun, 5 May 2024 12:57:32 +0800 Subject: [PATCH 2/5] feat: webui-1 --- static/components/NapCat.ts | 446 ++++++++++++++++++++++++++++++++++++ 1 file changed, 446 insertions(+) create mode 100644 static/components/NapCat.ts diff --git a/static/components/NapCat.ts b/static/components/NapCat.ts new file mode 100644 index 00000000..56927283 --- /dev/null +++ b/static/components/NapCat.ts @@ -0,0 +1,446 @@ +/// +import { CheckVersion } from '../common/types' +import { SettingButton, SettingItem, SettingList, SettingSwitch, SettingSelect } from './components' +// @ts-ignore +import StyleRaw from './style.css?raw' +import { iconSvg } from './icon' + +// 打开设置界面时触发 + +function aprilFoolsEgg(node: Element) { + let today = new Date() + if (today.getDate() === 1) { + console.log('超时空猫猫!!!') + node.querySelector('.name').innerHTML = 'ChronoCat' + } +} + +function initSideBar() { + document.querySelectorAll('.nav-item.liteloader').forEach((node) => { + if (node.textContent.startsWith('LLOneBot')) { + aprilFoolsEgg(node) + let iconEle = node.querySelector('.q-icon') + iconEle.innerHTML = iconSvg + } + }) +} + +async function onSettingWindowCreated(view: Element) { + window.llonebot.log('setting window created') + initSideBar() + 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(false, config) + } + } + } + + const parser = new DOMParser() + const doc = parser.parseFromString( + [ + '
', + ``, + ` +
+ `, + SettingList([ + SettingItem( + '正在检查 LLOneBot 更新', + null, + SettingButton('请稍候', 'llonebot-update-button', 'secondary'), + ), + ]), + 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.enableHttpHeart', config.ob11.enableHttpHeart, { + 'control-display-id': 'config-ob11-enableHttpHeart', + }), + ), + SettingItem( + '启用 HTTP 事件上报', + null, + SettingSwitch('ob11.enableHttpPost', config.ob11.enableHttpPost, { + 'control-display-id': 'config-ob11-httpHosts', + }), + ), + `
+ +
+ HTTP 事件上报密钥 +
+
+ +
+ + +
+ HTTP 事件上报地址 +
+ 添加 + +
+
`, + SettingItem( + '启用正向 WebSocket 服务', + null, + SettingSwitch('ob11.enableWs', config.ob11.enableWs, { 'control-display-id': 'config-ob11-wsPort' }), + ), + SettingItem( + '正向 WebSocket 服务监听端口', + null, + `
`, + 'config-ob11-wsPort', + config.ob11.enableWs, + ), + SettingItem( + '启用反向 WebSocket 服务', + null, + SettingSwitch('ob11.enableWsReverse', config.ob11.enableWsReverse, { + 'control-display-id': 'config-ob11-wsHosts', + }), + ), + `
+ +
+ 反向 WebSocket 监听地址 +
+ 添加 + +
+
`, + SettingItem( + ' WebSocket 服务心跳间隔', + '控制每隔多久发送一个心跳包，单位为毫秒', + `
`, + ), + SettingItem( + 'Access token', + null, + `
`, + ), + SettingItem( + '新消息上报格式', + '如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 OneBot v11 文档', + SettingSelect( + [ + { text: '消息段', value: 'array' }, + { text: 'CQ码', value: 'string' }, + ], + 'ob11.messagePostFormat', + config.ob11.messagePostFormat, + ), + ), + SettingItem( + 'ffmpeg 路径，发送语音、视频需要，同时保证ffprobe和ffmpeg在一起', + ` 下载地址 , 路径:${ + !isEmpty(config.ffmpeg) ? config.ffmpeg : '未指定' + }`, + SettingButton('选择ffmpeg', 'config-ffmpeg-select'), + ), + SettingItem( + '音乐卡片签名地址', + null, + `
`, + 'config-musicSignUrl', + ), + SettingItem('', null, SettingButton('保存', 'config-ob11-save', 'primary')), + ]), + SettingList([ + SettingItem( + '戳一戳消息, 暂时只支持Windows版的LLOneBot', + `重启QQ后生效，如果导致QQ崩溃请勿开启此项, 群戳一戳只能收到群号`, + SettingSwitch('enablePoke', config.enablePoke), + ), + SettingItem( + '使用 Base64 编码获取文件', + '调用 /get_image、/get_record、/get_file 时，没有 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( + '自动删除文件时间', + '单位为秒', + `
`, + 'config-auto-delete-file-second', + config.autoDeleteFile, + ), + SettingItem('写入日志', `将日志文件写入插件的数据文件夹`, SettingSwitch('log', config.log)), + SettingItem( + '日志文件目录', + `${window.LiteLoader.plugins['LLOneBot'].path.data}/logs`, + 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')), + ]), + '
', + ].join(''), + 'text/html', + ) + + const showError = async () => { + await new Promise((res) => setTimeout(() => res(true), 1000)) + + const errDom = document.querySelector('#llonebot-error') || doc.querySelector('#llonebot-error') + const errCodeDom = errDom.querySelector('code') + const errMsg = await window.llonebot.getError() + + if (!errMsg) { + errDom.classList.remove('show') + } else { + errDom.classList.add('show') + } + errCodeDom.innerHTML = errMsg + } + showError().then() + + // 外链按钮 + 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('ob-setting-select[data-config-key]').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(false, config) + // window.location.reload(); + showError().then() + alert('保存成功') + }) + + doc.body.childNodes.forEach((node) => { + view.appendChild(node) + }) + // 更新逻辑 + async function checkVersionFunc(ResultVersion: CheckVersion) { + const titleDom = view.querySelector('#llonebot-update-title')! + const buttonDom = view.querySelector('#llonebot-update-button')! + + if (ResultVersion.version === '') { + titleDom.innerHTML = '检查更新失败' + buttonDom.innerHTML = '点击重试' + + buttonDom.addEventListener('click', async () => { + window.llonebot.checkVersion().then(checkVersionFunc) + }) + + return + } + if (!ResultVersion.result) { + titleDom.innerHTML = '当前已是最新版本 v' + ResultVersion.version + buttonDom.innerHTML = '无需更新' + } else { + titleDom.innerHTML = '已检测到最新版本 v' + ResultVersion.version + buttonDom.innerHTML = '点击更新' + buttonDom.dataset.type = 'primary' + + const update = async () => { + buttonDom.innerHTML = '正在更新中...' + const result = await window.llonebot.updateLLOneBot() + if (result) { + buttonDom.innerHTML = '更新完成，请重启' + } else { + buttonDom.innerHTML = '更新失败，前往仓库下载' + } + + buttonDom.removeEventListener('click', update) + } + buttonDom.addEventListener('click', update) + } + } + window.llonebot.checkVersion().then(checkVersionFunc) + window.addEventListener('beforeunload', (event) => { + if (JSON.stringify(ob11Config) === JSON.stringify(config.ob11)) return + config.ob11 = ob11Config + window.llonebot.setConfig(true, config) + }) +} + +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 } \ No newline at end of file From 2f325cfe266057e1cfb2d6d0a343ac0f68ebb6f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?= Date: Sun, 5 May 2024 13:01:23 +0800 Subject: [PATCH 3/5] feat:webui-2 --- static/components/NapCat.ts | 13 +---- static/components/SettingButton.ts | 3 ++ static/components/SettingItem.ts | 15 ++++++ static/components/SettingList.ts | 14 +++++ static/components/SettingOption.ts | 3 ++ static/components/SettingSelect.ts | 84 ++++++++++++++++++++++++++++++ static/components/SettingSwitch.ts | 8 +++ 7 files changed, 128 insertions(+), 12 deletions(-) create mode 100644 static/components/SettingButton.ts create mode 100644 static/components/SettingItem.ts create mode 100644 static/components/SettingList.ts create mode 100644 static/components/SettingOption.ts create mode 100644 static/components/SettingSelect.ts create mode 100644 static/components/SettingSwitch.ts diff --git a/static/components/NapCat.ts b/static/components/NapCat.ts index 56927283..4d715a4b 100644 --- a/static/components/NapCat.ts +++ b/static/components/NapCat.ts @@ -1,20 +1,9 @@ -/// -import { CheckVersion } from '../common/types' -import { SettingButton, SettingItem, SettingList, SettingSwitch, SettingSelect } from './components' -// @ts-ignore + import StyleRaw from './style.css?raw' -import { iconSvg } from './icon' // 打开设置界面时触发 function aprilFoolsEgg(node: Element) { - let today = new Date() - if (today.getDate() === 1) { - console.log('超时空猫猫!!!') - node.querySelector('.name').innerHTML = 'ChronoCat' - } -} - function initSideBar() { document.querySelectorAll('.nav-item.liteloader').forEach((node) => { if (node.textContent.startsWith('LLOneBot')) { diff --git a/static/components/SettingButton.ts b/static/components/SettingButton.ts new file mode 100644 index 00000000..201ffc88 --- /dev/null +++ b/static/components/SettingButton.ts @@ -0,0 +1,3 @@ +export const SettingButton = (text: string, id?: string, type: string = 'secondary') => { + return `${text}` + } \ No newline at end of file diff --git a/static/components/SettingItem.ts b/static/components/SettingItem.ts new file mode 100644 index 00000000..fe2208f7 --- /dev/null +++ b/static/components/SettingItem.ts @@ -0,0 +1,15 @@ +export const SettingItem = ( + title: string, + subtitle?: string, + action?: string, + id?: string, + visible: boolean = true, + ) => { + return ` +
+ ${title} + ${subtitle ? `${subtitle}` : ''} +
+ ${action ? `
${action}
` : ''} + ` + } \ No newline at end of file diff --git a/static/components/SettingList.ts b/static/components/SettingList.ts new file mode 100644 index 00000000..35c09664 --- /dev/null +++ b/static/components/SettingList.ts @@ -0,0 +1,14 @@ +export const SettingList = ( + items: string[], + title?: string, + isCollapsible: boolean = false, + direction: string = 'column', + ) => { + return ` + + + ${items.join('')} + + + ` + } \ No newline at end of file diff --git a/static/components/SettingOption.ts b/static/components/SettingOption.ts new file mode 100644 index 00000000..a5a6fc03 --- /dev/null +++ b/static/components/SettingOption.ts @@ -0,0 +1,3 @@ +export const SettingOption = (text: string, value?: string, isSelected: boolean = false) => { + return `${text}` + } \ No newline at end of file diff --git a/static/components/SettingSelect.ts b/static/components/SettingSelect.ts new file mode 100644 index 00000000..e5627517 --- /dev/null +++ b/static/components/SettingSelect.ts @@ -0,0 +1,84 @@ +import { SettingOption } from './option' + +interface MouseEventExtend extends MouseEvent { + target: HTMLElement +} + +// +const SelectTemplate = document.createElement('template') +SelectTemplate.innerHTML = ` +
+
+ + + + +
+ +
` + +window.customElements.define( + 'ob-setting-select', + class extends HTMLElement { + readonly _button: HTMLDivElement + readonly _text: HTMLInputElement + readonly _context: HTMLUListElement + + constructor() { + super() + + this.attachShadow({ mode: 'open' }) + this.shadowRoot.append(SelectTemplate.content.cloneNode(true)) + + this._button = this.shadowRoot.querySelector('div[part="button"]') + this._text = this.shadowRoot.querySelector('input[part="current-text"]') + this._context = this.shadowRoot.querySelector('ul[part="option-list"]') + + const buttonClick = () => { + const isHidden = this._context.classList.toggle('hidden') + window[`${isHidden ? 'remove' : 'add'}EventListener`]('pointerdown', windowPointerDown) + } + + const windowPointerDown = ({ target }) => { + if (!this.contains(target)) buttonClick() + } + + this._button.addEventListener('click', buttonClick) + this._context.addEventListener('click', ({ target }: MouseEventExtend) => { + if (target.tagName !== 'SETTING-OPTION') return + buttonClick() + + if (target.hasAttribute('is-selected')) return + + this.querySelectorAll('setting-option[is-selected]').forEach((dom) => dom.toggleAttribute('is-selected')) + target.toggleAttribute('is-selected') + + this._text.value = target.textContent + this.dispatchEvent( + new CustomEvent('selected', { + bubbles: true, + composed: true, + detail: { + name: target.textContent, + value: target.dataset.value, + }, + }), + ) + }) + + this._text.value = this.querySelector('setting-option[is-selected]').textContent + } + }, +) + +export const SettingSelect = (items: Array<{ text: string; value: string }>, configKey?: string, configValue?: any) => { + return ` + ${items + .map((e, i) => { + return SettingOption(e.text, e.value, configKey && configValue ? configValue === e.value : i === 0) + }) + .join('')} +` +} \ No newline at end of file diff --git a/static/components/SettingSwitch.ts b/static/components/SettingSwitch.ts new file mode 100644 index 00000000..35936d0f --- /dev/null +++ b/static/components/SettingSwitch.ts @@ -0,0 +1,8 @@ +export const SettingSwitch = (configKey?: string, isActive: boolean = false, extraData?: Record) => { + return ` `data-${key}="${extraData[key]}"`) : ''} + > + ` + } \ No newline at end of file From b6a1242bac0a1e34844f273080137ff06bf99674 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?= Date: Sun, 5 May 2024 13:03:56 +0800 Subject: [PATCH 4/5] feat:webui-3 --- static/assets/color.css | 679 ++++++++++++++++++++++++++++++++ static/assets/webcomponents.css | 350 ++++++++++++++++ static/index.html | 17 +- 3 files changed, 1044 insertions(+), 2 deletions(-) create mode 100644 static/assets/color.css create mode 100644 static/assets/webcomponents.css diff --git a/static/assets/color.css b/static/assets/color.css new file mode 100644 index 00000000..0f77d861 --- /dev/null +++ b/static/assets/color.css @@ -0,0 +1,679 @@ +:root { + --font-bold: 400; + --font_size_1: 10px; + --font_size_2: 12px; + --font_size_3: 14px; + --font_size_4: 16px; + --font_size_5: 18px; + --avatar_size_1: 20px; + --avatar_size_2: 32px; + --avatar_size_3: 40px; + --font_size_main_1: 12px; + --font_size_main_2: 14px; + --line_height_1: 14px; + --line_height_2: 16px; + --line_height_3: 20px; + --line_height_4: 22px; + --line_height_5: 24px; + --line_height_main_1: 18px; + --line_height_main_2: 22px; + + --shadow_card_rest: 0px 2px 4px rgba(0, 0, 0, 0.12); + --shadow_tooltip: 0px 4px 8px rgba(0, 0, 0, 0.26); + --shadow_flyout: 0px 8px 16px rgba(0, 0, 0, 0.14); + --shadow_dialog: 0px 30px 60px rgba(0, 0, 0, 0.36) 0 2px 20px rgba(0, 0, 0, 0.37); + + --blend_brightness_white_004: 1.04; + --blend_brightness_white_008: 1.08; + --blend_brightness_white_010: 1.10; + --blend_brightness_white_016: 1.16; + --blend_brightness_white_020: 1.20; + --blend_brightness_black_004: 0.96; + --blend_brightness_black_008: 0.92; + --blend_brightness_black_010: 0.90; + --blend_brightness_black_016: 0.84; + --blend_brightness_black_020: 0.80; + --blend_white_004: rgba(255, 255, 255, 0.04); + --blend_white_008: rgba(255, 255, 255, 0.08); + --blend_white_010: rgba(255, 255, 255, 0.10); + --blend_white_016: rgba(255, 255, 255, 0.16); + --blend_white_020: rgba(255, 255, 255, 0.20); + --blend_black_004: rgba(0, 0, 0, 0.04); + --blend_black_008: rgba(0, 0, 0, 0.08); + --blend_black_010: rgba(0, 0, 0, 0.10); + --blend_black_016: rgba(0, 0, 0, 0.16); + --blend_black_020: rgba(0, 0, 0, 0.20); + --blend_transparent: rgba(0, 0, 0, 0); + + --el-color-white: #fff; + --el-color-black: #000; + --el-color-primary: #409eff; + --el-color-primary-rgb: 64,158,255; + --el-color-success-rgb: 103,194,58; + --el-color-warning-rgb: 230,162,60; + --el-color-danger-rgb: 245,108,108; + --el-color-error-rgb: 245,108,108; + --el-color-info-rgb: 144,147,153; + --el-color-primary-light-1: #53a8ff; + --el-color-primary-light-2: #66b1ff; + --el-color-primary-light-3: #79bbff; + --el-color-primary-light-4: #8cc5ff; + --el-color-primary-light-5: #a0cfff; + --el-color-primary-light-6: #b3d8ff; + --el-color-primary-light-7: #c6e2ff; + --el-color-primary-light-8: #d9ecff; + --el-color-primary-light-9: #ecf5ff; + --el-color-primary-dark-2: #337ecc; + --el-color-success: #67c23a; + --el-color-success-light-3: #95d475; + --el-color-success-light-5: #b3e19d; + --el-color-success-light-7: #d1edc4; + --el-color-success-light-8: #e1f3d8; + --el-color-success-light-9: #f0f9eb; + --el-color-success-dark-2: #529b2e; + --el-color-warning: #e6a23c; + --el-color-warning-light-3: #eebe77; + --el-color-warning-light-5: #f3d19e; + --el-color-warning-light-7: #f8e3c5; + --el-color-warning-light-8: #faecd8; + --el-color-warning-light-9: #fdf6ec; + --el-color-warning-dark-2: #b88230; + --el-color-danger: #f56c6c; + --el-color-danger-light-3: #f89898; + --el-color-danger-light-5: #fab6b6; + --el-color-danger-light-7: #fcd3d3; + --el-color-danger-light-8: #fde2e2; + --el-color-danger-light-9: #fef0f0; + --el-color-danger-dark-2: #c45656; + --el-color-error: #f56c6c; + --el-color-error-light-3: #f89898; + --el-color-error-light-5: #fab6b6; + --el-color-error-light-7: #fcd3d3; + --el-color-error-light-8: #fde2e2; + --el-color-error-light-9: #fef0f0; + --el-color-error-dark-2: #c45656; + --el-color-info: #909399; + --el-color-info-light-3: #b1b3b8; + --el-color-info-light-5: #c8c9cc; + --el-color-info-light-7: #dedfe0; + --el-color-info-light-8: #e9e9eb; + --el-color-info-light-9: #f4f4f5; + --el-color-info-dark-2: #73767a; + --el-bg-color: #fff; + --el-bg-color-page: #fff; + --el-bg-color-overlay: #fff; + --el-text-color-primary: #303133; + --el-text-color-regular: #606266; + --el-text-color-secondary: #909399; + --el-text-color-placeholder: #a8abb2; + --el-text-color-disabled: #c0c4cc; + --el-border-color: #dcdfe6; + --el-border-color-light: #e4e7ed; + --el-border-color-lighter: #ebeef5; + --el-border-color-extra-light: #f2f6fc; + --el-border-color-dark: #d4d7de; + --el-border-color-darker: #cdd0d6; + --el-fill-color: #f0f2f5; + --el-fill-color-light: #f5f7fa; + --el-fill-color-lighter: #fafafa; + --el-fill-color-extra-light: #fafcff; + --el-fill-color-dark: #ebedf0; + --el-fill-color-darker: #e6e8eb; + --el-fill-color-blank: #fff; + --el-border-radius-base: 4px; + --el-border-radius-small: 2px; + --el-border-radius-round: 20px; + --el-border-radius-circle: 100%; + --el-font-size-extra-large: 20px; + --el-font-size-large: 18px; + --el-font-size-medium: 16px; + --el-font-size-base: 14px; + --el-font-size-small: 13px; + --el-font-size-extra-small: 12px; + --el-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; + --el-box-shadow: 0px 12px 32px 4px rgba(0,0,0,.04),0px 8px 20px rgba(0,0,0,.08); + --el-box-shadow-light: 0px 0px 12px rgba(0,0,0,.12); + --el-box-shadow-lighter: 0px 0px 6px rgba(0,0,0,.12); + --el-box-shadow-dark: 0px 16px 48px 16px rgba(0,0,0,.08),0px 12px 32px rgba(0,0,0,.12),0px 8px 16px -8px rgba(0,0,0,.16); + --el-disabled-bg-color: var(--el-fill-color-light); + --el-disabled-text-color: var(--el-text-color-placeholder); + --el-disabled-border-color: var(--el-border-color-light); + --el-index-normal: 1; + --el-index-top: 1000; + --el-index-popper: 2000; + --el-overlay-color: rgba(0,0,0,.8); + --el-overlay-color-light: rgba(0,0,0,.7); + --el-overlay-color-lighter: rgba(0,0,0,.5); + --el-mask-color: hsla(0,0%,100%,.9); + --el-mask-color-extra-light: hsla(0,0%,100%,.3); + --el-border-width: 1px; + --el-border-style: solid; + --el-border-color-hover: var(--el-text-color-disabled); + --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color); + --el-svg-monochrome-grey: var(--el-border-color); + --el-font-weight-primary: 500; + --el-font-line-height-primary: 24px; + --el-transition-duration: 0.3s; + --el-transition-duration-fast: 0.2s; + --el-transition-function-ease-in-out-bezier: cubic-bezier(0.645,0.045,0.355,1); + --el-transition-function-fast-bezier: cubic-bezier(0.23,1,0.32,1); + --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier); + --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier); + --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier); + --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear; + --el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier); + --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier); + --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier); + + --nt_brand_standard_2_overlay_hover_brand_2_mix: #008debff; + --nt_brand_standard_2_overlay_pressed_brand_2_mix: #0080d6ff; + --nt_feedback_error_2_overlay_hover_brand_2_mix: #e4462cff; + --nt_feedback_error_2_overlay_pressed_brand_2_mix: #cf4028ff; + --nt_icon_white_2_overlay_hover_2_mix: #f5f5f5ff; + --nt_icon_white_2_overlay_pressed_2_mix: #e0e0e0ff; + --nt_bg_top_light_2_overlay_hover_2_mix: #f5f5f5ff; + --nt_bg_top_light_2_overlay_pressed_2_mix: #e0e0e0ff; + --nt_icon_secondary_02_2_0_2_alpha: rgba(204, 204, 204, 0); + --nt_icon_secondary_02_2_70_2_alpha: rgba(204, 204, 204, 0.7); + --nt_text_link_2_50_2_alpha: rgba(45, 119, 229, 0.5); + --nt_bubble_host_2_overlay_pressed_brand_2_mix: #0080d6ff; + --nt_bg_white_2_overlay_pressed_brand_2_mix: #d6d6d6ff; + --nt_bg_white_2_overlay_hover_2_mix: #f5f5f5ff; + --nt_bg_white_2_overlay_pressed_2_mix: #e0e0e0ff; + --nt_fg_white_2_overlay_hover_2_mix: #f5f5f5ff; + --nt_fg_white_2_overlay_pressed_2_mix: #e0e0e0ff; + --nt_icon_red_2_overlay_hover_2_mix: #f5314fff; + --nt_icon_red_2_overlay_pressed_2_mix: #e02d48ff; + --nt_fg_grey_standard_2_overlay_hover_2_mix: #0000003b; + --nt_fg_grey_standard_2_overlay_pressed_2_mix: #0000004c; + --nt_bubble_guest_2_overlay_pressed_2_mix: #e0e0e0ff; + --nt_icon_primary_2_20_2_alpha: rgba(0, 0, 0, 0.2); + --nt_bg_grey_standard_2_95_2_alpha: rgba(242, 242, 242, 0.95); + --nt_tag_red_2_20_2_alpha: rgba(255, 134, 46, 0.2); + --nt_tag_red_2_25_2_alpha: rgba(255, 134, 46, 0.25); + --nt_tag_blue_2_20_2_alpha: rgba(0, 153, 255, 0.2); + --nt_tag_blue_2_25_2_alpha: rgba(0, 153, 255, 0.25); + --nt_tag_blue_2_10_2_alpha: rgba(0, 153, 255, 0.1); + --nt_brand_standard_2_20_2_alpha: rgba(0, 153, 255, 0.2); + --nt_feedback_error_2_20_2_alpha: rgba(247, 76, 48, 0.2); + --nt_text_white_2_60_2_alpha: rgba(255, 255, 255, 0.6); + --nt_bg_white_2_70_2_alpha: rgba(255, 255, 255, 0.7); + --nt_bg_white_2_90_2_alpha: rgba(255, 255, 255, 0.9); + --nt_bg_white_2_97_2_alpha: rgba(255, 255, 255, 0.97); + --nt_bg_white_2_40_2_alpha: rgba(255, 255, 255, 0.4); + --nt_bg_white_2_30_2_alpha: rgba(255, 255, 255, 0.3); + --nt_text_white_2_80_2_alpha: rgba(255, 255, 255, 0.8); + --nt_brand_standard_2_50_2_alpha: rgba(0, 153, 255, 0.5); + --nt_bg_nav_secondary_2_60_2_alpha: rgba(255, 255, 255, 0.6); + --nt_bg_nav_2_60_2_alpha: rgba(242, 242, 242, 0.6); + --nt_feedback_error_2_10_2_alpha: rgba(247, 76, 48, 0.1); + --nt_brand_standard_2_10_2_alpha: rgba(0, 153, 255, 0.1); + --nt_on_brand_primary_2_40_2_alpha: rgba(255, 255, 255, 0.4); + --nt_text_primary_2_72_2_alpha: rgba(0, 0, 0, 0.72); + --nt_text_white_2_72_2_alpha: rgba(255, 255, 255, 0.72); + + --border_secondary: 1px solid rgba(0, 0, 0, 0.0578); + --border_primary: 1px solid rgba(117, 117, 117, 0.4); + + --shadow_bg_top: 0px 4px 8px rgba(0, 0, 0, 0.14); + --shadow_bg_middle_secondary: 0px 8px 16px rgba(0, 0, 0, 0.14); + --shadow_bg_middle_primary: 0px 32px 64px rgba(0, 0, 0, 0.1876), 0px 2px 21px rgba(0, 0, 0, 0.1474); + --shadow_bg_bottom_inactive: 0px 16px 32px rgba(0, 0, 0, 0.1876), 0px 2px 10.67px rgba(0, 0, 0, 0.1474); + --shadow_bg_bottom_active: 0px 32px 64px rgba(0, 0, 0, 0.28), 0px 2px 21px rgba(0, 0, 0, 0.22); + + --brand_standard: #0099ffff; + --on_brand_primary: #ffffffff; + --on_brand_secondary: #ffffffff; + --text_primary: #000000ff; + --text_primary_light: #00000099; + --text_secondary_02: #ccccccff; + --text_white: #ffffffff; + --text_secondary_01: #999999ff; + --text_black: #000000ff; + --on_bg_text: #999999ff; + --text_link: #2d77e5ff; + --text_secondary: #00000080; + --text_tertiary: #0000004d; + --icon_primary: #000000ff; + --icon_secondary_01: #999999ff; + --icon_secondary_02: #ccccccff; + --icon_white: #ffffffff; + --icon_red: #ff3352ff; + --icon_black: #000000ff; + --icon_secondary: #00000066; + --icon_tertiary: #0000004d; + --feedback_success: #15d173ff; + --feedback_warning: #ffb300ff; + --feedback_error: #f74c30ff; + --bg_grey_standard: #f2f2f2ff; + --bg_white: #ffffffff; + --bg_list: #ffffffff; + --bg_aio_1: #f2f2f2ff; + --bg_aio_2: #f2f2f2ff; + --bg_aio_3: #f2f2f2ff; + --bg_aio_4: #f2f2f2ff; + --bg_nav: #f2f2f2ff; + --mac_bg_nav: #ffffff1a; + --bg_bottom_standard: #f2f2f2ff; + --bg_bottom_light: #ffffffff; + --bg_middle_standard: #f2f2f2ff; + --bg_middle_light: #ffffffff; + --bg_top_standard: #f2f2f2ff; + --bg_top_light: #ffffffff; + --bg_nav_secondary: #ffffffff; + --bubble_host: #0099ffff; + --bubble_guest: #ffffffff; + --bubble_host_text: #ffffff; + --bubble_guest_text: #000000ff; + --bubble_host_1: #0099ffff; + --bubble_host_2: #0099ffff; + --fg_grey_standard: #00000033; + --fg_white: #ffffffff; + --fg_grey_light: #0000000a; + --fill_standard_secondary: #0000000a; + --fill_standard_primary: #00000033; + --fill_light_primary: #ffffffff; + --fill_light_secondary: #ffffffff; + --divider_standard: #0000000a; + --divider_dark: #00000014; + --border_standard: #0000000a; + --border_dark: #00000014; + --overlay_hover: #0000000a; + --overlay_hover_brand: #00000014; + --overlay_pressed_brand: #00000029; + --overlay_active_brand: #0099ffff; + --overlay_top: #0000000f; + --overlay_mask_standard: #00000080; + --overlay_mask_dark: #00000099; + --overlay_pressed: #0000001f; + --overlay_active: #00000014; + --overlay_mask_aio: #00000000; + --blur_standard: #ffffffcc; + --blur_superlight: #ffffff1a; + --blur_middle_standard: #ffffffcc; + --blur_bottom_superlight: #ffffff1a; + --extend_blue: #eaf1ffff; + --svip_red: #ff4222ff; + --tag_sage_green_bg: #a3c4c633; + --tag_sage_green_text: #769698ff; + --tag_red_bg: #ff3f3233; + --tag_red_text: #f74c30ff; + --tag_orange_text: #ff8d40ff; + --tag_orange_bg: #ff862e33; + --tag_purple_text: #aa76f6ff; + --tag_purple_bg: #b27eff33; + --tag_blue_text: #0099ffff; + --tag_blue_bg: #0099ff33; + --tag_blue: #0099ff33; + --tag_red: #ff862e33; + --border_white: #ffffffff; + --border_secondary: #0000000f; + --border_primary: #75757566; + --mac_border_primary: #00000014; + --mac_border_secondary: #0000000a; + --host_bubble_bg_css_value: #0099ff; + --on_bubble_host_text: #ffffffff; + --brand_text: #0099ffff; + + --text-primary: #000; + --text-primary-light: #666; + --text-secondary-01: #999; + --text-secondary-02: #ccc; + --text-white: #fff; + --text-brand: #0099ff; + --text-link: #2d77e5; + --text-success: #12d173; + --text-warning: #ffb300; + --text-error: #ff5967; + --icon-primary: #000; + --icon-secondary-01: #999999; + --icon-secondary-02: #cccccc; + --icon-white: #fff; + --icon-brand: #0099ff; + --icon-success: #15d173; + --icon-warning: #ffb300; + --icon-error: #ff5967; + --button-primary-default: #0099ff; + --button-primary-hover: #4DB7FF; + --button-primary-pressed: #0089E5; + --button-primary-disable: #CCEBFF; + --button-secondary-default: #ccc; + --button-secondary-hover: #E5E5E5; + --button-secondary-pressed: #B2B2B2; + --button-secondary-disable: #F0F0F0; + --button-white-default: #FFFFFF; + --button-white-hover: #E5E5E5; + --button-white-pressed: #B2B2B2; + --button-white-disable: #ffffff4d; + --button-error-default: #FF5967; + --button-error-hover: #FF8B94; + --button-error-pressed: #E6505C; + --button-error-disable: #FFEEEF; + --bubble-host: #0099FF; + --bubble-guest: #EBEBEB; + --divider-standard: #E5E5E5; + --divider-light: #F5F5F5; + --divider-brand: #0099FF; + --background-01: #000; + --background-02: #E5E5E5; + --background-03: #F5F5F5; + --background-04: #FAFAFA; + --background-05: #FFFFFF; + --background-dialogue: #FFFFFF; + --hover-list: #F0F0F0; + --hover-icon: #EBEBEB; + --hover-link: #81ADEF; + --press-list: #E5E5E5; + --press-icon: #E5E5E5; + --press-link: #286BCE; + --badge-brand: #0099FF; + --badge-red: #FF5967; + --badge-grey: #CCCCCC; + --audio-hangup: #FF3350; + --gray-black: #000; + --gray-20: #333333; + --gray-40: #666666; + --gray-60: #999999; + --gray-80: #cccccc; + --gray-90: #e5e5e5; + --gray-96: #f5f5f5; + --gray-white: #ffffff; + --blue-dark: #0089E5; + --blue-standard: #0099FF; + --blue-light: #4DB7FF; + --blue-superlight: #E6F5FF; + --green-dark: #12BC67; + --green-standard: #15D173; + --green-light: #5BDE9D; + --green-superlight: #E8FAF1; + --yellow-dark: #E5A000; + --yellow-standard: #FFB300; + --yellow-light: #FFC94C; + --yellow-superlight: #FFF7E5; + --orange-dark: #E57E39; + --orange-standard: #FF8D40; + --orange-light: #FFAE78; + --orange-superlight: #FFF3EB; + --red-dark: #E6505C; + --red-standard: #FF5967; + --red-light: #FF8B94; + --red-superlight: #FFEEEF; + --pink-dark: #E55BA0; + --pink-standard: #FF66B3; + --pink-light: #FF93C9; + --pink-superlight: #FFEFF7; + --indigo-dark: #775CE6; + --indigo-standard: #8566FF; + --indigo-light: #A994FF; + --indigo-superlight: #F3F0FF; + --list-hover: rgba(243, 243, 243); + --list-pressed: rgba(226, 226, 226); + --background_01: #000000; + --background_02: #E6E6E6; + --background_03: #F5F5F5; + --background_04: #FAFAFA; + --background_05: #FFFFFF; + --background_dialogue: #FFFFFF; + --sidebar_win: #ebebeb; + --sidebar_mac: rgba(255,255,255,0.1); + + --nt_mix_tokens: nt_brand_standard_2_overlay_hover_brand_2_mix,nt_brand_standard_2_overlay_pressed_brand_2_mix,nt_feedback_error_2_overlay_hover_brand_2_mix,nt_feedback_error_2_overlay_pressed_brand_2_mix,nt_icon_white_2_overlay_hover_2_mix,nt_icon_white_2_overlay_pressed_2_mix,nt_bubble_host_2_overlay_pressed_brand_2_mix,nt_bg_white_2_overlay_pressed_brand_2_mix,nt_bg_white_2_overlay_hover_2_mix,nt_bg_white_2_overlay_pressed_2_mix,nt_fg_white_2_overlay_hover_2_mix,nt_fg_white_2_overlay_pressed_2_mix,nt_icon_red_2_overlay_hover_2_mix,nt_icon_red_2_overlay_pressed_2_mix,nt_fg_grey_standard_2_overlay_hover_2_mix,nt_fg_grey_standard_2_overlay_pressed_2_mix,nt_bubble_guest_2_overlay_pressed_2_mix,nt_icon_primary_2_20_2_alpha,nt_bg_grey_standard_2_95_2_alpha,nt_tag_red_2_20_2_alpha,nt_tag_red_2_25_2_alpha,nt_tag_blue_2_20_2_alpha,nt_tag_blue_2_25_2_alpha,nt_tag_blue_2_10_2_alpha,nt_tag_purple_2_20_2_alpha,nt_brand_standard_2_20_2_alpha,nt_tag_sage_green_2_20_2_alpha,nt_feedback_error_2_20_2_alpha,nt_text_white_2_60_2_alpha,nt_bg_white_2_70_2_alpha,nt_bg_white_2_90_2_alpha,nt_bg_white_2_97_2_alpha,nt_bg_white_2_40_2_alpha,nt_bg_white_2_30_2_alpha,nt_text_white_2_80_2_alpha,nt_brand_standard_2_50_2_alpha,nt_bg_nav_secondary_2_60_2_alpha,nt_bg_nav_2_60_2_alpha,nt_feedback_error_2_10_2_alpha,nt_brand_standard_2_10_2_alpha,nt_on_brand_primary_2_40_2_alpha,nt_text_primary_2_72_2_alpha,nt_text_white_2_72_2_alpha; + + color-scheme: light; + } + + .q-theme-tokens-dark { + --nt_brand_standard_2_overlay_hover_brand_2_mix: #1472d0ff; + --nt_brand_standard_2_overlay_pressed_brand_2_mix: #0056abff; + --nt_feedback_error_2_overlay_hover_brand_2_mix: #f85a40ff; + --nt_feedback_error_2_overlay_pressed_brand_2_mix: #cf4028ff; + --nt_icon_white_2_overlay_hover_2_mix: #ffffffff; + --nt_icon_white_2_overlay_pressed_2_mix: #d6d6d6ff; + --nt_bg_top_light_2_overlay_hover_2_mix: #404040ff; + --nt_bg_top_light_2_overlay_pressed_2_mix: #282828ff; + --nt_icon_secondary_02_2_0_2_alpha: rgba(77, 77, 77, 0); + --nt_icon_secondary_02_2_70_2_alpha: rgba(77, 77, 77, 0.7); + --nt_text_link_2_50_2_alpha: rgba(45, 119, 229, 0.5); + --nt_bubble_host_2_overlay_pressed_brand_2_mix: #202020ff; + --nt_bg_white_2_overlay_pressed_brand_2_mix: #202020ff; + --nt_bg_white_2_overlay_hover_2_mix: #373737ff; + --nt_bg_white_2_overlay_pressed_2_mix: #202020ff; + --nt_fg_white_2_overlay_hover_2_mix: #373737ff; + --nt_fg_white_2_overlay_pressed_2_mix: #202020ff; + --nt_icon_red_2_overlay_hover_2_mix: #ff4360ff; + --nt_icon_red_2_overlay_pressed_2_mix: #d62b45ff; + --nt_fg_grey_standard_2_overlay_hover_2_mix: #ffffff43; + --nt_fg_grey_standard_2_overlay_pressed_2_mix: #82828254; + --nt_bubble_guest_2_overlay_pressed_2_mix: #202020ff; + --nt_icon_primary_2_20_2_alpha: rgba(255, 255, 255, 0.2); + --nt_bg_grey_standard_2_95_2_alpha: rgba(26, 26, 26, 0.95); + --nt_tag_red_2_20_2_alpha: rgba(255, 134, 46, 0.2); + --nt_tag_red_2_25_2_alpha: rgba(255, 134, 46, 0.25); + --nt_tag_blue_2_20_2_alpha: rgba(0, 153, 255, 0.2); + --nt_tag_blue_2_25_2_alpha: rgba(0, 153, 255, 0.25); + --nt_tag_blue_2_10_2_alpha: rgba(0, 153, 255, 0.1); + --nt_brand_standard_2_20_2_alpha: rgba(0, 102, 204, 0.2); + --nt_feedback_error_2_20_2_alpha: rgba(247, 76, 48, 0.2); + --nt_text_white_2_60_2_alpha: rgba(255, 255, 255, 0.6); + --nt_bg_white_2_70_2_alpha: rgba(38, 38, 38, 0.7); + --nt_bg_white_2_90_2_alpha: rgba(38, 38, 38, 0.9); + --nt_bg_white_2_97_2_alpha: rgba(38, 38, 38, 0.97); + --nt_bg_white_2_40_2_alpha: rgba(38, 38, 38, 0.4); + --nt_bg_white_2_30_2_alpha: rgba(38, 38, 38, 0.3); + --nt_text_white_2_80_2_alpha: rgba(255, 255, 255, 0.8); + --nt_brand_standard_2_50_2_alpha: rgba(0, 102, 204, 0.5); + --nt_bg_nav_secondary_2_60_2_alpha: rgba(27, 27, 27, 0.6); + --nt_bg_nav_2_60_2_alpha: rgba(17, 17, 17, 0.6); + --nt_feedback_error_2_10_2_alpha: rgba(247, 76, 48, 0.1); + --nt_brand_standard_2_10_2_alpha: rgba(0, 102, 204, 0.1); + --nt_on_brand_primary_2_40_2_alpha: rgba(255, 255, 255, 0.4); + --nt_text_primary_2_72_2_alpha: rgba(255, 255, 255, 0.72); + --nt_text_white_2_72_2_alpha: rgba(255, 255, 255, 0.72); + + --border_secondary: 1px solid rgba(0, 0, 0, 0.2); + --border_primary: 1px solid rgba(117, 117, 117, 0.4); + + --shadow_bg_top: 0px 4px 8px rgba(0, 0, 0, 0.26); + --shadow_bg_middle_secondary: 0px 8px 16px rgba(0, 0, 0, 0.14); + --shadow_bg_middle_primary: 0px 32px 64px rgba(0, 0, 0, 0.37), 0px 2px 21px rgba(0, 0, 0, 0.37); + --shadow_bg_bottom_inactive: 0px 32px 64px rgba(0, 0, 0, 0.56), 0px 2px 21px rgba(0, 0, 0, 0.55); + --shadow_bg_bottom_active: 0px 32px 64px rgba(0, 0, 0, 0.56), 0px 2px 21px rgba(0, 0, 0, 0.55); + + --brand_standard: #0066ccff; + --on_brand_primary: #ffffffff; + --on_brand_secondary: #ffffffff; + --text_primary: #ffffffe6; + --text_primary_light: #ffffff99; + --text_secondary_02: #666666ff; + --text_white: #ffffffe6; + --text_secondary_01: #808080ff; + --text_black: #000000ff; + --on_bg_text: #808080ff; + --text_link: #2d77e5ff; + --text_secondary: #ffffff99; + --text_tertiary: #ffffff66; + --icon_primary: #ffffffb3; + --icon_secondary_01: #666666ff; + --icon_secondary_02: #4d4d4dff; + --icon_white: #ffffffff; + --icon_red: #ff3352ff; + --icon_black: #000000ff; + --icon_secondary: #ffffff80; + --icon_tertiary: #ffffff66; + --feedback_success: #15d173ff; + --feedback_warning: #ffb300ff; + --feedback_error: #f74c30ff; + --bg_grey_standard: #1a1a1aff; + --bg_white: #262626ff; + --bg_list: #1b1b1bff; + --bg_aio_1: #1a1a1aff; + --bg_aio_2: #1a1a1aff; + --bg_aio_3: #1a1a1aff; + --bg_aio_4: #1a1a1aff; + --bg_nav: #111111ff; + --mac_bg_nav: #0000001a; + --bg_bottom_standard: #111111ff; + --bg_bottom_light: #1b1b1bff; + --bg_middle_standard: #1b1b1bff; + --bg_middle_light: #262626ff; + --bg_top_standard: #262626ff; + --bg_top_light: #303030ff; + --bg_nav_secondary: #1b1b1bff; + --bubble_host: #262626ff; + --bubble_guest: #262626ff; + --bubble_host_text: #f2f2f2; + --bubble_guest_text: #f2f2f2ff; + --bubble_host_1: #262626ff; + --bubble_host_2: #262626ff; + --fg_grey_standard: #ffffff33; + --fg_white: #262626ff; + --fg_grey_light: #00000033; + --fill_standard_secondary: #ffffff0f; + --fill_standard_primary: #ffffff33; + --fill_light_primary: #262626ff; + --fill_light_secondary: #ffffff0f; + --divider_standard: #ffffff0a; + --divider_dark: #ffffff14; + --border_standard: #ffffff0f; + --border_dark: #ffffff14; + --overlay_hover: #ffffff14; + --overlay_hover_brand: #ffffff14; + --overlay_pressed_brand: #00000029; + --overlay_active_brand: #0066ccff; + --overlay_top: #ffffff0f; + --overlay_mask_standard: #00000080; + --overlay_mask_dark: #00000099; + --overlay_pressed: #00000029; + --overlay_active: #ffffff1f; + --overlay_mask_aio: #00000000; + --blur_standard: #000000cc; + --blur_superlight: #0000001a; + --blur_middle_standard: #262626cc; + --blur_bottom_superlight: #0000001a; + --extend_blue: #002f65ff; + --svip_red: #ff4222ff; + --tag_sage_green_bg: #a3c4c633; + --tag_sage_green_text: #769698ff; + --tag_red_bg: #ff3f3233; + --tag_red_text: #f74c30ff; + --tag_orange_text: #ff8d40ff; + --tag_orange_bg: #ff862e33; + --tag_purple_text: #aa76f6ff; + --tag_purple_bg: #b27eff33; + --tag_blue_text: #0066ccff; + --tag_blue_bg: #0099ff33; + --tag_blue: #0099ff40; + --tag_red: #ff862e33; + --border_white: #262626ff; + --border_secondary: #00000033; + --border_primary: #75757566; + --mac_border_primary: #ffffff14; + --mac_border_secondary: #ffffff0a; + --host_bubble_bg_css_value: #262626; + --on_bubble_host_text: #f2f2f2ff; + --brand_text: #0066ccff; + + --text-primary: #FFFFFF; + --text-primary-light: #CCCCCC; + --text-secondary-01: #999; + --text-secondary-02: #666666; + --text-white: #fff; + --text-brand: #0099ff; + --text-link: #2d77e5; + --text-success: #12d173; + --text-warning: #ffb300; + --text-error: #ff5967; + --icon-primary: #999999; + --icon-secondary-01: #999999; + --icon-secondary-02: #999999; + --icon-white: #fff; + --icon-brand: #0099ff; + --icon-success: #15d173; + --icon-warning: #ffb300; + --icon-error: #ff5967; + --button-primary-default: #0066CC; + --button-primary-hover: #19467F; + --button-primary-pressed: #0A1F33; + --button-primary-disable: #232323; + --button-secondary-default: #232323; + --button-secondary-hover: #1F1F1F; + --button-secondary-pressed: #1A1A1A; + --button-secondary-disable: #1A1A1A; + --button-white-default: #FFFFFF; + --button-white-hover: #FAFAFA; + --button-white-pressed: #F5F5F5; + --button-white-disable: #FFFFFF; + --button-error-default: #FF5967; + --button-error-hover: #FF8B94; + --button-error-pressed: #E6505C; + --button-error-disable: #FFEEEF; + --bubble-host: #262626; + --bubble-guest: #262626; + --divider-standard: #242424; + --divider-light: #4D4D4D; + --divider-brand: #0099FF; + --background-01: #FFFFFF; + --background-02: #242424; + --background-03: #181818; + --background-04: #1F1F1F; + --background-05: #000000; + --background-dialogue: #262626; + --hover-list: #292929; + --hover-icon: #333333; + --hover-link: #81ADEF; + --press-list: #383838; + --press-icon: #262626; + --press-link: #286BCE; + --badge-brand: #0099FF; + --badge-red: #FF5967; + --badge-grey: #4D4D4D; + --audio-hangup: #FF3350; + --gray-black: #000; + --gray-20: #333333; + --gray-40: #666666; + --gray-60: #999999; + --gray-80: #cccccc; + --gray-90: #e5e5e5; + --gray-96: #f5f5f5; + --gray-white: #ffffff; + --blue-dark: #0057BD; + --blue-standard: #0066CC; + --blue-light: #0072E4; + --blue-superlight: #E6F5FF; + --green-dark: #12BC67; + --green-standard: #15D173; + --green-light: #5BDE9D; + --green-superlight: #E8FAF1; + --yellow-dark: #E5A000; + --yellow-standard: #FFB300; + --yellow-light: #FFC94C; + --yellow-superlight: #FFF7E5; + --orange-dark: #E57E39; + --orange-standard: #FF8D40; + --orange-light: #FFAE78; + --orange-superlight: #FFF3EB; + --red-dark: #E6505C; + --red-standard: #FF5967; + --red-light: #FF8B94; + --red-superlight: #FFEEEF; + --pink-dark: #E55BA0; + --pink-standard: #FF66B3; + --pink-light: #FF93C9; + --pink-superlight: #FFEFF7; + --indigo-dark: #775CE6; + --indigo-standard: #8566FF; + --indigo-light: #A994FF; + --indigo-superlight: #F3F0FF; + --list-hover: rgba(71, 71, 71); + --list-pressed: rgba(28, 28, 28); + --background_01: #ffffff; + --background_02: #292929; + --background_03: #1A1A1A; + --background_04: #212121; + --background_05: #212121; + --background_dialogue: #292929; + --sidebar_win: rgba(0,0,0,0.8); + --sidebar_mac: rgba(0,0,0,0.1); + + color-scheme: dark; + } \ No newline at end of file diff --git a/static/assets/webcomponents.css b/static/assets/webcomponents.css new file mode 100644 index 00000000..ff7363c1 --- /dev/null +++ b/static/assets/webcomponents.css @@ -0,0 +1,350 @@ +*[is-disabled] { + opacity: 0.3; + -webkit-pointer-events: none; + -moz-pointer-events: none; + -ms-pointer-events: none; + -o-pointer-events: none; + pointer-events: none; + cursor: not-allowed; + } + + setting-section::before { + content: attr(data-title); + display: block; + margin: 0px 0px 8px 16px; + color: var(--text_primary); + font-weight: var(--font-bold); + font-size: min(var(--font_size_3), 18px); + line-height: min(var(--line_height_3), 24px); + } + + setting-panel { + display: block; + margin-bottom: 20px; + } + + setting-section:last-child setting-panel { + margin-bottom: 0; + } + + setting-list, + setting-list[data-direction="column"] { + display: flex; + background-color: var(--fill_light_primary); + border-radius: 8px; + flex-direction: column; + align-items: stretch; + justify-content: space-between; + } + + setting-list[data-direction="row"] { + padding: 16px 0; + flex-direction: row; + justify-content: space-around; + } + setting-list[data-direction="row"], + setting-list[data-direction="row"] * { + text-align: center; + } + + setting-item { + display: flex; + padding: 12px 16px; + background-color: var(--fill_light_primary); + font-size: min(var(--font_size_3),18px); + line-height: min(var(--line_height_3),24px); + border-radius: 8px; + align-items: center; + justify-content: space-between; + } + + setting-item > *:first-child { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: nowrap; + } + + setting-list[data-direction="row"] setting-item { + padding: 0; + margin: 0 10px; + flex: 1; + } + + setting-list[data-direction="row"] setting-item > *:first-child { + align-items: center; + flex: 1; + } + + setting-list[data-direction="row"] setting-item > *:first-child > * { + flex: 1; + } + + setting-list setting-divider, + setting-list[data-direction="column"] setting-divider { + display: block; + position: relative; + width: unset; + height: 1px; + margin: 0 16px; + background-color: var(--border_standard); + } + + setting-list[data-direction="row"] setting-divider { + width: 1px; + height: unset; + margin: 0; + } + + setting-text[data-type="secondary"] { + margin-top: 4px; + color: var(--text_secondary); + font-size: min(var(--font_size_2),16px); + line-height: min(var(--line_height_2),22px); + } + + setting-switch { + --transition-timing: cubic-bezier(0.38, 0, 0.24, 1); + + display: block; + position: relative; + width: 28px; + height: 16px; + background: var(--fill_standard_primary); + border-radius: 14px; + transition: background var(--transition-timing) .2s; + } + setting-switch::after { + content: ''; + display: block; + position: absolute; + top: 0px; + left: 0px; + margin: 3px; + width: 10px; + height: 10px; + background: var(--icon_white); + box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px; + border-radius: 5px; + transition: width var(--transition-timing) .2s, + left var(--transition-timing) .2s; + } + + setting-switch[is-active] { + background: var(--brand_standard); + } + setting-switch[is-active]::after { + left: calc(100% - 16px); + } + + setting-switch:hover { + background: var(--fill_standard_secondary); + } + setting-switch[is-active]:hover { + background: var(--nt_brand_standard_2_overlay_hover_brand_2_mix); + } + + setting-switch:active { + background: var(--nt_bg_white_2_overlay_pressed_brand_2_mix); + } + setting-switch[is-active]:active { + background: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix); + } + + setting-switch:active::after { + width: 12px; + } + setting-switch[is-active]:active::after { + left: calc(100% - 18px); + } + + setting-button, + setting-button[data-type="secondary"] { + position: relative; + display: inline-flex; + padding: 5px 11px; + min-width: 62px; + background-color: transparent; + color: var(--text_primary); + border-radius: 4px; + font-size: 12px; + line-height: 12px; + justify-content: center; + outline-color: initial; + outline-style: none; + outline-width: initial; + vertical-align: text-bottom; + border: 1px solid var(--fg_grey_standard); + align-items: center; + box-sizing: border-box; + } + + setting-button[data-type="primary"] { + background-color: var(--brand_standard); + color: var(--on_brand_primary); + border-color: var(--brand_standard); + } + + setting-button:hover, + setting-button[data-type="secondary"]:hover { + background-color: var(--overlay_hover); + } + + setting-button:active, + setting-button[data-type="secondary"]:active { + background-color: var(--overlay_pressed); + } + + setting-button[data-type="primary"]:hover { + background-color: var(--nt_brand_standard_2_overlay_hover_brand_2_mix); + border-color: var(--nt_brand_standard_2_overlay_hover_brand_2_mix); + } + + setting-button[data-type="primary"]:active { + background-color: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix); + border-color: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix); + } + + setting-select, + setting-select::part(parent), + setting-select::part(button) { + display: block; + position: relative; + height: 24px; + font-size: 12px; + line-height: 24px; + box-sizing: border-box; + } + + setting-select::part(button) { + display: flex; + padding: 0px 8px; + background-color: transparent; + border-radius: 4px; + border: 1px solid var(--border_dark); + z-index: 5; + cursor: default; + align-items: center; + flex-direction: row; + flex-wrap: nowrap; + } + + setting-select::part(current-text) { + display: block; + margin-right: 8px; + padding: 0px; + background: none; + background-color: transparent; + font-size: 12px; + color: var(--text_primary); + text-overflow: ellipsis; + border-radius: 0px; + border: none; + outline: none; + overflow: hidden; + appearance: none; + box-sizing: border-box; + cursor: default; + flex: 1; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + -webkit-pointer-events: none; + -moz-pointer-events: none; + -ms-pointer-events: none; + -o-pointer-events: none; + pointer-events: none; + } + + setting-select::part(button-arrow) { + position: relative; + display: block; + width: 16px; + height: 16px; + color: var(--icon_primary); + } + + setting-select::part(option-list) { + display: flex; + position: absolute; + top: 100%; + padding: 4px; + margin: 5px 0px; + width: 100%; + max-height: var(--q-contextmenu-max-height); + background-color: var(--blur_middle_standard); + background-clip: padding-box; + backdrop-filter: blur(8px); + font-size: 12px; + box-shadow: var(--shadow_bg_middle_secondary); + border: 1px solid var(--border_secondary); + border-radius: 4px; + box-sizing: border-box; + app-region: no-drag; + overflow-x: hidden; + overflow-y: auto; + list-style: none; + z-index: 999; + flex-direction: column; + align-items: stretch; + flex-wrap: nowrap; + justify-content: flex-start; + gap: 4px; + } + + setting-option, + setting-option::part(parent) { + display: block; + position: relative; + box-sizing: border-box; + } + + setting-option::part(parent) { + display: flex; + padding: 0px 8px; + color: var(--text_primary); + font-size: 12px; + line-height: 24px; + border-radius: 4px; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + justify-content: flex-start; + } + + setting-option:hover::part(parent) { + background-color: var(--overlay_hover); + } + + setting-option:active::part(parent) { + background-color: var(--overlay_pressed); + } + + setting-option[is-selected]::part(parent) { + background-color: var(--overlay_active); + } + + setting-option::part(text) { + margin-right: 8px; + overflow: hidden; + text-wrap: nowrap; + text-overflow: ellipsis; + flex: 1; + } + + setting-option::part(check-icon) { + display: none; + position: relative; + right: -4px; + width: 1em; + height: 1em; + color: var(--icon_primary); + flex-shrink: 0; + } + + setting-option[is-selected]::part(check-icon) { + display: block; + } \ No newline at end of file diff --git a/static/index.html b/static/index.html index 8cd223a1..c72a7e0d 100644 --- a/static/index.html +++ b/static/index.html @@ -3,9 +3,22 @@ - NapCat-WebUi + + + + + + + + + Plugin iframe - + + \ No newline at end of file From 77521e4627d7cfe5c8fcec193a66c9ceacd3b3ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?= Date: Sun, 5 May 2024 13:23:05 +0800 Subject: [PATCH 5/5] feat: webui-4 --- static/assets/NapCat.css | 0 static/components/NapCat.ts | 743 ++++++++++++++++++------------------ static/index.html | 3 - 3 files changed, 364 insertions(+), 382 deletions(-) create mode 100644 static/assets/NapCat.css diff --git a/static/assets/NapCat.css b/static/assets/NapCat.css new file mode 100644 index 00000000..e69de29b diff --git a/static/components/NapCat.ts b/static/components/NapCat.ts index 4d715a4b..ff2bfc55 100644 --- a/static/components/NapCat.ts +++ b/static/components/NapCat.ts @@ -1,92 +1,83 @@ +import { SettingList } from "./SettingList"; +import { SettingItem } from "./SettingItem"; +import { SettingButton } from "./SettingButton"; +import { SettingSwitch } from "./SettingSwitch"; +import { SettingSelect } from "./SettingSelect"; -import StyleRaw from './style.css?raw' - -// 打开设置界面时触发 - +// @ts-ignore 引入Css 能不能优雅点 神经这样写 +import StyleRaw from "../assets/NapCat.css"; function aprilFoolsEgg(node: Element) { -function initSideBar() { - document.querySelectorAll('.nav-item.liteloader').forEach((node) => { - if (node.textContent.startsWith('LLOneBot')) { - aprilFoolsEgg(node) - let iconEle = node.querySelector('.q-icon') - iconEle.innerHTML = iconSvg - } - }) -} + async function onSettingWindowCreated(view: Element) { + const isEmpty = (value: any) => value === undefined || value === null || value === '' + //@ts-ignore 等待替换为异步Http获取 带上Token + 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 } -async function onSettingWindowCreated(view: Element) { - window.llonebot.log('setting window created') - initSideBar() - 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(false, config) + if (!['heartInterval', 'token', 'ffmpeg'].includes(key)) { + //@ts-ignore 等待替换为异步Http设置 带上Token + window.llonebot.setConfig(false, config) + } } } - } - const parser = new DOMParser() - const doc = parser.parseFromString( - [ - '
', - ``, - ` + const parser = new DOMParser() + const doc = parser.parseFromString( + [ + '
', + ``, + `
`, - SettingList([ - SettingItem( - '正在检查 LLOneBot 更新', - null, - SettingButton('请稍候', 'llonebot-update-button', 'secondary'), - ), - ]), - 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.enableHttpHeart', config.ob11.enableHttpHeart, { - 'control-display-id': 'config-ob11-enableHttpHeart', - }), - ), - SettingItem( - '启用 HTTP 事件上报', - null, - SettingSwitch('ob11.enableHttpPost', config.ob11.enableHttpPost, { - 'control-display-id': 'config-ob11-httpHosts', - }), - ), - `
+ SettingList([ + SettingItem( + '正在检查 LLOneBot 更新', + null, + SettingButton('请稍候', 'llonebot-update-button', 'secondary'), + ), + ]), + 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.enableHttpHeart', config.ob11.enableHttpHeart, { + 'control-display-id': 'config-ob11-enableHttpHeart', + }), + ), + SettingItem( + '启用 HTTP 事件上报', + null, + SettingSwitch('ob11.enableHttpPost', config.ob11.enableHttpPost, { + 'control-display-id': 'config-ob11-httpHosts', + }), + ), + `
HTTP 事件上报密钥
- +
@@ -97,26 +88,26 @@ async function onSettingWindowCreated(view: Element) {
`, - SettingItem( - '启用正向 WebSocket 服务', - null, - SettingSwitch('ob11.enableWs', config.ob11.enableWs, { 'control-display-id': 'config-ob11-wsPort' }), - ), - SettingItem( - '正向 WebSocket 服务监听端口', - null, - `
`, - 'config-ob11-wsPort', - config.ob11.enableWs, - ), - SettingItem( - '启用反向 WebSocket 服务', - null, - SettingSwitch('ob11.enableWsReverse', config.ob11.enableWsReverse, { - 'control-display-id': 'config-ob11-wsHosts', - }), - ), - `
+ SettingItem( + '启用正向 WebSocket 服务', + null, + SettingSwitch('ob11.enableWs', config.ob11.enableWs, { 'control-display-id': 'config-ob11-wsPort' }), + ), + SettingItem( + '正向 WebSocket 服务监听端口', + null, + `
`, + 'config-ob11-wsPort', + config.ob11.enableWs, + ), + SettingItem( + '启用反向 WebSocket 服务', + null, + SettingSwitch('ob11.enableWsReverse', config.ob11.enableWsReverse, { + 'control-display-id': 'config-ob11-wsHosts', + }), + ), + `
反向 WebSocket 监听地址 @@ -125,311 +116,305 @@ async function onSettingWindowCreated(view: Element) {
`, - SettingItem( - ' WebSocket 服务心跳间隔', - '控制每隔多久发送一个心跳包，单位为毫秒', - `
`, - ), - SettingItem( - 'Access token', - null, - `
`, - ), - SettingItem( - '新消息上报格式', - '如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 OneBot v11 文档', - SettingSelect( - [ - { text: '消息段', value: 'array' }, - { text: 'CQ码', value: 'string' }, - ], - 'ob11.messagePostFormat', - config.ob11.messagePostFormat, + SettingItem( + ' WebSocket 服务心跳间隔', + '控制每隔多久发送一个心跳包，单位为毫秒', + `
`, ), - ), - SettingItem( - 'ffmpeg 路径，发送语音、视频需要，同时保证ffprobe和ffmpeg在一起', - ` 下载地址 , 路径:${ - !isEmpty(config.ffmpeg) ? config.ffmpeg : '未指定' - }`, - SettingButton('选择ffmpeg', 'config-ffmpeg-select'), - ), - SettingItem( - '音乐卡片签名地址', - null, - `
`, - 'config-musicSignUrl', - ), - SettingItem('', null, SettingButton('保存', 'config-ob11-save', 'primary')), - ]), - SettingList([ - SettingItem( - '戳一戳消息, 暂时只支持Windows版的LLOneBot', - `重启QQ后生效，如果导致QQ崩溃请勿开启此项, 群戳一戳只能收到群号`, - SettingSwitch('enablePoke', config.enablePoke), - ), - SettingItem( - '使用 Base64 编码获取文件', - '调用 /get_image、/get_record、/get_file 时，没有 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( - '自动删除文件时间', - '单位为秒', - `
`, - 'config-auto-delete-file-second', - config.autoDeleteFile, - ), - SettingItem('写入日志', `将日志文件写入插件的数据文件夹`, SettingSwitch('log', config.log)), - SettingItem( - '日志文件目录', - `${window.LiteLoader.plugins['LLOneBot'].path.data}/logs`, - 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')), - ]), - '
', - ].join(''), - 'text/html', - ) - - const showError = async () => { - await new Promise((res) => setTimeout(() => res(true), 1000)) - - const errDom = document.querySelector('#llonebot-error') || doc.querySelector('#llonebot-error') - const errCodeDom = errDom.querySelector('code') - const errMsg = await window.llonebot.getError() - - if (!errMsg) { - errDom.classList.remove('show') - } else { - errDom.classList.add('show') - } - errCodeDom.innerHTML = errMsg - } - showError().then() - - // 外链按钮 - 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' }), + SettingItem( + 'Access token', + null, + `
`, + ), + SettingItem( + '新消息上报格式', + '如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 OneBot v11 文档', + SettingSelect( + [ + { text: '消息段', value: 'array' }, + { text: 'CQ码', value: 'string' }, + ], + 'ob11.messagePostFormat', + config.ob11.messagePostFormat, + ), + ), + SettingItem( + 'ffmpeg 路径，发送语音、视频需要，同时保证ffprobe和ffmpeg在一起', + ` 下载地址 , 路径:${!isEmpty(config.ffmpeg) ? config.ffmpeg : '未指定' + }`, + SettingButton('选择ffmpeg', 'config-ffmpeg-select'), + ), + SettingItem( + '音乐卡片签名地址', + null, + `
`, + 'config-musicSignUrl', + ), + SettingItem('', null, SettingButton('保存', 'config-ob11-save', 'primary')), + ]), + SettingList([ + SettingItem( + '戳一戳消息, 暂时只支持Windows版的LLOneBot', + `重启QQ后生效，如果导致QQ崩溃请勿开启此项, 群戳一戳只能收到群号`, + SettingSwitch('enablePoke', config.enablePoke), + ), + SettingItem( + '使用 Base64 编码获取文件', + '调用 /get_image、/get_record、/get_file 时，没有 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( + '自动删除文件时间', + '单位为秒', + `
`, + 'config-auto-delete-file-second', + config.autoDeleteFile, + ), + SettingItem('写入日志', `将日志文件写入插件的数据文件夹`, SettingSwitch('log', config.log)), + SettingItem( + '日志文件目录', + `${window.LiteLoader.plugins['LLOneBot'].path.data}/logs`, + SettingButton('打开', 'config-open-log-path'), + ), + ]), + SettingList([ + SettingItem('GitHub 仓库', `https://github.com/`, SettingButton('点个星星', 'open-github')), + SettingItem('NapCat 文档', `https://`, SettingButton('看看文档', 'open-docs')), + SettingItem('Telegram 群', `https://t.me/+nLZEnpne-pQ1OWFl`, SettingButton('进去逛逛', 'open-telegram')), + SettingItem('QQ 群', `545402644`, SettingButton('我要进去', 'open-qq-group')), + ]), + '
', + ].join(''), + 'text/html', ) - 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 + const showError = async () => { + await new Promise((res) => setTimeout(() => res(true), 1000)) + + const errDom = document.querySelector('#llonebot-error') || doc.querySelector('#llonebot-error') + const errCodeDom = errDom.querySelector('code') + const errMsg = await window.llonebot.getError() + + if (!errMsg) { + errDom.classList.remove('show') + } else { + errDom.classList.add('show') } + errCodeDom.innerHTML = errMsg + } + showError().then() + + // 外链按钮 + doc.querySelector('#open-github')?.addEventListener('click', () => { + window.open("https://github.com/", '_blank'); }) - }) - - 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.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.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 + }) - // 输入框 - doc - .querySelectorAll('setting-item .q-input input.q-input__inner[data-config-key]') - .forEach((dom: HTMLInputElement) => { - dom.addEventListener('input', () => { - const Type = dom.getAttribute('type') + 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') === 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: Element) => { + dom.addEventListener('input', () => { + const Type = dom.getAttribute('type') + 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 + + setConfig(configKey, configValue) + }) + }) + + // 下拉框 + doc.querySelectorAll('ob-setting-select[data-config-key]').forEach((dom: HTMLElement) => { + dom.addEventListener('selected', (e: CustomEvent) => { const configKey = dom.dataset.configKey - const configValue = Type === 'number' ? (parseInt(dom.value) >= 1 ? parseInt(dom.value) : 1) : dom.value + const configValue = e.detail.value setConfig(configKey, configValue) }) }) - // 下拉框 - doc.querySelectorAll('ob-setting-select[data-config-key]').forEach((dom: HTMLElement) => { - dom.addEventListener('selected', (e: CustomEvent) => { - const configKey = dom.dataset.configKey - const configValue = e.detail.value + // 保存按钮 + doc.querySelector('#config-ob11-save')?.addEventListener('click', () => { + config.ob11 = ob11Config - setConfig(configKey, configValue) + window.llonebot.setConfig(false, config) + // window.location.reload(); + showError().then() + alert('保存成功') }) - }) - // 保存按钮 - doc.querySelector('#config-ob11-save').addEventListener('click', () => { - config.ob11 = ob11Config + doc.body.childNodes.forEach((node) => { + view.appendChild(node) + }) + // 更新逻辑 + async function checkVersionFunc(ResultVersion: CheckVersion) { + const titleDom = view.querySelector('#llonebot-update-title')! + const buttonDom = view.querySelector('#llonebot-update-button')! - window.llonebot.setConfig(false, config) - // window.location.reload(); - showError().then() - alert('保存成功') - }) + if (ResultVersion.version === '') { + titleDom.innerHTML = '检查更新失败' + buttonDom.innerHTML = '点击重试' - doc.body.childNodes.forEach((node) => { - view.appendChild(node) - }) - // 更新逻辑 - async function checkVersionFunc(ResultVersion: CheckVersion) { - const titleDom = view.querySelector('#llonebot-update-title')! - const buttonDom = view.querySelector('#llonebot-update-button')! + buttonDom.addEventListener('click', async () => { + window.llonebot.checkVersion().then(checkVersionFunc) + }) - if (ResultVersion.version === '') { - titleDom.innerHTML = '检查更新失败' - buttonDom.innerHTML = '点击重试' - - buttonDom.addEventListener('click', async () => { - window.llonebot.checkVersion().then(checkVersionFunc) - }) - - return - } - if (!ResultVersion.result) { - titleDom.innerHTML = '当前已是最新版本 v' + ResultVersion.version - buttonDom.innerHTML = '无需更新' - } else { - titleDom.innerHTML = '已检测到最新版本 v' + ResultVersion.version - buttonDom.innerHTML = '点击更新' - buttonDom.dataset.type = 'primary' - - const update = async () => { - buttonDom.innerHTML = '正在更新中...' - const result = await window.llonebot.updateLLOneBot() - if (result) { - buttonDom.innerHTML = '更新完成，请重启' - } else { - buttonDom.innerHTML = '更新失败，前往仓库下载' - } - - buttonDom.removeEventListener('click', update) + return } - buttonDom.addEventListener('click', update) + if (!ResultVersion.result) { + titleDom.innerHTML = '当前已是最新版本 v' + ResultVersion.version + buttonDom.innerHTML = '无需更新' + } else { + titleDom.innerHTML = '已检测到最新版本 v' + ResultVersion.version + buttonDom.innerHTML = '点击更新' + buttonDom.dataset.type = 'primary' + + const update = async () => { + buttonDom.innerHTML = '正在更新中...' + const result = await window.llonebot.updateLLOneBot() + if (result) { + buttonDom.innerHTML = '更新完成，请重启' + } else { + buttonDom.innerHTML = '更新失败，前往仓库下载' + } + + buttonDom.removeEventListener('click', update) + } + buttonDom.addEventListener('click', update) + } + } + window.llonebot.checkVersion().then(checkVersionFunc) + window.addEventListener('beforeunload', (event) => { + if (JSON.stringify(ob11Config) === JSON.stringify(config.ob11)) return + config.ob11 = ob11Config + window.llonebot.setConfig(true, config) + }) + } + + function init() { + const hash = location.hash + if (hash === '#/blank') { } } - window.llonebot.checkVersion().then(checkVersionFunc) - window.addEventListener('beforeunload', (event) => { - if (JSON.stringify(ob11Config) === JSON.stringify(config.ob11)) return - config.ob11 = ob11Config - window.llonebot.setConfig(true, config) - }) -} -function init() { - const hash = location.hash - if (hash === '#/blank') { + if (location.hash === '#/blank') { + ; (window as any).navigation.addEventListener('navigatesuccess', init, { once: true }) + } else { + init() } -} -if (location.hash === '#/blank') { - ;(window as any).navigation.addEventListener('navigatesuccess', init, { once: true }) -} else { - init() -} - -export { onSettingWindowCreated } \ No newline at end of file + export { onSettingWindowCreated } \ No newline at end of file diff --git a/static/index.html b/static/index.html index c72a7e0d..b31008ec 100644 --- a/static/index.html +++ b/static/index.html @@ -8,8 +8,6 @@ - - Plugin iframe @@ -20,5 +18,4 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) { } - \ No newline at end of file