feat: webui-test-0

src/index.ts

@@ -8,11 +8,12 @@ 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);
 

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`)
+    })
+
+}

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;
+}
+
+#llonebot-error {
+  display: none;
+}
+
+#llonebot-error setting-panel {
+  background: rgba(255, 0, 0, 0.5);
+  color: white;
+}
+
+#llonebot-error setting-panel pre {
+  margin: 0;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+#llonebot-error setting-panel pre code {
+  font-family: 'FiraCode Nerd Font', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;
+}
+
+#llonebot-error.show {
+  display: block;
+}

static/components/WebApi.ts

@@ -1,9 +1,9 @@
 export interface OB11Config {
-    httpHost: string;
+    httpHost: "",
     httpPort: number;
     httpPostUrls: string[];
-    httpSecret: string;
+    httpSecret: "",
-    wsHost: string;
+    wsHost: "",
     wsPort: number;
     wsReverseUrls: string[];
     enableHttp: boolean;
@@ -16,8 +16,8 @@ export interface OB11Config {
     enableLocalFile2Url: boolean;
     debug: boolean;
     heartInterval: number;
-    token: string;
+    token: "",
-    musicSignUrl: string;
+    musicSignUrl: "",
 }
 
 class WebUiApiWrapper {
@@ -26,7 +26,28 @@ class WebUiApiWrapper {
 
     }
     public async getOB11Config(): Promise<OB11Config> {
-        return {} as 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();

static/index.html

@@ -4,10 +4,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/assets/color.css" />
+    <link rel="stylesheet" href="./assets/color.css" />
-    <link rel="stylesheet" href="/assets/style.css" />
+    <link rel="stylesheet" href="./assets/style.css" />
-    <link rel="stylesheet" href="/assets/NapCat.css" />
+    <link rel="stylesheet" href="./assets/NapCat.css" />
-    <link rel="stylesheet" href="/assets/webcomponents.css" />
+    <link rel="stylesheet" href="./assets/webcomponents.css" />
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <title>NapCat-WebUi</title>
 </head>