fix: webui build

src/webui/src/NapCat.ts

@@ -0,0 +1,287 @@
+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`);
+    //@ts-ignore 等待修复
+    [...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('保存成功');
+  })
+}
+export { onSettingWindowCreated };

src/webui/src/components/SettingButton.ts

@@ -0,0 +1,3 @@
+export const SettingButton = (text: string, id?: string, type: string = 'secondary') => {
+    return `<setting-button ${type ? `data-type="${type}"` : ''} ${id ? `id="${id}"` : ''}>${text}</setting-button>`
+  }

src/webui/src/components/SettingItem.ts

@@ -0,0 +1,15 @@
+export const SettingItem = (
+    title: string,
+    subtitle?: string,
+    action?: string,
+    id?: string,
+    visible: boolean = 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>`
+  }

src/webui/src/components/SettingList.ts

@@ -0,0 +1,14 @@
+export const SettingList = (
+    items: string[],
+    title?: string,
+    isCollapsible: boolean = false,
+    direction: string = '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>`
+  }

src/webui/src/components/SettingOption.ts

@@ -0,0 +1,3 @@
+export const SettingOption = (text: string, value?: string, isSelected: boolean = false) => {
+    return `<setting-option ${value ? `data-value="${value}"` : ''} ${isSelected ? 'is-selected' : ''}>${text}</setting-option>`
+  }

src/webui/src/components/SettingSelect.ts

@@ -0,0 +1,84 @@
+import { SettingOption } from './SettingOption'
+
+interface MouseEventExtend extends MouseEvent {
+  target: HTMLElement
+}
+
+// <ob-setting-select>
+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 {
+    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 as string;
+        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 as string;
+    }
+  },
+)
+
+export const SettingSelect = (items: Array<{ text: string; value: string }>, configKey?: string, configValue?: any) => {
+  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>`
+}

src/webui/src/components/SettingSwitch.ts

@@ -0,0 +1,8 @@
+export const SettingSwitch = (configKey?: string, isActive: boolean = false, extraData?: Record<string, string>) => {
+    return `<setting-switch 
+      ${configKey ? `data-config-key="${configKey}"` : ''} 
+      ${isActive ? 'is-active' : ''} 
+      ${extraData ? Object.keys(extraData).map((key) => `data-${key}="${extraData[key]}"`) : ''} 
+      >
+  </setting-switch>`
+  }

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: ['cjs'],
+          fileName: () => 'renderer.js',
+        }
+    }
+});