Merge remote-tracking branch 'origin/main'

CHANGELOG.md

@@ -8,5 +8,6 @@ QQ Version: Windows 9.9.9-23361 / Linux 3.2.7-23361
 
 ## 新增与调整
 * 再一次对获取Cookies与获取群成员优化，分别添加30/60/120分钟缓存
-* 
+* 新增 WebUi 支持远程配置设置 详细参考官方教程
+  
 新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

package.json

@@ -10,6 +10,7 @@
     "build:prod": "vite build --mode production",
     "build": "npm run build:dev",
     "build:core": "cd ./src/core && npm run build && cd ../.. && node ./script/copy-core.cjs",
+    "build:webui": "cd ./src/webui && vite build",
     "watch": "npm run watch:dev",
     "debug-win": "powershell dist/napcat.ps1",
     "lint": "eslint --fix src/**/*.{js,ts}",

src/index.ts

@@ -8,15 +8,16 @@ import { checkVersion } from '@/common/utils/version';
 import { log, logDebug, logError, LogLevel, setLogLevel } from '@/common/utils/log';
 import { NapCatOnebot11 } from '@/onebot11/main';
 import { hookApi } from '@/core/external/hook';
-
+import { InitWebUi } from './webui/index';
 program
   .option('-q, --qq <type>', 'QQ号')
   .parse(process.argv);
 
+InitWebUi();
 const cmdOptions = program.opts();
 // console.log(process.argv);
 
-for(let k=0; k<30; k++) {
+for (let k = 0; k < 30; k++) {
   new Promise((r, j) => {
     hookApi.getRKey();
   }).then();
@@ -61,8 +62,8 @@ const quickLoginQQ = cmdOptions.qq;
 // });
 if (quickLoginQQ) {
   log('正在快速登录 ', quickLoginQQ);
-  napCatCore.quickLogin(quickLoginQQ).then(res=>{
+  napCatCore.quickLogin(quickLoginQQ).then(res => {
-    if (res.loginErrorInfo.errMsg){
+    if (res.loginErrorInfo.errMsg) {
       logError('快速登录错误:', res.loginErrorInfo.errMsg);
     }
   }).catch((e) => {

src/webui/index.ts

@@ -0,0 +1,12 @@
+import express from 'express';
+import { resolve } from 'node:path';
+const app = express()
+export async function InitWebUi() {
+    app.use(express.json())
+    app.use('/webui', express.static(resolve(__dirname, './static')))
+    // 启动WebUi
+    app.listen(6099, async () => {
+        console.log(`WebUi is running at IP:6099`)
+    })
+
+}

src/webui/src/NapCat.ts

@@ -0,0 +1,289 @@
+import { SettingList } from "./components/SettingList";
+import { SettingItem } from "./components/SettingItem";
+import { SettingButton } from "./components/SettingButton";
+import { SettingSwitch } from "./components/SettingSwitch";
+import { SettingSelect } from "./components/SettingSelect";
+import { WebUiApi } from "./components/WebApi"
+async function onSettingWindowCreated(view: Element) {
+  const isEmpty = (value: any) => value === undefined || value === undefined || value === '';
+  let ob11Config = await WebUiApi.getOB11Config();
+  const setOB11Config = (key: string, value: any) => {
+  }
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(
+    [
+      '<div>',
+      `<setting-section id="napcat-error">
+            <setting-panel><pre><code></code></pre></setting-panel>
+        </setting-section>`,
+      SettingList([
+        SettingItem(
+          '<span id="napcat-update-title">正在检查 Napcat 更新</span>',
+          undefined,
+          SettingButton('请稍候', 'napcat-update-button', 'secondary'),
+        ),
+      ]),
+      SettingList([
+        SettingItem(
+          '启用 HTTP 服务',
+          undefined,
+          SettingSwitch('ob11.enableHttp', ob11Config.enableHttp, { 'control-display-id': 'config-ob11-httpPort' }),
+        ),
+        SettingItem(
+          'HTTP 服务监听端口',
+          undefined,
+          `<div class="q-input"><input class="q-input__inner" data-config-key="ob11.httpPort" type="number" min="1" max="65534" value="${ob11Config.httpPort}" placeholder="${ob11Config.httpPort}" /></div>`,
+          'config-ob11-httpPort',
+          ob11Config.enableHttp,
+        ),
+        SettingItem(
+          '启用 HTTP 心跳',
+          undefined,
+          SettingSwitch('ob11.enableHttpHeart', ob11Config.enableHttpHeart, {
+            'control-display-id': 'config-ob11-enableHttpHeart',
+          }),
+        ),
+        SettingItem(
+          '启用 HTTP 事件上报',
+          undefined,
+          SettingSwitch('ob11.enableHttpPost', ob11Config.enableHttpPost, {
+            'control-display-id': 'config-ob11-httpHosts',
+          }),
+        ),
+        `<div class="config-host-list" id="config-ob11-httpHosts" ${ob11Config.enableHttpPost ? '' : 'is-hidden'}>
+                <setting-item data-direction="row">
+                    <div>
+                        <setting-text>HTTP 事件上报密钥</setting-text>
+                    </div>
+                    <div class="q-input">
+                        <input id="config-ob11-httpSecret" class="q-input__inner" data-config-key="ob11.httpSecret" type="text" value="${ob11Config.httpSecret
+        }" placeholder="未设置" />
+                    </div>
+                </setting-item>
+                <setting-item data-direction="row">
+                    <div>
+                        <setting-text>HTTP 事件上报地址</setting-text>
+                    </div>
+                    <setting-button id="config-ob11-httpHosts-add" data-type="primary">添加</setting-button>
+                </setting-item>
+                <div id="config-ob11-httpHosts-list"></div>
+            </div>`,
+        SettingItem(
+          '启用正向 WebSocket 服务',
+          undefined,
+          SettingSwitch('ob11.enableWs', ob11Config.enableWs, { 'control-display-id': 'config-ob11-wsPort' }),
+        ),
+        SettingItem(
+          '正向 WebSocket 服务监听端口',
+          undefined,
+          `<div class="q-input"><input class="q-input__inner" data-config-key="ob11.wsPort" type="number" min="1" max="65534" value="${ob11Config.wsPort}" placeholder="${ob11Config.wsPort}" /></div>`,
+          'config-ob11-wsPort',
+          ob11Config.enableWs,
+        ),
+        SettingItem(
+          '启用反向 WebSocket 服务',
+          undefined,
+          SettingSwitch('ob11.enableWsReverse', ob11Config.enableWsReverse, {
+            'control-display-id': 'config-ob11-wsHosts',
+          }),
+        ),
+        `<div class="config-host-list" id="config-ob11-wsHosts" ${ob11Config.enableWsReverse ? '' : 'is-hidden'}>
+                <setting-item data-direction="row">
+                    <div>
+                        <setting-text>反向 WebSocket 监听地址</setting-text>
+                    </div>
+                    <setting-button id="config-ob11-wsHosts-add" data-type="primary">添加</setting-button>
+                </setting-item>
+                <div id="config-ob11-wsHosts-list"></div>
+            </div>`,
+        SettingItem(
+          ' WebSocket 服务心跳间隔',
+          '控制每隔多久发送一个心跳包，单位为毫秒',
+          `<div class="q-input"><input class="q-input__inner" data-config-key="heartInterval" type="number" min="1000" value="${ob11Config.heartInterval}" placeholder="${ob11Config.heartInterval}" /></div>`,
+        ),
+        SettingItem(
+          'Access token',
+          undefined,
+          `<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="token" type="text" value="${ob11Config.token}" placeholder="未设置" /></div>`,
+        ),
+        SettingItem(
+          '新消息上报格式',
+          '如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 <a href="javascript:LiteLoader.api.openExternal(\'https://github.com/botuniverse/onebot-11/tree/master/message#readme\');">OneBot v11 文档</a>',
+          SettingSelect(
+            [
+              { text: '消息段', value: 'array' },
+              { text: 'CQ码', value: 'string' },
+            ],
+            'ob11.messagePostFormat',
+            ob11Config.messagePostFormat,
+          ),
+        ),
+        SettingItem(
+          '音乐卡片签名地址',
+          undefined,
+          `<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="musicSignUrl" type="text" value="${ob11Config.musicSignUrl}" placeholder="未设置" /></div>`,
+          'config-musicSignUrl',
+        ),
+        SettingItem('', undefined, SettingButton('保存', 'config-ob11-save', 'primary')),
+      ]),
+      SettingList([
+        SettingItem(
+          '上报 Bot 自身发送的消息',
+          '上报 event 为 message_sent',
+          SettingSwitch('reportSelfMessage', ob11Config.reportSelfMessage),
+        )
+      ]),
+      SettingList([
+        SettingItem('GitHub 仓库', `https://github.com/`, 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')),
+      ]),
+      '</div>',
+    ].join(''),
+    'text/html',
+  )
+
+  // 外链按钮
+  doc.querySelector('#open-github')?.addEventListener('click', () => {
+    window.open("https://github.com/", '_blank');
+  })
+  doc.querySelector('#open-telegram')?.addEventListener('click', () => {
+    window.open('https://t.me/+nLZEnpne-pQ1OWFl')
+  })
+  doc.querySelector('#open-qq-group')?.addEventListener('click', () => {
+    window.open('https://qm.qq.com/q/bDnHRG38aI')
+  })
+  doc.querySelector('#open-docs')?.addEventListener('click', () => {
+    window.open('https://github.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', () => {
+    //选择ffmpeg
+  })
+
+  doc.querySelector('#config-open-log-path')?.addEventListener('click', () => {
+    //打开日志
+  })
+
+  // 开关
+  doc.querySelectorAll('setting-switch[data-config-key]').forEach((dom: Element) => {
+    dom.addEventListener('click', () => {
+      const active = dom.getAttribute('is-active') === undefined
+      //@ts-ignore 等待修复
+      setOB11Config(dom.dataset.configKey, active)
+      if (active) dom.setAttribute('is-active', '')
+      else dom.removeAttribute('is-active')
+      //@ts-ignore 等待修复
+      if (!isEmpty(dom.dataset.controlDisplayId)) {
+        //@ts-ignore 等待修复
+        const displayDom = document.querySelector(`#${dom.dataset.controlDisplayId}`)
+        if (active) displayDom?.removeAttribute('is-hidden')
+        else displayDom?.setAttribute('is-hidden', '')
+      }
+    })
+  })
+
+  // 输入框
+  doc
+    .querySelectorAll('setting-item .q-input input.q-input__inner[data-config-key]')
+    .forEach((dom: Element) => {
+      dom.addEventListener('input', () => {
+        const Type = dom.getAttribute('type')
+        //@ts-ignore 等待修复
+        const configKey = dom.dataset.configKey
+        const configValue = Type === 'number' ? (parseInt((dom as HTMLInputElement).value) >= 1 ? parseInt((dom as HTMLInputElement).value) : 1) : (dom as HTMLInputElement).value
+
+        setOB11Config(configKey, configValue)
+      })
+    })
+
+  // 下拉框
+  doc.querySelectorAll('ob-setting-select[data-config-key]').forEach((dom: Element) => {
+    //@ts-ignore 等待修复
+    dom?.addEventListener('selected', (e: CustomEvent) => {
+      //@ts-ignore 等待修复
+      const configKey = dom.dataset.configKey
+      const configValue = e.detail.value
+      setOB11Config(configKey, configValue);
+    })
+  })
+
+  // 保存按钮
+  doc.querySelector('#config-ob11-save')?.addEventListener('click', () => {
+    WebUiApi.setOB11Config(ob11Config);
+    alert('保存成功');
+  })
+  doc.body.childNodes.forEach((node) => {
+    view.appendChild(node)
+  })
+}
+export { onSettingWindowCreated };

src/webui/src/components/SettingSelect.ts

@@ -1,4 +1,4 @@
-import { SettingOption } from './option'
+import { SettingOption } from './SettingOption'
 
 interface MouseEventExtend extends MouseEvent {
   target: HTMLElement
@@ -30,15 +30,15 @@ window.customElements.define(
       super()
 
       this.attachShadow({ mode: 'open' })
-      this.shadowRoot.append(SelectTemplate.content.cloneNode(true))
+      this.shadowRoot?.append(SelectTemplate.content.cloneNode(true));
 
-      this._button = this.shadowRoot.querySelector('div[part="button"]')
+      this._button = this.shadowRoot.querySelector('div[part="button"]');
-      this._text = this.shadowRoot.querySelector('input[part="current-text"]')
+      this._text = this.shadowRoot.querySelector('input[part="current-text"]');
-      this._context = this.shadowRoot.querySelector('ul[part="option-list"]')
+      this._context = this.shadowRoot.querySelector('ul[part="option-list"]');
 
       const buttonClick = () => {
-        const isHidden = this._context.classList.toggle('hidden')
+        const isHidden = this._context.classList.toggle('hidden');
-        window[`${isHidden ? 'remove' : 'add'}EventListener`]('pointerdown', windowPointerDown)
+        window[`${isHidden ? 'remove' : 'add'}EventListener`]('pointerdown', windowPointerDown);
       }
 
       const windowPointerDown = ({ target }) => {
@@ -55,7 +55,7 @@ window.customElements.define(
         this.querySelectorAll('setting-option[is-selected]').forEach((dom) => dom.toggleAttribute('is-selected'))
         target.toggleAttribute('is-selected')
 
-        this._text.value = target.textContent
+        this._text.value = target.textContent as string;
         this.dispatchEvent(
           new CustomEvent('selected', {
             bubbles: true,
@@ -68,7 +68,7 @@ window.customElements.define(
         )
       })
 
-      this._text.value = this.querySelector('setting-option[is-selected]').textContent
+      this._text.value = this.querySelector('setting-option[is-selected]')?.textContent as string;
     }
   },
 )

src/webui/src/components/WebApi.ts

@@ -0,0 +1,53 @@
+export interface OB11Config {
+    httpHost: "",
+    httpPort: number;
+    httpPostUrls: string[];
+    httpSecret: "",
+    wsHost: "",
+    wsPort: number;
+    wsReverseUrls: string[];
+    enableHttp: boolean;
+    enableHttpHeart: boolean;
+    enableHttpPost: boolean;
+    enableWs: boolean;
+    enableWsReverse: boolean;
+    messagePostFormat: 'array' | 'string';
+    reportSelfMessage: boolean;
+    enableLocalFile2Url: boolean;
+    debug: boolean;
+    heartInterval: number;
+    token: "",
+    musicSignUrl: "",
+}
+
+class WebUiApiWrapper {
+    token: string = "";
+    public async setOB11Config(config: OB11Config) {
+
+    }
+    public async getOB11Config(): Promise<OB11Config> {
+        // 返回示例配置
+        return {
+            httpHost: "",
+            httpPort: 3000,
+            httpPostUrls: [],
+            httpSecret: "",
+            wsHost: "",
+            wsPort: 3000,
+            wsReverseUrls: [],
+            enableHttp: false,
+            enableHttpHeart: false,
+            enableHttpPost: false,
+            enableWs: false,
+            enableWsReverse: false,
+            messagePostFormat: 'array',
+            reportSelfMessage: false,
+            enableLocalFile2Url: false,
+            debug: false,
+            heartInterval: 60000,
+            token: "",
+            musicSignUrl: "",
+        };
+    }
+}
+export const WebUiApi = new WebUiApiWrapper();

src/webui/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+    build:{
+        target: 'esnext',
+        minify: false,
+        lib: {
+          entry: 'src/NapCat.ts',
+          formats: ['es'],
+          fileName: () => 'renderer.js',
+        }
+    }
+});

static/assets/NapCat.css

@@ -0,0 +1,180 @@
+setting-item[is-hidden],
+setting-item[is-hidden] + setting-divider {
+  display: none !important;
+}
+
+.config-host-list {
+  width: 100%;
+  padding-left: 16px;
+  box-sizing: border-box;
+}
+.config-host-list[is-hidden],
+.config-host-list[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;
+}
+
+.config-host-list setting-item.setting-host-list-item .q-input {
+  width: 260px;
+}
+
+setting-item a {
+  color: var(--text-link);
+}
+setting-item a:hover {
+  color: var(--hover-link);
+}
+setting-item a:active,
+setting-item a:visited {
+  color: var(--text-link);
+}
+
+ob-setting-select {
+  width: 100px;
+}
+
+ob-setting-select,
+ob-setting-select::part(parent),
+ob-setting-select::part(button) {
+  display: block;
+  position: relative;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  box-sizing: border-box;
+}
+
+ob-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;
+}
+
+ob-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;
+}
+
+ob-setting-select::part(button-arrow) {
+  position: relative;
+  display: block;
+  width: 16px;
+  height: 16px;
+  color: var(--icon_primary);
+}
+
+ob-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;
+}
+
+#napcat-error {
+  display: none;
+}
+
+#napcat-error setting-panel {
+  background: rgba(255, 0, 0, 0.5);
+  color: white;
+}
+
+#napcat-error setting-panel pre {
+  margin: 0;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+#napcat-error setting-panel pre code {
+  font-family: 'FiraCode Nerd Font', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;
+}
+
+#napcat-error.show {
+  display: block;
+}

static/assets/renderer.js

@@ -0,0 +1,374 @@
+const SettingList = (items, title, isCollapsible = false, direction = "column") => {
+  return `<setting-section ${title && !isCollapsible ? `data-title="${title}"` : ""}>
+      <setting-panel>
+          <setting-list ${direction ? `data-direction="${direction}"` : ""} ${isCollapsible ? "is-collapsible" : ""} ${title && isCollapsible ? `data-title="${title}"` : ""}>
+              ${items.join("")}
+          </setting-list>
+      </setting-panel>
+  </setting-section>`;
+};
+
+const SettingItem = (title, subtitle, action, id, visible = true) => {
+  return `<setting-item ${id ? `id="${id}"` : ""} ${!visible ? "is-hidden" : ""}>
+      <div>
+          <setting-text>${title}</setting-text>
+          ${subtitle ? `<setting-text data-type="secondary">${subtitle}</setting-text>` : ""}
+      </div>
+      ${action ? `<div>${action}</div>` : ""}
+  </setting-item>`;
+};
+
+const SettingButton = (text, id, type = "secondary") => {
+  return `<setting-button ${type ? `data-type="${type}"` : ""} ${id ? `id="${id}"` : ""}>${text}</setting-button>`;
+};
+
+const SettingSwitch = (configKey, isActive = false, extraData) => {
+  return `<setting-switch 
+      ${configKey ? `data-config-key="${configKey}"` : ""} 
+      ${isActive ? "is-active" : ""} 
+      ${extraData ? Object.keys(extraData).map((key) => `data-${key}="${extraData[key]}"`) : ""} 
+      >
+  </setting-switch>`;
+};
+
+const SettingOption = (text, value, isSelected = false) => {
+  return `<setting-option ${value ? `data-value="${value}"` : ""} ${isSelected ? "is-selected" : ""}>${text}</setting-option>`;
+};
+
+const SelectTemplate = document.createElement("template");
+SelectTemplate.innerHTML = `<style>
+    .hidden { display: none !important; }
+</style>
+<div part="parent">
+        <div part="button">
+            <input type="text" placeholder="请选择" part="current-text" />
+            <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" part="button-arrow">
+                <path d="M12 6.0001L8.00004 10L4 6" stroke="currentColor" stroke-linejoin="round"></path>
+            </svg>
+        </div>
+    <ul class="hidden" part="option-list"><slot></slot></ul>
+</div>`;
+window.customElements.define(
+  "ob-setting-select",
+  class extends HTMLElement {
+    _button;
+    _text;
+    _context;
+    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 }) => {
+        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;
+    }
+  }
+);
+const SettingSelect = (items, configKey, configValue) => {
+  return `<ob-setting-select ${configKey ? `data-config-key="${configKey}"` : ""}>
+    ${items.map((e, i) => {
+    return SettingOption(e.text, e.value, configKey && configValue ? configValue === e.value : i === 0);
+  }).join("")}
+</ob-setting-select>`;
+};
+
+class WebUiApiWrapper {
+  token = "";
+  async setOB11Config(config) {
+  }
+  async getOB11Config() {
+    return {
+      httpHost: "",
+      httpPort: 3e3,
+      httpPostUrls: [],
+      httpSecret: "",
+      wsHost: "",
+      wsPort: 3e3,
+      wsReverseUrls: [],
+      enableHttp: false,
+      enableHttpHeart: false,
+      enableHttpPost: false,
+      enableWs: false,
+      enableWsReverse: false,
+      messagePostFormat: "array",
+      reportSelfMessage: false,
+      enableLocalFile2Url: false,
+      debug: false,
+      heartInterval: 6e4,
+      token: "",
+      musicSignUrl: ""
+    };
+  }
+}
+const WebUiApi = new WebUiApiWrapper();
+
+async function onSettingWindowCreated(view) {
+  const isEmpty = (value) => value === void 0 || value === void 0 || value === "";
+  let ob11Config = await WebUiApi.getOB11Config();
+  const setOB11Config = (key, value) => {
+  };
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(
+    [
+      "<div>",
+      `<setting-section id="napcat-error">
+            <setting-panel><pre><code></code></pre></setting-panel>
+        </setting-section>`,
+      SettingList([
+        SettingItem(
+          '<span id="napcat-update-title">正在检查 Napcat 更新</span>',
+          void 0,
+          SettingButton("请稍候", "napcat-update-button", "secondary")
+        )
+      ]),
+      SettingList([
+        SettingItem(
+          "启用 HTTP 服务",
+          void 0,
+          SettingSwitch("ob11.enableHttp", ob11Config.enableHttp, { "control-display-id": "config-ob11-httpPort" })
+        ),
+        SettingItem(
+          "HTTP 服务监听端口",
+          void 0,
+          `<div class="q-input"><input class="q-input__inner" data-config-key="ob11.httpPort" type="number" min="1" max="65534" value="${ob11Config.httpPort}" placeholder="${ob11Config.httpPort}" /></div>`,
+          "config-ob11-httpPort",
+          ob11Config.enableHttp
+        ),
+        SettingItem(
+          "启用 HTTP 心跳",
+          void 0,
+          SettingSwitch("ob11.enableHttpHeart", ob11Config.enableHttpHeart, {
+            "control-display-id": "config-ob11-enableHttpHeart"
+          })
+        ),
+        SettingItem(
+          "启用 HTTP 事件上报",
+          void 0,
+          SettingSwitch("ob11.enableHttpPost", ob11Config.enableHttpPost, {
+            "control-display-id": "config-ob11-httpHosts"
+          })
+        ),
+        `<div class="config-host-list" id="config-ob11-httpHosts" ${ob11Config.enableHttpPost ? "" : "is-hidden"}>
+                <setting-item data-direction="row">
+                    <div>
+                        <setting-text>HTTP 事件上报密钥</setting-text>
+                    </div>
+                    <div class="q-input">
+                        <input id="config-ob11-httpSecret" class="q-input__inner" data-config-key="ob11.httpSecret" type="text" value="${ob11Config.httpSecret}" placeholder="未设置" />
+                    </div>
+                </setting-item>
+                <setting-item data-direction="row">
+                    <div>
+                        <setting-text>HTTP 事件上报地址</setting-text>
+                    </div>
+                    <setting-button id="config-ob11-httpHosts-add" data-type="primary">添加</setting-button>
+                </setting-item>
+                <div id="config-ob11-httpHosts-list"></div>
+            </div>`,
+        SettingItem(
+          "启用正向 WebSocket 服务",
+          void 0,
+          SettingSwitch("ob11.enableWs", ob11Config.enableWs, { "control-display-id": "config-ob11-wsPort" })
+        ),
+        SettingItem(
+          "正向 WebSocket 服务监听端口",
+          void 0,
+          `<div class="q-input"><input class="q-input__inner" data-config-key="ob11.wsPort" type="number" min="1" max="65534" value="${ob11Config.wsPort}" placeholder="${ob11Config.wsPort}" /></div>`,
+          "config-ob11-wsPort",
+          ob11Config.enableWs
+        ),
+        SettingItem(
+          "启用反向 WebSocket 服务",
+          void 0,
+          SettingSwitch("ob11.enableWsReverse", ob11Config.enableWsReverse, {
+            "control-display-id": "config-ob11-wsHosts"
+          })
+        ),
+        `<div class="config-host-list" id="config-ob11-wsHosts" ${ob11Config.enableWsReverse ? "" : "is-hidden"}>
+                <setting-item data-direction="row">
+                    <div>
+                        <setting-text>反向 WebSocket 监听地址</setting-text>
+                    </div>
+                    <setting-button id="config-ob11-wsHosts-add" data-type="primary">添加</setting-button>
+                </setting-item>
+                <div id="config-ob11-wsHosts-list"></div>
+            </div>`,
+        SettingItem(
+          " WebSocket 服务心跳间隔",
+          "控制每隔多久发送一个心跳包，单位为毫秒",
+          `<div class="q-input"><input class="q-input__inner" data-config-key="heartInterval" type="number" min="1000" value="${ob11Config.heartInterval}" placeholder="${ob11Config.heartInterval}" /></div>`
+        ),
+        SettingItem(
+          "Access token",
+          void 0,
+          `<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="token" type="text" value="${ob11Config.token}" placeholder="未设置" /></div>`
+        ),
+        SettingItem(
+          "新消息上报格式",
+          `如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 <a href="javascript:LiteLoader.api.openExternal('https://github.com/botuniverse/onebot-11/tree/master/message#readme');">OneBot v11 文档</a>`,
+          SettingSelect(
+            [
+              { text: "消息段", value: "array" },
+              { text: "CQ码", value: "string" }
+            ],
+            "ob11.messagePostFormat",
+            ob11Config.messagePostFormat
+          )
+        ),
+        SettingItem(
+          "音乐卡片签名地址",
+          void 0,
+          `<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="musicSignUrl" type="text" value="${ob11Config.musicSignUrl}" placeholder="未设置" /></div>`,
+          "config-musicSignUrl"
+        ),
+        SettingItem("", void 0, SettingButton("保存", "config-ob11-save", "primary"))
+      ]),
+      SettingList([
+        SettingItem(
+          "上报 Bot 自身发送的消息",
+          "上报 event 为 message_sent",
+          SettingSwitch("reportSelfMessage", ob11Config.reportSelfMessage)
+        )
+      ]),
+      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"))
+      ]),
+      "</div>"
+    ].join(""),
+    "text/html"
+  );
+  doc.querySelector("#open-github")?.addEventListener("click", () => {
+    window.open("https://github.com/", "_blank");
+  });
+  doc.querySelector("#open-telegram")?.addEventListener("click", () => {
+    window.open("https://t.me/+nLZEnpne-pQ1OWFl");
+  });
+  doc.querySelector("#open-qq-group")?.addEventListener("click", () => {
+    window.open("https://qm.qq.com/q/bDnHRG38aI");
+  });
+  doc.querySelector("#open-docs")?.addEventListener("click", () => {
+    window.open("https://github.io/");
+  });
+  const buildHostListItem = (type, host, index, inputAttrs = {}) => {
+    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 addReverseHost = (type, doc2 = document, inputAttr = {}) => {
+    const hostContainerDom = doc2.body.querySelector(`#config-ob11-${type}-list`);
+    hostContainerDom?.appendChild(buildHostListItem(type, "", ob11Config[type].length, inputAttr));
+    ob11Config[type].push("");
+  };
+  const initReverseHost = (type, doc2 = document) => {
+    doc2.body?.querySelector(`#config-ob11-${type}-list`);
+  };
+  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", () => {
+  });
+  doc.querySelector("#config-open-log-path")?.addEventListener("click", () => {
+  });
+  doc.querySelectorAll("setting-switch[data-config-key]").forEach((dom) => {
+    dom.addEventListener("click", () => {
+      const active = dom.getAttribute("is-active") === void 0;
+      setOB11Config(dom.dataset.configKey);
+      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) => {
+    dom.addEventListener("input", () => {
+      const Type = dom.getAttribute("type");
+      dom.dataset.configKey;
+      Type === "number" ? parseInt(dom.value) >= 1 ? parseInt(dom.value) : 1 : dom.value;
+    });
+  });
+  doc.querySelectorAll("ob-setting-select[data-config-key]").forEach((dom) => {
+    dom?.addEventListener("selected", (e) => {
+      dom.dataset.configKey;
+      e.detail.value;
+    });
+  });
+  doc.querySelector("#config-ob11-save")?.addEventListener("click", () => {
+    WebUiApi.setOB11Config(ob11Config);
+    alert("保存成功");
+  });
+  doc.body.childNodes.forEach((node) => {
+    view.appendChild(node);
+  });
+}
+
+export { onSettingWindowCreated };

static/assets/style.css

@@ -0,0 +1,201 @@
+body, html {
+    background: var(--bg_bottom_standard);
+    color: var(--text_primary);
+    font-family: "Color Emoji", system-ui, "PingFang SC", PingFangSC-Regular, "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", Arial, Helvetica, sans-serif, "Apple Braille", "Color Emoji Fix";
+    min-height: 100vh;
+    scroll-behavior: smooth;
+    width: 100%;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  
+    --z_index_popover: 999;
+    --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;
+  }
+  
+  a, address, article, aside, b, blockquote, body, div, em, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, label, legend, li, main, nav, ol, p, s, section, span, table, tbody, td, tfoot, th, thead, tr, ul {
+    box-sizing: border-box;
+    font-size: 100%;
+    font-style: inherit;
+    font-weight: inherit;
+    border: 0px;
+    margin: 0px;
+    padding: 0px;
+  }
+  
+  #app {
+    position: relative;
+    display: block;
+    padding: 20px;
+    min-height: 100vh;
+    background: transparent;
+  }
+  
+  .fake-bar {
+    position: fixed;
+    display: none;
+    top: 0;
+    left: 0;
+  }
+  
+  /* ======== Input ======== */
+  .q-input {
+    align-items: center;
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: var(--text_secondary);
+    display: inline-flex;
+    position: relative;
+    width: 100%;
+    border: 1px solid transparent;
+  }
+  
+  .q-input input, .q-input textarea {
+    appearance: none;
+    background-color: transparent;
+    box-sizing: border-box;
+    color: var(--text_primary);
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0%;
+    font-size: 14px;
+    height: fit-content;
+    outline-color: initial;
+    outline-style: none;
+    outline-width: initial;
+    resize: none;
+    width: 100%;
+    border: none;
+  }
+  
+  /* ======== Switch ======== */
+  .q-switch {
+    background-color: var(--fill_standard_primary);
+    border-radius: 14px;
+    box-sizing: border-box;
+    display: inline-flex;
+    position: relative;
+    transition-behavior: normal;
+    transition-duration: 0.2s;
+    transition-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
+    transition-delay: 0s;
+    transition-property: all;
+    width: 28px;
+    padding: 3px;
+  }
+  
+  .q-switch__handle {
+    border-radius: 5px;
+    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 10px;
+    position: relative;
+    transition-behavior: normal;
+    transition-duration: 0.2s;
+    transition-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
+    transition-delay: 0s;
+    transition-property: all;
+    width: 10px;
+    z-index: 2;
+    background: var(--icon_white);
+  }
+  
+  .q-switch:not(.is-disabled):hover {
+    background: var(--fill_standard_secondary);
+  }
+  
+  .q-switch:not(.is-disabled):active {
+    background: var(--nt_bg_white_2_overlay_pressed_brand_2_mix);
+  }
+  .q-switch:not(.is-disabled):active .q-switch__handle {
+    width: 12px;
+  }
+  
+  .q-switch.is-active {
+    background-color: var(--brand_standard);
+  }
+  
+  .q-switch.is-active .q-switch__handle {
+    transform: translateX(12px);
+  }
+  
+  .q-switch.is-active:not(.is-disabled):hover {
+    background: var(--nt_brand_standard_2_overlay_hover_brand_2_mix);
+  }
+  
+  .q-switch.is-active:not(.is-disabled):active {
+    background: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix);
+  }
+  .q-switch.is-active:not(.is-disabled):active .q-switch__handle {
+    transform: translateX(10px);
+  }
+  
+  /* ======== Button ======== */
+  .q-button {
+    align-items: center;
+    background-color: var(--brand_standard);
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    display: inline-flex;
+    font-size: 14px;
+    justify-content: center;
+    line-height: 18px;
+    outline-color: initial;
+    outline-style: none;
+    outline-width: initial;
+    position: relative;
+    vertical-align: text-bottom;
+    border: 1px solid var(--fg_grey_standard);
+    padding: 5px 11px;
+  }
+  
+  .q-button--small {
+    font-size: 12px;
+    line-height: 14px;
+    min-width: 62px;
+    padding: 4px 7px;
+  }
+  
+  .q-button--primary {
+    background-color: var(--brand_standard);
+    border-color: var(--brand_standard);
+    color: var(--on_brand_primary);
+  }
+  
+  .q-button--secondary {
+    background-color: transparent;
+    border-color: var(--fg_grey_standard);
+    color: var(--text_primary);
+  }
+  
+  .q-button:not([disabled]):hover {
+    background-color: var(--overlay_hover);
+  }
+  
+  .q-button:not([disabled]):active {
+    background-color: var(--overlay_pressed);
+  }
+  
+  .q-button--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);
+  }
+  
+  .q-button--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);
+  }
+  
+  .q-button[disabled] {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+  
+  .q-button--secondary[disabled] {
+    background-color: transparent;
+  }

static/components/NapCat.ts

@@ -1,420 +0,0 @@
-import { SettingList } from "./SettingList";
-import { SettingItem } from "./SettingItem";
-import { SettingButton } from "./SettingButton";
-import { SettingSwitch } from "./SettingSwitch";
-import { SettingSelect } from "./SettingSelect";
-
-// @ts-ignore 引入Css 能不能优雅点 神经这样写
-import StyleRaw from "../assets/NapCat.css";
-function aprilFoolsEgg(node: Element) {
-  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 }
-
-        if (!['heartInterval', 'token', 'ffmpeg'].includes(key)) {
-          //@ts-ignore 等待替换为异步Http设置 带上Token
-          window.llonebot.setConfig(false, config)
-        }
-      }
-    }
-
-    const parser = new DOMParser()
-    const doc = parser.parseFromString(
-      [
-        '<div>',
-        `<style>${StyleRaw}</style>`,
-        `<setting-section id="llonebot-error">
-            <setting-panel><pre><code></code></pre></setting-panel>
-        </setting-section>`,
-        SettingList([
-          SettingItem(
-            '<span id="llonebot-update-title">正在检查 LLOneBot 更新</span>',
-            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,
-            `<div class="q-input"><input class="q-input__inner" data-config-key="ob11.httpPort" type="number" min="1" max="65534" value="${config.ob11.httpPort}" placeholder="${config.ob11.httpPort}" /></div>`,
-            'config-ob11-httpPort',
-            config.ob11.enableHttp,
-          ),
-          SettingItem(
-            '启用 HTTP 心跳',
-            null,
-            SettingSwitch('ob11.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',
-            }),
-          ),
-          `<div class="config-host-list" id="config-ob11-httpHosts" ${config.ob11.enableHttpPost ? '' : 'is-hidden'}>
-                <setting-item data-direction="row">
-                    <div>
-                        <setting-text>HTTP 事件上报密钥</setting-text>
-                    </div>
-                    <div class="q-input">
-                        <input id="config-ob11-httpSecret" class="q-input__inner" data-config-key="ob11.httpSecret" type="text" value="${config.ob11.httpSecret
-          }" placeholder="未设置" />
-                    </div>
-                </setting-item>
-                <setting-item data-direction="row">
-                    <div>
-                        <setting-text>HTTP 事件上报地址</setting-text>
-                    </div>
-                    <setting-button id="config-ob11-httpHosts-add" data-type="primary">添加</setting-button>
-                </setting-item>
-                <div id="config-ob11-httpHosts-list"></div>
-            </div>`,
-          SettingItem(
-            '启用正向 WebSocket 服务',
-            null,
-            SettingSwitch('ob11.enableWs', config.ob11.enableWs, { 'control-display-id': 'config-ob11-wsPort' }),
-          ),
-          SettingItem(
-            '正向 WebSocket 服务监听端口',
-            null,
-            `<div class="q-input"><input class="q-input__inner" data-config-key="ob11.wsPort" type="number" min="1" max="65534" value="${config.ob11.wsPort}" placeholder="${config.ob11.wsPort}" /></div>`,
-            'config-ob11-wsPort',
-            config.ob11.enableWs,
-          ),
-          SettingItem(
-            '启用反向 WebSocket 服务',
-            null,
-            SettingSwitch('ob11.enableWsReverse', config.ob11.enableWsReverse, {
-              'control-display-id': 'config-ob11-wsHosts',
-            }),
-          ),
-          `<div class="config-host-list" id="config-ob11-wsHosts" ${config.ob11.enableWsReverse ? '' : 'is-hidden'}>
-                <setting-item data-direction="row">
-                    <div>
-                        <setting-text>反向 WebSocket 监听地址</setting-text>
-                    </div>
-                    <setting-button id="config-ob11-wsHosts-add" data-type="primary">添加</setting-button>
-                </setting-item>
-                <div id="config-ob11-wsHosts-list"></div>
-            </div>`,
-          SettingItem(
-            ' WebSocket 服务心跳间隔',
-            '控制每隔多久发送一个心跳包，单位为毫秒',
-            `<div class="q-input"><input class="q-input__inner" data-config-key="heartInterval" type="number" min="1000" value="${config.heartInterval}" placeholder="${config.heartInterval}" /></div>`,
-          ),
-          SettingItem(
-            'Access token',
-            null,
-            `<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="token" type="text" value="${config.token}" placeholder="未设置" /></div>`,
-          ),
-          SettingItem(
-            '新消息上报格式',
-            '如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 <a href="javascript:LiteLoader.api.openExternal(\'https://github.com/botuniverse/onebot-11/tree/master/message#readme\');">OneBot v11 文档</a>',
-            SettingSelect(
-              [
-                { text: '消息段', value: 'array' },
-                { text: 'CQ码', value: 'string' },
-              ],
-              'ob11.messagePostFormat',
-              config.ob11.messagePostFormat,
-            ),
-          ),
-          SettingItem(
-            'ffmpeg 路径，发送语音、视频需要，同时保证ffprobe和ffmpeg在一起',
-            ` <a href="javascript:LiteLoader.api.openExternal(\'https://llonebot.github.io/zh-CN/guide/ffmpeg\');">下载地址</a> <span id="config-ffmpeg-path-text">, 路径:${!isEmpty(config.ffmpeg) ? config.ffmpeg : '未指定'
-            }</span>`,
-            SettingButton('选择ffmpeg', 'config-ffmpeg-select'),
-          ),
-          SettingItem(
-            '音乐卡片签名地址',
-            null,
-            `<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="musicSignUrl" type="text" value="${config.musicSignUrl}" placeholder="未设置" /></div>`,
-            '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(
-            '自动删除文件时间',
-            '单位为秒',
-            `<div class="q-input"><input class="q-input__inner" data-config-key="autoDeleteFileSecond" type="number" min="1" value="${config.autoDeleteFileSecond}" placeholder="${config.autoDeleteFileSecond}" /></div>`,
-            'config-auto-delete-file-second',
-            config.autoDeleteFile,
-          ),
-          SettingItem('写入日志', `将日志文件写入插件的数据文件夹`, SettingSwitch('log', config.log)),
-          SettingItem(
-            '日志文件目录',
-            `${window.LiteLoader.plugins['LLOneBot'].path.data}/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')),
-        ]),
-        '</div>',
-      ].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.open("https://github.com/", '_blank');
-    })
-    doc.querySelector('#open-telegram')?.addEventListener('click', () => {
-      window.open('https://t.me/+nLZEnpne-pQ1OWFl')
-    })
-    doc.querySelector('#open-qq-group')?.addEventListener('click', () => {
-      window.open('https://qm.qq.com/q/bDnHRG38aI')
-    })
-    doc.querySelector('#open-docs')?.addEventListener('click', () => {
-      window.open('https://github.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', () => {
-      //选择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 = 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<HTMLSpanElement>('#llonebot-update-title')!
-      const buttonDom = view.querySelector<HTMLButtonElement>('#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 }

static/index.html

@@ -1,21 +1,35 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <base href="{ BASE_URL }" />
+    <!-- 源样式 -->
-    <link rel="stylesheet" href="/plugin/inject/color.css" />
+    <link rel="stylesheet" href="./assets/NapCat.css" />
-    <link rel="stylesheet" href="/plugin/inject/style.css" />
+    <!-- 修补样式 -->
-    <link rel="stylesheet" href="/plugin/inject/webcomponents.css" />
+    <link rel="stylesheet" href="./assets/webcomponents.css" />
+    <link rel="stylesheet" href="./assets/style.css" />
+    <link rel="stylesheet" href="./assets/color.css" />
+    <!-- 脚手架 -->
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-    <script src="/plugin/inject/iframe.js"></script>
+    <!-- 渲染脚本 -->
-    <title>Plugin iframe</title>
+    <script>
+        async function InitWebUi() {
+            const { onSettingWindowCreated } = await import("./assets/renderer.js");
+            onSettingWindowCreated(document.querySelector("body"));
+        }
+        InitWebUi();
+    </script>
+
+    <title>NapCat-WebUi</title>
 </head>
+
 <body>
-<script>
+    <script>
-if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
             document.body.classList.add('q-theme-tokens-dark');
-}
+        }
-</script>
+    </script>
 </body>
+
 </html>

vite.config.ts

@@ -43,6 +43,7 @@ const baseConfigPlugin: PluginOption[] = [
     targets: [
       // ...external.map(genCpModule),
       { src: './src/napcat.json', dest: 'dist/config/' },
+      { src: './static/', dest: 'dist/static/', flatten: false },
       { src: './src/onebot11/onebot11.json', dest: 'dist/config/' },
       { src: './package.json', dest: 'dist' },
       { src: './README.md', dest: 'dist' },