mirror of
https://github.com/NapNeko/NapCatQQ.git
synced 2024-11-16 04:45:46 +00:00
feat: webui-4
This commit is contained in:
手瓜一十雪
parent
b6a1242bac
commit
77521e4627
0
static/assets/NapCat.css
Normal file
0
static/assets/NapCat.css
Normal file
@ -1,36 +1,28 @@
|
||||
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) {
|
||||
window.llonebot.log('setting window created')
|
||||
initSideBar()
|
||||
async function onSettingWindowCreated(view: Element) {
|
||||
const isEmpty = (value: any) => value === undefined || value === null || value === ''
|
||||
let config = await window.llonebot.getConfig()
|
||||
let ob11Config = { ...config.ob11 }
|
||||
//@ts-ignore 等待替换为异步Http获取 带上Token
|
||||
let config = await window.llonebot.getConfig();
|
||||
let ob11Config = { ...config.ob11 };
|
||||
const setConfig = (key: string, value: any) => {
|
||||
const configKey = key.split('.')
|
||||
|
||||
const configKey = key.split('.');
|
||||
if (key.indexOf('ob11') === 0) {
|
||||
if (configKey.length === 2) ob11Config[configKey[1]] = value
|
||||
else ob11Config[key] = value
|
||||
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 (configKey.length === 2) { config[configKey[0]][configKey[1]] = value }
|
||||
else { config[key] = value }
|
||||
|
||||
if (!['heartInterval', 'token', 'ffmpeg'].includes(key)) {
|
||||
//@ts-ignore 等待替换为异步Http设置 带上Token
|
||||
window.llonebot.setConfig(false, config)
|
||||
}
|
||||
}
|
||||
@ -84,8 +76,7 @@ async function onSettingWindowCreated(view: Element) {
|
||||
<setting-text>HTTP 事件上报密钥</setting-text>
|
||||
</div>
|
||||
<div class="q-input">
|
||||
<input id="config-ob11-httpSecret" class="q-input__inner" data-config-key="ob11.httpSecret" type="text" value="${
|
||||
config.ob11.httpSecret
|
||||
<input id="config-ob11-httpSecret" class="q-input__inner" data-config-key="ob11.httpSecret" type="text" value="${config.ob11.httpSecret
|
||||
}" placeholder="未设置" />
|
||||
</div>
|
||||
</setting-item>
|
||||
@ -149,8 +140,7 @@ async function onSettingWindowCreated(view: Element) {
|
||||
),
|
||||
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 : '未指定'
|
||||
` <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'),
|
||||
),
|
||||
@ -201,8 +191,8 @@ async function onSettingWindowCreated(view: Element) {
|
||||
),
|
||||
]),
|
||||
SettingList([
|
||||
SettingItem('GitHub 仓库', `https://github.com/LLOneBot/LLOneBot`, SettingButton('点个星星', 'open-github')),
|
||||
SettingItem('LLOneBot 文档', `https://llonebot.github.io/`, SettingButton('看看文档', 'open-docs')),
|
||||
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')),
|
||||
]),
|
||||
@ -228,17 +218,17 @@ async function onSettingWindowCreated(view: Element) {
|
||||
showError().then()
|
||||
|
||||
// 外链按钮
|
||||
doc.querySelector('#open-github').addEventListener('click', () => {
|
||||
window.LiteLoader.api.openExternal('https://github.com/LLOneBot/LLOneBot')
|
||||
doc.querySelector('#open-github')?.addEventListener('click', () => {
|
||||
window.open("https://github.com/", '_blank');
|
||||
})
|
||||
doc.querySelector('#open-telegram').addEventListener('click', () => {
|
||||
window.LiteLoader.api.openExternal('https://t.me/+nLZEnpne-pQ1OWFl')
|
||||
doc.querySelector('#open-telegram')?.addEventListener('click', () => {
|
||||
window.open('https://t.me/+nLZEnpne-pQ1OWFl')
|
||||
})
|
||||
doc.querySelector('#open-qq-group').addEventListener('click', () => {
|
||||
window.LiteLoader.api.openExternal('https://qm.qq.com/q/bDnHRG38aI')
|
||||
doc.querySelector('#open-qq-group')?.addEventListener('click', () => {
|
||||
window.open('https://qm.qq.com/q/bDnHRG38aI')
|
||||
})
|
||||
doc.querySelector('#open-docs').addEventListener('click', () => {
|
||||
window.LiteLoader.api.openExternal('https://llonebot.github.io/')
|
||||
doc.querySelector('#open-docs')?.addEventListener('click', () => {
|
||||
window.open('https://github.io/')
|
||||
})
|
||||
// 生成反向地址列表
|
||||
const buildHostListItem = (type: string, host: string, index: number, inputAttrs: any = {}) => {
|
||||
@ -283,46 +273,41 @@ async function onSettingWindowCreated(view: Element) {
|
||||
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 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)
|
||||
hostContainerDom?.appendChild(dom);
|
||||
})
|
||||
}
|
||||
initReverseHost('httpHosts', doc)
|
||||
initReverseHost('wsHosts', doc)
|
||||
initReverseHost('httpHosts', doc);
|
||||
initReverseHost('wsHosts', doc);
|
||||
|
||||
doc
|
||||
.querySelector('#config-ob11-httpHosts-add')
|
||||
.addEventListener('click', () =>
|
||||
?.addEventListener('click', () =>
|
||||
addReverseHost('httpHosts', document, { placeholder: '如：http://127.0.0.1:5140/onebot' }),
|
||||
)
|
||||
doc
|
||||
.querySelector('#config-ob11-wsHosts-add')
|
||||
.addEventListener('click', () =>
|
||||
?.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-ffmpeg-select')?.addEventListener('click', () => {
|
||||
//选择ffmpeg
|
||||
})
|
||||
|
||||
doc.querySelector('#config-open-log-path').addEventListener('click', () => {
|
||||
window.LiteLoader.api.openPath(window.LiteLoader.plugins['LLOneBot'].path.data)
|
||||
doc.querySelector('#config-open-log-path')?.addEventListener('click', () => {
|
||||
//打开日志
|
||||
})
|
||||
|
||||
// 开关
|
||||
doc.querySelectorAll('setting-switch[data-config-key]').forEach((dom: HTMLElement) => {
|
||||
doc.querySelectorAll('setting-switch[data-config-key]').forEach((dom: Element) => {
|
||||
dom.addEventListener('click', () => {
|
||||
const active = dom.getAttribute('is-active') === null
|
||||
|
||||
@ -333,8 +318,8 @@ async function onSettingWindowCreated(view: Element) {
|
||||
|
||||
if (!isEmpty(dom.dataset.controlDisplayId)) {
|
||||
const displayDom = document.querySelector(`#${dom.dataset.controlDisplayId}`)
|
||||
if (active) displayDom.removeAttribute('is-hidden')
|
||||
else displayDom.setAttribute('is-hidden', '')
|
||||
if (active) displayDom?.removeAttribute('is-hidden')
|
||||
else displayDom?.setAttribute('is-hidden', '')
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -342,11 +327,11 @@ async function onSettingWindowCreated(view: Element) {
|
||||
// 输入框
|
||||
doc
|
||||
.querySelectorAll('setting-item .q-input input.q-input__inner[data-config-key]')
|
||||
.forEach((dom: HTMLInputElement) => {
|
||||
.forEach((dom: Element) => {
|
||||
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
|
||||
const configValue = Type === 'number' ? (parseInt((dom as HTMLInputElement).value) >= 1 ? parseInt((dom as HTMLInputElement).value) : 1) : (dom as HTMLInputElement).value
|
||||
|
||||
setConfig(configKey, configValue)
|
||||
})
|
||||
@ -363,7 +348,7 @@ async function onSettingWindowCreated(view: Element) {
|
||||
})
|
||||
|
||||
// 保存按钮
|
||||
doc.querySelector('#config-ob11-save').addEventListener('click', () => {
|
||||
doc.querySelector('#config-ob11-save')?.addEventListener('click', () => {
|
||||
config.ob11 = ob11Config
|
||||
|
||||
window.llonebot.setConfig(false, config)
|
||||
@ -418,18 +403,18 @@ async function onSettingWindowCreated(view: Element) {
|
||||
config.ob11 = ob11Config
|
||||
window.llonebot.setConfig(true, config)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
function init() {
|
||||
const hash = location.hash
|
||||
if (hash === '#/blank') {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (location.hash === '#/blank') {
|
||||
;(window as any).navigation.addEventListener('navigatesuccess', init, { once: true })
|
||||
} else {
|
||||
if (location.hash === '#/blank') {
|
||||
; (window as any).navigation.addEventListener('navigatesuccess', init, { once: true })
|
||||
} else {
|
||||
init()
|
||||
}
|
||||
}
|
||||
|
||||
export { onSettingWindowCreated }
|
||||
export { onSettingWindowCreated }
|
||||
@ -8,8 +8,6 @@
|
||||
<link rel="stylesheet" href="/plugin/inject/style.css" />
|
||||
<link rel="stylesheet" href="/plugin/inject/webcomponents.css" />
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<script src="/plugin/inject/ipc.js"></script>
|
||||
<script src="/plugin/inject/llapi.js"></script>
|
||||
<script src="/plugin/inject/iframe.js"></script>
|
||||
<title>Plugin iframe</title>
|
||||
</head>
|
||||
@ -20,5 +18,4 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
<!--{ INJECT_JS }-->
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user