Merge branch 'dev'

# Conflicts:
#	manifest.json

.github/workflows/publish.yml

@@ -0,0 +1,36 @@
+name: "publish"
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    steps:
+    - name: checkout
+      uses: actions/checkout@v3
+
+    - name: setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: 18
+
+    - name: install dependenies
+      run: npm install
+
+    - name: build
+      run: npm run build
+
+    - name: zip
+      run: |
+        sudo apt install zip -y
+        cp manifest.json ./dist/manifest.json
+        zip LLOneBot.zip ./dist/* -j
+    
+    - name: publish
+      uses: ncipollo/release-action@v1
+      with:
+        artifacts: "LLOneBot.zip"
+        draft: true
+        token: ${{ secrets.RELEASE_TOKEN }}

README.md

@@ -1,20 +1,21 @@
 # LLOneBot API
 
+
 将NTQQLiteLoaderAPI封装成OneBot11/12标准的API, V12没有完整测试
 
+*注意：本文档对应的是 LiteLoader 1.0.0及以上版本，如果你使用的是旧版本请切换到本项目v1分支查看文档*
+
 ## 安装方法
 
-1.安装[NTQQLiteLoader](https://github.com/LiteLoaderQQNT/LiteLoaderQQNT)
+1.安装[NTQQLiteLoader](https://liteloaderqqnt.github.io/guide/install.html)
 
 2.安装修改后的[LiteLoaderQQNT-Plugin-LLAPI](https://github.com/linyuchen/LiteLoaderQQNT-Plugin-LLAPI)，原版的功能有缺陷
 
-3.安装本项目插件[OneBotApi](https://github.com/linyuchen/LiteLoaderQQNT-OneBotApi/releases/)
+3.安装本项目插件[OneBotApi](https://github.com/linyuchen/LiteLoaderQQNT-OneBotApi/releases/), 注意本插件2.0以下的版本不支持LiteLoader 1.0.0及以上版本
 
-*关于插件的安装方法: 上述的两个插件都没有上架NTQQLiteLoader插件市场，需要自己下载源码复制到插件目录*
+*关于插件的安装方法: 上述的两个插件都没有上架NTQQLiteLoader插件市场，需要自己下载复制到插件目录*
 
-*Windows插件目录:`%USERPROFILE%/Documents/LiteLoaderQQNT/plugins`*
+*插件目录:`LiteLoaderQQNT/plugins`*
-
-*Mac插件目录:`~/Library/Containers/com.tencent.qq/Data/Documents/LiteLoaderQQNT/plugins`*
 
 ## 支持的API
 
@@ -56,3 +57,6 @@
 ![](doc/image/example.jpg)
 
 *暂时不支持`"message": "hello"`这种message为字符串的形式*
+
+## onebot11文档
+<https://11.onebot.dev/>

manifest.json

@@ -1,19 +1,19 @@
 {
-    "manifest_version": 3,
+    "manifest_version": 4,
     "type": "extension",
     "name": "LLOneBot",
     "slug": "LLOneBot",
     "description": "LiteLoaderQQNT的OneBotApi",
-    "version": "1.2.6",
+    "version": "2.0.4",
     "thumbnail": "./icon.png",
-    "author": {
+    "authors": [{
         "name": "linyuchen",
         "link": "https://github.com/linyuchen"
-    },
+    }],
     "repository": {
-        "repo": "linyuchen/LLOneBot",
+        "repo": "linyuchen/LiteLoaderQQNT-OneBotApi",
         "branch": "main",
-        "use_release": {
+        "release": {
             "tag": "latest",
             "name": "LLOneBot.zip"
         }

src/common/types.ts

@@ -44,7 +44,7 @@ export type Group = {
 }
 
 export type Peer = {
-    chatType: "private" | "group"
+    chatType: "private" | "group" | "friend"
     name: string
     uid: string  // qq号
 }
@@ -53,6 +53,7 @@ export type MessageElement = {
     raw: {
         msgId: string,
         msgSeq: string,
+        senderUin: string; // 发送者QQ号
         elements: {
             replyElement: {
                 senderUid: string,  // 原消息发送者QQ号
@@ -98,7 +99,6 @@ export type MessageElement = {
             }
         }[]
     }
-
     peer: Peer,
     sender: {
         uid: string  // 一串加密的字符串
@@ -114,7 +114,7 @@ export type SendMessage = {
         text: string, // 纯文本
     }
 } | {
-    type: "image" | "voice",
+    type: "image" | "voice" | "record",
     file: string, // 本地路径
     data?: {
         file: string // 本地路径

src/main/HttpServer.ts

@@ -1,5 +1,6 @@
+import {log} from "./utils";
+
 const express = require("express");
-const bodyParser = require('body-parser');
 import {sendIPCRecallQQMsg, sendIPCSendQQMsg} from "./IPCSend";
 import {OnebotGroupMemberRole, PostDataAction, PostDataSendMsg, SendMessage} from "../common/types";
 import {friends, groups, selfInfo} from "./data";
@@ -45,9 +46,10 @@ function checkSendMessage(sendMsgList: SendMessage[]) {
 // ==end==
 
 function handlePost(jsonData: any) {
+    log("API receive post:" + JSON.stringify(jsonData))
     if (!jsonData.params) {
-        jsonData.params = jsonData
+        jsonData.params = JSON.parse(JSON.stringify(jsonData));
-
+        delete jsonData.params.params;
     }
     let resData = {
         status: 0,
@@ -143,8 +145,7 @@ export function startExpress(port: number) {
     const app = express();
     // 中间件，用于解析POST请求的请求体
     app.use(express.urlencoded({extended: true, limit: "500mb"}));
-    app.use(bodyParser({limit: '500mb'}))
+    app.use(express.json({limit: '500mb'}));
-    app.use(express.json());
 
     function parseToOnebot12(action: PostDataAction) {
         app.post('/' + action, (req: any, res: any) => {

src/main/IPCSend.ts

@@ -8,6 +8,7 @@ function sendIPCMsg(channel: string, data: any) {
         try {
             content.send(channel, data)
         } catch (e) {
+            console.log("llonebot send ipc msg to render error:", e)
         }
     }
 }

src/main/main.ts

@@ -17,8 +17,9 @@ import {
 } from "../common/IPCChannel";
 import {ConfigUtil} from "./config";
 import {startExpress} from "./HttpServer";
-import {log} from "./utils";
+import {isGIF, log} from "./utils";
 import {friends, groups, selfInfo} from "./data";
+import {} from "../global";
 
 const fs = require('fs');
 
@@ -26,15 +27,17 @@ let running = false;
 
 
 // 加载插件时触发
-function onLoad(plugin: any) {
+function onLoad() {
     log("main onLoaded");
+    // const config_dir = browserWindow.LiteLoader.plugins["LLOneBot"].path.data;
+    const config_dir = global.LiteLoader.plugins["LLOneBot"].path.data;
     function getConfigUtil() {
-        const configFilePath = path.join(plugin.path.data, `config_${selfInfo.user_id}.json`)
+        const configFilePath = path.join(config_dir, `config_${selfInfo.user_id}.json`)
         return new ConfigUtil(configFilePath)
     }
 
-    if (!fs.existsSync(plugin.path.data)) {
+    if (!fs.existsSync(config_dir)) {
-        fs.mkdirSync(plugin.path.data, {recursive: true});
+        fs.mkdirSync(config_dir, {recursive: true});
     }
     ipcMain.handle(CHANNEL_GET_CONFIG, (event: any, arg: any) => {
         return getConfigUtil().getConfig()
@@ -55,7 +58,10 @@ function onLoad(plugin: any) {
             let buffer = await blob.arrayBuffer();
             fs.writeFileSync(arg.localFilePath, Buffer.from(buffer));
         }
-        // todo: 需要识别gif格式
+        if (isGIF(arg.localFilePath)) {
+            fs.renameSync(arg.localFilePath, arg.localFilePath + ".gif");
+            arg.localFilePath += ".gif";
+        }
         return arg.localFilePath;
     })
     ipcMain.on(CHANNEL_SET_CONFIG, (event: any, arg: Config) => {
@@ -140,12 +146,17 @@ function onLoad(plugin: any) {
 
 
 // 创建窗口时触发
-function onBrowserWindowCreated(window: any, plugin: any) {
+function onBrowserWindowCreated(window: any) {
 
 }
 
+try {
+    onLoad();
+} catch (e: any) {
+    console.log(e.toString())
+}
 
 // 这两个函数都是可选的
 export {
-    onLoad, onBrowserWindowCreated
+    onBrowserWindowCreated
 }

src/main/utils.ts

@@ -5,4 +5,12 @@ export function log(msg: any) {
     fs.appendFile("./llonebot.log", currentDateTime + ":" + msg + "\n", (err: any) => {
 
     })
+}
+
+export function isGIF(path: string) {
+    const buffer = Buffer.alloc(4);
+    const fd = fs.openSync(path, 'r');
+    fs.readSync(fd, buffer, 0, 4, 0);
+    fs.closeSync(fd);
+    return buffer.toString() === 'GIF8'
 }

src/preload.ts

@@ -34,6 +34,7 @@ contextBridge.exposeInMainWorld("llonebot", {
         ipcRenderer.send(CHANNEL_UPDATE_FRIENDS, friends);
     },
     listenSendMessage: (handle: (jsonData: PostDataSendMsg) => void) => {
+        ipcRenderer.send(CHANNEL_LOG, "发送消息API已注册");
         ipcRenderer.on(CHANNEL_SEND_MSG, (event: any, args: PostDataSendMsg) => {
             handle(args)
         })

src/renderer.ts

@@ -31,8 +31,6 @@ async function getFriends() {
     }
     window.llonebot.updateFriends(friends)
     return friends
-
-
 }
 
 async function getFriend(qq: string) {
@@ -104,6 +102,7 @@ async function getGroupMember(group_qq: string, member_uid: string) {
 
 
 async function handleNewMessage(messages: MessageElement[]) {
+    // console.log("llonebot 收到消息:", messages);
     for (let message of messages) {
         let onebot_message_data: any = {
             self: {
@@ -118,7 +117,9 @@ async function handleNewMessage(messages: MessageElement[]) {
             detail_type: message.peer.chatType,
             message_id: message.raw.msgId,
             sub_type: "",
-            message: []
+            message: [],
+            raw_message: "",
+            font: 14
         }
         if (message.peer.chatType == "group") {
             let group_id = message.peer.uid
@@ -132,10 +133,10 @@ async function handleNewMessage(messages: MessageElement[]) {
                 card: groupMember!.cardName,
                 role: OnebotGroupMemberRole[groupMember!.role]
             }
-            console.log("收到群消息", onebot_message_data)
+            // console.log("收到群消息", onebot_message_data)
-        } else if (message.peer.chatType == "private") {
+        } else if (message.peer.chatType == "private" || message.peer.chatType == "friend") {
-            onebot_message_data["user_id"] = message.peer.uid
+            onebot_message_data["user_id"] = message.raw.senderUin;
-            let friend = await getFriend(message.sender.uid)
+            let friend = await getFriend(message.raw.senderUin)
             onebot_message_data.sender = {
                 user_id: friend!.uin,
                 nickname: friend!.nickName
@@ -181,6 +182,7 @@ async function handleNewMessage(messages: MessageElement[]) {
 }
 
 async function listenSendMessage(postData: PostDataSendMsg) {
+    console.log("收到发送消息请求", postData);
     if (postData.action == "send_private_msg" || postData.action == "send_group_msg") {
         let peer: Peer | null = null;
         if (!postData.params) {
@@ -227,26 +229,26 @@ async function listenSendMessage(postData: PostDataSendMsg) {
                     message.content = `@${atMember.cardName || atMember.nick}`
                 } else if (message.type == "text") {
                     message.content = message.data?.text || message.content
-                } else if (message.type == "image" || message.type == "voice") {
+                } else if (message.type == "image" || message.type == "voice" || message.type == "record") {
-                    // todo: 收到的应该是uri格式的，需要转成本地的, uri格式有三种，http, file, base64
+                    // 收到的是uri格式的，需要转成本地的, uri格式有三种，http, file, base64
                     let url = message.data?.file || message.file
                     let uri = new URL(url);
                     let ext: string;
                     if (message.type == "image") {
-                        // todo: 需要识别gif格式
                         ext = ".png"
                     }
-                    if (message.type == "voice") {
+                    if (message.type == "voice" || message.type == "record") {
+                        message.type = "voice"
                         ext = ".amr"
                     }
                     let localFilePath = `${Date.now()}${ext}`
                     if (uri.protocol == "file:") {
                         localFilePath = url.split("file://")[1]
                     } else {
-                        await window.llonebot.downloadFile({uri: url, localFilePath: localFilePath})
+                        localFilePath = await window.llonebot.downloadFile({uri: url, localFilePath: localFilePath})
+                        sendFiles.push(localFilePath);
                     }
                     message.file = localFilePath
-                    sendFiles.push(localFilePath);
                 } else if (message.type == "reply") {
                     let msgId = message.data?.id || message.msgId
                     let replyMessage = msgHistory.find(msg => msg.raw.msgId == msgId)
@@ -273,165 +275,183 @@ function recallMessage(msgId: string) {
 
 let chatListEle: HTMLCollectionOf<Element>
 
-async function onLoad(arg: any) {
+async function getGroupsMembers(groupsArg: Group[]) {
-    let runningStatus = await window.llonebot.getRunningStatus();
+    // 批量获取群成员列表
-    if (runningStatus) {
+    let failedGroups: Group[] = []
-        return;
+    for (const group of groupsArg) {
-    }
+        let handledGroup = await getGroupMembers(group.uid, true)
-
+        if (handledGroup.length == 0) {
-    async function getGroupsMembers(groupsArg: Group[]) {
+            failedGroups.push(group)
-        // 批量获取群成员列表
-        let failedGroups: Group[] = []
-        for (const group of groupsArg) {
-            let handledGroup = await getGroupMembers(group.uid, true)
-            if (handledGroup.length == 0) {
-                failedGroups.push(group)
-            }
-        }
-        if (failedGroups.length > 0) {
-            console.log("获取群成员列表失败，重试", failedGroups.map(group => group.name))
-            setTimeout(() => {
-                getGroupsMembers(failedGroups).then()
-            }, 1000)
-        } else {
-            window.llonebot.log("全部群成员获取完毕")
         }
     }
-    await getFriends();
+    if (failedGroups.length > 0) {
-    await getGroups();
+        console.log("获取群成员列表失败，重试", failedGroups.map(group => group.name))
-    await getGroupsMembers(groups);
+        setTimeout(() => {
-
+            getGroupsMembers(failedGroups).then()
-    function onNewMessages(messages: MessageElement[]) {
+        }, 1000)
-        async function func(messages: MessageElement[]) {
+    } else {
-            console.log("收到新消息", messages)
+        window.llonebot.log("全部群成员获取完毕")
-            if (!self_qq) {
-                self_qq = (await window.LLAPI.getAccountInfo()).uin
-            }
-            await handleNewMessage(messages);
-        }
-
-        func(messages).then(() => {
-        })
-        // console.log("chatListEle", chatListEle)
     }
-    window.LLAPI.on("new-messages", onNewMessages);
+}
-    window.LLAPI.on("new-send-messages", onNewMessages);
 
+function onNewMessages(messages: MessageElement[]) {
+    async function func(messages: MessageElement[]) {
+        console.log("收到新消息", messages)
+        if (!self_qq) {
+            self_qq = (await window.LLAPI.getAccountInfo()).uin
+        }
+        await handleNewMessage(messages);
+    }
+
+    func(messages).then(() => {
+    })
+    // console.log("chatListEle", chatListEle)
+}
+
+async function initAccountInfo(){
     let accountInfo = await window.LLAPI.getAccountInfo();
     window.llonebot.log("getAccountInfo " + JSON.stringify(accountInfo));
     if (!accountInfo.uid) {
-        return;
+        return false;
     }
     let selfInfo = await window.LLAPI.getUserInfo(accountInfo.uid);
     window.llonebot.setSelfInfo({
         user_id: accountInfo.uin,
         nickname: selfInfo.nickName
     });
-    window.llonebot.log("selfInfo " + JSON.stringify(selfInfo))
+    window.llonebot.log("selfInfo " + JSON.stringify(selfInfo));
-    window.llonebot.startExpress();
+    return true;
+}
 
-    window.llonebot.listenSendMessage((postData: PostDataSendMsg) => {
+function onLoad() {
-        listenSendMessage(postData).then().catch(err => console.log("listenSendMessage err", err))
+    window.llonebot.log("llonebot render onLoad");
-    })
+    window.llonebot.getRunningStatus().then(running=>{
-    window.llonebot.listenRecallMessage((arg: { message_id: string }) => {
+        if (running) {
-        recallMessage(arg.message_id)
+            return;
-    })
+        }
-    window.llonebot.log("llonebot loaded");
+        initAccountInfo().then(
-
+            (initSuccess)=>{
-    window.LLAPI.add_qmenu((qContextMenu: Node) => {
+                if (!initSuccess) {
-        let btn = document.createElement("a")
+                    return;
-        btn.className = "q-context-menu-item q-context-menu-item--normal vue-component"
-        btn.setAttribute("aria-disabled", "false")
-        btn.setAttribute("role", "menuitem")
-        btn.setAttribute("tabindex", "-1")
-        btn.onclick = () => {
-            // window.LLAPI.getPeer().then(peer => {
-            //     // console.log("current peer", peer)
-            //     if (peer && peer.chatType == "group") {
-            //         getGroupMembers(peer.uid, true).then(()=> {
-            //             console.log("获取群成员列表成功", groups);
-            //             alert("获取群成员列表成功")
-            //         })
-            //     }
-            // })
-            async function func() {
-                for (const group of groups) {
-                    await getGroupMembers(group.uid, true)
                 }
-            }
+                if (friends.length == 0) {
-
+                    getFriends().then(()=>{});
-            func().then(() => {
+                }
-                console.log("获取群成员列表结果", groups);
+                if (groups.length == 0) {
-                // 找到members数量为空的群
+                    getGroups().then(()=>{
-                groups.map(group => {
+                        getGroupsMembers(groups).then(()=>{});
-                    if (group.members.length == 0) {
-                        console.log(`${group.name}群成员为空`)
-                    }
-                })
-                window.llonebot.updateGroups(groups)
-            })
-        }
-        btn.innerText = "获取群成员列表"
-        console.log(qContextMenu)
-        // qContextMenu.appendChild(btn)
-    })
-
-    window.LLAPI.on("context-msg-menu", (event, target, msgIds) => {
-        console.log("msg menu", event, target, msgIds);
-    })
-
-    // console.log("getAccountInfo", LLAPI.getAccountInfo());
-    function getChatListEle() {
-        chatListEle = document.getElementsByClassName("viewport-list__inner")
-        console.log("chatListEle", chatListEle)
-        if (chatListEle.length == 0) {
-            setTimeout(getChatListEle, 500)
-        } else {
-            try {
-                // 选择要观察的目标节点
-                const targetNode = chatListEle[0];
-
-                // 创建一个观察器实例并传入回调函数
-                const observer = new MutationObserver(function (mutations) {
-                    mutations.forEach(function (mutation) {
-                        // console.log("chat list changed", mutation.type); // 输出 mutation 的类型
-                        // 获得当前聊天窗口
-                        window.LLAPI.getPeer().then(peer => {
-                            // console.log("current peer", peer)
-                            if (peer && peer.chatType == "group") {
-                                getGroupMembers(peer.uid, false).then()
-                            }
-                        })
                     });
-                });
+                }
+                window.LLAPI.on("new-messages", onNewMessages);
+                window.LLAPI.on("new-send-messages", onNewMessages);
+                window.llonebot.log("llonebot render start");
+                window.llonebot.startExpress();
 
-                // 配置观察选项
+                window.llonebot.listenSendMessage((postData: PostDataSendMsg) => {
-                const config = {attributes: true, childList: true, subtree: true};
+                    listenSendMessage(postData).then().catch(err => console.log("listenSendMessage err", err))
-
+                })
-                // 传入目标节点和观察选项
+                window.llonebot.listenRecallMessage((arg: { message_id: string }) => {
-                observer.observe(targetNode, config);
+                    recallMessage(arg.message_id)
-
+                })
-            } catch (e) {
+                window.llonebot.log("llonebot loaded");
-                window.llonebot.log(e)
+            //     window.LLAPI.add_qmenu((qContextMenu: Node) => {
+            //         let btn = document.createElement("a")
+            //         btn.className = "q-context-menu-item q-context-menu-item--normal vue-component"
+            //         btn.setAttribute("aria-disabled", "false")
+            //         btn.setAttribute("role", "menuitem")
+            //         btn.setAttribute("tabindex", "-1")
+            //         btn.onclick = () => {
+            //             // window.LLAPI.getPeer().then(peer => {
+            //             //     // console.log("current peer", peer)
+            //             //     if (peer && peer.chatType == "group") {
+            //             //         getGroupMembers(peer.uid, true).then(()=> {
+            //             //             console.log("获取群成员列表成功", groups);
+            //             //             alert("获取群成员列表成功")
+            //             //         })
+            //             //     }
+            //             // })
+            //             async function func() {
+            //                 for (const group of groups) {
+            //                     await getGroupMembers(group.uid, true)
+            //                 }
+            //             }
+            //
+            //             func().then(() => {
+            //                 console.log("获取群成员列表结果", groups);
+            //                 // 找到members数量为空的群
+            //                 groups.map(group => {
+            //                     if (group.members.length == 0) {
+            //                         console.log(`${group.name}群成员为空`)
+            //                     }
+            //                 })
+            //                 window.llonebot.updateGroups(groups)
+            //             })
+            //         }
+            //         btn.innerText = "获取群成员列表"
+            //         console.log(qContextMenu)
+            //         // qContextMenu.appendChild(btn)
+            //     })
+            //
+            //     window.LLAPI.on("context-msg-menu", (event, target, msgIds) => {
+            //         console.log("msg menu", event, target, msgIds);
+            //     })
+            //
+            //     // console.log("getAccountInfo", LLAPI.getAccountInfo());
+            //     function getChatListEle() {
+            //         chatListEle = document.getElementsByClassName("viewport-list__inner")
+            //         console.log("chatListEle", chatListEle)
+            //         if (chatListEle.length == 0) {
+            //             setTimeout(getChatListEle, 500)
+            //         } else {
+            //             try {
+            //                 // 选择要观察的目标节点
+            //                 const targetNode = chatListEle[0];
+            //
+            //                 // 创建一个观察器实例并传入回调函数
+            //                 const observer = new MutationObserver(function (mutations) {
+            //                     mutations.forEach(function (mutation) {
+            //                         // console.log("chat list changed", mutation.type); // 输出 mutation 的类型
+            //                         // 获得当前聊天窗口
+            //                         window.LLAPI.getPeer().then(peer => {
+            //                             // console.log("current peer", peer)
+            //                             if (peer && peer.chatType == "group") {
+            //                                 getGroupMembers(peer.uid, false).then()
+            //                             }
+            //                         })
+            //                     });
+            //                 });
+            //
+            //                 // 配置观察选项
+            //                 const config = {attributes: true, childList: true, subtree: true};
+            //
+            //                 // 传入目标节点和观察选项
+            //                 observer.observe(targetNode, config);
+            //
+            //             } catch (e) {
+            //                 window.llonebot.log(e)
+            //             }
+            //         }
+            //     }
+            //
+            //     // getChatListEle();
             }
-        }
+        );
-    }
+    });
-
-    // getChatListEle();
 }
 
 // 打开设置界面时触发
-async function onConfigView(view: any) {
+async function onSettingWindowCreated (view: Element) {
+    window.llonebot.log("setting window created");
     const {port, hosts} = await window.llonebot.getConfig()
 
     function creatHostEleStr(host: string) {
         let eleStr = `
-            <div class="hostItem vertical-list-item">
+            <setting-item data-direction="row" class="hostItem vertical-list-item">
                 <h2>事件上报地址(http)</h2>
-                <input class="host" type="text" value="${host}" 
+                <input class="host input-text" type="text" value="${host}" 
                 style="width:60%;padding: 5px"
-                placeholder="不支持localhost,如果是本机请填写局域网ip"/>
+                placeholder="如果localhost上报失败试试局域网ip"/>
-            </div>
+            </setting-item>
             `
         return eleStr
     }
@@ -440,20 +460,26 @@ async function onConfigView(view: any) {
     for (const host of hosts) {
         hostsEleStr += creatHostEleStr(host);
     }
-    const html = `
+    let html = `
-    <section class="wrap">
+    <div class="config_view">
-        <div class="vertical-list-item">
+        <setting-section>
-            <h2>监听端口</h2>
+            <setting-panel style="padding: 10px">
-            <input id="port" type="number" value="${port}"/>
+                <setting-list class="wrap">
-        </div>
+                    <setting-item class="vertical-list-item" data-direction="row">
-        <div>
+                        <setting-text>监听端口</setting-text>
-            <button id="addHost" class="q-button">添加上报地址</button>
+                        <input id="port" type="number" value="${port}"/>
-        </div>
+                    </setting-item>
-        <div id="hostItems">
+                    <div>
-            ${hostsEleStr}
+                        <button id="addHost" class="q-button">添加上报地址</button>
-        </div>
+                    </div>
-        <button id="save" class="q-button">保存(监听端口重启QQ后生效)</button>
+                    <div id="hostItems">
-    </section>
+                        ${hostsEleStr}
+                    </div>
+                    <button id="save" class="q-button">保存(监听端口重启QQ后生效)</button>
+                </setting-list>
+            </setting-panel>
+        </setting-section>
+    </div>
     `
 
     const parser = new DOMParser();
@@ -462,7 +488,7 @@ async function onConfigView(view: any) {
 
     function addHostEle(initValue: string = "") {
         let addressDoc = parser.parseFromString(creatHostEleStr(initValue), "text/html");
-        let addressEle = addressDoc.querySelector("div")
+        let addressEle = addressDoc.querySelector("setting-item")
         let hostItemsEle = document.getElementById("hostItems");
         hostItemsEle.appendChild(addressEle);
     }
@@ -490,12 +516,15 @@ async function onConfigView(view: any) {
             })
             alert("保存成功");
         })
-    doc.querySelectorAll("section").forEach((node) => view.appendChild(node));
+    doc.body.childNodes.forEach(node => {
+        view.appendChild(node);
+    });
 
 
 }
 
+setTimeout(onLoad, 2000)
+
 export {
-    onLoad,
+    onSettingWindowCreated
-    onConfigView
 }