refactor: 标准化与提高缓存策略

HTTP SSE 消息上报模式

.editorconfig

@@ -5,7 +5,7 @@ root = true
 
 # Unix-style newlines with a newline ending every file
 [*]
-end_of_line = lf|crlf
+end_of_line = lf
 insert_final_newline = true
 
 # Matches multiple files with brace expansion notation
@@ -15,7 +15,10 @@ charset = utf-8
 # 2 space indentation
 [*.{cjs,mjs,js,jsx,ts,tsx,css,scss,sass,html,json}]
 indent_style = space
-indent_size = 2
+indent_size = 4
+
+[*.bat]
+charset = latin1
 
 # Unfortunately, EditorConfig doesn't support space configuration inside import braces directly.
-# You'll need to rely on your linter/formatter like ESLint or Prettier for that.
+# You'll need to rely on your linter/formatter like ESLint or Prettier for that.

.env.development

@@ -1 +0,0 @@
-VITE_BUILD_TYPE = Development

.env.framework

@@ -0,0 +1,2 @@
+VITE_BUILD_TYPE = Production
+VITE_BUILD_PLATFORM = Framework

.env.shell

@@ -1 +1,2 @@
 VITE_BUILD_TYPE = Production
+VITE_BUILD_PLATFORM = Shell

.env.universal

@@ -0,0 +1,2 @@
+VITE_BUILD_TYPE = Production
+VITE_BUILD_PLATFORM = Universal

.eslintrc.cjs

@@ -1,68 +0,0 @@
-module.exports = {
-  'env': {
-    'browser': true,
-    'es2021': true,
-    'node': true
-  },
-  'ignorePatterns': ['src/core/', 'src/core.lib/','src/proto/'],
-  'extends': [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended'
-  ],
-  'overrides': [
-    {
-      'env': {
-        'node': true
-      },
-      'files': [
-        '.eslintrc.{js,cjs}'
-      ],
-      'parserOptions': {
-        'sourceType': 'script'
-      }
-    }
-  ],
-  'parser': '@typescript-eslint/parser',
-  'parserOptions': {
-    'ecmaVersion': 'latest',
-    'sourceType': 'module'
-  },
-  'plugins': [
-    '@typescript-eslint',
-    'import'
-  ],
-  'settings': {
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts']
-    },
-    'import/resolver': {
-      'typescript': {
-        'alwaysTryTypes': true
-      }
-    }
-  },
-  'rules': {
-    'indent': [
-      'error',
-      2
-    ],
-    'linebreak-style': [
-      'error',
-      'unix'
-    ],
-    'quotes': [
-      'error',
-      'single'
-    ],
-    'semi': [
-      'error',
-      'always'
-    ],
-    'no-unused-vars': 'off',
-    'no-async-promise-executor': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-    'object-curly-spacing': ['error', 'always'],
-  }
-};

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -15,7 +15,7 @@ body:
     attributes:
       label: 系统版本
       description: 运行 QQNT 的系统版本
-      placeholder: Windows 10 Pro Workstation 22H2
+      placeholder: Windows 11 24H2
     validations:
       required: true
   - type: input
@@ -23,7 +23,7 @@ body:
     attributes:
       label: QQNT 版本
       description: 可在 QQNT 的「关于」的设置页中找到
-      placeholder: 9.9.7-21804
+      placeholder: 9.9.16-29927
     validations:
       required: true
   - type: input
@@ -39,21 +39,21 @@ body:
     attributes:
       label: OneBot 客户端
       description: 连接至 NapCat 的客户端版本信息
-      placeholder: Overflow 2.16.0-2cf7991-SNAPSHOT
+      placeholder: Karin 1.0.0
     validations:
       required: true
   - type: textarea
     id: what-happened
     attributes:
       label: 发生了什么?
-      description: 填写你认为的 NapCat 的不正常行为
+      description: 填写你认为的 NapCat 的异常行为
     validations:
       required: true
   - type: textarea
     id: how-reproduce
     attributes:
       label: 如何复现
-      description: 填写应当如何操作才能触发这个不正常行为
+      description: 填写应当如何操作才能触发这个异常行为
       placeholder: |
         1. xxx
         2. xxx
@@ -78,4 +78,4 @@ body:
     attributes:
       label: OneBot 客户端运行日志
       description: 粘贴 OneBot 客户端的相关日志内容到此处
-      render: shell
+      render: shell

.github/dependabot.yml

@@ -1,11 +1,6 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: "npm"
+    directory: "/"
     schedule:
-      interval: "daily"
+      interval: "weekly"

.github/workflows/build.yml

@@ -1,74 +1,47 @@
-name: "Build"
+name: "Build Action"
 on:
-  workflow_dispatch:
   push:
-    branches:
-      - main
+  pull_request:
+  workflow_dispatch:
 
 permissions: write-all
 
 jobs:
-  build-linux:
-    if: ${{ startsWith(github.event.head_commit.message, 'build:') }}
+  Build-LiteLoader:
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        target_platform: [linux]
-        target_arch: [x64, arm64]
     steps:
-    - name: Clone Main Repository
-      uses: actions/checkout@v4
-      with:
-          repository: 'NapNeko/NapCatQQ'
-          submodules: true
-          ref: main
-          token: ${{ secrets.NAPCAT_BUILD }}
-    - name: Use Node.js 20.X
-      uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-    - name: Build NuCat Linux
-      run: |
-          npm i --arch=${{ matrix.target_arch }} --platform=${{ matrix.target_platform }} 
-          npm run build:prod
-          cd dist
-          npm i --omit=dev --arch=${{ matrix.target_arch }} --platform=${{ matrix.target_platform }} 
-          cd ..
-    - name: Upload Artifact
-      uses: actions/upload-artifact@v4
-      with:
-        name: NapCat.${{ matrix.target_platform }}.${{ matrix.target_arch }}
-        path: dist
-  build-win32:
-    if: ${{ startsWith(github.event.head_commit.message, 'build:') }}
+      - name: Clone Main Repository
+        uses: actions/checkout@v4
+      - name: Use Node.js 20.X
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - name: Build NapCat.Framework
+        run: |
+          npm i && cd napcat.webui && npm i && cd .. || exit 1
+          npm run build:framework && npm run depend || exit 1
+          rm package-lock.json
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: NapCat.Framework
+          path: dist
+  Build-Shell:
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        target_platform: [win32]
-        target_arch: [x64]
     steps:
-        - name: Clone Main Repository
-          uses: actions/checkout@v4
-          with:
-                repository: 'NapNeko/NapCatQQ'
-                submodules: true
-                ref: main
-                token: ${{ secrets.NAPCAT_BUILD }}
-        - name: Use Node.js 20.X
-          uses: actions/setup-node@v4
-          with:
-              node-version: 20.x
-        - name: Build NuCat Linux
-          run: |
-                npm i --arch=${{ matrix.target_arch }} --platform=${{ matrix.target_platform }} 
-                npm run build:prod
-                cd dist
-                npm i --omit=dev --arch=${{ matrix.target_arch }} --platform=${{ matrix.target_platform }} 
-                cd ..
-        - name: Upload Artifact
-          uses: actions/upload-artifact@v4
-          with:
-              name: NapCat.${{ matrix.target_platform }}.${{ matrix.target_arch }}
-              path: dist
+      - name: Clone Main Repository
+        uses: actions/checkout@v4
+      - name: Use Node.js 20.X
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - name: Build NapCat.Shell
+        run: |
+          npm i && cd napcat.webui && npm i && cd .. || exit 1
+          npm run build:shell && npm run depend || exit 1
+          rm package-lock.json
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: NapCat.Shell
+          path: dist

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: "release"
+name: "Build Release"
 
 on:
   push:
@@ -30,14 +30,9 @@ jobs:
               ls
               node ./script/checkVersion.cjs
               sh ./checkVersion.sh
-  build-linux:
+  Build-LiteLoader:
     needs: [check-version]
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        target_platform: [linux]
-        target_arch: [x64, arm64]
     steps:
     - name: Clone Main Repository
       uses: actions/checkout@v4
@@ -51,28 +46,24 @@ jobs:
       with:
           node-version: 20.x
 
-    - name: Build NuCat Linux
+    - name: Build NuCat Framework
       run: |
-          export NAPCAT_BUILDSYS=${{ matrix.target_platform }} 
-          export NAPCAT_BUILDARCH=${{ matrix.target_arch }} 
-          npm i --arch=${{ matrix.target_arch }} --platform=${{ matrix.target_platform }} 
-          npm run build:prod
+          npm i
+          cd napcat.webui
+          npm i
+          cd ..
+          npm run build:framework
           cd dist
-          npm i --omit=dev --arch=${{ matrix.target_arch }} --platform=${{ matrix.target_platform }} 
+          npm i --omit=dev
           cd ..
     - name: Upload Artifact
       uses: actions/upload-artifact@v4
       with:
-        name: NapCat.${{ matrix.target_platform }}.${{ matrix.target_arch }}
+        name: NapCat.Framework
         path: dist
-  build-win32:
+  Build-Shell:
     runs-on: ubuntu-latest
     needs: [check-version]
-    strategy:
-      fail-fast: false
-      matrix:
-        target_platform: [win32]
-        target_arch: [x64]
     steps:
         - name: Clone Main Repository
           uses: actions/checkout@v4
@@ -87,36 +78,61 @@ jobs:
           with:
               node-version: 20.x
           
-        - name: Build NuCat Linux
+        - name: Build NuCat Shell
           run: |
-                export NAPCAT_BUILDSYS=${{ matrix.target_platform }} 
-                export NAPCAT_BUILDARCH=${{ matrix.target_arch }} 
-                npm i --arch=${{ matrix.target_arch }} --platform=${{ matrix.target_platform }} 
-                npm run build:prod
+                npm i 
+                cd napcat.webui
+                npm i
+                cd ..
+                npm run build:shell
                 cd dist
-                npm i --omit=dev --arch=${{ matrix.target_arch }} --platform=${{ matrix.target_platform }} 
+                npm i --omit=dev
                 cd ..
 
         - name: Upload Artifact
           uses: actions/upload-artifact@v4
           with:
-              name: NapCat.${{ matrix.target_platform }}.${{ matrix.target_arch }}
+              name: NapCat.Shell
               path: dist
 
   release-napcat:
-    needs: [build-win32,build-linux]
+    needs: [Build-LiteLoader,Build-Shell]
     runs-on: ubuntu-latest
     steps:
+
+    - name: Clone Main Repository
+      uses: actions/checkout@v4
+      with:
+            repository: 'NapNeko/NapCatQQ'
+            submodules: true
+            ref: main
+            token: ${{ secrets.NAPCAT_BUILD }}
+
     - name: Download All Artifact
       uses: actions/download-artifact@v4
-    
+      
     - name: Compress subdirectories
       run: |
-       for dir in */; do
-          base=$(basename "$dir")
-          zip -r "${base}.zip" "$dir"
-        done 
-    
+        cd ./NapCat.Shell/
+        zip -q -r NapCat.Shell.zip *
+        cd ..
+        cd ./NapCat.Framework/
+        zip -q -r NapCat.Framework.zip *
+        cd ..
+        rm ./NapCat.Shell.zip -rf
+        rm ./NapCat.Framework.zip -rf
+        mv ./NapCat.Shell/NapCat.Shell.zip ./
+        mv ./NapCat.Framework/NapCat.Framework.zip ./
+
+        mkdir ./NapCat.Framework.Windows.Once
+        unzip -q ./external/LiteLoaderWrapper.zip -d ./NapCat.Framework.Windows.Once
+        cd ./NapCat.Framework.Windows.Once
+        ls 
+        mkdir -p ./LL/plugins/NapCatQQ
+        unzip -q ../NapCat.Framework.zip -d ./LL/plugins/NapCatQQ
+        zip -q -r NapCat.Framework.Windows.Once.zip *
+        cd ..
+        mv ./NapCat.Framework.Windows.Once/NapCat.Framework.Windows.Once.zip ./
     - name: Extract version from tag
       run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
       
@@ -130,9 +146,7 @@ jobs:
         token: ${{ secrets.GITHUB_TOKEN }}
         body_path: CHANGELOG.md
         files: |
-          NapCat.win32.x64.zip
-          NapCat.linux.x64.zip
-          NapCat.linux.arm64.zip
-#          NapCat.darwin.x64.zip
-#          NapCat.darwin.arm64.zip
+          NapCat.Framework.zip
+          NapCat.Shell.zip
+          NapCat.Framework.Windows.Once.zip
         draft: true

.gitignore

@@ -14,4 +14,5 @@ dist/
 
 # Build
 *.db
-checkVersion.sh
+checkVersion.sh
+bun.lockb

.gitmodules

@@ -1,4 +0,0 @@
-[submodule "src/core"]
-	path = src/core
-	url = https://github.com/NapNeko/core.git
-	branch = master

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "printWidth": 120,
+    "endOfLine": "auto"
+}

LICENSE

@@ -1,21 +1,19 @@
-MIT License
+Limited Redistribution License for NapCat
 
-Copyright (c) 2024 NapCatQQ
+Copyright © 2024 Mlikiowa
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+1. Usage and Reproduction:
+   - Unauthorized use, reproduction, modification, or distribution of this code is prohibited without explicit permission from the main author of the NapCat repository.
+   
+2. Redistribution:
+   - Redistribution of this code is permitted, provided that the full text of this license is included, and the source and copyright information is clearly stated.
+   - Minor modifications and extensions are allowed for redistribution purposes, but the modified code must not be publicly released.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+3. Non-Commercial Use:
+   - This code is not to be used for any commercial purposes.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+4. Additional Permissions:
+   - Any rights not explicitly addressed in this license must be requested from and granted by the main author of the NapCat repository.
+
+5. Disclaimer:
+   - This code is provided "as is," without any express or implied warranties, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. In no event shall the author be liable for any damages or other liability arising from, out of, or in connection with the use or distribution of this code.

README.md

@@ -1,33 +1,67 @@
 <div align="center">
-  <img src="https://socialify.git.ci/NapNeko/NapCatQQ/image?description=1&language=1&logo=https%3A%2F%2Fraw.githubusercontent.com%2FNapNeko%2FNapCatQQ%2Fmain%2Flogo.png&name=1&stargazers=1&theme=Auto" alt="NapCatQQ" width="640" height="320" />
+  
+![NapCatQQ](https://socialify.git.ci/NapNeko/NapCatQQ/image?font=Jost&logo=https%3A%2F%2Fnapneko.github.io%2Fassets%2Fnewlogo.png&name=1&owner=1&pattern=Diagonal+Stripes&stargazers=1&theme=Auto)
+  
 </div>
 
-## 项目介绍
+---
+## 欢迎回家
+NapCatQQ 是现代化的基于 NTQQ 的 Bot 协议端实现
 
-NapCatQQ 是基于 PC NTQQ 本体实现一套无头 Bot 框架。
+## 特性介绍
+- [x] **安装简单**：就算是笨蛋也能使用
+- [x] **性能友好**：就算是低内存也能使用
+- [x] **接口丰富**：就算是没有也能使用
+- [x] **稳定好用**：就算是被捉也能使用
 
-名字寓意 瞌睡猫QQ，像睡着了一样在后台低占用运行的无需GUI界面的NTQQ。
-
-## 如何使用
+## 使用框架
 
 可前往 [Release](https://github.com/NapNeko/NapCatQQ/releases/) 页面下载最新版本
 
-**首次使用** 请务必前往 [官方文档](https://napneko.github.io/) 查看使用文档与教程
+**首次使用**请务必查看如下文档看使用教程
 
+### 文档地址
 
-## 项目声明
+[Cloudflare.Worker](https://doc.napneko.icu/)
 
-* 请不要在无关地方宣传NapCatQQ，本项目只是用于学习 node 相关知识，切勿用于违法用途
+[Cloudflare.HKServer](https://napcat.napneko.icu/)
 
-* NapCat 不会收集用户隐私信息，但是未来可能会为了更好的利于 NapCat 的优化会收集一些设备信息，如 cpu 架构，系统版本等
-  
-## 相关链接
-[Telegram Link](https://t.me/+nLZEnpne-pQ1OWFl)
+[Github.IO](https://napneko.github.io/)
 
-## 鸣谢名单
+[Cloudflare.Pages](https://napneko.pages.dev/)
 
-[Lagrange](https://github.com/LagrangeDev/Lagrange.Core)
+[Server.Other](https://docs.napcat.cyou/)
 
-<!-- 
-QQ群：545402644
--->
+[Qbot.News](https://neko.qbot.news)
+
+## 回家旅途
+[QQ Group#1](https://qm.qq.com/q/I6LU87a0Yq)
+
+[QQ Group#2](https://qm.qq.com/q/HaRcfrHpUk)
+
+[Telegram](https://t.me/MelodicMoonlight)
+
+> QQ Group#2 准许Bot / Telegram与QQ Group#2 为新建Group
+
+## 性能设计/协议标准
+NapCat 已实现90％+的 OneBot / GoCQ 标准接口，并提供兼容性保留接口，其设计理念遵守 无数据库/异步优先/后台刷新 的性能思想。
+
+由此设计带来一系列好处，在开发中，获取群员列表通常小于50Ms，单条文本消息发送在320Ms以内，在1k+的群聊流畅运行，同时带来一些副作用，上报数据中大量使用Magic生成字段，消息Id无法持久，无法上报撤回消息原始内容。
+
+NapCat 在设计理念下遵守 OneBot 规范大多数要求并且积极改进，任何合理的标准化 Issue 与 Pr 将被接收。
+
+## 感谢他们
+感谢 [Lagrange](https://github.com/LagrangeDev/Lagrange.Core) 对本项目的大力支持 参考部分代码 已获授权
+
+感谢 Tencent Tdesign / Vue3 强力驱动 NapCat.WebUi
+
+不过最最重要的 还是需要感谢屏幕前的你哦~
+
+---
+
+## 特殊感谢
+[LLOneBot](https://github.com/LLOneBot/LLOneBot) 相关的开发曾参与本项目
+
+## 开源附加
+
+任何使用本仓库代码的地方，都应当严格遵守[本仓库开源许可](./LICENSE)。**此外，禁止任何项目未经仓库主作者授权二次分发或基于 NapCat 代码开发。**

docs/changelogs/CHANGELOG.v1.5.1.md

@@ -1,12 +0,0 @@
-# v1.5.1
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-* 支持 新Api: set_self_profile 可设置个性签名
-* 修复 Api: get_group_system_msg
-* 整理日志、添加颜色、使用统一的日志函数以提高日志可读性
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.3.3.md

@@ -1,17 +0,0 @@
-# v1.3.3
-
-QQ Version: Windows 9.9.9-23424 / Linux 3.2.7-23361
-
-## 修复与优化
-* 尝试修复多开崩溃问题
-* 修复群列表更新问题
-* 修复兼容性问题支持Win7
-* 修复下载 http 资源缺少UA
-* 优化少量消息合并转发速度
-* 修复加载群通知时出现 getUserDetailInfo timeout 导致程序崩溃
-  
-## 新增与调整
-* 新增设置群公告 Api: /_send_group_notice
-* 新增重启实现 包括重启快速登录/普通重启 副作用: 原进程 无法清理
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.3.5.md

@@ -1,18 +0,0 @@
-# v1.3.5
-
-QQ Version: Windows 9.9.9-23424 / Linux 3.2.7-23361
-
-## 修复与优化
-* 优化启动脚本
-* 修复非管理时群成员减少事件上报 **无法获取操作者与操作类型**
-* 修复快速重启进程清理问题
-* 优化配置文件格式 支持自动更新配置 但仍然建议 **备份配置**
-* 修复正向反向ws多个客户端周期多次心跳问题
-
-## 新增与调整
-* 支持WebUi热重载
-* 新增启动输出WEBUI秘钥
-* 新增群荣誉信息 /get_group_honor_info
-* 支持获取群系统消息 /get_group_system_msg
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.3.6.md

@@ -1,11 +0,0 @@
-# v1.3.6
-
-QQ Version: Windows 9.9.9-23424 / Linux 3.2.7-23361
-
-## 修复与优化
-* 修复戳一戳多次上报问题
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.3.8.md

@@ -1,15 +0,0 @@
-# v1.3.8
-
-QQ Version: Windows 9.9.9-23873 / Linux 3.2.7-23361
-
-## 修复与优化
-* 优化打包后体积问题
-* 修复QQ等级获取
-* 兼容 9.7.x 版本换行符 统一为 \n
-* 修复处理加群请求 字段异常情况
-* 修复退群通知问题
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.3.9.md

@@ -1,11 +0,0 @@
-# v1.3.9
-
-QQ Version: Windows 9.9.10-23873 / Linux 3.2.7-23361
-
-## 修复与优化
-* 修复QQ等级获取与兼容性问题
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.4.0.md

@@ -1,12 +0,0 @@
-# v1.4.0
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-
-## 新增与调整
-* 支持空间Cookies获取
-* 支持获取在线设备 API /get_online_clients
-* 支持图片OCR API： /.ocr_image /ocr_image
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.4.1.md

@@ -1,14 +0,0 @@
-# v1.4.1
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-* 提高部分Api兼容性
-* 优化日志膨胀问题
-* 在线状态刷新问题修复
-## 新增与调整
-* 支持非管理群 本地记录时间数据 (建议 **备份配置 清空配置 重新配置**)
-* 新增英译中接口 Api: /translate_en2zh
-* 新增群文件管理相关扩展接口 Api: /get_group_file_count /get_group_file_list /set_group_file_folder /del_group_file /del_group_file_folder
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.4.2.md

@@ -1,12 +0,0 @@
-# v1.4.2
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-* 修复获取群文件列表Api
-* 修复退群通知问题
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.4.3.md

@@ -1,11 +0,0 @@
-# v1.4.3
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-* 修复名片通知
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.4.4.md

@@ -1,10 +0,0 @@
-# v1.4.4
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 更新
-* **重大更新：**更新了版本号
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)
-

docs/changelogs/old/CHANGELOG.v1.4.5.md

@@ -1,12 +0,0 @@
-# v1.4.5
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-* 紧急修复二维扫码问题
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)
-

docs/changelogs/old/CHANGELOG.v1.4.6.md

@@ -1,12 +0,0 @@
-# v1.4.6
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-* 优化整体稳定性
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)
-

docs/changelogs/old/CHANGELOG.v1.4.7.md

@@ -1,11 +0,0 @@
-# v1.4.7
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-* 临时扩展 Api: GoCQHTTPUploadGroupFile folder_id字段 用于选择文件夹
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.4.8.md

@@ -1,12 +0,0 @@
-# v1.4.8
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-* 优化Guid的生成方式
-* 支持临时消息获取群来源
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.4.9.md

@@ -1,11 +0,0 @@
-# v1.4.9
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-* 修复接口调用问题 接口标准化 API：set_group_add_request
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

docs/changelogs/old/CHANGELOG.v1.5.0.md

@@ -1,11 +0,0 @@
-# v1.5.0
-
-QQ Version: Windows 9.9.10-24108 / Linux 3.2.7-23361
-
-## 修复与优化
-* 修正各Api默认值
-
-## 新增与调整
-
-
-新增的 API 详细见[API文档](https://napneko.github.io/zh-CN/develop/extends_api)

eslint.config.mjs

@@ -0,0 +1,70 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import _import from "eslint-plugin-import";
+import { fixupPluginRules } from "@eslint/compat";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+const compat = new FlatCompat({
+    baseDirectory: dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [{
+    ignores: ["src/core/proto/"],
+}, ...compat.extends("eslint:recommended", "plugin:@typescript-eslint/recommended"), {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+        import: fixupPluginRules(_import),
+    },
+
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+            ...globals.node,
+        },
+
+        parser: tsParser,
+        ecmaVersion: "latest",
+        sourceType: "module",
+    },
+
+    settings: {
+        "import/parsers": {
+            "@typescript-eslint/parser": [".ts"],
+        },
+
+        "import/resolver": {
+            typescript: {
+                alwaysTryTypes: true,
+            },
+        },
+    },
+
+    rules: {
+        indent: ["error", 4],
+        semi: ["error", "always"],
+        "no-unused-vars": "off",
+        "no-async-promise-executor": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "object-curly-spacing": ["error", "always"],
+    },
+}, {
+    files: ["**/.eslintrc.{js,cjs}"],
+
+    languageOptions: {
+        globals: {
+            ...globals.node,
+        },
+        ecmaVersion: 5,
+        sourceType: "commonjs",
+    },
+}];

launcher/launcher-user.bat

@@ -0,0 +1,32 @@
+@echo off
+chcp 65001
+set NAPCAT_PATCH_PACKAGE=%cd%\qqnt.json
+set NAPCAT_LOAD_PATH=%cd%\loadNapCat.js
+set NAPCAT_INJECT_PATH=%cd%\NapCatWinBootHook.dll
+set NAPCAT_LAUNCHER_PATH=%cd%\NapCatWinBootMain.exe
+set NAPCAT_MAIN_PATH=%cd%\napcat.mjs
+:loop_read
+for /f "tokens=2*" %%a in ('reg query "HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ" /v "UninstallString"') do (
+    set RetString=%%b
+    goto :napcat_boot
+)
+
+:napcat_boot
+for %%a in ("%RetString%") do (
+    set "pathWithoutUninstall=%%~dpa"
+)
+
+SET QQPath=%pathWithoutUninstall%QQ.exe
+
+if not exist "%QQpath%" (
+    echo provided QQ path is invalid: %QQpath%
+    pause
+    exit /b
+)
+
+set NAPCAT_MAIN_PATH=%NAPCAT_MAIN_PATH:\=/%
+echo (async () =^> {await import("file:///%NAPCAT_MAIN_PATH%")})() > "%NAPCAT_LOAD_PATH%"
+
+"%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" %1
+
+pause

launcher/launcher-win10-user.bat

@@ -0,0 +1,33 @@
+@echo off
+chcp 65001
+set NAPCAT_PATCH_PACKAGE=%cd%\qqnt.json
+set NAPCAT_LOAD_PATH=%cd%\loadNapCat.js
+set NAPCAT_INJECT_PATH=%cd%\NapCatWinBootHook.dll
+set NAPCAT_LAUNCHER_PATH=%cd%\NapCatWinBootMain.exe
+set NAPCAT_MAIN_PATH=%cd%\napcat.mjs
+:loop_read
+for /f "tokens=2*" %%a in ('reg query "HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ" /v "UninstallString"') do (
+    set RetString=%%b
+    goto :napcat_boot
+)
+
+:napcat_boot
+for %%a in ("%RetString%") do (
+    set "pathWithoutUninstall=%%~dpa"
+)
+
+SET QQPath=%pathWithoutUninstall%QQ.exe
+
+if not exist "%QQpath%" (
+    echo provided QQ path is invalid: %QQpath%
+    pause
+    exit /b
+)
+set NAPCAT_MAIN_PATH=%NAPCAT_MAIN_PATH:\=/%
+echo (async () =^> {await import("file:///%NAPCAT_MAIN_PATH%")})() > "%NAPCAT_LOAD_PATH%"
+
+"%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" %1
+
+REM "%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" 123456
+
+pause

launcher/launcher-win10.bat

@@ -0,0 +1,40 @@
+@echo off
+chcp 65001
+net session >nul 2>&1
+if %errorLevel% == 0 (
+    echo Administrator mode detected.
+) else (
+    echo Please run this script in administrator mode.
+    powershell -Command "Start-Process 'cmd.exe' -ArgumentList '/c cd /d \"%cd%\" && \"%~f0\" %1' -Verb runAs" 
+    exit
+)
+
+set NAPCAT_PATCH_PACKAGE=%cd%\qqnt.json
+set NAPCAT_LOAD_PATH=%cd%\loadNapCat.js
+set NAPCAT_INJECT_PATH=%cd%\NapCatWinBootHook.dll
+set NAPCAT_LAUNCHER_PATH=%cd%\NapCatWinBootMain.exe
+set NAPCAT_MAIN_PATH=%cd%\napcat.mjs
+:loop_read
+for /f "tokens=2*" %%a in ('reg query "HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ" /v "UninstallString"') do (
+    set RetString=%%b
+    goto :napcat_boot
+)
+
+:napcat_boot
+for %%a in ("%RetString%") do (
+    set "pathWithoutUninstall=%%~dpa"
+)
+
+SET QQPath=%pathWithoutUninstall%QQ.exe
+
+if not exist "%QQpath%" (
+    echo provided QQ path is invalid: %QQpath%
+    pause
+    exit /b
+)
+set NAPCAT_MAIN_PATH=%NAPCAT_MAIN_PATH:\=/%
+echo (async () =^> {await import("file:///%NAPCAT_MAIN_PATH%")})() > "%NAPCAT_LOAD_PATH%"
+
+"%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" %1
+
+REM "%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" 123456

launcher/launcher.bat

@@ -0,0 +1,39 @@
+@echo off
+chcp 65001
+net session >nul 2>&1
+if %errorLevel% == 0 (
+    echo Administrator mode detected.
+) else (
+    echo Please run this script in administrator mode.
+    powershell -Command "Start-Process 'wt.exe' -ArgumentList 'cmd /c cd /d \"%cd%\" && \"%~f0\" %1' -Verb runAs"
+    exit
+)
+
+set NAPCAT_PATCH_PACKAGE=%cd%\qqnt.json
+set NAPCAT_LOAD_PATH=%cd%\loadNapCat.js
+set NAPCAT_INJECT_PATH=%cd%\NapCatWinBootHook.dll
+set NAPCAT_LAUNCHER_PATH=%cd%\NapCatWinBootMain.exe
+set NAPCAT_MAIN_PATH=%cd%\napcat.mjs
+:loop_read
+for /f "tokens=2*" %%a in ('reg query "HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ" /v "UninstallString"') do (
+    set RetString=%%b
+    goto :napcat_boot
+)
+
+:napcat_boot
+for %%a in ("%RetString%") do (
+    set "pathWithoutUninstall=%%~dpa"
+)
+
+SET QQPath=%pathWithoutUninstall%QQ.exe
+
+if not exist "%QQpath%" (
+    echo provided QQ path is invalid: %QQpath%
+    pause
+    exit /b
+)
+
+set NAPCAT_MAIN_PATH=%NAPCAT_MAIN_PATH:\=/%
+echo (async () =^> {await import("file:///%NAPCAT_MAIN_PATH%")})() > "%NAPCAT_LOAD_PATH%"
+
+"%NAPCAT_LAUNCHER_PATH%" "%QQPath%" "%NAPCAT_INJECT_PATH%" %1

launcher/loadNapCat.js

@@ -0,0 +1,5 @@
+const path = require('path');
+const CurrentPath = path.dirname(__filename);
+(async () => {
+    await import("file://" + path.join(CurrentPath, './napcat/napcat.mjs'));
+})();

launcher/qqnt.json

@@ -0,0 +1,26 @@
+{
+  "name": "qq-chat",
+  "version": "9.9.17-30899",
+  "verHash": "ececf273",
+  "linuxVersion": "3.2.15-30899",
+  "linuxVerHash": "63c751e8",
+  "type": "module",
+  "private": true,
+  "description": "QQ",
+  "productName": "QQ",
+  "author": {
+    "name": "Tencent",
+    "email": "QQ-Team@tencent.com"
+  },
+  "homepage": "https://im.qq.com",
+  "sideEffects": true,
+  "bin": {
+    "qd": "externals/devtools/cli/index.js"
+  },
+  "main": "./loadNapCat.js",
+  "buildVersion": "30899",
+  "isPureShell": true,
+  "isByteCodeShell": true,
+  "platform": "win32",
+  "eleArch": "x64"
+}

launcher/quickLoginExample.bat

@@ -0,0 +1,4 @@
+@echo off
+REM ./launcher.bat 123456
+REM ./launcher-win10.bat 123456
+REM 带有REM的为注释 删掉你需要的系统的那行REM这三个单词 修改QQ本脚本启动即可

manifest.json

@@ -0,0 +1,29 @@
+{
+  "manifest_version": 4,
+  "type": "extension",
+  "name": "NapCatQQ",
+  "slug": "NapCat.Framework",
+  "description": "高性能的 OneBot 11 协议实现",
+  "version": "4.3.4",
+  "icon": "./logo.png",
+  "authors": [
+    {
+      "name": "NapNeko",
+      "link": "https://github.com/NapNeko"
+    }
+  ],
+  "repository": {
+    "repo": "NapNeko/NapCatQQ",
+    "branch": "main"
+  },
+  "platform": [
+    "win32",
+    "linux",
+    "darwin"
+  ],
+  "injects": {
+    "renderer": "./renderer.js",
+    "main": "./liteloader.cjs",
+    "preload": "./preload.cjs"
+  }
+}

napcat.webui/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

napcat.webui/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

napcat.webui/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

napcat.webui/eslint.config.mjs

@@ -0,0 +1,52 @@
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import vue from 'eslint-plugin-vue';
+import prettier from 'eslint-plugin-prettier/recommended';
+
+export default [
+    {
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+        },
+    },
+    ...ts.configs.recommended,
+    {
+        rules: {
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/no-var-requires': 'warn',
+        },
+    },
+    ...vue.configs['flat/base'],
+    {
+        files: ['*.vue', '**/*.vue'],
+        languageOptions: {
+            parserOptions: {
+                parser: ts.parser,
+            },
+        },
+    },
+    {
+        rules: {
+            indent: ['error', 4],
+            semi: ['error', 'always'],
+            'no-unused-vars': 'off',
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/no-unused-vars': 'warn',
+            '@typescript-eslint/no-var-requires': 'warn',
+            'object-curly-spacing': ['error', 'always'],
+            'vue/v-for-delimiter-style': ['error', 'in'],
+            'vue/require-name-property': 'warn',
+            'vue/prefer-true-attribute-shorthand': 'warn',
+            'prefer-arrow-callback': 'warn',
+        },
+    },
+    prettier,
+    {
+        rules: {
+            'prettier/prettier': 'warn',
+        },
+    },
+];

napcat.webui/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./logo_webui.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NapCat WebUI</title>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="./src/main.ts"></script>
+</body>
+</html>

napcat.webui/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "napcat.webui",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "webui:lint": "eslint --fix src/**/*.{js,ts,vue}",
+    "webui:dev": "vite --host",
+    "webui:build": "vite build",
+    "webui:preview": "vite preview"
+  },
+  "dependencies": {
+    "eslint-plugin-prettier": "^5.2.1",
+    "event-source-polyfill": "^1.0.31",
+    "mitt": "^3.0.1",
+    "qrcode": "^1.5.4",
+    "tdesign-icons-vue-next": "^0.3.3",
+    "tdesign-vue-next": "^1.10.3",
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
+    "@types/event-source-polyfill": "^1.0.5",
+    "@types/qrcode": "^1.5.5",
+    "@vitejs/plugin-legacy": "^5.4.3",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.31.0",
+    "globals": "^15.12.0",
+    "terser": "^5.36.0",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10",
+    "vue-tsc": "^2.1.8"
+  }
+}

napcat.webui/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

napcat.webui/src/App.vue

@@ -0,0 +1,112 @@
+<template>
+    <div id="app" theme-mode="dark">
+        <router-view />
+    </div>
+    <div v-if="show">
+        <t-sticky-tool shape="round" placement="right-bottom" :offset="[-50, 10]" @click="changeTheme">
+            <t-sticky-item label="浅色" popup="切换浅色模式">
+                <template #icon><sunny-icon /></template>
+            </t-sticky-item>
+            <t-sticky-item label="深色" popup="切换深色模式">
+                <template #icon><mode-dark-icon /></template>
+            </t-sticky-item>
+            <t-sticky-item label="自动" popup="跟随系统">
+                <template #icon><control-platform-icon /></template>
+            </t-sticky-item>
+        </t-sticky-tool>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue';
+import { ControlPlatformIcon, ModeDarkIcon, SunnyIcon } from 'tdesign-icons-vue-next';
+const smallScreen = window.matchMedia('(max-width: 768px)');
+interface Item {
+    label: string;
+    popup: string;
+}
+
+interface Context {
+    item: Item;
+}
+enum ThemeMode {
+    Dark = 'dark',
+    Light = 'light',
+    Auto = 'auto',
+}
+const themeLabelMap: Record<string, ThemeMode> = {
+    "浅色": ThemeMode.Light,
+    "深色": ThemeMode.Dark,
+    "自动": ThemeMode.Auto,
+};
+const show = ref<boolean>(true);
+const createSetThemeAttributeFunction = () => {
+    let mediaQueryForAutoTheme: MediaQueryList | null = null;
+    return (mode: ThemeMode | null) => {
+        const element = document.documentElement;
+        if (mode === ThemeMode.Dark) {
+            element.setAttribute('theme-mode', ThemeMode.Dark);
+        } else if (mode === ThemeMode.Light) {
+            element.removeAttribute('theme-mode');
+        } else if (mode === ThemeMode.Auto) {
+            mediaQueryForAutoTheme = window.matchMedia('(prefers-color-scheme: dark)');
+            const handleMediaChange = (e: MediaQueryListEvent) => {
+                if (e.matches) {
+                    element.setAttribute('theme-mode', ThemeMode.Dark);
+                } else {
+                    element.removeAttribute('theme-mode');
+                }
+            };
+            mediaQueryForAutoTheme.addEventListener('change', handleMediaChange);
+            const event = new Event('change');
+            Object.defineProperty(event, 'matches', {
+                value: mediaQueryForAutoTheme.matches,
+                writable: false,
+            });
+            mediaQueryForAutoTheme.dispatchEvent(event);
+            onBeforeUnmount(() => {
+                if (mediaQueryForAutoTheme) {
+                    mediaQueryForAutoTheme.removeEventListener('change', handleMediaChange);
+                }
+            });
+        }
+    };
+};
+
+const setThemeAttribute = createSetThemeAttributeFunction();
+
+const getStoredTheme = (): ThemeMode | null => {
+    return localStorage.getItem('theme') as ThemeMode | null;
+};
+
+const initTheme = () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme === null) {
+        setThemeAttribute(ThemeMode.Auto);
+    } else {
+        setThemeAttribute(storedTheme);
+    }
+};
+
+const changeTheme = (context: Context) => {
+    const themeLabel = themeLabelMap[context.item.label] as ThemeMode;
+    console.log(themeLabel);
+    setThemeAttribute(themeLabel);
+    localStorage.setItem('theme', themeLabel);
+};
+const haddingFbars = () => {
+    show.value = !smallScreen.matches;
+    if (smallScreen.matches) {
+        localStorage.setItem('theme', 'auto');
+    }
+};
+onMounted(() => {
+    initTheme();
+    haddingFbars();
+    window.addEventListener('resize', haddingFbars);
+});
+onUnmounted(() => {
+    window.removeEventListener('resize', haddingFbars);
+});
+</script>
+<style></style>

napcat.webui/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

napcat.webui/src/backend/githubApi.ts

@@ -0,0 +1,66 @@
+export class githubApiManager {
+    public async GetBaseData(): Promise<Response | null> {
+        try {
+            const ConfigResponse = await fetch('https://api.github.com/repos/NapNeko/NapCatQQ', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (ConfigResponse.status == 200) {
+                return await ConfigResponse.json();
+            }
+        } catch (error) {
+            console.error('Error getting  github data :', error);
+        }
+        return null;
+    }
+    public async GetReleasesData(): Promise<Response | null> {
+        try {
+            const ConfigResponse = await fetch('https://api.github.com/repos/NapNeko/NapCatQQ/releases', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (ConfigResponse.status == 200) {
+                return await ConfigResponse.json();
+            }
+        } catch (error) {
+            console.error('Error getting releases data:', error);
+        }
+        return null;
+    }
+    public async GetPullsData(): Promise<Response | null> {
+        try {
+            const ConfigResponse = await fetch('https://api.github.com/repos/NapNeko/NapCatQQ/pulls', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (ConfigResponse.status == 200) {
+                return await ConfigResponse.json();
+            }
+        } catch (error) {
+            console.error('Error getting Pulls data:', error);
+        }
+        return null;
+    }
+    public async GetContributors(): Promise<Response | null> {
+        try {
+            const ConfigResponse = await fetch('https://api.github.com/repos/NapNeko/NapCatQQ/contributors', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (ConfigResponse.status == 200) {
+                return await ConfigResponse.json();
+            }
+        } catch (error) {
+            console.error('Error getting Pulls data:', error);
+        }
+        return null;
+    }
+}

napcat.webui/src/backend/log.ts

@@ -0,0 +1,72 @@
+import { EventSourcePolyfill } from 'event-source-polyfill';
+type LogListItem = string;
+type LogListData = LogListItem[];
+let eventSourcePoly: EventSourcePolyfill | null = null;
+export class LogManager {
+    private readonly retCredential: string;
+    private readonly apiPrefix: string;
+
+    //调试时http://127.0.0.1:6099/api 打包时 ../api
+    constructor(retCredential: string, apiPrefix: string = '../api') {
+        this.retCredential = retCredential;
+        this.apiPrefix = apiPrefix;
+    }
+    public async GetLogList(): Promise<LogListData> {
+        try {
+            const ConfigResponse = await fetch(`${this.apiPrefix}/Log/GetLogList`, {
+                method: 'GET',
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (ConfigResponse.status == 200) {
+                const ConfigResponseJson = await ConfigResponse.json();
+                if (ConfigResponseJson.code == 0) {
+                    return ConfigResponseJson?.data as LogListData;
+                }
+            }
+        } catch (error) {
+            console.error('Error getting LogList:', error);
+        }
+        return [] as LogListData;
+    }
+    public async GetLog(FileName: string): Promise<string> {
+        try {
+            const ConfigResponse = await fetch(`${this.apiPrefix}/Log/GetLog?id=${FileName}`, {
+                method: 'GET',
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (ConfigResponse.status == 200) {
+                const ConfigResponseJson = await ConfigResponse.json();
+                if (ConfigResponseJson.code == 0) {
+                    return ConfigResponseJson?.data;
+                }
+            }
+        } catch (error) {
+            console.error('Error getting LogData:', error);
+        }
+        return 'null';
+    }
+    public async getRealTimeLogs(): Promise<EventSourcePolyfill | null> {
+        this.creatEventSource();
+        return eventSourcePoly;
+    }
+    private creatEventSource() {
+        try {
+            eventSourcePoly = new EventSourcePolyfill(`${this.apiPrefix}/Log/GetLogRealTime`, {
+                heartbeatTimeout: 3 * 60 * 1000,
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    Accept: 'text/event-stream',
+                },
+                withCredentials: true,
+            });
+        } catch (error) {
+            console.error('创建SSE连接出错:', error);
+        }
+    }
+}

napcat.webui/src/backend/shell.ts

@@ -0,0 +1,205 @@
+import { OneBotConfig } from '../../../src/onebot/config/config';
+import { ResponseCode } from '../../../src/webui/src/const/status';
+export class QQLoginManager {
+    private retCredential: string;
+    private readonly apiPrefix: string;
+
+    //调试时http://127.0.0.1:6099/api 打包时 ../api
+    constructor(retCredential: string, apiPrefix: string = '../api') {
+        this.retCredential = retCredential;
+        this.apiPrefix = apiPrefix;
+    }
+
+    // TODO:
+    public async GetOB11Config(): Promise<OneBotConfig> {
+        try {
+            const ConfigResponse = await fetch(`${this.apiPrefix}/OB11Config/GetConfig`, {
+                method: 'POST',
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (ConfigResponse.status == 200) {
+                const ConfigResponseJson = await ConfigResponse.json();
+                if (ConfigResponseJson.code == ResponseCode.Success) {
+                    return ConfigResponseJson.data;
+                }
+            }
+        } catch (error) {
+            console.error('Error getting OB11 config:', error);
+        }
+        return {} as OneBotConfig;
+    }
+
+    public async SetOB11Config(config: OneBotConfig): Promise<boolean> {
+        try {
+            const ConfigResponse = await fetch(`${this.apiPrefix}/OB11Config/SetConfig`, {
+                method: 'POST',
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ config: JSON.stringify(config) }),
+            });
+            if (ConfigResponse.status == 200) {
+                const ConfigResponseJson = await ConfigResponse.json();
+                if (ConfigResponseJson.code == 0) {
+                    return true;
+                }
+            }
+        } catch (error) {
+            console.error('Error setting OB11 config:', error);
+        }
+        return false;
+    }
+
+    public async checkQQLoginStatus(): Promise<boolean> {
+        try {
+            const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/CheckLoginStatus`, {
+                method: 'POST',
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (QQLoginResponse.status == 200) {
+                const QQLoginResponseJson = await QQLoginResponse.json();
+                if (QQLoginResponseJson.code == 0) {
+                    return QQLoginResponseJson.data.isLogin;
+                }
+            }
+        } catch (error) {
+            console.error('Error checking QQ login status:', error);
+        }
+        return false;
+    }
+    public async checkQQLoginStatusWithQrcode(): Promise<{ qrcodeurl: string; isLogin: string } | undefined> {
+        try {
+            const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/CheckLoginStatus`, {
+                method: 'POST',
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (QQLoginResponse.status == 200) {
+                const QQLoginResponseJson = await QQLoginResponse.json();
+                if (QQLoginResponseJson.code == 0) {
+                    return QQLoginResponseJson.data;
+                }
+            }
+        } catch (error) {
+            console.error('Error checking QQ login status:', error);
+        }
+        return undefined;
+    }
+
+    public async checkWebUiLogined(): Promise<boolean> {
+        try {
+            const LoginResponse = await fetch(`${this.apiPrefix}/auth/check`, {
+                method: 'POST',
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (LoginResponse.status == 200) {
+                const LoginResponseJson = await LoginResponse.json();
+                if (LoginResponseJson.code == 0) {
+                    return true;
+                }
+            }
+        } catch (error) {
+            console.error('Error checking web UI login status:', error);
+        }
+        return false;
+    }
+
+    public async loginWithToken(token: string): Promise<string | null> {
+        try {
+            const loginResponse = await fetch(`${this.apiPrefix}/auth/login`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ token: token }),
+            });
+            const loginResponseJson = await loginResponse.json();
+            const retCode = loginResponseJson.code;
+            if (retCode === 0) {
+                this.retCredential = loginResponseJson.data.Credential;
+                return this.retCredential;
+            }
+        } catch (error) {
+            console.error('Error logging in with token:', error);
+        }
+        return null;
+    }
+
+    public async getQQLoginQrcode(): Promise<string> {
+        try {
+            const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/GetQQLoginQrcode`, {
+                method: 'POST',
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (QQLoginResponse.status == 200) {
+                const QQLoginResponseJson = await QQLoginResponse.json();
+                if (QQLoginResponseJson.code == 0) {
+                    return QQLoginResponseJson.data.qrcode || '';
+                }
+            }
+        } catch (error) {
+            console.error('Error getting QQ login QR code:', error);
+        }
+        return '';
+    }
+
+    public async getQQQuickLoginList(): Promise<string[]> {
+        try {
+            const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/GetQuickLoginList`, {
+                method: 'POST',
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (QQLoginResponse.status == 200) {
+                const QQLoginResponseJson = await QQLoginResponse.json();
+                if (QQLoginResponseJson.code == 0) {
+                    return QQLoginResponseJson.data || [];
+                }
+            }
+        } catch (error) {
+            console.error('Error getting QQ quick login list:', error);
+        }
+        return [];
+    }
+
+    public async setQuickLogin(uin: string): Promise<{ result: boolean; errMsg: string }> {
+        try {
+            const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/SetQuickLogin`, {
+                method: 'POST',
+                headers: {
+                    Authorization: 'Bearer ' + this.retCredential,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ uin: uin }),
+            });
+            if (QQLoginResponse.status == 200) {
+                const QQLoginResponseJson = await QQLoginResponse.json();
+                if (QQLoginResponseJson.code == 0) {
+                    return { result: true, errMsg: '' };
+                } else {
+                    return { result: false, errMsg: QQLoginResponseJson.message };
+                }
+            }
+        } catch (error) {
+            console.error('Error setting quick login:', error);
+        }
+        return { result: false, errMsg: '接口异常' };
+    }
+}

napcat.webui/src/components/Dashboard.vue

@@ -0,0 +1,95 @@
+<template>
+    <t-layout class="dashboard-container">
+        <div v-if="!mediaQuery.matches">
+            <SidebarMenu
+                :menu-items="menuItems"
+                class="sidebar-menu"
+                :menu-width="sidebarWidth"
+            />
+        </div>
+        <t-layout>
+            <router-view />
+        </t-layout>
+        <div v-if="mediaQuery.matches" class="bottom-menu">
+            <BottomMenu :menu-items="menuItems" />
+        </div>
+    </t-layout>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import SidebarMenu from './webui/Nav.vue';
+import BottomMenu from './webui/NavBottom.vue';
+import emitter from '@/ts/event-bus';
+const mediaQuery = window.matchMedia('(max-width: 768px)');
+const sidebarWidth = ['232px', '64px'];
+interface MenuItem {
+    value: string;
+    icon: string;
+    label: string;
+    route: string;
+}
+
+const menuItems = ref<MenuItem[]>([
+    { value: 'item1', icon: 'dashboard', label: '基础信息', route: '/dashboard/basic-info' },
+    { value: 'item3', icon: 'wifi-1', label: '网络配置', route: '/dashboard/network-config' },
+    { value: 'item4', icon: 'setting', label: '其余配置', route: '/dashboard/other-config' },
+    { value: 'item5', icon: 'system-log', label: '日志查看', route: '/dashboard/log-view' },
+    { value: 'item6', icon: 'info-circle', label: '关于我们', route: '/dashboard/about-us' },
+]);
+emitter.on('sendMenu', (event) => {
+    const menuWidth = event ? sidebarWidth[1] : sidebarWidth[0];
+    emitter.emit('sendWidth', menuWidth);
+    localStorage.setItem('menuWidth', menuWidth.toString() || '0');
+});
+
+onMounted(() => {
+    if (mediaQuery.matches){
+        localStorage.setItem('menuWidth', '0');
+    }
+});
+onUnmounted(() => {
+});
+</script>
+
+<style scoped>
+.dashboard-container {
+    display: flex;
+    flex-direction: row;
+    height: 100vh;
+    width: 100%;
+}
+
+.sidebar-menu {
+    position: relative;
+    z-index: 2;
+}
+.bottom-menu {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    z-index: 2;
+}
+
+@media (max-width: 768px) {
+    .content {
+        padding: 10px;
+    }
+}
+</style>
+<style>
+@media (max-width: 768px) {
+    .t-head-menu__inner .t-menu:first-child {
+        margin-left: 0;
+    }
+    .t-head-menu__inner{
+        width: 100%;
+    }
+    .t-head-menu .t-menu{
+        justify-content: space-evenly;
+    }
+    .t-menu__content{
+        display: none;
+    }
+}
+</style>

napcat.webui/src/components/QQLogin.vue

@@ -0,0 +1,187 @@
+<template>
+    <t-card class="layout" :bordered="false">
+        <div class="login-container">
+            <h2 class="sotheby-font">QQ Login</h2>
+            <div class="login-methods">
+                <t-tooltip content="快速登录">
+                    <t-button id="quick-login" class="login-method" :class="{ active: loginMethod === 'quick' }"
+                        @click="loginMethod = 'quick'">Quick Login</t-button>
+                </t-tooltip>
+                <t-tooltip content="二维码登录">
+                    <t-button id="qrcode-login" class="login-method" :class="{ active: loginMethod === 'qrcode' }"
+                        @click="loginMethod = 'qrcode'">QR Code</t-button>
+                </t-tooltip>
+            </div>
+            <div v-show="loginMethod === 'quick'" id="quick-login-dropdown" class="login-form">
+                <t-select id="quick-login-select" v-model="selectedAccount" placeholder="Select Account"
+                    @change="selectAccount">
+                    <t-option v-for="account in quickLoginList" :key="account" :value="account">{{ account }}</t-option>
+                </t-select>
+            </div>
+            <div v-show="loginMethod === 'qrcode'" id="qrcode" class="qrcode">
+                <canvas ref="qrcodeCanvas"></canvas>
+            </div>
+        </div>
+        <t-footer class="footer">Power By NapCat.WebUi</t-footer>
+    </t-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import * as QRCode from 'qrcode';
+import { useRouter } from 'vue-router';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { QQLoginManager } from '@/backend/shell';
+
+const router = useRouter();
+const loginMethod = ref<'quick' | 'qrcode'>('quick');
+const quickLoginList = ref<string[]>([]);
+const selectedAccount = ref<string>('');
+const qrcodeCanvas = ref<HTMLCanvasElement | null>(null);
+const qqLoginManager = new QQLoginManager(localStorage.getItem('auth') || '');
+let heartBeatTimer: number | null = null;
+let qrcodeUrl: string = '';
+
+const selectAccount = async (accountName: string): Promise<void> => {
+    const { result, errMsg } = await qqLoginManager.setQuickLogin(accountName);
+    if (result) {
+        if (heartBeatTimer) {
+            clearInterval(heartBeatTimer);
+        }
+        await MessagePlugin.success('登录成功即将跳转');
+        await router.push({ path: '/dashboard/basic-info' });
+    } else {
+        await MessagePlugin.error('登录失败,' + errMsg);
+    }
+};
+
+const generateQrCode = (data: string, canvas: HTMLCanvasElement | null): void => {
+    if (!canvas) {
+        console.error('Canvas element not found');
+        return;
+    }
+    QRCode.toCanvas(canvas, data, function (error: Error | null | undefined) {
+        if (error) {
+            console.error('Error generating QR Code:', error);
+        } else {
+            console.log('QR Code generated!');
+        }
+    });
+};
+
+const HeartBeat = async (): Promise<void> => {
+    const isLogined = await qqLoginManager.checkQQLoginStatusWithQrcode();
+    if (isLogined?.isLogin) {
+        if (heartBeatTimer) {
+            clearInterval(heartBeatTimer);
+        }
+        await MessagePlugin.success('登录成功即将跳转');
+        await router.push({ path: '/dashboard/basic-info' });
+    } else if (isLogined?.qrcodeurl && qrcodeUrl !== isLogined.qrcodeurl) {
+        qrcodeUrl = isLogined.qrcodeurl;
+        generateQrCode(qrcodeUrl, qrcodeCanvas.value);
+    }
+};
+
+const InitPages = async (): Promise<void> => {
+    quickLoginList.value = await qqLoginManager.getQQQuickLoginList();
+    qrcodeUrl = await qqLoginManager.getQQLoginQrcode();
+    await nextTick();
+    generateQrCode(qrcodeUrl, qrcodeCanvas.value);
+};
+
+onMounted(() => {
+    InitPages().then().catch((err) => {
+        console.error('InitPages Error:', err);
+    });
+    heartBeatTimer = window.setInterval(HeartBeat, 3000);
+});
+
+onBeforeUnmount(() => {
+    if (heartBeatTimer) {
+        clearInterval(heartBeatTimer);
+    }
+
+});
+
+watch(loginMethod, async (newMethod) => {
+    if (newMethod === 'qrcode') {
+        await nextTick();
+        generateQrCode(qrcodeUrl, qrcodeCanvas.value);
+    }
+});
+
+</script>
+
+<style scoped>
+.layout {
+    height: 100vh;
+}
+
+.login-container {
+    padding: 20px;
+    border-radius: 5px;
+    max-width: 400px;
+    min-width: 300px;
+    position: relative;
+    margin: 50px auto;
+}
+
+@media (max-width: 600px) {
+    .login-container {
+        width: 90%;
+        min-width: unset;
+    }
+}
+
+.login-methods {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.login-method {
+    padding: 10px 15px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.login-method.active {
+    background-color: #e6f0ff;
+    color: #007bff;
+}
+
+.login-form,
+.qrcode {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.qrcode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    text-align: center;
+}
+
+.sotheby-font {
+    font-family: Sotheby, Helvetica, monospace;
+    font-size: 3.125rem;
+    line-height: 1.2;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.footer {
+    text-align: center;
+    margin: 0;
+    font-size: 0.875rem;
+    color: #888;
+    position: fixed;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+}
+</style>

napcat.webui/src/components/WebUiLogin.vue

@@ -0,0 +1,153 @@
+<template>
+    <t-card class="layout" :bordered="false">
+        <div class="login-container">
+            <h2 class="sotheby-font">WebUi Login</h2>
+            <t-form ref="form" :data="formData" colon :label-width="0" @submit="onSubmit">
+                <t-form-item name="password">
+                    <t-input v-model="formData.token" type="password" clearable placeholder="请输入Token">
+                        <template #prefix-icon>
+                            <lock-on-icon />
+                        </template>
+                    </t-input>
+                </t-form-item>
+                <t-form-item>
+                    <t-button theme="primary" type="submit" block>登录</t-button>
+                </t-form-item>
+            </t-form>
+        </div>
+        <t-footer class="footer">Power By NapCat.WebUi</t-footer>
+    </t-card>
+</template>
+
+<script setup lang="ts">
+import '../css/style.css';
+import '../css/font.css';
+import { reactive, onMounted } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { LockOnIcon } from 'tdesign-icons-vue-next';
+import { useRouter } from 'vue-router';
+import { QQLoginManager } from '@/backend/shell';
+
+const router = useRouter();
+
+interface FormData {
+    token: string;
+}
+
+const formData: FormData = reactive({
+    token: '',
+});
+
+const handleLoginSuccess = async (credential: string) => {
+    localStorage.setItem('auth', credential);
+    await checkLoginStatus();
+};
+
+const handleLoginFailure = (message: string) => {
+    MessagePlugin.error(message);
+};
+
+const checkLoginStatus = async () => {
+    const storedCredential = localStorage.getItem('auth');
+    if (!storedCredential) {
+        return;
+    }
+    const loginManager = new QQLoginManager(storedCredential);
+    const isWenUiLoggedIn = await loginManager.checkWebUiLogined();
+    console.log('isWenUiLoggedIn', isWenUiLoggedIn);
+    if (!isWenUiLoggedIn) {
+        return;
+    }
+
+    const isQQLoggedIn = await loginManager.checkQQLoginStatus();
+    if (isQQLoggedIn) {
+        await router.push({ path: '/dashboard/basic-info' });
+    } else {
+        await router.push({ path: '/qqlogin' });
+    }
+};
+
+const loginWithToken = async (token: string) => {
+    const loginManager = new QQLoginManager('');
+    const credential = await loginManager.loginWithToken(token);
+    if (credential) {
+        await handleLoginSuccess(credential);
+    } else {
+        handleLoginFailure('登录失败，请检查Token');
+    }
+};
+
+onMounted(() => {
+    const url = new URL(window.location.href);
+    const token = url.searchParams.get('token');
+    if (token) {
+        loginWithToken(token);
+    }
+    checkLoginStatus();
+});
+
+const onSubmit = async ({ validateResult }: { validateResult: boolean }) => {
+    if (validateResult) {
+        await loginWithToken(formData.token);
+    } else {
+        handleLoginFailure('请填写Token');
+    }
+};
+</script>
+
+<style scoped>
+.layout {
+    height: 100vh;
+}
+.login-container {
+    padding: 20px;
+    border-radius: 5px;
+    max-width: 400px;
+    min-width: 300px;
+    position: relative;
+    margin: 50px auto;
+}
+
+@media (max-width: 600px) {
+    .login-container {
+        width: 90%;
+        min-width: unset;
+    }
+}
+
+.tdesign-demo-block-column {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+}
+
+.tdesign-demo-block-column-large {
+    display: flex;
+    flex-direction: column;
+    row-gap: 32px;
+}
+
+.tdesign-demo-block-row {
+    display: flex;
+    column-gap: 16px;
+    align-items: center;
+}
+
+.sotheby-font {
+    font-family: Sotheby, Helvetica, monospace;
+    font-size: 3.125rem;
+    line-height: 1.2;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.footer {
+    text-align: center;
+    margin: 0;
+    font-size: 0.875rem;
+    color: #888;
+    position: fixed;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+}
+</style>

napcat.webui/src/components/webui/Nav.vue

@@ -0,0 +1,126 @@
+<template>
+    <t-menu theme="light" :width="menuWidth" :collapsed="collapsed" class="sidebar-menu">
+        <template #logo>
+            <div class="logo">
+                <img class="logo-img" :width="collapsed ? 35 : 'auto'" src="@/assets/logo_webui.png" alt="logo" />
+                <div class="logo-textBox">
+                    <div class="logo-text">{{ collapsed ? '' : 'NapCat' }}</div>
+                </div>
+            </div>
+        </template>
+        <router-link v-for="item in menuItems" :key="item.value" :to="item.route">
+            <t-tooltip :disabled="!collapsed" :content="item.label" placement="right">
+                <t-menu-item :value="item.value" :disabled="item.disabled" class="menu-item">
+                    <template #icon>
+                        <t-icon :name="item.icon" />
+                    </template>
+                    {{ item.label }}
+                </t-menu-item>
+            </t-tooltip>
+        </router-link>
+        <template #operations>
+            <t-button
+                :disabled="disBtn"
+                class="t-demo-collapse-btn"
+                variant="text"
+                shape="square"
+                @click="changeCollapsed"
+            >
+                <template #icon><t-icon :name="iconName" /></template>
+            </t-button>
+        </template>
+    </t-menu>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import emitter from '@/ts/event-bus';
+
+type MenuItem = {
+    value: string;
+    label: string;
+    route: string;
+    icon?: string;
+    disabled?: boolean;
+};
+defineProps<{
+    menuItems: MenuItem[];
+    menuWidth: string | number | Array<string | number>;
+}>();
+const mediaQuery = window.matchMedia('(max-width: 800px)');
+const collapsed = ref<boolean>(localStorage.getItem('sidebar-collapsed') === 'true');
+const iconName = ref<string>(collapsed.value ? 'menu-unfold' : 'menu-fold');
+const disBtn = ref<boolean>(false);
+
+const changeCollapsed = (): void => {
+    collapsed.value = !collapsed.value;
+    iconName.value = collapsed.value ? 'menu-unfold' : 'menu-fold';
+    localStorage.setItem('sidebar-collapsed', collapsed.value.toString());
+};
+watch(collapsed, (newValue, oldValue) => {
+    emitter.emit('sendMenu', collapsed.value);
+});
+onMounted(() => {
+    emitter.emit('sendMenu', collapsed.value);
+    const handleMediaChange = (e: MediaQueryListEvent) => {
+        disBtn.value = e.matches;
+        if (e.matches) {
+            collapsed.value = e.matches;
+        }
+    };
+    mediaQuery.addEventListener('change', handleMediaChange);
+    const event = new Event('change');
+    Object.defineProperty(event, 'matches', {
+        value: mediaQuery.matches,
+        writable: false,
+    });
+    mediaQuery.dispatchEvent(event);
+    return () => {
+        mediaQuery.removeEventListener('change', handleMediaChange);
+    };
+});
+</script>
+
+<style scoped>
+.sidebar-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 200px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+    .sidebar-menu {
+        width: 100px; /* 移动端侧边栏宽度 */
+    }
+}
+.logo {
+    display: flex;
+    width: auto;
+    height: 100%;
+}
+.logo-img {
+    object-fit: contain;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+.logo-textBox {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+}
+.logo-text {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 22px;
+    font-family: Sotheby, Helvetica, monospace;
+}
+
+.menu-item {
+    margin-bottom: 10px;
+}
+</style>

napcat.webui/src/components/webui/NavBottom.vue

@@ -0,0 +1,35 @@
+<template>
+    <t-head-menu theme="light" class="bottom-menu">
+        <router-link v-for="item in menuItems" :key="item.value" :to="item.route">
+            <t-tooltip :content="item.label" placement="top">
+                <t-menu-item :value="item.value" :disabled="item.disabled" class="menu-item">
+                    <template #icon>
+                        <t-icon :name="item.icon" />
+                    </template>
+
+                    <!--                    {{item.label}}-->
+                </t-menu-item>
+            </t-tooltip>
+        </router-link>
+    </t-head-menu>
+</template>
+<script setup lang="ts">
+type MenuItem = {
+    value: string;
+    label: string;
+    route: string;
+    icon?: string;
+    disabled?: boolean;
+};
+
+defineProps<{
+    menuItems: MenuItem[];
+}>();
+</script>
+<style scoped>
+.bottom-menu {
+    display: flex;
+    justify-content: center;
+    border-top: 0.8px solid #ddd;
+}
+</style>

napcat.webui/src/css/font.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: 'Sotheby';
+  src: url('../assets/Sotheby.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+    font-family: 'ProtoNerdFontItalic';
+    src: url('../assets/0xProtoNerdFont-Italic.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+

napcat.webui/src/css/style.css

@@ -0,0 +1,84 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}

napcat.webui/src/main.ts

@@ -0,0 +1,97 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import {
+    Button as TButton,
+    Input as TInput,
+    Form as TForm,
+    FormItem as TFormItem,
+    Select as TSelect,
+    Option as TOption,
+    Menu as TMenu,
+    MenuItem as TMenuItem,
+    Icon as TIcon,
+    Submenu as TSubmenu,
+    Col as TCol,
+    Row as TRow,
+    Card as TCard,
+    Divider as TDivider,
+    Link as TLink,
+    List as TList,
+    Alert as TAlert,
+    Tag as TTag,
+    Descriptions as TDescriptionsProps,
+    DescriptionsItem as TDescriptionsItem,
+    Collapse as TCollapse,
+    CollapsePanel as TCollapsePanel,
+    ListItem as TListItem,
+    Tabs as TTabs,
+    TabPanel as TTabPanel,
+    Space as TSpace,
+    Checkbox as TCheckbox,
+    Popup as TPopup,
+    Dialog as TDialog,
+    Switch as TSwitch,
+    Tooltip as Tooltip,
+    StickyTool as TStickyTool,
+    StickyItem as TStickyItem,
+    Layout as TLayout,
+    Content as TContent,
+    Footer as TFooter,
+    Aside as TAside,
+    Popconfirm as Tpopconfirm,
+    Empty as TEmpty,
+    Dropdown as TDropdown,
+    Typography as TTypographyText,
+    TreeSelect as TTreeSelect,
+    Loading as TLoading,
+    HeadMenu as THeadMenu
+} from 'tdesign-vue-next';
+import router from './router';
+import 'tdesign-vue-next/es/style/index.css';
+const app = createApp(App);
+app.use(router);
+app.use(TButton);
+app.use(TInput);
+app.use(TForm);
+app.use(TFormItem);
+app.use(TSelect);
+app.use(TOption);
+app.use(TMenu);
+app.use(TMenuItem);
+app.use(TIcon);
+app.use(TSubmenu);
+app.use(TCol);
+app.use(TRow);
+app.use(TCard);
+app.use(TDivider);
+app.use(TLink);
+app.use(TList);
+app.use(TAlert);
+app.use(TTag);
+app.use(TDescriptionsProps);
+app.use(TDescriptionsItem);
+app.use(TCollapse);
+app.use(TCollapsePanel);
+app.use(TListItem);
+app.use(TTabs);
+app.use(TTabPanel);
+app.use(TSpace);
+app.use(TCheckbox);
+app.use(TPopup);
+app.use(TDialog);
+app.use(TSwitch);
+app.use(Tooltip);
+app.use(TStickyTool);
+app.use(TStickyItem);
+app.use(TLayout);
+app.use(TContent);
+app.use(TFooter);
+app.use(TAside);
+app.use(Tpopconfirm);
+app.use(TEmpty);
+app.use(TDropdown);
+app.use(TTypographyText);
+app.use(TTreeSelect);
+app.use(TLoading);
+app.use(THeadMenu);
+app.mount('#app');

napcat.webui/src/pages/AboutUs.vue

@@ -0,0 +1,226 @@
+<template>
+    <div class="about-us">
+        <div>
+            <t-divider content="面板关于信息" align="left">
+                <template #content>
+                    <div style="display: flex; justify-content: center; align-items: center">
+                        <info-circle-icon></info-circle-icon>
+                        <div style="margin-left: 5px">面板关于信息</div>
+                    </div>
+                </template>
+            </t-divider>
+            <t-alert theme="success" class="header" message="NapCat.WebUi is running" />
+            <t-list>
+                <t-list-item>
+                    <div class="label-box">
+                        <star-filled-icon class="item-icon" size="large" />
+                        <span class="item-label">Star:</span>
+                    </div>
+                    <span class="item-content">
+                        <t-link class="link-text"  href="https://github.com/NapNeko/NapCatQQ/stargazers">{{
+                            githubBastData?.stargazers_count
+                        }}</t-link>
+                    </span>
+                </t-list-item>
+                <t-list-item>
+                    <tips-filled-icon class="item-icon" size="large" />
+                    <span class="item-label">issues:</span>
+                    <span class="item-content">
+                        <t-link class="link-text" href="https://github.com/NapNeko/NapCatQQ/issues">{{
+                            githubBastData?.open_issues_count
+                        }}</t-link>
+                    </span>
+                </t-list-item>
+                <t-list-item>
+                    <git-pull-request-filled-icon class="item-icon" size="large" />
+                    <span class="item-label">Pull Requests:</span>
+                    <span class="item-content">
+                        <t-link class="link-text" href="https://github.com/NapNeko/NapCatQQ/pulls">{{githubPullData?.length
+                        }}</t-link>
+                    </span>
+                </t-list-item>
+                <t-list-item >
+                    <bookmark-add-filled-icon class="item-icon" size="large" />
+                    <span class="item-label">Releases:</span>
+                    <span class="item-content">
+                        <t-link class="link-text" href="https://github.com/NapNeko/NapCatQQ/releases">{{
+                                githubReleasesData&&githubReleasesData[0]?timeDifference(githubReleasesData[0].published_at) + '前更新':''
+                        }}</t-link>
+                    </span>
+                </t-list-item>
+                <t-list-item>
+                    <usergroup-filled-icon class="item-icon" size="large" />
+                    <span class="item-label">Contributors:</span>
+                    <span class="item-content">
+                        <t-link class="link-text" href="https://github.com/NapNeko/NapCatQQ/graphs/contributors">{{githubContributorsData?.length}}</t-link>
+                    </span>
+                </t-list-item>
+                <t-list-item>
+                    <browse-filled-icon class="item-icon" size="large" />
+                    <span class="item-label">Watchers:</span>
+                    <span class="item-content">
+                        <t-link class="link-text" href="https://github.com/NapNeko/NapCatQQ/watchers">{{
+                            githubBastData?.watchers
+                        }}</t-link>
+                    </span>
+                </t-list-item>
+                <t-list-item>
+                    <fork-filled-icon class="item-icon" size="large" />
+                    <span class="item-label">Fork:</span>
+                    <span class="item-content">
+                        <t-link class="link-text" href="https://github.com/NapNeko/NapCatQQ/fork">{{
+                            githubBastData?.forks_count
+                        }}</t-link>
+                    </span>
+                </t-list-item>
+                <t-list-item>
+                    <statue-of-jesus-filled-icon class="item-icon" size="large" />
+                    <span class="item-label">License:</span>
+                    <span class="item-content">
+                        <t-link class="link-text" href="https://github.com/NapNeko/NapCatQQ#License-1-ov-file">{{
+                            githubBastData?.license.key
+                        }}</t-link>
+                    </span>
+                </t-list-item>
+                <t-list-item>
+                    <component-layout-filled-icon class="item-icon" size="large" />
+                    <span class="item-label">Version:</span>
+                    <span class="item-content">
+                        <t-tag class="tag-item pgk-color"> WebUi: {{ pkg.version }} </t-tag>
+                        <t-tag class="tag-item nc-color">
+                            NapCat:
+                            {{ napCatVersion }}
+                        </t-tag>
+                         <t-tag v-if="githubReleasesData&&githubReleasesData[0] ?.tag_name" class="tag-item nc-color">
+                            New NapCat:
+                            {{ githubReleasesData[0].tag_name }}
+                        </t-tag>
+                        <t-tag class="tag-item td-color"> TDesign: {{ pkg.dependencies['tdesign-vue-next'] }} </t-tag>
+                    </span>
+                </t-list-item>
+            </t-list>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import pkg from '../../package.json';
+import { napCatVersion } from '../../../src/common/version';
+import {
+    InfoCircleIcon,
+    TipsFilledIcon,
+    StarFilledIcon,
+    GitPullRequestFilledIcon,
+    ForkFilledIcon,
+    StatueOfJesusFilledIcon,
+    BookmarkAddFilledIcon,
+    UsergroupFilledIcon,
+    BrowseFilledIcon,
+    ComponentLayoutFilledIcon,
+} from 'tdesign-icons-vue-next';
+import { githubApiManager } from '@/backend/githubApi';
+import { onMounted, ref } from 'vue';
+const githubApi = new githubApiManager();
+const githubBastData = ref<any>(null);
+const githubReleasesData = ref<any>(null);
+const githubContributorsData = ref<any>(null);
+const githubPullData = ref<any>(null);
+const getBaseData = async () => {
+    githubBastData.value = await githubApi.GetBaseData();
+    githubReleasesData.value = await githubApi.GetReleasesData();
+    githubContributorsData.value = await githubApi.GetContributors();
+    githubPullData.value = await githubApi.GetPullsData();
+};
+const timeDifference = (timestamp: string): string => {
+    const givenTime = new Date(timestamp);
+    const currentTime = new Date();
+    const diffInMilliseconds = currentTime.getTime() - givenTime.getTime();
+
+    const seconds = Math.floor(diffInMilliseconds / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+
+    if (hours > 0) {
+        return `${hours}小时`;
+    } else if (minutes > 0) {
+        return `${minutes}分钟`;
+    } else {
+        return `${seconds}秒`;
+    }
+};
+onMounted(() => {
+    getBaseData();
+});
+</script>
+
+<style scoped>
+.about-us {
+    padding: 20px;
+    text-align: left;
+}
+.label-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.item-icon {
+    padding: 5px;
+    color: #ffffff;
+    border-radius: 3px;
+    background-image: linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 56%, #ffbac3 100%);
+}
+.item-label {
+    flex: 1;
+    margin-left: 8px;
+    box-sizing: border-box;
+    height: auto;
+    padding: 0;
+    border: none;
+    font-size: 16px;
+}
+.item-content {
+    flex: 2;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.tag-item {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+</style>
+<style>
+.t-list-item {
+    padding: 5px var(--td-comp-paddingLR-l);
+}
+.item-label {
+    flex: 2;
+    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.pgk-color {
+    color: white;
+    background-image: linear-gradient(-225deg, #9be15d 0%, #00e3ae 100%);
+}
+.nc-color {
+    color: white;
+    background-image: linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 56%, #ffbac3 100%);
+}
+.td-color {
+    color: white;
+    background-image: linear-gradient(225deg, #0acffe 0%, #495aff 100%);
+}
+.header {
+    background-image: linear-gradient(225deg, #dfffcd 0%, #90f9c4 48%, #39f3bb 100%) !important;
+}
+.link-text{
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(-225deg, #B6CEE8 0%, #F578DC 100%);
+    font-weight: bold;
+}
+</style>

napcat.webui/src/pages/BasicInfo.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="basic-info">
+        <h1>面板基础信息</h1>
+        <p>这里显示面板的基础信息。</p>
+    </div>
+</template>

napcat.webui/src/pages/Log.vue

@@ -0,0 +1,600 @@
+<template>
+    <div class="title">
+        <t-divider content="日志查看" align="left">
+            <template #content>
+                <div style="display: flex; justify-content: center; align-items: center">
+                    <system-log-icon></system-log-icon>
+                    <div style="margin-left: 5px">日志查看</div>
+                </div>
+            </template>
+        </t-divider>
+    </div>
+    <div class="tab-box">
+        <t-tabs default-value="realtime" @change="selectType">
+            <t-tab-panel value="realtime" label="实时日志"></t-tab-panel>
+            <t-tab-panel value="history" label="历史日志"></t-tab-panel>
+        </t-tabs>
+    </div>
+    <div class="card-box">
+        <t-card class="card" :bordered="true">
+            <template #actions>
+                <t-row :align="'middle'" justify="center" :style="{ gap: smallScreen.matches ? '5px' : '24px' }">
+                    <t-col flex="auto" style="display: inline-flex; justify-content: center">
+                        <t-tooltip content="清理日志">
+                            <t-button variant="text" shape="square" @click="clearLogs">
+                                <clear-icon></clear-icon>
+                            </t-button>
+                        </t-tooltip>
+                    </t-col>
+                    <t-col flex="auto" style="display: inline-flex; justify-content: center">
+                        <t-tooltip content="下载日志">
+                            <t-button variant="text" shape="square" @click="downloadText">
+                                <download-icon></download-icon>
+                            </t-button>
+                        </t-tooltip>
+                    </t-col>
+                    <t-col
+                        v-if="LogDataType === 'history'"
+                        flex="auto"
+                        style="display: inline-flex; justify-content: center">
+                        <t-tooltip content="历史日志">
+                            <t-button variant="text" shape="square" @click="historyLog">
+                                <history-icon></history-icon>
+                            </t-button>
+                        </t-tooltip>
+                    </t-col>
+                    <t-col flex="auto" style="display: inline-flex; justify-content: center">
+                        <div class="tag-box">
+                            <t-tag class="t-tag" :style="{ backgroundImage: typeKey[optValue.description] }">{{
+                                optValue.content }}</t-tag>
+                        </div>
+                        <t-dropdown :options="options" :min-column-width="112" @click="openTypeList">
+                            <t-button variant="text" shape="square">
+                                <more-icon />
+                            </t-button>
+                        </t-dropdown>
+                    </t-col>
+                </t-row>
+            </template>
+            <template #content>
+                <div class="content" ref="contentBox">
+                    <div v-for="item in LogDataType === 'realtime'
+                        ? realtimeLogHtmlList.get(optValue.description)
+                        : historyLogHtmlList.get(optValue.description)">
+                        <span>{{ item.time }}</span><span :id="item.type">{{ item.content }}</span>
+                    </div>
+                </div>
+            </template>
+        </t-card>
+    </div>
+    <t-dialog v-model:visible="visibleBody" header="历史日志" :destroy-on-close="true" :show-in-attached-element="true"
+        :on-confirm="GetLogList" class=".t-dialog__ctx .t-dialog__position">
+        <t-select v-model="value" :options="logFileData" placeholder="请选择日志" :multiple="true"
+            style="text-align: left" />
+    </t-dialog>
+</template>
+<script setup lang="ts">
+import { MoreIcon, ClearIcon, DownloadIcon, HistoryIcon, SystemLogIcon } from 'tdesign-icons-vue-next';
+import { nextTick, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { LogManager } from '@/backend/log';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { EventSourcePolyfill } from 'event-source-polyfill';
+const smallScreen = window.matchMedia('(max-width: 768px)');
+const LogDataType = ref<string>('realtime');
+const visibleBody = ref<boolean>(false);
+const contentBox = ref<HTMLElement | null>(null);
+let isMouseEntered = false;
+const logManager = new LogManager(localStorage.getItem('auth') || '');
+const eventSource = ref<EventSourcePolyfill | null>(null);
+const intervalId = ref<number | null>(null);
+const isPaused = ref(false);
+interface OptionItem {
+    content: string;
+    value: number;
+    description: string;
+}
+const options = ref<OptionItem[]>([
+    {
+        content: '全部',
+        value: 1,
+        description: 'all',
+    },
+    {
+        content: '调试',
+        value: 2,
+        description: 'debug',
+    },
+    {
+        content: '提示',
+        value: 3,
+        description: 'info',
+    },
+    {
+        content: '警告',
+        value: 4,
+        description: 'warn',
+    },
+    {
+        content: '错误',
+        value: 5,
+        description: 'error',
+    },
+    {
+        content: '致命',
+        value: 5,
+        description: 'fatal',
+    },
+]);
+const typeKey = ref<Record<string, string>>({
+    all: 'linear-gradient(60deg,#16a085 0%, #f4d03f 100%)',
+    debug: 'linear-gradient(-225deg, #5271c4 0%, #b19fff 48%, #eca1fe 100%)',
+    info: 'linear-gradient(-225deg, #22e1ff 0%, #1d8fe1 48%, #625eb1 100%)',
+    warn: 'linear-gradient(to right, #e14fad 0%, #f9d423 48%, #e37318 100%)',
+    error: 'linear-gradient(to left, #ffe29f 0%, #ffa99f 48%, #d94541 100%)',
+    fatal: 'linear-gradient(-225deg, #fd0700, #ec567f)',
+});
+interface logHtml {
+    type?: string;
+    content: string;
+    color?: string;
+    time?: string;
+}
+type LogHtmlMap = Map<string, logHtml[]>;
+const realtimeLogHtmlList = ref<LogHtmlMap>(
+    new Map([
+        ['all', []],
+        ['debug', []],
+        ['info', []],
+        ['warn', []],
+        ['error', []],
+        ['fatal', []],
+    ])
+);
+const historyLogHtmlList = ref<LogHtmlMap>(
+    new Map([
+        ['all', []],
+        ['debug', []],
+        ['info', []],
+        ['warn', []],
+        ['error', []],
+        ['fatal', []],
+    ])
+);
+const logFileData = ref<{ label: string; value: string }[]>([]);
+const value = ref([]);
+const optValue = ref<OptionItem>({
+    content: '全部',
+    value: 1,
+    description: 'all',
+});
+const openTypeList = (data: OptionItem) => {
+    optValue.value = data;
+};
+const logType = ['debug', 'info', 'warn', 'error', 'fatal'];
+//清理log
+const clearLogs = () => {
+    if (LogDataType.value === 'realtime') {
+        clearAllLogs(realtimeLogHtmlList);
+    } else {
+        clearAllLogs(historyLogHtmlList);
+    }
+};
+const clearAllLogs = (logList: Ref<Map<string, Array<logHtml>>>) => {
+    if ((optValue.value && optValue.value.description === 'all') || !optValue.value) {
+        logList.value = new Map([
+            ['all', []],
+            ['debug', []],
+            ['info', []],
+            ['warn', []],
+            ['error', []],
+            ['fatal', []],
+        ]);
+    } else {
+        logList.value.set(optValue.value.description, []);
+    }
+};
+//定时清理log
+
+const TimerClear = () => {
+    clearAllLogs(realtimeLogHtmlList);
+};
+const startTimer = () => {
+    if (!isPaused.value) {
+        intervalId.value = window.setInterval(TimerClear, 0.5 * 60 * 1000);
+    }
+};
+const pauseTimer = () => {
+    if (intervalId.value) {
+        window.clearInterval(intervalId.value);
+        isPaused.value = true;
+    }
+};
+const resumeTimer = () => {
+    if (isPaused.value) {
+        startTimer();
+        isPaused.value = false;
+    }
+};
+const stopTimer = () => {
+    if (intervalId.value) {
+        window.clearInterval(intervalId.value);
+        intervalId.value = null;
+    }
+};
+const extractContent = (text: string): string | null => {
+    const regex = /\[([^\]]+)]/;
+    const match = regex.exec(text);
+    if (match && match[1]) {
+        const extracted = match[1].toLowerCase();
+        if (logType.includes(extracted)) {
+            return match[1];
+        }
+    }
+    return null;
+};
+const loadData = (text: string, loadType: string) => {
+    const lines = text.split(/\r\n/);
+    lines.forEach((line) => {
+        if (loadType === 'realtime') {
+            let remoteJson = JSON.parse(line) as { message: string, level: string };
+            const type = remoteJson.level;
+            const actualType = type || 'other';
+            const color = actualType && typeKey.value[actualType] ? typeKey.value[actualType] : undefined;
+            const data: logHtml = {
+                type: actualType,
+                content: remoteJson.message,
+                color: color,
+                time: '',
+            };
+            updateLogList(realtimeLogHtmlList, actualType, data);
+        } else if (loadType === 'history') {
+            const type = extractContent(line);
+            const actualType = type || 'other';
+            const timeRegex = /(\d{2}-\d{2} \d{2}:\d{2}:\d{2})|(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/;
+            const match = timeRegex.exec(line);
+            let time = match ? match[0] : null;
+            const color = actualType && typeKey.value[actualType] ? typeKey.value[actualType] : undefined;
+            const data: logHtml = {
+                type: actualType,
+                content: line.slice(match ? match[0].length : 0) || '',
+                color: color,
+                time: time ? time + ' ' : '',
+            };
+            updateLogList(historyLogHtmlList, actualType, data);
+        }
+    });
+};
+
+const updateLogList = (logList: Ref<Map<string, Array<logHtml>>>, actualType: string, data: logHtml) => {
+    const allLogs = logList.value.get('all');
+    if (Array.isArray(allLogs)) {
+        allLogs.push(data);
+    }
+    if (actualType !== 'other') {
+        const typeLogs = logList.value.get(actualType);
+        if (Array.isArray(typeLogs)) {
+            typeLogs.push(data);
+        }
+    }
+};
+const selectType = (key: string) => {
+    LogDataType.value = key;
+};
+interface CustomURL extends URL {
+    recycleObjectURL: (url: string) => void;
+}
+
+const isCompatibleWithCustomURL = (obj: any): obj is CustomURL => {
+    return typeof obj === 'object' && obj !== null && typeof (obj as any).recycleObjectURL === 'function';
+};
+
+const recycleURL = (url: string) => {
+    if (isCompatibleWithCustomURL(window.URL)) {
+        const customURL = window.URL as CustomURL;
+        customURL.recycleObjectURL(url);
+    }
+};
+const generateTXT = (textContent: string, fileName: string) => {
+    try {
+        const blob = new Blob([textContent], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        a.click();
+        recycleURL(url);
+    } catch (error) {
+        console.error('下载文本时出现错误:', error);
+    }
+};
+const downloadText = () => {
+    if (LogDataType.value === 'realtime') {
+        const logs = realtimeLogHtmlList.value.get(optValue.value.description);
+        if (logs && logs.length > 0) {
+            const result = logs.map((obj) => obj.content).join('\r\n');
+            generateTXT(result, '实时日志');
+        } else {
+            MessagePlugin.error('暂无可下载日志');
+        }
+    } else {
+        const logs = historyLogHtmlList.value.get(optValue.value.description);
+        if (logs && logs.length > 0) {
+            const result = logs.map((obj) => obj.content).join('\r\n');
+            generateTXT(result, '历史日志');
+        } else {
+            MessagePlugin.error('暂无可下载日志');
+        }
+    }
+};
+const historyLog = async () => {
+    value.value = [];
+    visibleBody.value = true;
+    const res = await logManager.GetLogList();
+    clearAllLogs(historyLogHtmlList);
+    if (res.length > 0) {
+        logFileData.value = res.map((ele: string) => {
+            return { label: ele, value: ele };
+        });
+    } else {
+        logFileData.value = [];
+    }
+};
+const GetLogList = async () => {
+    if (value.value.length > 0) {
+        for (const ele of value.value) {
+            try {
+                const data = await logManager.GetLog(ele);
+                if (data && data !== 'null') {
+                    loadData(data, 'history');
+                }
+            } catch (error) {
+                console.error(`获取日志 ${ele} 时出现错误:`, error);
+            }
+        }
+        visibleBody.value = false;
+    } else {
+        MessagePlugin.error('请选择日志');
+    }
+};
+
+const fetchRealTimeLogs = async () => {
+    eventSource.value = await logManager.getRealTimeLogs();
+    if (eventSource.value) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-expect-error
+        eventSource.value.onmessage = (event: MessageEvent) => {
+            console.log(event.data)
+            loadData(event.data, 'realtime');
+        };
+    }
+};
+const closeRealTimeLogs = async () => {
+    if (eventSource.value) {
+        eventSource.value.close();
+    }
+};
+const scrollToBottom = () => {
+    if (!isMouseEntered) {
+        nextTick(() => {
+            if (contentBox.value) {
+                contentBox.value.scrollTop = contentBox.value.scrollHeight;
+            }
+        });
+    }
+};
+
+const observeDOMChanges = () => {
+    if (contentBox.value) {
+        const observer = new MutationObserver(() => {
+            scrollToBottom();
+        });
+        observer.observe(contentBox.value, {
+            childList: true,
+            subtree: true,
+        });
+    }
+};
+const showScrollbar = () => {
+    if (contentBox.value) {
+        contentBox.value.style.overflow = 'auto';
+    }
+};
+const hideScrollbar = () => {
+    if (contentBox.value) {
+        contentBox.value.style.overflow = 'hidden';
+        if (!isMouseEntered) {
+            scrollToBottom();
+        }
+    }
+};
+
+watch(
+    realtimeLogHtmlList,
+    () => {
+        if (!isMouseEntered) {
+            scrollToBottom();
+        }
+    },
+    { immediate: true }
+);
+watch(
+    historyLogHtmlList,
+    () => {
+        if (!isMouseEntered) {
+            scrollToBottom();
+        }
+    },
+    { immediate: true }
+);
+
+onMounted(() => {
+    fetchRealTimeLogs();
+    startTimer();
+    contentBox.value = document.querySelector('.content');
+    if (contentBox.value) {
+        contentBox.value.style.overflow = 'hidden';
+        contentBox.value.addEventListener('mouseenter', () => {
+            isMouseEntered = true;
+            showScrollbar();
+            pauseTimer();
+        });
+        contentBox.value.addEventListener('mouseleave', () => {
+            isMouseEntered = false;
+            hideScrollbar();
+            resumeTimer();
+            setTimeout(() => {
+                scrollToBottom();
+            }, 1000);
+        });
+        observeDOMChanges();
+    }
+});
+onUnmounted(() => {
+    closeRealTimeLogs();
+    stopTimer();
+});
+</script>
+<style scoped>
+.title {
+    padding: 20px 20px 0 20px;
+}
+
+.tab-box {
+    margin: 0 20px;
+}
+
+.card-box {
+    margin: 10px 20px;
+}
+
+.content {
+    height: 56vh;
+    background-image: url('@/assets/logo.png');
+    border: 1px solid #ddd6d6 !important;
+    padding: 5px 10px;
+    text-align: left;
+    overflow-y: auto;
+    margin-top: -10px;
+    font-family: monospace;
+    font-size: 15px;
+    line-height: 16px;
+}
+
+.content span {
+    white-space: pre-wrap;
+    word-break: break-all;
+    overflow-wrap: break-word;
+}
+
+@keyframes fadeInOnce {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOutOnce {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.content div {
+    animation: fadeInOnce 0.5s forwards;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #888888;
+    border-radius: 4px;
+}
+
+.tag-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 5px;
+}
+
+.t-tag {
+    min-width: 60px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    color: white;
+    font-weight: 500;
+}
+
+#debug {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(-225deg, #5271c4 0%, #b19fff 48%, #eca1fe 100%);
+}
+
+#info {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(-225deg, #22e1ff 0%, #1d8fe1 48%, #625eb1 100%);
+}
+
+#warn {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(225deg, #e14fad 0%, #f9d423 48%, #e37318 100%);
+}
+
+#error {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(to left, #ffe29f 0%, #ffa99f 48%, #d94541 100%);
+}
+
+#fatal {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(to right, #fd0700, #ec567f);
+}
+
+#other {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);
+}
+
+@media (max-width: 786px) {
+    .content {
+        height: 50vh;
+        font-family: ProtoNerdFontItalic, monospace;
+        font-size: 12px;
+        line-height: 14.3px;
+    }
+}
+</style>
+<style>
+.card {
+    padding: 5px 10px 20px 10px !important;
+}
+
+@media (max-width: 786px) {
+    .card {
+        padding: 0 !important;
+    }
+}
+</style>

napcat.webui/src/pages/NetWork.vue

@@ -0,0 +1,654 @@
+<template>
+    <div ref="headerBox" class="title">
+        <t-divider content="网络配置" align="left">
+            <template #content>
+                <div style="display: flex; justify-content: center; align-items: center">
+                    <wifi1-icon />
+                    <div style="margin-left: 5px">网络配置</div>
+                </div>
+            </template>
+        </t-divider>
+        <t-divider align="right">
+            <t-button @click="addConfig()">
+                <template #icon><add-icon /></template>
+                添加配置</t-button
+            >
+        </t-divider>
+    </div>
+    <div v-if="loadPage" ref="setting" class="setting">
+        <t-tabs ref="tabsRef" :style="{ width: tabsWidth + 'px' }" default-value="all" @change="selectType">
+            <t-tab-panel value="all" label="全部"></t-tab-panel>
+            <t-tab-panel value="httpServers" label="HTTP 服务器"></t-tab-panel>
+            <t-tab-panel value="httpClients" label="HTTP 客户端"></t-tab-panel>
+            <t-tab-panel value="websocketServers" label="WebSocket 服务器"></t-tab-panel>
+            <t-tab-panel value="websocketClients" label="WebSocket 客户端"></t-tab-panel>
+        </t-tabs>
+    </div>
+    <t-loading attach="#alice" :loading="!loadPage" :showOverlay="false">
+        <div id="alice" v-if="!loadPage" style="height: 80vh;position: relative" ></div>
+    </t-loading>
+    <div v-if="loadPage" class="card-box" :style="{ width: tabsWidth + 'px' }">
+        <div class="setting-box" :style="{ maxHeight: cardHeight + 'px' }" v-if="cardConfig.length > 0">
+            <div v-for="(item, index) in cardConfig" :key="index">
+                <t-card
+                    :title="item.name"
+                    :description="item.type"
+                    :style="{ width: cardWidth + 'px' }"
+                    :header-bordered="true"
+                    class="setting-card"
+                >
+                    <template #actions>
+                        <t-space>
+                            <edit2-icon size="20px" @click="editConfig(item)"></edit2-icon>
+                            <t-popconfirm  content="确认删除" @confirm="delConfig(item)">
+                                <delete-icon size="20px"></delete-icon>
+                            </t-popconfirm>
+                        </t-space>
+                    </template>
+                    <div class="setting-content">
+                        <t-card
+                            class="card-address"
+                            :style="{
+                                borderLeft:
+                                    '7px solid ' + (item.enable ? 'var(--td-success-color)' : 'var(--td-error-color)'),
+                            }"
+                        >
+                            <div class="local-box" v-if="item.host && item.port">
+                                <server-filled-icon class="local-icon" size="20px" @click="toggleProperty(item, 'enable')"></server-filled-icon>
+                                <strong class="local">{{ item.host }}:{{ item.port }}</strong>
+                                <copy-icon
+                                    class="copy-icon"
+                                    size="20px"
+                                    @click="copyText(item.host + ':' + item.port)"
+                                ></copy-icon>
+                            </div>
+                            <div class="local-box" v-if="item.url">
+                                <server-filled-icon class="local-icon" size="20px"  @click="toggleProperty(item, 'enable')"></server-filled-icon>
+                                <strong class="local">{{ item.url }}</strong>
+                                <copy-icon class="copy-icon" size="20px" @click="copyText(item.url)"></copy-icon>
+                            </div>
+                        </t-card>
+                        <t-collapse :default-value="[0]" expand-mutex style="margin-top: 10px" class="info-coll">
+                            <t-collapse-panel header="基础信息">
+                                <t-descriptions
+                                    size="small"
+                                    :layout="infoOneCol ? 'vertical' : 'horizontal'"
+                                    class="setting-base-info"
+                                >
+                                    <t-descriptions-item v-if="item.token" label="连接密钥">
+                                        <div v-if="mediumScreen.matches || largeScreen.matches" class="token-view">
+                                            <span>{{ showToken ? item.token : '******' }}</span>
+                                            <browse-icon
+                                                class="browse-icon"
+                                                v-if="showToken"
+                                                size="18px"
+                                                @click="showToken = false"
+                                            ></browse-icon>
+                                            <browse-off-icon
+                                                class="browse-icon"
+                                                v-else
+                                                size="18px"
+                                                @click="showToken = true"
+                                            ></browse-off-icon>
+                                        </div>
+                                        <div v-else>
+                                            <t-popup :showArrow="true" trigger="click">
+                                                <t-tag theme="primary">点击查看</t-tag>
+                                                <template #content>
+                                                    <div @click="copyText(item.token)">{{ item.token }}</div>
+                                                </template>
+                                            </t-popup>
+                                        </div>
+                                    </t-descriptions-item>
+                                    <t-descriptions-item label="消息格式">{{
+                                        item.messagePostFormat
+                                    }}</t-descriptions-item>
+                                </t-descriptions>
+                            </t-collapse-panel>
+                            <t-collapse-panel header="状态信息">
+                                <t-descriptions
+                                    size="small"
+                                    :layout="infoOneCol ? 'vertical' : 'horizontal'"
+                                    class="setting-base-info"
+                                >
+                                    <t-descriptions-item v-if="item.hasOwnProperty('debug')" label="调试日志">
+                                        <t-tag
+                                            :class="item.debug ? 'tag-item-on' : 'tag-item-off'"
+                                            @click="toggleProperty(item, 'debug')"
+                                        >
+                                            {{ item.debug ? '开启' : '关闭' }}</t-tag
+                                        >
+                                    </t-descriptions-item>
+                                    <t-descriptions-item
+                                        v-if="item.hasOwnProperty('enableWebsocket')"
+                                        label="Websocket 功能"
+                                    >
+                                        <t-tag
+                                            :class="item.enableWebsocket ? 'tag-item-on' : 'tag-item-off'"
+                                            @click="toggleProperty(item, 'enableWebsocket')"
+                                        >
+                                            {{ item.enableWebsocket ? '启用' : '禁用' }}</t-tag
+                                        >
+                                    </t-descriptions-item>
+                                    <t-descriptions-item
+                                        v-if="item.hasOwnProperty('enableCors')"
+                                        label="跨域放行"
+                                    >
+                                        <t-tag  :class="item.enableCors ? 'tag-item-on' : 'tag-item-off'" @click="toggleProperty(item, 'enableCors')">
+                                            {{ item.enableCors ? '开启' : '关闭' }}</t-tag
+                                        >
+                                    </t-descriptions-item>
+                                    <t-descriptions-item
+                                        v-if="item.hasOwnProperty('enableForcePushEvent')"
+                                        label="上报自身消息"
+                                    >
+                                        <t-tag
+                                            :class="item.reportSelfMessage ? 'tag-item-on' : 'tag-item-off'"
+                                            @click="toggleProperty(item, 'reportSelfMessage')"
+                                        >
+                                            {{ item.reportSelfMessage ? '开启' : '关闭' }}</t-tag
+                                        >
+                                    </t-descriptions-item>
+                                    <t-descriptions-item
+                                        v-if="item.hasOwnProperty('enableForcePushEvent')"
+                                        label="强制推送事件"
+                                    >
+                                        <t-tag
+                                            class="tag-item"
+                                            :class="item.enableForcePushEvent ? 'tag-item-on' : 'tag-item-off'"
+                                            @click="toggleProperty(item, 'enableForcePushEvent')"
+                                        >
+                                            {{ item.enableForcePushEvent ? '开启' : '关闭' }}</t-tag
+                                        >
+                                    </t-descriptions-item>
+                                </t-descriptions>
+                            </t-collapse-panel>
+                        </t-collapse>
+                    </div>
+                </t-card>
+            </div>
+            <div style="height: 20vh"></div>
+        </div>
+        <t-card v-else>
+            <t-empty class="card-none" title="暂无网络配置"> </t-empty>
+        </t-card>
+    </div>
+    <t-dialog
+        v-model:visible="visibleBody"
+        :header="dialogTitle"
+        :destroy-on-close="true"
+        :show-in-attached-element="true"
+        :on-confirm="saveConfig"
+        class=".t-dialog__ctx .t-dialog__position"
+    >
+        <div slot="body" class="dialog-body">
+            <t-form ref="form" :data="newTab" labelAlign="left" :model="newTab">
+                <t-form-item
+                    style="text-align: left"
+                    :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
+                    label="名称"
+                    name="name"
+                >
+                    <t-input v-model="newTab.name" />
+                </t-form-item>
+                <t-form-item
+                    style="text-align: left"
+                    :rules="[{ required: true, message: '请选择类型', trigger: 'change' }]"
+                    label="类型"
+                    name="type"
+                >
+                    <t-select v-model="newTab.type" @change="onloadDefault">
+                        <t-option value="httpServers">HTTP 服务器</t-option>
+                        <t-option value="httpClients">HTTP 客户端</t-option>
+                        <t-option value="websocketServers">WebSocket 服务器</t-option>
+                        <t-option value="websocketClients">WebSocket 客户端</t-option>
+                    </t-select>
+                </t-form-item>
+                <div>
+                    <component
+                        :is="resolveDynamicComponent(getComponent(newTab.type as ComponentKey))"
+                        :config="newTab.data"
+                    />
+                </div>
+            </t-form>
+        </div>
+    </t-dialog>
+</template>
+
+<script setup lang="ts">
+import {
+    AddIcon,
+    DeleteIcon,
+    Edit2Icon,
+    ServerFilledIcon,
+    CopyIcon,
+    BrowseOffIcon,
+    BrowseIcon,
+    Wifi1Icon,
+} from 'tdesign-icons-vue-next';
+import { onMounted, onUnmounted, ref, resolveDynamicComponent, watch } from 'vue';
+import emitter from '@/ts/event-bus';
+import {
+    mergeNetworkDefaultConfig,
+    mergeOneBotConfigs,
+    NetworkConfig,
+    OneBotConfig,
+} from '../../../src/onebot/config/config';
+import HttpServerComponent from '@/pages/network/HttpServerComponent.vue';
+import HttpClientComponent from '@/pages/network/HttpClientComponent.vue';
+import WebsocketServerComponent from '@/pages/network/WebsocketServerComponent.vue';
+import WebsocketClientComponent from '@/pages/network/WebsocketClientComponent.vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { QQLoginManager } from '@/backend/shell';
+
+const showToken = ref<boolean>(false);
+const infoOneCol = ref<boolean>(true);
+const tabsWidth = ref<number>(0);
+const menuWidth = ref<number>(0);
+const cardWidth = ref<number>(0);
+const cardHeight = ref<number>(0);
+const mediumScreen = window.matchMedia('(min-width: 768px) and (max-width: 1024px)');
+const largeScreen = window.matchMedia('(min-width: 1025px)');
+const headerBox = ref<HTMLDivElement | null>(null);
+const setting = ref<HTMLDivElement | null>(null);
+const loadPage = ref<boolean>(false);
+const visibleBody = ref<boolean>(false);
+const newTab = ref<{ name: string; data: any; type: string }>({ name: '', data: {}, type: '' });
+const dialogTitle = ref<string>('');
+
+type ComponentKey = keyof typeof mergeNetworkDefaultConfig;
+
+const componentMap: Record<
+    ComponentKey,
+    | typeof HttpServerComponent
+    | typeof HttpClientComponent
+    | typeof WebsocketServerComponent
+    | typeof WebsocketClientComponent
+> = {
+    httpServers: HttpServerComponent,
+    httpClients: HttpClientComponent,
+    websocketServers: WebsocketServerComponent,
+    websocketClients: WebsocketClientComponent,
+};
+
+//操作类型
+const operateType = ref<string>('');
+//配置项索引
+const configIndex = ref<number>(0);
+//保存时所用数据
+const networkConfig: NetworkConfig & { [key: string]: any } = {
+    websocketClients: [],
+    websocketServers: [],
+    httpClients: [],
+    httpServers: [],
+};
+
+//挂载的数据
+const WebConfg = ref(
+    new Map<string, Array<null>>([
+        ['all', []],
+        ['httpServers', []],
+        ['httpClients', []],
+        ['websocketServers', []],
+        ['websocketClients', []],
+    ])
+);
+const typeCh: Record<ComponentKey, string> = {
+    httpServers: 'HTTP 服务器',
+    httpClients: 'HTTP 客户端',
+    websocketServers: 'WebSocket 服务器',
+    websocketClients: 'WebSocket 客户端',
+};
+const cardConfig = ref<any>([]);
+const getComponent = (type: ComponentKey) => {
+    return componentMap[type];
+};
+const getKeyByValue = (obj: typeof typeCh, value: string): string | undefined => {
+    return Object.entries(obj).find(([_, v]) => v === value)?.[0];
+};
+
+const addConfig = () => {
+    dialogTitle.value = '添加配置';
+    newTab.value = { name: '', data: {}, type: '' };
+    operateType.value = 'add';
+    visibleBody.value = true;
+};
+
+const editConfig = (item: any) => {
+    dialogTitle.value = '修改配置';
+    const type = getKeyByValue(typeCh, item.type);
+    if (type) {
+        newTab.value = { name: item.name, data: item, type: type };
+    }
+    operateType.value = 'edit';
+    configIndex.value = networkConfig[newTab.value.type].findIndex((obj: any) => obj.name === item.name);
+    visibleBody.value = true;
+};
+const toggleProperty = async (item: any, tagData: string) => {
+    const type = getKeyByValue(typeCh, item.type);
+    const newData = { ...item };
+    newData[tagData] = !item[tagData];
+    if (type) {
+        newTab.value = { name: item.name, data: newData, type: type };
+    }
+    operateType.value = 'edit';
+    configIndex.value = networkConfig[newTab.value.type].findIndex((obj: any) => obj.name === item.name);
+    await saveConfig();
+};
+
+const delConfig = (item: any) => {
+    const type = getKeyByValue(typeCh, item.type);
+    if (type) {
+        newTab.value = { name: item.name, data: item, type: type };
+    }
+    configIndex.value = configIndex.value = networkConfig[newTab.value.type].findIndex(
+        (obj: any) => obj.name === item.name
+    );
+    operateType.value = 'delete';
+    saveConfig();
+};
+
+const selectType = (key: ComponentKey) => {
+    cardConfig.value = WebConfg.value.get(key);
+};
+
+const onloadDefault = (key: ComponentKey) => {
+    newTab.value.data = structuredClone(mergeNetworkDefaultConfig[key]);
+};
+//检测重名
+const checkName = (name: string) => {
+    const allConfigs = WebConfg.value.get('all')?.findIndex((obj: any) => obj.name === name);
+    if (newTab.value.name === '' || newTab.value.type === '') {
+        MessagePlugin.error('请填写完整信息');
+        return false;
+    } else if (allConfigs === -1 || newTab.value.data.name === name) {
+        return true;
+    } else {
+        MessagePlugin.error('名称已存在');
+        return false;
+    }
+};
+//保存
+const saveConfig = async () => {
+    if (operateType.value == 'add') {
+        if (!checkName(newTab.value.name)) return;
+        newTab.value.data.name = newTab.value.name;
+        networkConfig[newTab.value.type].push(newTab.value.data);
+    } else if (operateType.value == 'edit') {
+        if (!checkName(newTab.value.name)) return;
+        newTab.value.data.name = newTab.value.name;
+        networkConfig[newTab.value.type][configIndex.value] = newTab.value.data;
+    } else if (operateType.value == 'delete') {
+        networkConfig[newTab.value.type].splice(configIndex.value, 1);
+    }
+    const userConfig = await getOB11Config();
+    if (!userConfig) return;
+    userConfig.network = networkConfig;
+    const success = await setOB11Config(userConfig);
+    if (success) {
+        operateType.value = '';
+        configIndex.value = 0;
+        MessagePlugin.success('配置保存成功');
+        await loadConfig();
+        visibleBody.value = false;
+    } else {
+        MessagePlugin.error('配置保存失败');
+    }
+};
+const getOB11Config = async (): Promise<OneBotConfig | undefined> => {
+    const storedCredential = localStorage.getItem('auth');
+    if (!storedCredential) {
+        console.error('No stored credential found');
+        return;
+    }
+    const loginManager = new QQLoginManager(storedCredential);
+    return await loginManager.GetOB11Config();
+};
+
+const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
+    const storedCredential = localStorage.getItem('auth');
+    if (!storedCredential) {
+        console.error('No stored credential found');
+        return false;
+    }
+    const loginManager = new QQLoginManager(storedCredential);
+    return await loginManager.SetOB11Config(config);
+};
+
+//获取卡片数据
+const getAllData = (data: NetworkConfig) => {
+    cardConfig.value = [];
+    WebConfg.value.set('all', []);
+    for (const key in data) {
+        const configs = data[key as keyof NetworkConfig];
+        if (key in mergeNetworkDefaultConfig) {
+            networkConfig[key] = [...configs];
+            const newConfigsArray = configs.map((config: any) => ({
+                ...config,
+                type: typeCh[key as ComponentKey],
+            }));
+            WebConfg.value.set(key, newConfigsArray);
+            const allConfigs = WebConfg.value.get('all');
+            if (allConfigs) {
+                const newAllConfigs = [...allConfigs, ...newConfigsArray];
+                WebConfg.value.set('all', newAllConfigs);
+            }
+            cardConfig.value = WebConfg.value.get('all');
+        }
+    }
+};
+
+const loadConfig = async () => {
+    try {
+        const userConfig = await getOB11Config();
+        if (!userConfig) return;
+        const mergedConfig = mergeOneBotConfigs(userConfig);
+        getAllData(mergedConfig.network);
+    } catch (error) {
+        console.error('Error loading config:', error);
+    }
+};
+
+const copyText = async (text: string) => {
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    document.body.appendChild(textarea);
+    textarea.select();
+    try {
+        document.execCommand('copy');
+        MessagePlugin.success('复制成功');
+    } catch (err) {
+        console.error('复制失败', err);
+    } finally {
+        document.body.removeChild(textarea);
+    }
+};
+
+const handleResize = () => {
+    tabsWidth.value = window.innerWidth - 41 - menuWidth.value;
+    if (mediumScreen.matches) {
+        cardWidth.value = (tabsWidth.value - 20) / 2;
+    } else if (largeScreen.matches) {
+        cardWidth.value = (tabsWidth.value - 40) / 3;
+    } else {
+        cardWidth.value = tabsWidth.value;
+    }
+    loadPage.value = true;
+    setTimeout(()=>{
+        cardHeight.value = window.innerHeight - (headerBox.value?.offsetHeight ?? 0) - (setting.value?.offsetHeight ?? 0) - 21;
+    },300)
+};
+emitter.on('sendWidth', (width) => {
+    if (typeof width === 'string') {
+        const strWidth = width as string;
+        menuWidth.value = parseInt(strWidth);
+    }
+});
+watch(menuWidth, (newValue, oldValue) => {
+    loadPage.value = false;
+    setTimeout(()=>{
+        handleResize();
+    },300)
+});
+onMounted(() => {
+    loadConfig();
+    const cachedWidth = localStorage.getItem('menuWidth');
+    if (cachedWidth) {
+        menuWidth.value = parseInt(cachedWidth);
+        setTimeout(()=>{
+            handleResize();
+        },300)
+    }
+    window.addEventListener('resize', ()=>{
+        setTimeout(()=>{
+            handleResize();
+        },300)
+    });
+});
+onUnmounted(() => {
+    window.removeEventListener('resize', ()=>{
+        setTimeout(()=>{
+            handleResize();
+        },300)
+    });
+});
+</script>
+
+<style scoped>
+.title {
+    padding: 20px 20px 0 20px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.setting {
+    margin: 0 20px;
+}
+
+.setting-box {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 20px;
+    overflow-y: auto;
+}
+
+.setting-card {
+    width: 100%;
+    text-align: left;
+}
+
+.setting-content {
+    width: 100%;
+}
+
+.card-address svg {
+    fill: var(--td-brand-color);
+    cursor: pointer;
+}
+
+.local-box {
+    display: flex;
+    margin-top: 2px;
+}
+.local-icon {
+    flex: 1;
+}
+.local {
+    flex: 6;
+    margin: 0 10px 0 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.copy-icon {
+    flex: 1;
+    cursor: pointer;
+    flex-direction: row;
+}
+
+.token-view {
+    display: flex;
+    align-items: center;
+}
+
+.token-view span {
+    flex: 5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.tag-item-on{
+    color: white;
+    cursor: pointer;
+    background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%) !important;
+}
+.tag-item-off{
+    color: white;
+    cursor: pointer;
+    background-image: linear-gradient(to top, rgba(255, 8, 68, 0.93) 0%, #D54941 100%) !important;
+}
+.browse-icon {
+    flex: 2;
+}
+:global(.t-dialog__ctx .t-dialog__position) {
+    padding: 48px 10px;
+}
+@media (max-width: 1024px) {
+    .setting-box {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (max-width: 786px) {
+    .setting-box {
+        grid-template-columns: 1fr;
+    }
+}
+
+.card-box {
+    margin: 10px 20px 0 20px;
+}
+
+.card-none {
+    line-height: 400px !important;
+}
+
+.dialog-body {
+    max-height: 50vh;
+    overflow-y: auto;
+}
+
+::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+}
+</style>
+<style>
+.setting-card .t-card__title {
+    text-align: left !important;
+}
+
+.setting-card .t-card__description {
+    margin-bottom: 0;
+    font-size: 12px;
+}
+
+.setting-base-info .t-descriptions__header {
+    font-size: 15px;
+    margin-bottom: 0;
+}
+
+.setting-base-info .t-descriptions__label {
+    padding: 0 var(--td-comp-paddingLR-l) !important;
+}
+
+.setting-base-info tr > td:last-child {
+    text-align: right;
+}
+
+.info-coll .t-collapse-panel__wrapper .t-collapse-panel__content {
+    padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
+}
+</style>

napcat.webui/src/pages/OtherConfig.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="title">
+        <t-divider content="其余配置" align="left">
+            <template #content>
+                <div style="display: flex; justify-content: center; align-items: center">
+                    <setting-icon />
+                    <div style="margin-left: 5px">其余配置</div>
+                </div>
+            </template>
+        </t-divider>
+    </div>
+    <t-card class="card">
+        <div class="other-config-container">
+            <div class="other-config">
+                <t-form ref="form" :model="otherConfig" :label-align="labelAlign" label-width="auto" colon>
+                    <t-form-item label="音乐签名地址" name="musicSignUrl" class="form-item">
+                        <t-input v-model="otherConfig.musicSignUrl" />
+                    </t-form-item>
+                    <t-form-item label="启用本地文件到URL" name="enableLocalFile2Url" class="form-item">
+                        <t-switch v-model="otherConfig.enableLocalFile2Url" />
+                    </t-form-item>
+                    <t-form-item label="启用上报解析合并消息" name="parseMultMsg" class="form-item">
+                        <t-switch v-model="otherConfig.parseMultMsg" />
+                    </t-form-item>
+                </t-form>
+                <div class="button-container">
+                    <t-button @click="saveConfig">保存</t-button>
+                </div>
+            </div>
+        </div>
+    </t-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { OneBotConfig } from '../../../src/onebot/config/config';
+import { QQLoginManager } from '@/backend/shell';
+import { SettingIcon } from 'tdesign-icons-vue-next';
+
+const otherConfig = ref<Partial<OneBotConfig>>({
+    musicSignUrl: '',
+    enableLocalFile2Url: false,
+    parseMultMsg: true,
+});
+
+const labelAlign = ref<string>();
+const getOB11Config = async (): Promise<OneBotConfig | undefined> => {
+    const storedCredential = localStorage.getItem('auth');
+    if (!storedCredential) {
+        console.error('No stored credential found');
+        return;
+    }
+    const loginManager = new QQLoginManager(storedCredential);
+    return await loginManager.GetOB11Config();
+};
+
+const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
+    const storedCredential = localStorage.getItem('auth');
+    if (!storedCredential) {
+        console.error('No stored credential found');
+        return false;
+    }
+    const loginManager = new QQLoginManager(storedCredential);
+    return await loginManager.SetOB11Config(config);
+};
+
+const loadConfig = async () => {
+    try {
+        const userConfig = await getOB11Config();
+        if (userConfig) {
+            otherConfig.value.musicSignUrl = userConfig.musicSignUrl;
+            otherConfig.value.enableLocalFile2Url = userConfig.enableLocalFile2Url;
+            otherConfig.value.parseMultMsg = userConfig.parseMultMsg;
+        }
+    } catch (error) {
+        console.error('Error loading config:', error);
+    }
+};
+
+const saveConfig = async () => {
+    try {
+        const userConfig = await getOB11Config();
+        if (userConfig) {
+            userConfig.musicSignUrl = otherConfig.value.musicSignUrl || '';
+            userConfig.enableLocalFile2Url = otherConfig.value.enableLocalFile2Url ?? false;
+            userConfig.parseMultMsg = otherConfig.value.parseMultMsg ?? true;
+            const success = await setOB11Config(userConfig);
+            if (success) {
+                MessagePlugin.success('配置保存成功');
+            } else {
+                MessagePlugin.error('配置保存失败');
+            }
+        }
+    } catch (error) {
+        console.error('Error saving config:', error);
+        MessagePlugin.error('配置保存失败');
+    }
+};
+onMounted(() => {
+    loadConfig();
+    const mediaQuery = window.matchMedia('(max-width: 768px)');
+    const handleMediaChange = (e: MediaQueryListEvent) => {
+        if (e.matches) {
+            labelAlign.value = 'top';
+        } else {
+            labelAlign.value = 'left';
+        }
+    };
+    mediaQuery.addEventListener('change', handleMediaChange);
+    const event = new Event('change');
+    Object.defineProperty(event, 'matches', {
+        value: mediaQuery.matches,
+        writable: false,
+    });
+    mediaQuery.dispatchEvent(event);
+    return () => {
+        mediaQuery.removeEventListener('change', handleMediaChange);
+    };
+});
+</script>
+
+<style scoped>
+.title {
+    padding: 20px 20px 0 20px;
+}
+.card {
+    margin: 0 20px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+.other-config-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    box-sizing: border-box;
+}
+
+.other-config {
+    width: 100%;
+    max-width: 500px;
+
+    border-radius: 8px;
+}
+
+.form-item {
+    margin-bottom: 20px;
+    text-align: left;
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+</style>

napcat.webui/src/pages/network/HttpClientComponent.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <t-form labelAlign="left">
+            <t-form-item label="启用">
+                <t-switch v-model="config.enable" />
+            </t-form-item>
+            <t-form-item label="URL">
+                <t-input v-model="config.url" />
+            </t-form-item>
+            <t-form-item label="消息格式">
+                <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
+            </t-form-item>
+            <t-form-item label="报告自身消息">
+                <t-switch v-model="config.reportSelfMessage" />
+            </t-form-item>
+            <t-form-item label="Token">
+                <t-input v-model="config.token" />
+            </t-form-item>
+            <t-form-item label="调试模式">
+                <t-switch v-model="config.debug" />
+            </t-form-item>
+        </t-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { HttpClientConfig } from '../../../../src/onebot/config/config';
+
+const props = defineProps<{
+    config: HttpClientConfig;
+}>();
+
+const messageFormatOptions = ref([
+    { label: 'Array', value: 'array' },
+    { label: 'String', value: 'string' },
+]);
+
+watch(
+    () => props.config.messagePostFormat,
+    (newValue) => {
+        if (newValue !== 'array' && newValue !== 'string') {
+            props.config.messagePostFormat = 'array';
+        }
+    }
+);
+</script>
+
+<style scoped></style>

napcat.webui/src/pages/network/HttpServerComponent.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <t-form labelAlign="left">
+            <t-form-item label="启用">
+                <t-switch v-model="config.enable" />
+            </t-form-item>
+            <t-form-item label="端口">
+                <t-input v-model.number="config.port" type="number" />
+            </t-form-item>
+            <t-form-item label="主机">
+                <t-input v-model="config.host" type="text" />
+            </t-form-item>
+            <t-form-item label="启用 CORS">
+                <t-switch v-model="config.enableCors" />
+            </t-form-item>
+            <t-form-item label="启用 WS">
+                <t-switch v-model="config.enableWebsocket" />
+            </t-form-item>
+            <t-form-item label="消息格式">
+                <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
+            </t-form-item>
+            <t-form-item label="Token">
+                <t-input v-model="config.token" type="text" />
+            </t-form-item>
+            <t-form-item label="调试模式">
+                <t-switch v-model="config.debug" />
+            </t-form-item>
+        </t-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { HttpServerConfig } from '../../../../src/onebot/config/config';
+
+const props = defineProps<{
+    config: HttpServerConfig;
+}>();
+
+const messageFormatOptions = ref([
+    { label: 'Array', value: 'array' },
+    { label: 'String', value: 'string' },
+]);
+
+watch(
+    () => props.config.messagePostFormat,
+    (newValue) => {
+        if (newValue !== 'array' && newValue !== 'string') {
+            props.config.messagePostFormat = 'array';
+        }
+    }
+);
+</script>
+
+<style scoped></style>

napcat.webui/src/pages/network/WebsocketClientComponent.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <t-form labelAlign="left">
+            <t-form-item label="启用">
+                <t-switch v-model="config.enable" />
+            </t-form-item>
+            <t-form-item label="URL">
+                <t-input v-model="config.url" />
+            </t-form-item>
+            <t-form-item label="消息格式">
+                <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
+            </t-form-item>
+            <t-form-item label="报告自身消息">
+                <t-switch v-model="config.reportSelfMessage" />
+            </t-form-item>
+            <t-form-item label="Token">
+                <t-input v-model="config.token" />
+            </t-form-item>
+            <t-form-item label="调试模式">
+                <t-switch v-model="config.debug" />
+            </t-form-item>
+            <t-form-item label="心跳间隔">
+                <t-input v-model.number="config.heartInterval" type="number" />
+            </t-form-item>
+        </t-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { WebsocketClientConfig } from '../../../../src/onebot/config/config';
+
+const props = defineProps<{
+    config: WebsocketClientConfig;
+}>();
+
+const messageFormatOptions = ref([
+    { label: 'Array', value: 'array' },
+    { label: 'String', value: 'string' },
+]);
+
+watch(
+    () => props.config.messagePostFormat,
+    (newValue) => {
+        if (newValue !== 'array' && newValue !== 'string') {
+            props.config.messagePostFormat = 'array';
+        }
+    }
+);
+</script>
+
+<style scoped></style>

napcat.webui/src/pages/network/WebsocketServerComponent.vue

@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <t-form labelAlign="left">
+            <t-form-item label="启用">
+                <t-switch v-model="config.enable" />
+            </t-form-item>
+            <t-form-item label="主机">
+                <t-input v-model="config.host" />
+            </t-form-item>
+            <t-form-item label="端口">
+                <t-input v-model.number="config.port" type="number" />
+            </t-form-item>
+            <t-form-item label="消息格式">
+                <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
+            </t-form-item>
+            <t-form-item label="上报自身消息">
+                <t-switch v-model="config.reportSelfMessage" />
+            </t-form-item>
+            <t-form-item label="Token">
+                <t-input v-model="config.token" />
+            </t-form-item>
+            <t-form-item label="强制推送事件">
+                <t-switch v-model="config.enableForcePushEvent" />
+            </t-form-item>
+            <t-form-item label="调试模式">
+                <t-switch v-model="config.debug" />
+            </t-form-item>
+            <t-form-item label="心跳间隔">
+                <t-input v-model.number="config.heartInterval" type="number" />
+            </t-form-item>
+        </t-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { WebsocketServerConfig } from '../../../../src/onebot/config/config';
+
+const props = defineProps<{
+    config: WebsocketServerConfig;
+}>();
+
+const messageFormatOptions = ref([
+    { label: 'Array', value: 'array' },
+    { label: 'String', value: 'string' },
+]);
+
+watch(
+    () => props.config.messagePostFormat,
+    (newValue) => {
+        if (newValue !== 'array' && newValue !== 'string') {
+            props.config.messagePostFormat = 'array';
+        }
+    }
+);
+</script>
+
+<style scoped></style>

napcat.webui/src/router/index.ts

@@ -0,0 +1,54 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import Dashboard from '../components/Dashboard.vue';
+import BasicInfo from '../pages/BasicInfo.vue';
+import AboutUs from '../pages/AboutUs.vue';
+import LogView from '../pages/Log.vue';
+import NetWork from '../pages/NetWork.vue';
+import QQLogin from '../components/QQLogin.vue';
+import WebUiLogin from '../components/WebUiLogin.vue';
+import OtherConfig from '../pages/OtherConfig.vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { QQLoginManager } from '@/backend/shell';
+
+const routes: Array<RouteRecordRaw> = [
+    { path: '/', redirect: '/webui' },
+    { path: '/webui', component: WebUiLogin, name: 'WebUiLogin' },
+    { path: '/qqlogin', component: QQLogin, name: 'QQLogin' },
+    {
+        path: '/dashboard',
+        component: Dashboard,
+        children: [
+            { path: '', redirect: 'basic-info' },
+            { path: 'basic-info', component: BasicInfo, name: 'BasicInfo' },
+            { path: 'network-config', component: NetWork, name: 'NetWork' },
+            { path: 'log-view', component: LogView, name: 'LogView' },
+            { path: 'other-config', component: OtherConfig, name: 'OtherConfig' },
+            { path: 'about-us', component: AboutUs, name: 'AboutUs' },
+        ],
+    },
+];
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+});
+
+router.beforeEach(async (to, from, next) => {
+    const isPublicRoute = ['/webui', '/qqlogin'].includes(to.path);
+    const token = localStorage.getItem('auth');
+
+    if (!isPublicRoute) {
+        if (!token) {
+            MessagePlugin.error('请先登录');
+            return next('/webui');
+        }
+        const login = await new QQLoginManager(token).checkWebUiLogined();
+        if (!login) {
+            MessagePlugin.error('请先登录');
+            return next('/webui');
+        }
+    }
+    next();
+});
+
+export default router;

napcat.webui/src/ts/event-bus.ts

@@ -0,0 +1,3 @@
+import mitt from 'mitt';
+const emitter = mitt();
+export default emitter;

napcat.webui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

napcat.webui/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "jsx": "preserve",
+        "jsxImportSource": "vue",
+        "lib": ["DOM", "DOM.Iterable", "ES2022"],
+        "baseUrl": ".",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "paths": {
+            "@/*": ["src/*"]
+        },
+        "resolveJsonModule": true,
+        "types": ["vite/client"],
+        "strict": true,
+        "strictNullChecks": true,
+        "noUnusedLocals": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "isolatedModules": true,
+        "experimentalDecorators": true,
+        "useDefineForClassFields": true
+    },
+    "include": ["src"],
+    "exclude": ["node_modules"],
+    "references": [{ "path": "./tsconfig.node.json" }]
+}

napcat.webui/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true,
+        "strictNullChecks": true
+    },
+    "include": ["vite.config.ts"]
+}

napcat.webui/vite.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import legacy from '@vitejs/plugin-legacy';
+import path from 'path';
+
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [
+        vue(),
+        legacy({
+            targets: ['defaults', 'not IE 11'],
+            modernPolyfills: ['web.structured-clone'],
+        }),
+    ],
+    base: './',
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, 'src'),
+        },
+    },
+    server: {
+        proxy: {
+            '/api': 'http://localhost:6099',
+        },
+    },
+    build: {
+        chunkSizeWarningLimit: 4000,
+        rollupOptions: {
+            output: {
+                chunkFileNames: 'static/js/[name]-[hash].js',
+                entryFileNames: 'static/js/[name]-[hash].js',
+                assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+                manualChunks(id: string) {
+                    if (id.includes('node_modules')) {
+                        return id.toString().split('node_modules/')[1].split('/')[0].toString();
+                    }
+                },
+            },
+        },
+    },
+});

package.json

@@ -1,67 +1,64 @@
-{
-  "name": "napcat",
-  "private": true,
-  "type": "module",
-  "version": "1.5.1",
-  "scripts": {
-    "watch:dev": "vite --mode development",
-    "watch:prod": "vite --mode production",
-    "build:dev": "vite build --mode development",
-    "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}",
-    "release": "npm run build:prod",
-    "depend": "cd dist && npm install --omit=dev"
-  },
-  "devDependencies": {
-    "@log4js-node/log4js-api": "^1.0.2",
-    "@protobuf-ts/plugin": "^2.9.4",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/cors": "^2.8.17",
-    "@types/express": "^4.17.21",
-    "@types/figlet": "^1.5.8",
-    "@types/fluent-ffmpeg": "^2.1.24",
-    "@types/node": "^20.11.30",
-    "@types/qrcode-terminal": "^0.12.2",
-    "@types/uuid": "^9.0.8",
-    "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
-    "eslint": "^8.57.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "i": "^0.3.7",
-    "javascript-obfuscator": "^4.1.0",
-    "rollup": "^4.13.2",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-obfuscator": "^1.1.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.2.6",
-    "vite-plugin-cp": "^4.0.8",
-    "vite-plugin-dts": "^3.8.2",
-    "vite-tsconfig-paths": "^4.3.2"
-  },
-  "dependencies": {
-    "ajv": "^8.13.0",
-    "chalk": "^5.3.0",
-    "commander": "^12.0.0",
-    "cors": "^2.8.5",
-    "express": "^5.0.0-beta.2",
-    "fast-xml-parser": "^4.3.6",
-    "file-type": "^19.0.0",
-    "fluent-ffmpeg": "^2.1.2",
-    "image-size": "^1.1.1",
-    "json-schema-to-ts": "^3.1.0",
-    "log4js": "^6.9.1",
-    "qrcode-terminal": "^0.12.0",
-    "silk-wasm": "^3.3.4",
-    "sqlite3": "^5.1.7",
-    "uuid": "^9.0.1",
-    "ws": "^8.16.0"
-  }
-}
+{
+  "name": "napcat",
+  "private": true,
+  "type": "module",
+  "version": "4.3.4",
+  "scripts": {
+    "build:universal": "npm run build:webui && vite build --mode universal || exit 1",
+    "build:framework": "npm run build:webui && vite build --mode framework || exit 1",
+    "build:shell": "npm run build:webui && vite build --mode shell || exit 1",
+    "build:webui": "cd napcat.webui && vite build",
+    "dev:universal": "vite build --mode universal",
+    "dev:framework": "vite build --mode framework",
+    "dev:shell": "vite build --mode shell",
+    "dev:webui": "cd napcat.webui && npm run webui:dev",
+    "lint": "eslint --fix src/**/*.{js,ts,vue}",
+    "depend": "cd dist && npm install --omit=dev",
+    "dev:depend": "npm i && cd napcat.webui && npm i"
+  },
+  "devDependencies": {
+    "esbuild": "0.24.0",
+    "@babel/preset-typescript": "^7.24.7",
+    "@eslint/compat": "^1.2.2",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
+    "@log4js-node/log4js-api": "^1.0.2",
+    "@napneko/nap-proto-core": "^0.0.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@types/cors": "^2.8.17",
+    "@sinclair/typebox": "^0.34.9",
+    "@types/express": "^5.0.0",
+    "@types/fluent-ffmpeg": "^2.1.24",
+    "@types/node": "^22.0.1",
+    "@types/qrcode-terminal": "^0.12.2",
+    "@types/ws": "^8.5.12",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
+    "ajv": "^8.13.0",
+    "async-mutex": "^0.5.0",
+    "commander": "^13.0.0",
+    "cors": "^2.8.5",
+    "eslint": "^9.14.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "fast-xml-parser": "^4.3.6",
+    "file-type": "^19.0.0",
+    "globals": "^15.12.0",
+    "image-size": "^1.1.1",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.13.0",
+    "vite": "^6.0.1",
+    "vite-plugin-cp": "^4.0.8",
+    "vite-tsconfig-paths": "^5.1.0",
+    "winston": "^3.17.0"
+  },
+  "dependencies": {
+    "express": "^5.0.0",
+    "fluent-ffmpeg": "^2.1.2",
+    "piscina": "^4.7.0",
+    "qrcode-terminal": "^0.12.0",
+    "silk-wasm": "^3.6.1",
+    "ws": "^8.18.0"
+  }
+}

script/KillQQ.bat

@@ -0,0 +1,2 @@
+@echo off
+taskkill /f /im QQ.exe

script/checkVersion.cjs

@@ -4,14 +4,25 @@ const process = require("process");
 console.log("[NapCat] [CheckVersion] 开始检测当前仓库版本...");
 try {
   const packageJson = require("../package.json");
+  const manifsetJson = require("../manifest.json");
+
   const currentVersion = packageJson.version;
   const targetVersion = process.env.VERSION;
 
+  const manifestCurrentVersion = manifsetJson.version;
+  const manifestTargetVersion = process.env.VERSION;
+
   console.log("[NapCat] [CheckVersion] currentVersion:", currentVersion, "targetVersion:", targetVersion);
+  console.log("[NapCat] [CheckVersion] manifestCurrentVersion:", manifestCurrentVersion, "manifestTargetVersion:", manifestTargetVersion);
 
   // 验证 targetVersion 格式
   if (!targetVersion || typeof targetVersion !== 'string') {
-    console.error("[NapCat] [CheckVersion] 目标版本格式不正确或未设置！");
+    console.log("[NapCat] [CheckVersion] 目标版本格式不正确或未设置！");
+    return;
+  }
+  // 验证 manifestTargetVersion 格式
+  if (!manifestTargetVersion || typeof manifestTargetVersion !== 'string') {
+    console.log("[NapCat] [CheckVersion] manifest目标版本格式不正确或未设置！");
     return;
   }
 
@@ -21,7 +32,7 @@ try {
     console.log("[NapCat] [CheckVersion] checkVersion.sh 文件已更新。");
   };
 
-  if (currentVersion === targetVersion) {
+  if (currentVersion === targetVersion && manifestCurrentVersion === manifestTargetVersion) {
     // 不需要更新版本，写入一个简单的脚本
     const simpleScript = "#!/bin/bash\necho \"CheckVersion Is Done\"";
     writeScriptToFile(simpleScript);
@@ -29,14 +40,16 @@ try {
     // 更新版本，构建安全的sed命令
     const safeScriptContent = `
     #!/bin/bash
-    git config --global user.email "bot@test.wumiao.wang"
-    git config --global user.name "Version"
-    sed -i "s/\\\"version\\\": \\\"${currentVersion}\\\"/\\\"version\\\": \\\"${targetVersion}\\\"/g" package.json
+    git config --global user.email "nanaeonn@outlook.com"
+    git config --global user.name "Mlikiowa"
+    sed -i "s/\\"version\\": \\"${currentVersion}\\"/\\"version\\": \\"${targetVersion}\\"/g" package.json
+    sed -i "s/\\"version\\": \\"${manifestCurrentVersion}\\"/\\"version\\": \\"${targetVersion}\\"/g" manifest.json
+    sed -i "s/napCatVersion = '.*'/napCatVersion = '${targetVersion}'/g" ./src/common/version.ts
     git add .
-    git commit -m "chore:version change"
+    git commit -m "release: v${targetVersion}"
     git push -u origin main`;
     writeScriptToFile(safeScriptContent);
   }
 } catch (error) {
-  console.error("[NapCat] [CheckVersion] 检测过程中发生错误：", error);
+  console.log("[NapCat] [CheckVersion] 检测过程中发生错误：", error);
 }

script/copy-core.cjs

@@ -1,32 +0,0 @@
-let fs = require('fs');
-let path = require('path');
-
-const coreDistDir = path.join(path.resolve(__dirname, '../'), 'src/core/dist/core/src');
-const coreLibDir = path.join(path.resolve(__dirname, '../'), 'src/core.lib/src');
-
-function copyDir(currentPath, outputDir) {
-  fs.readdir(currentPath, { withFileTypes: true }, (err, entries) => {
-    if (err?.errno === -4058) return;
-
-    entries.forEach(entry => {
-      const localBasePath = path.join(currentPath, entry.name);
-      const outputLocalBasePath = path.join(outputDir, entry.name);
-
-      if (entry.isDirectory()) {
-        // 如果是目录，递归调用
-        if (!fs.existsSync(outputLocalBasePath)) {
-          fs.mkdirSync(outputLocalBasePath, { recursive: true });
-        }
-        copyDir(localBasePath, outputLocalBasePath);
-      }
-      else{
-        // 如果是文件，直接复制
-        fs.copyFile(localBasePath, outputLocalBasePath, (err) => {
-          if (err) throw err;
-        });
-      }
-    });
-  });
-}
-
-copyDir(coreDistDir, coreLibDir);

script/gen-version.ts

@@ -1,21 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import { version } from '../src/onebot11/version'
-
-const manifestPath = path.join(__dirname, '../package.json')
-
-function readManifest (): any {
-    if (fs.existsSync(manifestPath)) {
-        return JSON.parse(fs.readFileSync(manifestPath, 'utf-8'))
-    }
-}
-
-function writeManifest (manifest: any) {
-    fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2))
-}
-
-const manifest = readManifest()
-if (version !== manifest.version) {
-    manifest.version = version
-    writeManifest(manifest)
-}

script/napcat-custom.bat

@@ -1,3 +0,0 @@
-chcp 65001
-set ELECTRON_RUN_AS_NODE=1
-"H:\Program Files\QQNT最新版\QQ.exe" %~dp0/napcat.cjs %*

script/napcat-gc.ps1

@@ -1,15 +0,0 @@
-function Get-QQpath {
-    try {
-        $key = Get-ItemProperty -Path "HKLM:\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ"
-        $uninstallString = $key.UninstallString
-        return [System.IO.Path]::GetDirectoryName($uninstallString) + "\QQ.exe"
-    }
-    catch {
-        throw "Error getting UninstallString: $_"
-    }
-}
-$params = $args -join " "
-$QQpath = Get-QQpath
-$Bootfile = Join-Path (Get-Location) "\dist\inject.cjs"
-$env:ELECTRON_RUN_AS_NODE = 1
-Start-Process powershell -ArgumentList "-noexit", "-noprofile", "-command &{& '$QQpath' --expose-gc $Bootfile $params}"

script/napcat-log.ps1

@@ -1,17 +0,0 @@
-function Get-QQpath {
-    try {
-        $key = Get-ItemProperty -Path "HKLM:\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ"
-        $uninstallString = $key.UninstallString
-        return [System.IO.Path]::GetDirectoryName($uninstallString) + "\QQ.exe"
-    }
-    catch {
-        return "D:\QQ.exe"
-    }
-}
-$params = $args -join " "
-$QQpath = Get-QQpath
-$Bootfile = Join-Path $PSScriptRoot "napcat.cjs"
-$env:ELECTRON_RUN_AS_NODE = 1
-$argumentList = '-noexit', '-noprofile', "-command `"$QQpath`" `"$Bootfile`" $params"
-Start-Process powershell -ArgumentList $argumentList -RedirectStandardOutput "log.txt" -RedirectStandardError "error.txt"
-powershell Get-Content -Wait -Encoding UTF8 log.txt

script/napcat-utf8.bat

@@ -1,18 +0,0 @@
-@echo off
-setlocal enabledelayedexpansion
-chcp 65001
-:loop_read
-for /f "tokens=2*" %%a in ('reg query "HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ" /v "UninstallString"') do (
-    set "RetString=%%b"
-    goto :napcat_boot
-)
-
-:napcat_boot
-for %%a in ("!RetString!") do (
-    set "pathWithoutUninstall=%%~dpa"
-)
-
-set "QQPath=!pathWithoutUninstall!QQ.exe"
-set ELECTRON_RUN_AS_NODE=1
-echo !QQPath!
-"!QQPath!" ./napcat.mjs %*

script/napcat-utf8.ps1

@@ -1,43 +0,0 @@
-function Get-QQpath {
-    try {
-        $key = Get-ItemProperty -Path "HKLM:\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ"
-        $uninstallString = $key.UninstallString
-        return [System.IO.Path]::GetDirectoryName($uninstallString) + "\QQ.exe"
-    }
-    catch {
-        throw "get QQ path error: $_"
-    }
-}
-function Select-QQPath {
-    Add-Type -AssemblyName System.Windows.Forms
-    [System.Windows.Forms.Application]::EnableVisualStyles()
-
-    $dialogTitle = "Select QQ.exe"
-
-    $filePicker = New-Object System.Windows.Forms.OpenFileDialog
-    $filePicker.Title = $dialogTitle
-    $filePicker.Filter = "Executable Files (*.exe)|*.exe|All Files (*.*)|*.*"
-    $filePicker.FilterIndex = 1
-    $null = $filePicker.ShowDialog()
-    if (-not ($filePicker.FileName)) {
-        throw "User did not select an .exe file."
-    }
-    return $filePicker.FileName
-}
-
-$params = $args -join " "
-Try {
-    $QQpath = Get-QQpath
-}
-Catch {
-    $QQpath = Select-QQPath
-}
-
-if (!(Test-Path $QQpath)) {
-    throw "provided QQ path is invalid: $QQpath"
-}
-
-$Bootfile = Join-Path $PSScriptRoot "napcat.mjs"
-$env:ELECTRON_RUN_AS_NODE = 1
-$commandInfo = Get-Command $QQpath -ErrorAction Stop
-Start-Process powershell -ArgumentList "-noexit", "-noprofile", "-command &{& chcp 65001;& '$($commandInfo.Path)' $Bootfile $params}"

script/napcat.bat

@@ -1,17 +0,0 @@
-@echo off
-setlocal enabledelayedexpansion
-:loop_read
-for /f "tokens=2*" %%a in ('reg query "HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ" /v "UninstallString"') do (
-    set "RetString=%%b"
-    goto :napcat_boot
-)
-
-:napcat_boot
-for %%a in ("!RetString!") do (
-    set "pathWithoutUninstall=%%~dpa"
-)
-
-set "QQPath=!pathWithoutUninstall!QQ.exe"
-set ELECTRON_RUN_AS_NODE=1
-echo !QQPath!
-"!QQPath!" ./napcat.mjs %*

script/napcat.ps1

@@ -1,43 +0,0 @@
-function Get-QQpath {
-    try {
-        $key = Get-ItemProperty -Path "HKLM:\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\QQ"
-        $uninstallString = $key.UninstallString
-        return [System.IO.Path]::GetDirectoryName($uninstallString) + "\QQ.exe"
-    }
-    catch {
-        throw "get QQ path error: $_"
-    }
-}
-function Select-QQPath {
-    Add-Type -AssemblyName System.Windows.Forms
-    [System.Windows.Forms.Application]::EnableVisualStyles()
-
-    $dialogTitle = "Select QQ.exe"
-
-    $filePicker = New-Object System.Windows.Forms.OpenFileDialog
-    $filePicker.Title = $dialogTitle
-    $filePicker.Filter = "Executable Files (*.exe)|*.exe|All Files (*.*)|*.*"
-    $filePicker.FilterIndex = 1
-    $null = $filePicker.ShowDialog()
-    if (-not ($filePicker.FileName)) {
-        throw "User did not select an .exe file."
-    }
-    return $filePicker.FileName
-}
-
-$params = $args -join " "
-Try {
-    $QQpath = Get-QQpath
-}
-Catch {
-    $QQpath = Select-QQPath
-}
-
-if (!(Test-Path $QQpath)) {
-    throw "provided QQ path is invalid: $QQpath"
-}
-
-$Bootfile = Join-Path $PSScriptRoot "napcat.mjs"
-$env:ELECTRON_RUN_AS_NODE = 1
-$commandInfo = Get-Command $QQpath -ErrorAction Stop
-Start-Process powershell -ArgumentList "-noexit", "-noprofile", "-command &{& '$($commandInfo.Path)' $Bootfile $params}"

script/napcat.sh

@@ -1,21 +0,0 @@
-#!/bin/bash
-
-get_script_dir() {
-  local script_path="${1:-$0}"
-  local script_dir
-  script_path=$(readlink -f "$script_path")
-  script_dir=$(dirname "$script_path")
-
-  echo "$script_dir"
-}
-
-SCRIPT_DIR=$(get_script_dir)
-
-export ELECTRON_RUN_AS_NODE=1
-
-if ! [ -x /opt/QQ/qq ]; then
-    echo "Error: /opt/QQ/qq is not executable or does not exist." >&2
-    exit 1
-fi
-
-/opt/QQ/qq "${SCRIPT_DIR}/napcat.mjs" "$@"