Improve fix: only suppress card change events for forward messages

Changed the condition to specifically check for forward message elements (multiForwardMsgElement or arkElement) before suppressing empty card name changes. This ensures legitimate card name clearing (setting to empty) still works correctly while preventing false positives from forward messages.

Co-authored-by: sj817 <74231782+sj817@users.noreply.github.com>

.editorconfig

@@ -15,10 +15,10 @@ charset = utf-8
 # 4 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.framework

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

.env.shell

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

.env.shell-analysis

@@ -0,0 +1,2 @@
+VITE_BUILD_TYPE = DEBUG
+VITE_BUILD_PLATFORM = Shell

.env.universal

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

.github/prompt/release_note_prompt.txt

@@ -1,60 +0,0 @@
-注意：输出必须严格使用 NapCat 的发布说明格式，严格保证示例格式,并用简体中文。
-
-格式规则：
-1. 第一行：# V{TAG}  
-2. 第二行：[使用文档](https://napneko.github.io/)
-3. 空行后，按下面的节顺序输出（存在则输出，不存在则省略该节）：
-
-## Windows 一键包
-- 简短一句话介绍一键包用途
-- 列出可下载的文件名（只列文件名，不写下载链接）
-
-## 警告
-- 如果有需要特别提醒的兼容/运行库/版本要求，写成加粗警告句
-
-## 如果WinX64缺少运行库或者xxx.dll？
-- 常见运行库建议
-
-## 更新
-按数字序列列出主要变更项，每条尽量一句话
-- 前缀短 commit id，例如：1. 修复 get_essence_msg_list 崩溃 (a1b2c3d)
-- 保持 4-18 条要点
-
-## 开发者注意
-- 列出迁移/接口断裂/配置变更；若无则省略
-
-额外约束：
-- 语言简体中文，面向最终用户
-
-下面为真实示例，请完全参考
-
-# V?.?.?
-[使用文档](https://napneko.github.io/)
-
-## Windows 一键包
-我们为提供了的轻量化一键部署方案
-相对于普通需要安装QQ的方案,下面已内置QQ和Napcat 阅读使用文档参考
-
-你可以下载 
-
-NapCat.Shell.Windows.OneKey.zip (无头) 
-
-启动后可自动化部署一键包,教程参考使用文档安装部分
-
-## 警告
-**注意QQ版本推荐使用 40768+ 版本 最低可以使用40768版本**
-**默认WebUi密钥为随机密码 控制台查看**
-
-**[9.9.22-40990 X64 Win](https://dldir1v6.qq.com/qqfile/qq/QQNT/2c9d3f6c/QQ9.9.22.40990_x64.exe)**
-[LinuxX64 DEB 40990 ](https://dldir1.qq.com/qqfile/qq/QQNT/ec800879/linuxqq_3.2.20-40990_amd64.deb)
-[LinuxX64 RPM 40990 ](https://dldir1.qq.com/qqfile/qq/QQNT/ec800879/linuxqq_3.2.20-40990_x86_64.rpm)
-[LinuxArm64 DEB 40990 ](https://dldir1.qq.com/qqfile/qq/QQNT/ec800879/linuxqq_3.2.20-40990_arm64.deb)
-[LinuxArm64 RPM  40990 ](https://dldir1.qq.com/qqfile/qq/QQNT/ec800879/linuxqq_3.2.20-40990_aarch64.rpm)
-[MAC   DMG   40990 ](https://dldir1v6.qq.com/qqfile/qq/QQNT/c6cb0f5d/QQ_v6.9.82.40990.dmg)
-## 如果WinX64缺少运行库或者xxx.dll？
-[安装运行库](https://aka.ms/vs/17/release/vc_redist.x64.exe)
-
-## 更新
-1. 修改了XXXXX
-2. 新增了XXXX
-3. 重构了XXXX

.github/workflows/auto-release.yml

@@ -1,268 +0,0 @@
-name: AI RELEASE NapCat
-
-on:
-  workflow_dispatch:
-  push:
-    tags:
-      - '*'
-
-permissions: write-all
-
-env:
-  OPENROUTER_API_URL: https://openrouter.ai/api/v1/chat/completions
-  OPENROUTER_MODEL: "openrouter/auto"
-  RELEASE_NAME: "NapCat"
-
-jobs:
-  Build-LiteLoader:
-    runs-on: ubuntu-latest
-    steps:
-      - 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 -g pnpm
-          pnpm i
-          pnpm --filter napcat-webui-frontend run build || exit 1
-          pnpm run build:framework
-          mv packages/napcat-framework/dist framework-dist
-          cd framework-dist
-          npm install --omit=dev
-          rm ./package-lock.json || exit 0
-      - name: Upload Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: NapCat.Framework
-          path: framework-dist
-
-  Build-Shell:
-    runs-on: ubuntu-latest
-    steps:
-      - 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 -g pnpm
-          pnpm i
-          pnpm --filter napcat-webui-frontend run build || exit 1
-          pnpm run build:shell
-          mv packages/napcat-shell/dist shell-dist
-          cd shell-dist
-          npm install --omit=dev
-          rm ./package-lock.json || exit 0
-      - name: Upload Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: NapCat.Shell
-          path: shell-dist
-  Download-QNX64:
-    needs: Build-Shell
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Download Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          path: ./artifacts
-
-      - name: Setup tools
-        run: |
-          sudo apt update
-          sudo apt install -y aria2 unzip zip p7zip-full curl jq
-
-      - name: Download QQ x64, Node.js and Assemble NapCat.Shell.Windows.Node.zip
-        run: |
-          set -euo pipefail
-          TMPDIR=$(mktemp -d)
-          cd "$TMPDIR"
-
-          # -----------------------------
-          # 1) 下载 QQ x64
-          # -----------------------------
-          JS_URL="https://cdn-go.cn/qq-web/im.qq.com_new/latest/rainbow/windowsConfig.js"
-          NT_URL=$(curl -fsSL "$JS_URL" | grep -oP '"ntDownloadX64Url"\s*:\s*"\K[^"]+')
-          QQ_ZIP="$(basename "$NT_URL")"
-          aria2c -x16 -s16 -k1M -o "$QQ_ZIP" "$NT_URL"
-
-          QQ_EXTRACT="$TMPDIR/qq_extracted"
-          mkdir -p "$QQ_EXTRACT"
-          7z x -y -o"$QQ_EXTRACT" "$QQ_ZIP" >/dev/null
-
-          # -----------------------------
-          # 2) 下载 Node.js Windows x64 zip 22.11.0
-          # -----------------------------
-          NODE_VER="22.11.0"
-          NODE_URL="https://nodejs.org/dist/v$NODE_VER/node-v$NODE_VER-win-x64.zip"
-          NODE_ZIP="node-v$NODE_VER-win-x64.zip"
-          aria2c -x1 -s1 -k1M -o "$NODE_ZIP" "$NODE_URL"
-
-          NODE_EXTRACT="$TMPDIR/node_extracted"
-          mkdir -p "$NODE_EXTRACT"
-          unzip -q "$NODE_ZIP" -d "$NODE_EXTRACT"
-
-          # -----------------------------
-          # 3) 创建输出目录
-          # -----------------------------
-          OUT_DIR="$GITHUB_WORKSPACE/napcat"
-          mkdir -p "$OUT_DIR/napcat"
-
-          # -----------------------------
-          # 4) 解压 NapCat.Shell.zip 到 napcat
-          # -----------------------------
-          unzip -q "$GITHUB_WORKSPACE/artifacts/NapCat.Shell.zip" -d "$OUT_DIR/napcat"
-
-          # -----------------------------
-          # 5) 拷贝 QQ 文件到 napcat
-          # -----------------------------
-          QQ_TARGETS=("avif_convert.dll" "broadcast_ipc.dll" "config.json" "libglib-2.0-0.dll" "libgobject-2.0-0.dll" "libvips-42.dll" "ncnn.dll" "opencv.dll" "package.json" "QBar.dll" "wrapper.node")
-          for name in "${QQ_TARGETS[@]}"; do
-            find "$QQ_EXTRACT" -iname "$name" -exec cp -a {} "$OUT_DIR/napcat" \; || true
-          done
-
-          # -----------------------------
-          # 6) 拷贝仓库文件 napcat.bat 和 index.js
-          # -----------------------------
-          cp -a "$GITHUB_WORKSPACE/packages/napcat-develop/napcat.bat" "$OUT_DIR/napcat/" || true
-          cp -a "$GITHUB_WORKSPACE/packages/napcat-develop/index.js" "$OUT_DIR/napcat/" || true
-
-          # -----------------------------
-          # 7) 拷贝 Node.exe 到 napcat
-          # -----------------------------
-          cp -a "$NODE_EXTRACT/node-v$NODE_VER-win-x64/node.exe" "$OUT_DIR/napcat/" || true
-
-          # -----------------------------
-          # 8) 生成 index.txt
-          # -----------------------------
-          echo "NapCat Files Collected on $(date)" > "$GITHUB_WORKSPACE/index.txt"
-
-          # -----------------------------
-          # 9) 打包 napcat，命名为 NapCat.Shell.Windows.Node.zip
-          # -----------------------------
-          cd "$OUT_DIR"
-          zip -qr "$GITHUB_WORKSPACE/NapCat.Shell.Windows.Node.zip" napcat
-
-      - name: Upload Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: NapCat.Shell.Windows.Node
-          path: NapCat.Shell.Windows.Node.zip
-
-  release-napcat:
-    needs: [Build-LiteLoader, Build-Shell]
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Download Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          path: ./artifacts
-
-      - name: Zip Artifacts
-        run: |
-          cd artifacts
-          [ -d NapCat.Framework ] && zip -qr ../NapCat.Framework.zip -r NapCat.Framework
-          [ -d NapCat.Shell ] && zip -qr ../NapCat.Shell.zip -r NapCat.Shell
-          cd ..
-      
-      - name: Generate release note via OpenRouter
-        env:
-          OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
-          OPENROUTER_API_URL: ${{ env.OPENROUTER_API_URL }}
-          OPENROUTER_MODEL: ${{ env.OPENROUTER_MODEL }}
-          GITHUB_OWNER: "NapNeKo"   # 替换成你的 repo owner
-          GITHUB_REPO: "NapCatQQ"   # 替换成你的 repo 名
-        run: |
-          set -euo pipefail
-
-          # 当前 tag
-          CURRENT_TAG="${GITHUB_REF#refs/tags/}"
-          echo "Current tag: $CURRENT_TAG"
-
-          # 从 GitHub API 获取 tag 列表
-          TAGS_JSON=$(curl -s "https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/tags?per_page=100")
-          TAGS=( $(echo "$TAGS_JSON" | jq -r '.[].name' | sort -V) )
-
-          # 找到上一个 tag
-          PREV_TAG=""
-          for i in "${!TAGS[@]}"; do
-            if [ "${TAGS[$i]}" = "$CURRENT_TAG" ]; then
-              if [ $i -gt 0 ]; then
-                PREV_TAG="${TAGS[$((i-1))]}"
-              fi
-              break
-            fi
-          done
-
-          if [ -z "$PREV_TAG" ]; then
-            echo "❌ Could not find previous tag for $CURRENT_TAG, aborting."
-            exit 1
-          fi
-
-          echo "Previous tag: $PREV_TAG"
-
-          # 强制拉取上一个 tag 和当前 tag
-          git fetch origin "refs/tags/$PREV_TAG:refs/tags/$PREV_TAG" --force
-          git fetch origin "refs/tags/$CURRENT_TAG:refs/tags/$CURRENT_TAG" --force
-
-          # 获取 commit title + body + 作者，保留换行
-          COMMITS=$(git log --pretty=format:'%h %B (%an)' "$PREV_TAG".."$CURRENT_TAG" | sed 's/$/\\n/')
-
-          echo "Commit list from $PREV_TAG to $CURRENT_TAG:"
-          echo -e "$COMMITS"
-
-          # 读取 prompt
-          PROMPT_FILE=".github/prompt/release_note_prompt.txt"
-          SYSTEM_PROMPT=$(<"$PROMPT_FILE")
-
-          # 构建用户内容
-          USER_CONTENT="TAG: $CURRENT_TAG\n提交列表:\n$COMMITS"
-
-          # 构建请求 JSON
-          BODY=$(jq -n \
-            --arg system "$SYSTEM_PROMPT" \
-            --arg user "$USER_CONTENT" \
-            '{model: env.OPENROUTER_MODEL, messages:[{role:"system", content:$system},{role:"user", content:$user}], temperature:0.2, max_tokens:800}')
-
-          # 调用 OpenRouter
-          RESPONSE=$(curl -s -X POST "$OPENROUTER_API_URL" \
-            -H "Authorization: Bearer $OPENROUTER_API_KEY" \
-            -H "Content-Type: application/json" \
-            -d "$BODY")
-
-          echo "=== OpenRouter raw response ==="
-          echo "$RESPONSE" | jq .
-
-          # 提取生成内容
-          RELEASE_BODY=$(echo "$RESPONSE" | jq -r '.choices[0].message.content // .choices[0].text // ""')
-
-          if [ -z "$RELEASE_BODY" ]; then
-            echo "❌ OpenRouter failed to generate release note, terminating workflow."
-            exit 1
-          fi
-
-          # 输出到 CHANGELOG.md
-          echo -e "$RELEASE_BODY" > CHANGELOG.md
-          echo "=== generated release note ==="
-          cat CHANGELOG.md
-
-      - name: Create Release Draft and Upload Artifacts
-        uses: softprops/action-gh-release@v1
-        with:
-          name: NapCat ${{ github.ref_name }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-          body_path: CHANGELOG.md
-          files: |
-            NapCat.Framework.zip
-            NapCat.Shell.zip
-          draft: true

.github/workflows/build.yml

@@ -1,9 +1,8 @@
 name: "Build Action"
 on:
-  workflow_dispatch:
   push:
-    branches:
-      - main
+  pull_request:
+  workflow_dispatch:
 
 permissions: write-all
 
@@ -19,19 +18,14 @@ jobs:
           node-version: 20.x
       - name: Build NapCat.Framework
         run: |
-          npm i -g pnpm
-          pnpm i
-          pnpm --filter napcat-webui-frontend run build || exit 1
-          pnpm run build:framework
-          mv packages/napcat-framework/dist framework-dist
-          cd framework-dist
-          npm install --omit=dev
-          rm ./package-lock.json || exit 0
+          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: framework-dist
+          path: dist
   Build-Shell:
     runs-on: ubuntu-latest
     steps:
@@ -43,16 +37,11 @@ jobs:
           node-version: 20.x
       - name: Build NapCat.Shell
         run: |
-          npm i -g pnpm
-          pnpm i
-          pnpm --filter napcat-webui-frontend run build || exit 1
-          pnpm run build:shell
-          mv packages/napcat-shell/dist shell-dist
-          cd shell-dist
-          npm install --omit=dev
-          rm ./package-lock.json || exit 0
+          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: shell-dist
+          path: dist

.github/workflows/release.yml

@@ -1,88 +1,164 @@
 name: "Build Release"
 
 on:
-  workflow_dispatch:
+  push:
+    tags:
+      - "v*"
 
 permissions: write-all
 
 jobs:
-  Build-LiteLoader:
+  check-version:
     runs-on: ubuntu-latest
     steps:
-      - name: Clone Main Repository
+      - name: Clone Repository
         uses: actions/checkout@v4
+        with:
+          ref: main
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract version from tag
+        run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
+
       - name: Use Node.js 20.X
         uses: actions/setup-node@v4
         with:
           node-version: 20.x
-      - name: Build NapCat.Framework
-        run: |
-          npm i -g pnpm
-          pnpm i
-          pnpm --filter napcat-webui-frontend run build || exit 1
-          pnpm run build:framework
-          mv packages/napcat-framework/dist framework-dist
-          cd framework-dist
-          npm install --omit=dev
-          rm ./package-lock.json || exit 0
-      - name: Upload Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: NapCat.Framework
-          path: framework-dist
 
+      - name: Check Version
+        run: | 
+              ls
+              node ./script/checkVersion.cjs
+              sh ./checkVersion.sh
+  Build-LiteLoader:
+    needs: [check-version]
+    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: Use Node.js 20.X
+      uses: actions/setup-node@v4
+      with:
+          node-version: 20.x
+
+    - name: Build NuCat Framework
+      run: |
+          npm i
+          cd napcat.webui
+          npm i
+          cd ..
+          npm run build:framework
+          cd dist
+          npm i --omit=dev
+          cd ..
+    - name: Upload Artifact
+      uses: actions/upload-artifact@v4
+      with:
+        name: NapCat.Framework
+        path: dist
   Build-Shell:
     runs-on: ubuntu-latest
+    needs: [check-version]
     steps:
-      - 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 -g pnpm
-          pnpm i
-          pnpm --filter napcat-webui-frontend run build || exit 1
-          pnpm run build:shell
-          mv packages/napcat-shell/dist shell-dist
-          cd shell-dist
-          npm install --omit=dev
-          rm ./package-lock.json || exit 0
-      - name: Upload Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: NapCat.Shell
-          path: shell-dist
+        - 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 Shell
+          run: |
+                npm i 
+                cd napcat.webui
+                npm i
+                cd ..
+                npm run build:shell
+                cd dist
+                npm i --omit=dev
+                cd ..
+
+        - name: Upload Artifact
+          uses: actions/upload-artifact@v4
+          with:
+              name: NapCat.Shell
+              path: dist
 
   release-napcat:
-    needs: [Build-LiteLoader, Build-Shell]
+    needs: [Build-LiteLoader,Build-Shell]
     runs-on: ubuntu-latest
     steps:
-      - name: Download All Artifact
-        uses: actions/download-artifact@v4
 
-      - name: Compress subdirectories
+    - 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: |
+        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
+      
+    - name: Clone Changes Log
+      run: curl -o CHANGELOG.md https://fastly.jsdelivr.net/gh/NapNeko/NapCatQQ@main/docs/changelogs/CHANGELOG.v${{ env.VERSION }}.md
+        
+    - name: Create Release Draft and Upload Artifacts
+      uses: softprops/action-gh-release@v1
+      with:
+        name: NapCat V${{ env.VERSION }}
+        token: ${{ secrets.GITHUB_TOKEN }}
+        body_path: CHANGELOG.md
+        files: |
+          NapCat.Framework.zip
+          NapCat.Shell.zip
+          NapCat.Framework.Windows.Once.zip
+        draft: true
+
+  build-docker:
+    needs: release-napcat
+    runs-on: ubuntu-latest
+    steps:
+      - name: Dispatch Docker Build
         run: |
-          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 ./
-
-      - name: Create Release Draft and Upload Artifacts
-        uses: softprops/action-gh-release@v1
-        with:
-          name: NapCat
-          token: ${{ secrets.GITHUB_TOKEN }}
-          body: Automated release artifact (no version detection)
-          files: |
-            NapCat.Framework.zip
-            NapCat.Shell.zip
-          draft: true
+          curl -X POST \
+          -H "Authorization: Bearer ${{ secrets.NAPCAT_BUILD }}" \
+          -H "Accept: application/vnd.github.v3+json" \
+          https://api.github.com/repos/NapNeko/NapCat-Docker/actions/workflows/docker-publish.yml/dispatches \
+          -d '{"ref": "main"}'

.gitignore

@@ -14,6 +14,3 @@ devconfig/*
 *.db
 checkVersion.sh
 bun.lockb
-tests/run/
-guild1.db-wal
-guild1.db-shm

.prettierrc.json

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

.vscode/launch.json

@@ -0,0 +1,115 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:shell",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "dev:shell"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "build:shell",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "build:shell"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "build:universal",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "build:universal"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "build:framework",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "build:framework"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "build:webui",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "build:webui"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:universal",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "dev:universal"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:framework",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "dev:framework"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:webui",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "dev:webui"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "lint",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "lint"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "depend",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "depend"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "dev:depend",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "dev:depend"
+            ]
+        }
+    ]
+}

.vscode/settings.json

@@ -1,2 +1,17 @@
 {
-}
+    "explorer.fileNesting.enabled": true,
+    "explorer.fileNesting.expand": false,
+    "explorer.fileNesting.patterns": {
+        ".env.universal": ".env.*",
+        "tsconfig.json": "tsconfig.*.json, env.d.ts, vite.config.ts",
+        "package.json": "package-lock.json, eslint*, .prettier*, .editorconfig, manifest.json, logo.png, .gitignore, LICENSE"
+    },
+    "css.customData": [
+        ".vscode/tailwindcss.json"
+    ],
+    "editor.formatOnPaste": false,
+     "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "never"
+    },
+}

.vscode/tailwindcss.json

@@ -0,0 +1,55 @@
+{
+    "version": 1.1,
+    "atDirectives": [
+        {
+            "name": "@tailwind",
+            "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+                }
+            ]
+        },
+        {
+            "name": "@apply",
+            "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+                }
+            ]
+        },
+        {
+            "name": "@responsive",
+            "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+                }
+            ]
+        },
+        {
+            "name": "@screen",
+            "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+                }
+            ]
+        },
+        {
+            "name": "@variants",
+            "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+                }
+            ]
+        }
+    ]
+}

README.md

@@ -3,6 +3,8 @@
 
 # NapCat
 
+
+
 _Modern protocol-side framework implemented based on NTQQ._
 
 > 云起兮风生，心向远方兮路未曾至.
@@ -12,7 +14,6 @@ _Modern protocol-side framework implemented based on NTQQ._
 ---
 
 ## New Feature
-
 在 v4.8.115+ 版本开始
 
 1. NapCatQQ 支持 [Stream Api](https://napneko.github.io/develop/file)
@@ -22,21 +23,19 @@ _Modern protocol-side framework implemented based on NTQQ._
 - [2] 采用字符串可以解决扩展到int64的问题，同时也可以解决部分语言（如JavaScript）对大整数支持不佳的问题，增加极少成本。
 
 ## Welcome
-
-- NapCatQQ is a modern implementation of the Bot protocol based on NTQQ.
++ NapCatQQ is a modern implementation of the Bot protocol based on NTQQ.
   - NapCatQQ 是现代化的基于 NTQQ 的 Bot 协议端实现
 
 ## Feature
 
-- **Easy to Use**
++ **Easy to Use**
   - 作为初学者能够轻松使用.
-- **Quick and Efficient**
++ **Quick and Efficient**
   - 在低内存操作系统长时运行.
-- **Rich API Interface**
++ **Rich API Interface**
   - 完整实现了大部分标准接口.
-- **Stable and Reliable**
++ **Stable and Reliable**
   - 持续稳定的开发与维护.
-
 ## Quick Start
 
 可前往 [Release](https://github.com/NapNeko/NapCatQQ/releases/) 页面下载最新版本
@@ -44,7 +43,6 @@ _Modern protocol-side framework implemented based on NTQQ._
 **首次使用**请务必查看如下文档看使用教程
 
 > 项目非盈利，对接问题/基础问题/下层框架问题 请自行搜索解决，本项目社区不提供此类解答。
-
 ## Link
 
 | Docs | [![Github.IO](https://img.shields.io/badge/docs%20on-Github.IO-orange)](https://napneko.github.io/) | [![Cloudflare.Worker](https://img.shields.io/badge/docs%20on-Cloudflare.Worker-black)](https://doc.napneko.icu/) | [![Cloudflare.HKServer](https://img.shields.io/badge/docs%20on-Cloudflare.HKServer-informational)](https://napcat.napneko.icu/) |
@@ -66,22 +64,20 @@ _Modern protocol-side framework implemented based on NTQQ._
 
 ## Thanks
 
-- [Lagrange](https://github.com/LagrangeDev/Lagrange.Core) 对本项目的大力支持 参考部分代码 已获授权
++ [Lagrange](https://github.com/LagrangeDev/Lagrange.Core) 对本项目的大力支持 参考部分代码 已获授权
 
-- [AstrBot](https://github.com/AstrBotDevs/AstrBot) 是完美适配本项目的LLM Bot框架 在此推荐一下
++ [AstrBot](https://github.com/AstrBotDevs/AstrBot) 是完美适配本项目的LLM Bot框架 在此推荐一下
 
-- [MaiBot](https://github.com/MaiM-with-u/MaiBot) 一只赛博群友 麦麦 Bot框架 在此推荐一下
++ [MaiBot](https://github.com/MaiM-with-u/MaiBot) 一只赛博群友 麦麦 Bot框架 在此推荐一下
 
-- [qq-chat-exporter](https://github.com/shuakami/qq-chat-exporter/) 基于NapCat的消息导出工具 在此推荐一下
++ [qq-chat-exporter](https://github.com/shuakami/qq-chat-exporter/) 基于NapCat的消息导出工具 在此推荐一下
 
-- 不过最最重要的 还是需要感谢屏幕前的你哦~
++ 不过最最重要的 还是需要感谢屏幕前的你哦~
 
 ---
 
 ## License
-
 本项目采用 混合协议 开源，因此使用本项目时，你需要注意以下几点：
-
 1. 第三方库代码或修改部分遵循其原始开源许可.
 2. 本项目获取部分项目授权而不受部分约束
 2. 项目其余逻辑代码采用[本仓库开源许可](./LICENSE).

eslint.config.mjs

@@ -0,0 +1,32 @@
+import eslint from '@eslint/js';
+import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
+import tsEslintParser from '@typescript-eslint/parser';
+import globals from "globals";
+
+const customTsFlatConfig = [
+    {
+        name: 'typescript-eslint/base',
+        languageOptions: {
+            parser: tsEslintParser,
+            sourceType: 'module',
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                NodeJS: 'readonly', // 添加 NodeJS 全局变量
+            },
+        },
+        files: ['**/*.{ts,tsx}'],
+        rules: {
+            ...tsEslintPlugin.configs.recommended.rules,
+            'quotes': ['error', 'single'], // 使用单引号
+            'semi': ['error', 'always'], // 强制使用分号
+            'indent': ['error', 4], // 使用 4 空格缩进
+        },
+        plugins: {
+            '@typescript-eslint': tsEslintPlugin,
+        },
+        ignores: ['src/webui/**'], // 忽略 src/webui/ 目录所有文件
+    },
+];
+
+export default [eslint.configs.recommended, ...customTsFlatConfig];

launcher/launcher-user.bat

@@ -7,7 +7,7 @@ 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"
+    set RetString=%%b
     goto :napcat_boot
 )
 
@@ -16,7 +16,7 @@ for %%a in ("%RetString%") do (
     set "pathWithoutUninstall=%%~dpa"
 )
 
-set "QQPath=%pathWithoutUninstall%QQ.exe"
+SET QQPath=%pathWithoutUninstall%QQ.exe
 
 if not exist "%QQpath%" (
     echo provided QQ path is invalid

launcher/launcher-win10-user.bat

@@ -7,7 +7,7 @@ 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"
+    set RetString=%%b
     goto :napcat_boot
 )
 
@@ -16,7 +16,7 @@ for %%a in ("%RetString%") do (
     set "pathWithoutUninstall=%%~dpa"
 )
 
-set "QQPath=%pathWithoutUninstall%QQ.exe"
+SET QQPath=%pathWithoutUninstall%QQ.exe
 
 if not exist "%QQpath%" (
     echo provided QQ path is invalid

launcher/launcher-win10.bat

@@ -16,7 +16,7 @@ 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"
+    set RetString=%%b
     goto :napcat_boot
 )
 
@@ -25,7 +25,7 @@ for %%a in ("%RetString%") do (
     set "pathWithoutUninstall=%%~dpa"
 )
 
-set "QQPath=%pathWithoutUninstall%QQ.exe"
+SET QQPath=%pathWithoutUninstall%QQ.exe
 
 if not exist "%QQPath%" (
     echo provided QQ path is invalid

launcher/launcher.bat

@@ -16,7 +16,7 @@ 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"
+    set RetString=%%b
     goto :napcat_boot
 )
 
@@ -25,7 +25,7 @@ for %%a in ("%RetString%") do (
     set "pathWithoutUninstall=%%~dpa"
 )
 
-set "QQPath=%pathWithoutUninstall%QQ.exe"
+SET QQPath=%pathWithoutUninstall%QQ.exe
 
 if not exist "%QQPath%" (
     echo provided QQ path is invalid

launcher/qqnt.json

@@ -1,9 +1,9 @@
 {
   "name": "qq-chat",
-  "verHash": "2c9d3f6c",
-  "version": "9.9.22-40990",
-  "linuxVersion": "3.2.20-40990",
-  "linuxVerHash": "ec800879",
+  "verHash": "cc326038",
+  "version": "9.9.21-39038",
+  "linuxVersion": "3.2.19-39038",
+  "linuxVerHash": "c773cdf7",
   "private": true,
   "description": "QQ",
   "productName": "QQ",
@@ -17,7 +17,7 @@
     "qd": "externals/devtools/cli/index.js"
   },
   "main": "./loadNapCat.js",
-  "buildVersion": "40990",
+  "buildVersion": "39038",
   "isPureShell": true,
   "isByteCodeShell": true,
   "platform": "win32",

manifest.json

@@ -4,7 +4,7 @@
   "name": "NapCatQQ",
   "slug": "NapCat.Framework",
   "description": "高性能的 OneBot 11 协议实现",
-  "version": "0.0.1",
+  "version": "4.8.116",
   "icon": "./logo.png",
   "authors": [
     {

napcat.webui/.prettierignore

@@ -0,0 +1,7 @@
+dist
+*.md
+*.html
+yarn.lock
+package-lock.json
+node_modules
+pnpm-lock.yaml

napcat.webui/.prettierrc

@@ -0,0 +1,23 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "importOrder": [
+    "<THIRD_PARTY_MODULES>",
+    "^@/const/(.*)$",
+    "^@/store/(.*)$",
+    "^@/components/(.*)$",
+    "^@/contexts/(.*)$",
+    "^@/hooks/(.*)$",
+    "^@/utils/(.*)$",
+    "^@/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}

napcat.webui/eslint.config.mjs

@@ -0,0 +1,91 @@
+import eslint_js from '@eslint/js'
+import tsEslintPlugin from '@typescript-eslint/eslint-plugin'
+import tsEslintParser from '@typescript-eslint/parser'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import globals from 'globals'
+
+const customTsFlatConfig = [
+  {
+    name: 'typescript-eslint/base',
+    languageOptions: {
+      parser: tsEslintParser,
+      sourceType: 'module'
+    },
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    rules: {
+      ...tsEslintPlugin.configs.recommended.rules
+    },
+    plugins: {
+      '@typescript-eslint': tsEslintPlugin
+    }
+  }
+]
+
+export default [
+  eslint_js.configs.recommended,
+
+  eslintPluginPrettierRecommended,
+
+  ...customTsFlatConfig,
+  {
+    name: 'global config',
+    languageOptions: {
+      globals: {
+        ...globals.es2022,
+        ...globals.browser,
+        ...globals.node
+      },
+      parserOptions: {
+        warnOnUnsupportedTypeScriptVersion: false
+      }
+    },
+    rules: {
+      'prettier/prettier': 'error',
+      'no-unused-vars': 'off',
+      'no-undef': 'off',
+      //关闭不能再promise中使用ansyc
+      'no-async-promise-executor': 'off',
+      //关闭不能再常量中使用??
+      'no-constant-binary-expression': 'off',
+      '@typescript-eslint/ban-types': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+
+      //禁止失去精度的字面数字
+      '@typescript-eslint/no-loss-of-precision': 'off',
+      //禁止使用any
+      '@typescript-eslint/no-explicit-any': 'error'
+    }
+  },
+  {
+    ignores: ['**/node_modules', '**/dist', '**/output']
+  },
+  {
+    name: 'react-eslint',
+    files: ['src/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin
+    },
+    languageOptions: {
+      ...reactPlugin.configs.recommended.languageOptions
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+
+      'react/react-in-jsx-scope': 'off'
+    },
+    settings: {
+      react: {
+        // 需要显示安装 react
+        version: 'detect'
+      }
+    }
+  },
+  {
+    languageOptions: { globals: { ...globals.browser, ...globals.node } }
+  },
+  eslintConfigPrettier
+]

napcat.webui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "napcat-webui-frontend",
+  "name": "napcat-webui",
   "private": true,
   "version": "0.0.6",
   "type": "module",
@@ -86,6 +86,7 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.19.0",
     "@react-types/shared": "^3.26.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/crypto-js": "^4.2.2",
@@ -96,14 +97,20 @@
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@types/react-window": "^1.8.8",
+    "@typescript-eslint/eslint-plugin": "^8.22.0",
+    "@typescript-eslint/parser": "^8.22.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "5.2.3",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^15.14.0",
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
     "typescript": "^5.7.3",

napcat.webui/src/App.tsx

@@ -0,0 +1,90 @@
+import { Suspense, lazy, useEffect } from 'react'
+import { Provider } from 'react-redux'
+import { Route, Routes, useNavigate } from 'react-router-dom'
+
+import PageBackground from '@/components/page_background'
+import PageLoading from '@/components/page_loading'
+import Toaster from '@/components/toaster'
+
+import DialogProvider from '@/contexts/dialog'
+import AudioProvider from '@/contexts/songs'
+
+import useAuth from '@/hooks/auth'
+
+import store from '@/store'
+
+const WebLoginPage = lazy(() => import('@/pages/web_login'))
+const IndexPage = lazy(() => import('@/pages/index'))
+const QQLoginPage = lazy(() => import('@/pages/qq_login'))
+const DashboardIndexPage = lazy(() => import('@/pages/dashboard'))
+const AboutPage = lazy(() => import('@/pages/dashboard/about'))
+const ConfigPage = lazy(() => import('@/pages/dashboard/config'))
+const DebugPage = lazy(() => import('@/pages/dashboard/debug'))
+const HttpDebug = lazy(() => import('@/pages/dashboard/debug/http'))
+const WSDebug = lazy(() => import('@/pages/dashboard/debug/websocket'))
+const FileManagerPage = lazy(() => import('@/pages/dashboard/file_manager'))
+const LogsPage = lazy(() => import('@/pages/dashboard/logs'))
+const NetworkPage = lazy(() => import('@/pages/dashboard/network'))
+const TerminalPage = lazy(() => import('@/pages/dashboard/terminal'))
+
+function App() {
+  return (
+    <DialogProvider>
+      <Provider store={store}>
+        <PageBackground />
+        <Toaster />
+        <AudioProvider>
+          <Suspense fallback={<PageLoading />}>
+            <AuthChecker>
+              <AppRoutes />
+            </AuthChecker>
+          </Suspense>
+        </AudioProvider>
+      </Provider>
+    </DialogProvider>
+  )
+}
+
+function AuthChecker({ children }: { children: React.ReactNode }) {
+  const { isAuth } = useAuth()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (!isAuth) {
+      const search = new URLSearchParams(window.location.search)
+      const token = search.get('token')
+      let url = '/web_login'
+
+      if (token) {
+        url += `?token=${token}`
+      }
+      navigate(url, { replace: true })
+    }
+  }, [isAuth, navigate])
+
+  return <>{children}</>
+}
+
+function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/" element={<IndexPage />}>
+        <Route index element={<DashboardIndexPage />} />
+        <Route path="network" element={<NetworkPage />} />
+        <Route path="config" element={<ConfigPage />} />
+        <Route path="logs" element={<LogsPage />} />
+        <Route path="debug" element={<DebugPage />}>
+          <Route path="ws" element={<WSDebug />} />
+          <Route path="http" element={<HttpDebug />} />
+        </Route>
+        <Route path="file_manager" element={<FileManagerPage />} />
+        <Route path="terminal" element={<TerminalPage />} />
+        <Route path="about" element={<AboutPage />} />
+      </Route>
+      <Route path="/qq_login" element={<QQLoginPage />} />
+      <Route path="/web_login" element={<WebLoginPage />} />
+    </Routes>
+  )
+}
+
+export default App

napcat.webui/src/components/ColorPicker.tsx

@@ -1,6 +1,6 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import React from 'react';
-import { ColorResult, SketchPicker } from 'react-color';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import React from 'react'
+import { ColorResult, SketchPicker } from 'react-color'
 
 // 假定 heroui 提供的 Popover组件
 
@@ -11,14 +11,14 @@ interface ColorPickerProps {
 
 const ColorPicker: React.FC<ColorPickerProps> = ({ color, onChange }) => {
   const handleChange = (colorResult: ColorResult) => {
-    onChange(colorResult);
-  };
+    onChange(colorResult)
+  }
 
   return (
     <Popover triggerScaleOnOpen={false}>
       <PopoverTrigger>
         <div
-          className='w-36 h-8 rounded-md cursor-pointer border border-content4'
+          className="w-36 h-8 rounded-md cursor-pointer border border-content4"
           style={{ background: color }}
         />
       </PopoverTrigger>
@@ -26,11 +26,11 @@ const ColorPicker: React.FC<ColorPickerProps> = ({ color, onChange }) => {
         <SketchPicker
           color={color}
           onChange={handleChange}
-          className='!bg-transparent !shadow-none'
+          className="!bg-transparent !shadow-none"
         />
       </PopoverContent>
     </Popover>
-  );
-};
+  )
+}
 
-export default ColorPicker;
+export default ColorPicker

napcat.webui/src/components/audio_player.tsx

@@ -1,30 +1,30 @@
-import { Button } from '@heroui/button';
-import { Card, CardBody, CardHeader } from '@heroui/card';
-import { Image } from '@heroui/image';
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import { Slider } from '@heroui/slider';
-import { Tooltip } from '@heroui/tooltip';
-import { useLocalStorage } from '@uidotdev/usehooks';
-import clsx from 'clsx';
-import { useEffect, useRef, useState } from 'react';
+import { Button } from '@heroui/button'
+import { Card, CardBody, CardHeader } from '@heroui/card'
+import { Image } from '@heroui/image'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Slider } from '@heroui/slider'
+import { Tooltip } from '@heroui/tooltip'
+import { useLocalStorage } from '@uidotdev/usehooks'
+import clsx from 'clsx'
+import { useEffect, useRef, useState } from 'react'
 import {
   BiSolidSkipNextCircle,
-  BiSolidSkipPreviousCircle,
-} from 'react-icons/bi';
+  BiSolidSkipPreviousCircle
+} from 'react-icons/bi'
 import {
   FaPause,
   FaPlay,
   FaRegHandPointRight,
   FaRepeat,
-  FaShuffle,
-} from 'react-icons/fa6';
-import { TbRepeatOnce } from 'react-icons/tb';
-import { useMediaQuery } from 'react-responsive';
+  FaShuffle
+} from 'react-icons/fa6'
+import { TbRepeatOnce } from 'react-icons/tb'
+import { useMediaQuery } from 'react-responsive'
 
-import { PlayMode } from '@/const/enum';
-import key from '@/const/key';
+import { PlayMode } from '@/const/enum'
+import key from '@/const/key'
 
-import { VolumeHighIcon, VolumeLowIcon } from './icons';
+import { VolumeHighIcon, VolumeLowIcon } from './icons'
 
 export interface AudioPlayerProps
   extends React.AudioHTMLAttributes<HTMLAudioElement> {
@@ -39,7 +39,7 @@ export interface AudioPlayerProps
   mode?: PlayMode
 }
 
-export default function AudioPlayer (props: AudioPlayerProps) {
+export default function AudioPlayer(props: AudioPlayerProps) {
   const {
     src,
     pressNext,
@@ -56,116 +56,116 @@ export default function AudioPlayer (props: AudioPlayerProps) {
     autoPlay,
     mode = PlayMode.Loop,
     ...rest
-  } = props;
+  } = props
 
-  const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [volume, setVolume] = useState(100);
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [volume, setVolume] = useState(100)
   const [isCollapsed, setIsCollapsed] = useLocalStorage(
     key.isCollapsedMusicPlayer,
     false
-  );
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const cardRef = useRef<HTMLDivElement>(null);
-  const startY = useRef(0);
-  const startX = useRef(0);
-  const [translateY, setTranslateY] = useState(0);
-  const [translateX, setTranslateX] = useState(0);
-  const isSmallScreen = useMediaQuery({ maxWidth: 767 });
-  const isMediumUp = useMediaQuery({ minWidth: 768 });
-  const shouldAdd = useRef(false);
-  const currentProgress = (currentTime / duration) * 100;
+  )
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const cardRef = useRef<HTMLDivElement>(null)
+  const startY = useRef(0)
+  const startX = useRef(0)
+  const [translateY, setTranslateY] = useState(0)
+  const [translateX, setTranslateX] = useState(0)
+  const isSmallScreen = useMediaQuery({ maxWidth: 767 })
+  const isMediumUp = useMediaQuery({ minWidth: 768 })
+  const shouldAdd = useRef(false)
+  const currentProgress = (currentTime / duration) * 100
   const [storageAutoPlay, setStorageAutoPlay] = useLocalStorage(
     key.autoPlay,
     true
-  );
+  )
 
   const handleTimeUpdate = (event: React.SyntheticEvent<HTMLAudioElement>) => {
-    const audio = event.target as HTMLAudioElement;
-    setCurrentTime(audio.currentTime);
-    onTimeUpdate?.(event);
-  };
+    const audio = event.target as HTMLAudioElement
+    setCurrentTime(audio.currentTime)
+    onTimeUpdate?.(event)
+  }
 
   const handleLoadedData = (event: React.SyntheticEvent<HTMLAudioElement>) => {
-    const audio = event.target as HTMLAudioElement;
-    setDuration(audio.duration);
-    onLoadedData?.(event);
-  };
+    const audio = event.target as HTMLAudioElement
+    setDuration(audio.duration)
+    onLoadedData?.(event)
+  }
 
   const handlePlay = (e: React.SyntheticEvent<HTMLAudioElement>) => {
-    setIsPlaying(true);
-    setStorageAutoPlay(true);
-    onPlay?.(e);
-  };
+    setIsPlaying(true)
+    setStorageAutoPlay(true)
+    onPlay?.(e)
+  }
 
   const handlePause = (e: React.SyntheticEvent<HTMLAudioElement>) => {
-    setIsPlaying(false);
-    onPause?.(e);
-  };
+    setIsPlaying(false)
+    onPause?.(e)
+  }
 
   const changeMode = () => {
-    const modes = [PlayMode.Loop, PlayMode.Random, PlayMode.Single];
-    const currentIndex = modes.findIndex((_mode) => _mode === mode);
-    const nextIndex = currentIndex + 1;
-    const nextMode = modes[nextIndex] || modes[0];
-    onChangeMode?.(nextMode);
-  };
+    const modes = [PlayMode.Loop, PlayMode.Random, PlayMode.Single]
+    const currentIndex = modes.findIndex((_mode) => _mode === mode)
+    const nextIndex = currentIndex + 1
+    const nextMode = modes[nextIndex] || modes[0]
+    onChangeMode?.(nextMode)
+  }
 
   const volumeChange = (value: number) => {
-    setVolume(value);
-  };
+    setVolume(value)
+  }
 
   useEffect(() => {
-    const audio = audioRef.current;
+    const audio = audioRef.current
     if (audio) {
-      audio.volume = volume / 100;
+      audio.volume = volume / 100
     }
-  }, [volume]);
+  }, [volume])
 
   const handleTouchStart = (e: React.TouchEvent) => {
-    startY.current = e.touches[0].clientY;
-    startX.current = e.touches[0].clientX;
-  };
+    startY.current = e.touches[0].clientY
+    startX.current = e.touches[0].clientX
+  }
 
   const handleTouchMove = (e: React.TouchEvent) => {
-    const deltaY = e.touches[0].clientY - startY.current;
-    const deltaX = e.touches[0].clientX - startX.current;
-    const container = cardRef.current;
-    const header = cardRef.current?.querySelector('[data-header]');
-    const headerHeight = header?.clientHeight || 20;
-    const addHeight = (container?.clientHeight || headerHeight) - headerHeight;
-    const _shouldAdd = isCollapsed && deltaY < 0;
+    const deltaY = e.touches[0].clientY - startY.current
+    const deltaX = e.touches[0].clientX - startX.current
+    const container = cardRef.current
+    const header = cardRef.current?.querySelector('[data-header]')
+    const headerHeight = header?.clientHeight || 20
+    const addHeight = (container?.clientHeight || headerHeight) - headerHeight
+    const _shouldAdd = isCollapsed && deltaY < 0
     if (isSmallScreen) {
-      shouldAdd.current = _shouldAdd;
-      setTranslateY(_shouldAdd ? deltaY + addHeight : deltaY);
+      shouldAdd.current = _shouldAdd
+      setTranslateY(_shouldAdd ? deltaY + addHeight : deltaY)
     } else {
-      setTranslateX(deltaX);
+      setTranslateX(deltaX)
     }
-  };
+  }
 
   const handleTouchEnd = () => {
     if (isSmallScreen) {
-      const container = cardRef.current;
-      const header = cardRef.current?.querySelector('[data-header]');
-      const headerHeight = header?.clientHeight || 20;
-      const addHeight = (container?.clientHeight || headerHeight) - headerHeight;
-      const _translateY = translateY - (shouldAdd.current ? addHeight : 0);
+      const container = cardRef.current
+      const header = cardRef.current?.querySelector('[data-header]')
+      const headerHeight = header?.clientHeight || 20
+      const addHeight = (container?.clientHeight || headerHeight) - headerHeight
+      const _translateY = translateY - (shouldAdd.current ? addHeight : 0)
       if (_translateY > 100) {
-        setIsCollapsed(true);
+        setIsCollapsed(true)
       } else if (_translateY < -100) {
-        setIsCollapsed(false);
+        setIsCollapsed(false)
       }
-      setTranslateY(0);
+      setTranslateY(0)
     } else {
       if (translateX > 100) {
-        setIsCollapsed(true);
+        setIsCollapsed(true)
       } else if (translateX < -100) {
-        setIsCollapsed(false);
+        setIsCollapsed(false)
       }
-      setTranslateX(0);
+      setTranslateX(0)
     }
-  };
+  }
 
   const dragTranslate = isSmallScreen
     ? translateY
@@ -173,16 +173,16 @@ export default function AudioPlayer (props: AudioPlayerProps) {
       : ''
     : translateX
       ? `translateX(${translateX}px)`
-      : '';
+      : ''
   const collapsedTranslate = isCollapsed
     ? isSmallScreen
       ? 'translateY(90%)'
       : 'translateX(96%)'
-    : '';
+    : ''
 
-  const translateStyle = dragTranslate || collapsedTranslate;
+  const translateStyle = dragTranslate || collapsedTranslate
 
-  if (!src) return null;
+  if (!src) return null
 
   return (
     <div
@@ -192,7 +192,7 @@ export default function AudioPlayer (props: AudioPlayerProps) {
         isCollapsed && 'md:hover:!translate-x-80'
       )}
       style={{
-        transform: translateStyle,
+        transform: translateStyle
       }}
     >
       <audio
@@ -216,10 +216,10 @@ export default function AudioPlayer (props: AudioPlayerProps) {
           isSmallScreen ? 'rounded-t-3xl' : 'md:rounded-l-xl'
         )}
         classNames={{
-          body: 'p-0',
+          body: 'p-0'
         }}
-        shadow='sm'
-        radius='none'
+        shadow="sm"
+        radius="none"
       >
         {isMediumUp && (
           <Button
@@ -230,9 +230,9 @@ export default function AudioPlayer (props: AudioPlayerProps) {
                 ? 'top-0 left-0 w-full h-full rounded-xl bg-opacity-0 hover:bg-opacity-30'
                 : 'top-3 -left-8 rounded-l-full bg-opacity-50 backdrop-blur-md'
             )}
-            variant='solid'
-            color='primary'
-            size='sm'
+            variant="solid"
+            color="primary"
+            size="sm"
             onPress={() => setIsCollapsed(!isCollapsed)}
           >
             <FaRegHandPointRight />
@@ -241,65 +241,65 @@ export default function AudioPlayer (props: AudioPlayerProps) {
         {isSmallScreen && (
           <CardHeader
             data-header
-            className='flex-row justify-center pt-4'
+            className="flex-row justify-center pt-4"
             onTouchStart={handleTouchStart}
             onTouchMove={handleTouchMove}
             onTouchEnd={handleTouchEnd}
             onClick={() => setIsCollapsed(!isCollapsed)}
           >
-            <div className='w-24 h-2 rounded-full bg-content2-foreground shadow-sm' />
+            <div className="w-24 h-2 rounded-full bg-content2-foreground shadow-sm"></div>
           </CardHeader>
         )}
         <CardBody>
-          <div className='grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center overflow-hidden p-6 md:p-2 m-0'>
-            <div className='relative col-span-6 md:col-span-4 flex justify-center'>
+          <div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center overflow-hidden p-6 md:p-2 m-0">
+            <div className="relative col-span-6 md:col-span-4 flex justify-center">
               <Image
-                alt='Album cover'
-                className='object-cover'
+                alt="Album cover"
+                className="object-cover"
                 classNames={{
                   wrapper: 'w-36 aspect-square md:w-24 flex',
-                  img: 'block w-full h-full',
+                  img: 'block w-full h-full'
                 }}
-                shadow='md'
+                shadow="md"
                 src={cover}
-                width='100%'
+                width="100%"
               />
             </div>
 
-            <div className='flex flex-col col-span-6 md:col-span-8'>
-              <div className='flex flex-col gap-0'>
-                <h1 className='font-medium truncate'>{title}</h1>
-                <p className='text-xs text-foreground/80 truncate'>{artist}</p>
+            <div className="flex flex-col col-span-6 md:col-span-8">
+              <div className="flex flex-col gap-0">
+                <h1 className="font-medium truncate">{title}</h1>
+                <p className="text-xs text-foreground/80 truncate">{artist}</p>
               </div>
 
-              <div className='flex flex-col'>
+              <div className="flex flex-col">
                 <Slider
-                  aria-label='Music progress'
+                  aria-label="Music progress"
                   classNames={{
                     track: 'bg-default-500/30 border-none',
                     thumb: 'w-2 h-2 after:w-1.5 after:h-1.5',
-                    filler: 'rounded-full',
+                    filler: 'rounded-full'
                   }}
-                  color='foreground'
+                  color="foreground"
                   value={currentProgress || 0}
                   defaultValue={0}
-                  size='sm'
+                  size="sm"
                   onChange={(value) => {
-                    value = Array.isArray(value) ? value[0] : value;
-                    const audio = audioRef.current;
+                    value = Array.isArray(value) ? value[0] : value
+                    const audio = audioRef.current
                     if (audio) {
-                      audio.currentTime = (value / 100) * duration;
+                      audio.currentTime = (value / 100) * duration
                     }
                   }}
                 />
-                <div className='flex justify-between h-3'>
-                  <p className='text-xs'>
+                <div className="flex justify-between h-3">
+                  <p className="text-xs">
                     {Math.floor(currentTime / 60)}:
                     {Math.floor(currentTime % 60)
                       .toString()
                       .padStart(2, '0')}
                   </p>
-                  <p className='text-xs text-foreground/50'>
+                  <p className="text-xs text-foreground/50">
                     {Math.floor(duration / 60)}:
                     {Math.floor(duration % 60)
                       .toString()
@@ -308,7 +308,7 @@ export default function AudioPlayer (props: AudioPlayerProps) {
                 </div>
               </div>
 
-              <div className='flex w-full items-center justify-center'>
+              <div className="flex w-full items-center justify-center">
                 <Tooltip
                   content={
                     mode === PlayMode.Loop
@@ -320,30 +320,30 @@ export default function AudioPlayer (props: AudioPlayerProps) {
                 >
                   <Button
                     isIconOnly
-                    className='data-[hover]:bg-foreground/10 text-lg md:text-medium'
-                    radius='full'
-                    variant='light'
-                    size='md'
+                    className="data-[hover]:bg-foreground/10 text-lg md:text-medium"
+                    radius="full"
+                    variant="light"
+                    size="md"
                     onPress={changeMode}
                   >
                     {mode === PlayMode.Loop && (
-                      <FaRepeat className='text-foreground/80' />
+                      <FaRepeat className="text-foreground/80" />
                     )}
                     {mode === PlayMode.Random && (
-                      <FaShuffle className='text-foreground/80' />
+                      <FaShuffle className="text-foreground/80" />
                     )}
                     {mode === PlayMode.Single && (
-                      <TbRepeatOnce className='text-foreground/80 text-xl' />
+                      <TbRepeatOnce className="text-foreground/80 text-xl" />
                     )}
                   </Button>
                 </Tooltip>
-                <Tooltip content='上一首'>
+                <Tooltip content="上一首">
                   <Button
                     isIconOnly
-                    className='data-[hover]:bg-foreground/10 text-2xl md:text-xl'
-                    radius='full'
-                    variant='light'
-                    size='md'
+                    className="data-[hover]:bg-foreground/10 text-2xl md:text-xl"
+                    radius="full"
+                    variant="light"
+                    size="md"
                     onPress={pressPrevious}
                   >
                     <BiSolidSkipPreviousCircle />
@@ -352,66 +352,66 @@ export default function AudioPlayer (props: AudioPlayerProps) {
                 <Tooltip content={isPlaying ? '暂停' : '播放'}>
                   <Button
                     isIconOnly
-                    className='data-[hover]:bg-foreground/10 text-3xl md:text-3xl'
-                    radius='full'
-                    variant='light'
-                    size='lg'
+                    className="data-[hover]:bg-foreground/10 text-3xl md:text-3xl"
+                    radius="full"
+                    variant="light"
+                    size="lg"
                     onPress={() => {
                       if (isPlaying) {
-                        audioRef.current?.pause();
-                        setStorageAutoPlay(false);
+                        audioRef.current?.pause()
+                        setStorageAutoPlay(false)
                       } else {
-                        audioRef.current?.play();
+                        audioRef.current?.play()
                       }
                     }}
                   >
-                    {isPlaying ? <FaPause /> : <FaPlay className='ml-1' />}
+                    {isPlaying ? <FaPause /> : <FaPlay className="ml-1" />}
                   </Button>
                 </Tooltip>
-                <Tooltip content='下一首'>
+                <Tooltip content="下一首">
                   <Button
                     isIconOnly
-                    className='data-[hover]:bg-foreground/10 text-2xl md:text-xl'
-                    radius='full'
-                    variant='light'
-                    size='md'
+                    className="data-[hover]:bg-foreground/10 text-2xl md:text-xl"
+                    radius="full"
+                    variant="light"
+                    size="md"
                     onPress={pressNext}
                   >
                     <BiSolidSkipNextCircle />
                   </Button>
                 </Tooltip>
                 <Popover
-                  placement='top'
+                  placement="top"
                   classNames={{
-                    content: 'bg-opacity-30 backdrop-blur-md',
+                    content: 'bg-opacity-30 backdrop-blur-md'
                   }}
                 >
                   <PopoverTrigger>
                     <Button
                       isIconOnly
-                      className='data-[hover]:bg-foreground/10 text-xl md:text-xl'
-                      radius='full'
-                      variant='light'
-                      size='md'
+                      className="data-[hover]:bg-foreground/10 text-xl md:text-xl"
+                      radius="full"
+                      variant="light"
+                      size="md"
                     >
                       <VolumeHighIcon />
                     </Button>
                   </PopoverTrigger>
                   <PopoverContent>
                     <Slider
-                      orientation='vertical'
+                      orientation="vertical"
                       showTooltip
-                      aria-label='Volume'
-                      className='h-40'
-                      color='primary'
+                      aria-label="Volume"
+                      className="h-40"
+                      color="primary"
                       defaultValue={volume}
                       onChange={(value) => {
-                        value = Array.isArray(value) ? value[0] : value;
-                        volumeChange(value);
+                        value = Array.isArray(value) ? value[0] : value
+                        volumeChange(value)
                       }}
-                      startContent={<VolumeHighIcon className='text-2xl' />}
-                      size='sm'
-                      endContent={<VolumeLowIcon className='text-2xl' />}
+                      startContent={<VolumeHighIcon className="text-2xl" />}
+                      size="sm"
+                      endContent={<VolumeLowIcon className="text-2xl" />}
                     />
                   </PopoverContent>
                 </Popover>
@@ -421,5 +421,5 @@ export default function AudioPlayer (props: AudioPlayerProps) {
         </CardBody>
       </Card>
     </div>
-  );
+  )
 }

napcat.webui/src/components/button/add_button.tsx

@@ -1,87 +1,87 @@
-import { Button } from '@heroui/button';
+import { Button } from '@heroui/button'
 import {
   Dropdown,
   DropdownItem,
   DropdownMenu,
-  DropdownTrigger,
-} from '@heroui/dropdown';
-import { Tooltip } from '@heroui/tooltip';
-import { FaRegCircleQuestion } from 'react-icons/fa6';
-import { IoAddCircleOutline } from 'react-icons/io5';
+  DropdownTrigger
+} from '@heroui/dropdown'
+import { Tooltip } from '@heroui/tooltip'
+import { FaRegCircleQuestion } from 'react-icons/fa6'
+import { IoAddCircleOutline } from 'react-icons/io5'
 
 import {
   HTTPClientIcon,
   HTTPServerIcon,
   PCIcon,
   PlusIcon,
-  WebsocketIcon,
-} from '../icons';
+  WebsocketIcon
+} from '../icons'
 
 export interface AddButtonProps {
   onOpen: (key: keyof OneBotConfig['network']) => void
 }
 
 const AddButton: React.FC<AddButtonProps> = (props) => {
-  const { onOpen } = props;
+  const { onOpen } = props
 
   return (
     <Dropdown
       classNames={{
-        content: 'bg-opacity-30 backdrop-blur-md',
+        content: 'bg-opacity-30 backdrop-blur-md'
       }}
-      placement='right'
+      placement="right"
     >
       <DropdownTrigger>
         <Button
-          color='primary'
-          startContent={<IoAddCircleOutline className='text-2xl' />}
+          color="primary"
+          startContent={<IoAddCircleOutline className="text-2xl" />}
         >
           新建
         </Button>
       </DropdownTrigger>
       <DropdownMenu
-        aria-label='Create Network Config'
-        color='primary'
-        variant='flat'
+        aria-label="Create Network Config"
+        color="primary"
+        variant="flat"
         onAction={(key) => {
-          onOpen(key as keyof OneBotConfig['network']);
+          onOpen(key as keyof OneBotConfig['network'])
         }}
       >
         <DropdownItem
-          key='title'
+          key="title"
           isReadOnly
-          className='cursor-default hover:!bg-transparent'
-          textValue='title'
+          className="cursor-default hover:!bg-transparent"
+          textValue="title"
         >
-          <div className='flex items-center gap-2 justify-center'>
-            <div className='w-5 h-5 -ml-3'>
+          <div className="flex items-center gap-2 justify-center">
+            <div className="w-5 h-5 -ml-3">
               <PlusIcon />
             </div>
-            <div className='text-primary-400'>新建网络配置</div>
+            <div className="text-primary-400">新建网络配置</div>
           </div>
         </DropdownItem>
         <DropdownItem
-          key='httpServers'
-          textValue='httpServers'
+          key="httpServers"
+          textValue="httpServers"
           startContent={
-            <div className='w-6 h-6'>
+            <div className="w-6 h-6">
               <HTTPServerIcon />
             </div>
           }
         >
-          <div className='flex gap-1 items-center'>
+          <div className="flex gap-1 items-center">
             HTTP服务器
             <Tooltip
-              content='「由NapCat建立」一个HTTP服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。'
+              content="「由NapCat建立」一个HTTP服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。"
               showArrow
-              className='max-w-64'
+              className="max-w-64"
             >
               <Button
                 isIconOnly
-                radius='full'
-                size='sm'
-                variant='light'
-                className='w-4 h-4 min-w-0'
+                radius="full"
+                size="sm"
+                variant="light"
+                className="w-4 h-4 min-w-0"
               >
                 <FaRegCircleQuestion />
               </Button>
@@ -89,27 +89,27 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
           </div>
         </DropdownItem>
         <DropdownItem
-          key='httpSseServers'
-          textValue='httpSseServers'
+          key="httpSseServers"
+          textValue="httpSseServers"
           startContent={
-            <div className='w-6 h-6'>
+            <div className="w-6 h-6">
               <HTTPServerIcon />
             </div>
           }
         >
-          <div className='flex gap-1 items-center'>
+          <div className="flex gap-1 items-center">
             HTTP SSE服务器
             <Tooltip
-              content='「由NapCat建立」一个HTTP SSE服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。'
+              content="「由NapCat建立」一个HTTP SSE服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。"
               showArrow
-              className='max-w-64'
+              className="max-w-64"
             >
               <Button
                 isIconOnly
-                radius='full'
-                size='sm'
-                variant='light'
-                className='w-4 h-4 min-w-0'
+                radius="full"
+                size="sm"
+                variant="light"
+                className="w-4 h-4 min-w-0"
               >
                 <FaRegCircleQuestion />
               </Button>
@@ -117,27 +117,27 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
           </div>
         </DropdownItem>
         <DropdownItem
-          key='httpClients'
-          textValue='httpClients'
+          key="httpClients"
+          textValue="httpClients"
           startContent={
-            <div className='w-6 h-6'>
+            <div className="w-6 h-6">
               <HTTPClientIcon />
             </div>
           }
         >
-          <div className='flex gap-1 items-center'>
+          <div className="flex gap-1 items-center">
             HTTP客户端
             <Tooltip
-              content='「由框架或者你自己建立」的一个用于「接收」NapCat向你发送请求的客户端，通常框架会提供一个HTTP地址。这个地址是你使用的框架提供的，NapCat会主动连接它。'
+              content="「由框架或者你自己建立」的一个用于「接收」NapCat向你发送请求的客户端，通常框架会提供一个HTTP地址。这个地址是你使用的框架提供的，NapCat会主动连接它。"
               showArrow
-              className='max-w-64'
+              className="max-w-64"
             >
               <Button
                 isIconOnly
-                radius='full'
-                size='sm'
-                variant='light'
-                className='w-4 h-4 min-w-0'
+                radius="full"
+                size="sm"
+                variant="light"
+                className="w-4 h-4 min-w-0"
               >
                 <FaRegCircleQuestion />
               </Button>
@@ -145,27 +145,27 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
           </div>
         </DropdownItem>
         <DropdownItem
-          key='websocketServers'
-          textValue='websocketServers'
+          key="websocketServers"
+          textValue="websocketServers"
           startContent={
-            <div className='w-6 h-6'>
+            <div className="w-6 h-6">
               <WebsocketIcon />
             </div>
           }
         >
-          <div className='flex gap-1 items-center'>
+          <div className="flex gap-1 items-center">
             Websocket服务器
             <Tooltip
-              content='「由NapCat建立」一个WebSocket服务器，你的框架应该连接到此服务器。NapCat会根据你配置的IP和端口等建立一个WebSocket地址，你或者你的框架应该连接到这个地址。'
+              content="「由NapCat建立」一个WebSocket服务器，你的框架应该连接到此服务器。NapCat会根据你配置的IP和端口等建立一个WebSocket地址，你或者你的框架应该连接到这个地址。"
               showArrow
-              className='max-w-64'
+              className="max-w-64"
             >
               <Button
                 isIconOnly
-                radius='full'
-                size='sm'
-                variant='light'
-                className='w-4 h-4 min-w-0'
+                radius="full"
+                size="sm"
+                variant="light"
+                className="w-4 h-4 min-w-0"
               >
                 <FaRegCircleQuestion />
               </Button>
@@ -173,27 +173,27 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
           </div>
         </DropdownItem>
         <DropdownItem
-          key='websocketClients'
-          textValue='websocketClients'
+          key="websocketClients"
+          textValue="websocketClients"
           startContent={
-            <div className='w-6 h-6'>
+            <div className="w-6 h-6">
               <PCIcon />
             </div>
           }
         >
-          <div className='flex gap-1 items-center'>
+          <div className="flex gap-1 items-center">
             Websocket客户端
             <Tooltip
-              content='「由框架或者你自己建立」的WebSocket，通常框架会「提供」一个ws地址，NapCat会主动连接它。'
+              content="「由框架或者你自己建立」的WebSocket，通常框架会「提供」一个ws地址，NapCat会主动连接它。"
               showArrow
-              className='max-w-64'
+              className="max-w-64"
             >
               <Button
                 isIconOnly
-                radius='full'
-                size='sm'
-                variant='light'
-                className='w-4 h-4 min-w-0'
+                radius="full"
+                size="sm"
+                variant="light"
+                className="w-4 h-4 min-w-0"
               >
                 <FaRegCircleQuestion />
               </Button>
@@ -202,7 +202,7 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
         </DropdownItem>
       </DropdownMenu>
     </Dropdown>
-  );
-};
+  )
+}
 
-export default AddButton;
+export default AddButton

napcat.webui/src/components/button/save_buttons.tsx

@@ -1,7 +1,7 @@
-import { Button } from '@heroui/button';
-import clsx from 'clsx';
-import toast from 'react-hot-toast';
-import { IoMdRefresh } from 'react-icons/io';
+import { Button } from '@heroui/button'
+import clsx from 'clsx'
+import toast from 'react-hot-toast'
+import { IoMdRefresh } from 'react-icons/io'
 
 export interface SaveButtonsProps {
   onSubmit: () => void
@@ -16,7 +16,7 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
   reset,
   isSubmitting,
   refresh,
-  className,
+  className
 }) => (
   <div
     className={clsx(
@@ -24,18 +24,18 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
       className
     )}
   >
-    <div className='flex items-center justify-center gap-2 mt-5'>
+    <div className="flex items-center justify-center gap-2 mt-5">
       <Button
-        color='default'
+        color="default"
         onPress={() => {
-          reset();
-          toast.success('重置成功');
+          reset()
+          toast.success('重置成功')
         }}
       >
         取消更改
       </Button>
       <Button
-        color='primary'
+        color="primary"
         isLoading={isSubmitting}
         onPress={() => onSubmit()}
       >
@@ -44,9 +44,9 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
       {refresh && (
         <Button
           isIconOnly
-          color='secondary'
-          radius='full'
-          variant='flat'
+          color="secondary"
+          radius="full"
+          variant="flat"
           onPress={() => refresh()}
         >
           <IoMdRefresh size={24} />
@@ -54,6 +54,6 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
       )}
     </div>
   </div>
-);
+)
 
-export default SaveButtons;
+export default SaveButtons

napcat.webui/src/components/chat_input/components/audio_insert.tsx

@@ -0,0 +1,254 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import clsx from 'clsx'
+import { useEffect, useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { FaMicrophone } from 'react-icons/fa6'
+import { IoMic } from 'react-icons/io5'
+import { MdEdit, MdUpload } from 'react-icons/md'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+import { isURI } from '@/utils/url'
+
+import type { OB11Segment } from '@/types/onebot'
+
+const AudioInsert = () => {
+  const [audioUrl, setAudioUrl] = useState<string>('')
+  const audioInputRef = useRef<HTMLInputElement>(null)
+  const showStructuredMessage = useShowStructuredMessage()
+  const showAudioSegment = (file: string) => {
+    const messages: OB11Segment[] = [
+      {
+        type: 'record',
+        data: {
+          file: file
+        }
+      }
+    ]
+    showStructuredMessage(messages)
+  }
+
+  const [isRecording, setIsRecording] = useState(false)
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+  const audioChunksRef = useRef<Blob[]>([])
+  const [audioPreview, setAudioPreview] = useState<string | null>(null)
+  const [showPreview, setShowPreview] = useState(false)
+  const streamRef = useRef<MediaStream | null>(null)
+  const [recordingTime, setRecordingTime] = useState(0)
+  const recordingIntervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    if (isRecording) {
+      navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
+        streamRef.current = stream
+        const recorder = new MediaRecorder(stream)
+        mediaRecorderRef.current = recorder
+        recorder.start()
+        recorder.ondataavailable = (event) => {
+          if (event.data.size > 0) {
+            audioChunksRef.current.push(event.data)
+          }
+        }
+        recorder.onstop = () => {
+          if (audioChunksRef.current.length > 0) {
+            const audioBlob = new Blob(audioChunksRef.current, {
+              type: 'audio/wav'
+            })
+            const reader = new FileReader()
+            reader.readAsDataURL(audioBlob)
+            reader.onloadend = () => {
+              const base64Audio = reader.result as string
+              setAudioPreview(base64Audio)
+              setShowPreview(true)
+            }
+            audioChunksRef.current = []
+          }
+          stream.getTracks().forEach((track) => track.stop())
+        }
+      })
+      recordingIntervalRef.current = setInterval(() => {
+        setRecordingTime((prevTime) => prevTime + 1)
+      }, 1000)
+    } else {
+      mediaRecorderRef.current?.stop()
+      if (recordingIntervalRef.current) {
+        clearInterval(recordingIntervalRef.current)
+        recordingIntervalRef.current = null
+      }
+    }
+  }, [isRecording])
+
+  const startRecording = () => {
+    setAudioPreview(null)
+    setShowPreview(false)
+    setRecordingTime(0)
+    setIsRecording(true)
+  }
+
+  const stopRecording = () => {
+    setIsRecording(false)
+  }
+
+  const handleShowPreview = () => {
+    if (audioPreview) {
+      showAudioSegment(audioPreview)
+    }
+  }
+
+  const formatTime = (time: number) => {
+    const minutes = Math.floor(time / 60)
+    const seconds = time % 60
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`
+  }
+
+  return (
+    <>
+      <Popover>
+        <Tooltip content="发送音频">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="primary" variant="flat" isIconOnly radius="full">
+                <IoMic className="text-xl" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="flex-row gap-2 p-4">
+          <Tooltip content="上传音频">
+            <Button
+              className="text-lg"
+              color="primary"
+              isIconOnly
+              variant="flat"
+              radius="full"
+              onPress={() => {
+                audioInputRef?.current?.click()
+              }}
+            >
+              <MdUpload />
+            </Button>
+          </Tooltip>
+          <Popover>
+            <Tooltip content="输入音频地址">
+              <div className="max-w-fit">
+                <PopoverTrigger tooltip="输入音频地址">
+                  <Button
+                    className="text-lg"
+                    color="primary"
+                    isIconOnly
+                    variant="flat"
+                    radius="full"
+                  >
+                    <MdEdit />
+                  </Button>
+                </PopoverTrigger>
+              </div>
+            </Tooltip>
+            <PopoverContent className="flex-row gap-1 p-2">
+              <Input
+                value={audioUrl}
+                onChange={(e) => setAudioUrl(e.target.value)}
+                placeholder="请输入音频地址"
+              />
+              <Button
+                color="primary"
+                variant="flat"
+                isIconOnly
+                radius="full"
+                onPress={() => {
+                  if (!isURI(audioUrl)) {
+                    toast.error('请输入正确的音频地址')
+                    return
+                  }
+                  showAudioSegment(audioUrl)
+                  setAudioUrl('')
+                }}
+              >
+                <FaMicrophone />
+              </Button>
+            </PopoverContent>
+          </Popover>
+          <Popover>
+            <Tooltip content="录制音频">
+              <div className="max-w-fit">
+                <PopoverTrigger>
+                  <Button
+                    className="text-lg"
+                    color="primary"
+                    isIconOnly
+                    variant="flat"
+                    radius="full"
+                  >
+                    <IoMic />
+                  </Button>
+                </PopoverTrigger>
+              </div>
+            </Tooltip>
+            <PopoverContent className="flex-col gap-2 p-4">
+              <div className="flex gap-2">
+                <Button
+                  color={isRecording ? 'primary' : 'primary'}
+                  variant="flat"
+                  onPress={isRecording ? stopRecording : startRecording}
+                >
+                  {isRecording ? '停止录制' : '开始录制'}
+                </Button>
+                {showPreview && audioPreview && (
+                  <Button
+                    color="primary"
+                    variant="flat"
+                    onPress={handleShowPreview}
+                  >
+                    查看消息
+                  </Button>
+                )}
+              </div>
+              {(isRecording || audioPreview) && (
+                <div className="flex gap-1 items-center">
+                  <span
+                    className={clsx(
+                      'w-4 h-4 rounded-full',
+                      isRecording
+                        ? 'animate-pulse bg-primary-400'
+                        : 'bg-success-400'
+                    )}
+                  ></span>
+                  <span>录制时长: {formatTime(recordingTime)}</span>
+                </div>
+              )}
+              {showPreview && audioPreview && (
+                <audio controls src={audioPreview} />
+              )}
+            </PopoverContent>
+          </Popover>
+        </PopoverContent>
+      </Popover>
+
+      <input
+        type="file"
+        ref={audioInputRef}
+        hidden
+        accept="audio/*"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (!file) {
+            return
+          }
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = (event) => {
+            const dataURL = event.target?.result
+            showAudioSegment(dataURL as string)
+            e.target.value = ''
+          }
+        }}
+      />
+    </>
+  )
+}
+
+export default AudioInsert

napcat.webui/src/components/chat_input/components/dice_insert.tsx

@@ -0,0 +1,31 @@
+import { Button } from '@heroui/button'
+import { Tooltip } from '@heroui/tooltip'
+import { BsDice3Fill } from 'react-icons/bs'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+const DiceInsert = () => {
+  const showStructuredMessage = useShowStructuredMessage()
+
+  return (
+    <Tooltip content="发送骰子">
+      <Button
+        color="primary"
+        variant="flat"
+        isIconOnly
+        radius="full"
+        onPress={() => {
+          showStructuredMessage([
+            {
+              type: 'dice'
+            }
+          ])
+        }}
+      >
+        <BsDice3Fill className="text-lg" />
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default DiceInsert

napcat.webui/src/components/chat_input/components/emoji_picker.tsx

@@ -1,20 +1,20 @@
-import { Button } from '@heroui/button';
-import { Image } from '@heroui/image';
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import { Tooltip } from '@heroui/tooltip';
-import { data, getUrl } from 'qface';
-import { useEffect, useRef, useState } from 'react';
-import { MdEmojiEmotions } from 'react-icons/md';
+import { Button } from '@heroui/button'
+import { Image } from '@heroui/image'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import { data, getUrl } from 'qface'
+import { useEffect, useRef, useState } from 'react'
+import { MdEmojiEmotions } from 'react-icons/md'
 
-import { EmojiValue } from '../formats/emoji_blot';
+import { EmojiValue } from '../formats/emoji_blot'
 
 const emojis = data.map((item) => {
   return {
     alt: item.QDes,
     src: getUrl(item.QSid),
-    id: item.QSid,
-  } as EmojiValue;
-});
+    id: item.QSid
+  } as EmojiValue
+})
 
 export interface EmojiPickerProps {
   onInsertEmoji: (emoji: EmojiValue) => void
@@ -22,62 +22,62 @@ export interface EmojiPickerProps {
 }
 
 const EmojiPicker = ({ onInsertEmoji, onOpenChange }: EmojiPickerProps) => {
-  const [visibleEmojis, setVisibleEmojis] = useState<EmojiValue[]>([]);
-  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const [visibleEmojis, setVisibleEmojis] = useState<EmojiValue[]>([])
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
+  const containerRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     if (isPopoverOpen) {
-      setVisibleEmojis([]); // Reset visible emojis
-      requestAnimationFrame(() => loadEmojis()); // Start loading emojis
+      setVisibleEmojis([]) // Reset visible emojis
+      requestAnimationFrame(() => loadEmojis()) // Start loading emojis
     }
-  }, [isPopoverOpen]);
+  }, [isPopoverOpen])
 
   const loadEmojis = (index = 0, batchSize = 10) => {
     if (index < emojis.length) {
       setVisibleEmojis((prev) => [
         ...prev,
-        ...emojis.slice(index, index + batchSize),
-      ]);
-      requestAnimationFrame(() => loadEmojis(index + batchSize, batchSize));
+        ...emojis.slice(index, index + batchSize)
+      ])
+      requestAnimationFrame(() => loadEmojis(index + batchSize, batchSize))
     }
-  };
+  }
   return (
     <div ref={containerRef}>
       <Popover
         portalContainer={containerRef.current!}
         shouldCloseOnScroll={false}
-        placement='right-start'
+        placement="right-start"
         onOpenChange={(v) => {
-          onOpenChange(v);
-          setIsPopoverOpen(v);
+          onOpenChange(v)
+          setIsPopoverOpen(v)
         }}
       >
-        <Tooltip content='插入表情'>
-          <div className='max-w-fit'>
+        <Tooltip content="插入表情">
+          <div className="max-w-fit">
             <PopoverTrigger>
-              <Button color='primary' variant='flat' isIconOnly radius='full'>
-                <MdEmojiEmotions className='text-xl' />
+              <Button color="primary" variant="flat" isIconOnly radius="full">
+                <MdEmojiEmotions className="text-xl" />
               </Button>
             </PopoverTrigger>
           </div>
         </Tooltip>
-        <PopoverContent className='grid grid-cols-8 gap-1 flex-wrap justify-start items-start overflow-y-auto max-w-full max-h-96 p-2'>
+        <PopoverContent className="grid grid-cols-8 gap-1 flex-wrap justify-start items-start overflow-y-auto max-w-full max-h-96 p-2">
           {visibleEmojis.map((emoji) => (
             <Button
               key={emoji.id}
-              color='primary'
-              variant='flat'
+              color="primary"
+              variant="flat"
               isIconOnly
-              radius='full'
+              radius="full"
               onPress={() => onInsertEmoji(emoji)}
             >
-              <Image src={emoji.src} alt={emoji.alt} className='w-6 h-6' />
+              <Image src={emoji.src} alt={emoji.alt} className="w-6 h-6" />
             </Button>
           ))}
         </PopoverContent>
       </Popover>
     </div>
-  );
-};
+  )
+}
 
-export default EmojiPicker;
+export default EmojiPicker

napcat.webui/src/components/chat_input/components/file_insert.tsx

@@ -0,0 +1,125 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import { useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { FaFolder } from 'react-icons/fa6'
+import { LuFilePlus2 } from 'react-icons/lu'
+import { MdEdit, MdUpload } from 'react-icons/md'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+import { isURI } from '@/utils/url'
+
+import type { OB11Segment } from '@/types/onebot'
+
+const FileInsert = () => {
+  const [fileUrl, setFileUrl] = useState<string>('')
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const showStructuredMessage = useShowStructuredMessage()
+  const showFileSegment = (file: string) => {
+    const messages: OB11Segment[] = [
+      {
+        type: 'file',
+        data: {
+          file: file
+        }
+      }
+    ]
+    showStructuredMessage(messages)
+  }
+  return (
+    <>
+      <Popover>
+        <Tooltip content="发送文件">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="primary" variant="flat" isIconOnly radius="full">
+                <FaFolder className="text-lg" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="flex-row gap-2 p-4">
+          <Tooltip content="上传文件">
+            <Button
+              className="text-lg"
+              color="primary"
+              isIconOnly
+              variant="flat"
+              radius="full"
+              onPress={() => {
+                fileInputRef?.current?.click()
+              }}
+            >
+              <MdUpload />
+            </Button>
+          </Tooltip>
+          <Popover>
+            <Tooltip content="输入文件地址">
+              <div className="max-w-fit">
+                <PopoverTrigger tooltip="输入文件地址">
+                  <Button
+                    className="text-lg"
+                    color="primary"
+                    isIconOnly
+                    variant="flat"
+                    radius="full"
+                  >
+                    <MdEdit />
+                  </Button>
+                </PopoverTrigger>
+              </div>
+            </Tooltip>
+            <PopoverContent className="flex-row gap-1 p-2">
+              <Input
+                value={fileUrl}
+                onChange={(e) => setFileUrl(e.target.value)}
+                placeholder="请输入文件地址"
+              />
+              <Button
+                color="primary"
+                variant="flat"
+                isIconOnly
+                radius="full"
+                onPress={() => {
+                  if (!isURI(fileUrl)) {
+                    toast.error('请输入正确的文件地址')
+                    return
+                  }
+                  showFileSegment(fileUrl)
+                  setFileUrl('')
+                }}
+              >
+                <LuFilePlus2 />
+              </Button>
+            </PopoverContent>
+          </Popover>
+        </PopoverContent>
+      </Popover>
+
+      <input
+        type="file"
+        ref={fileInputRef}
+        hidden
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (!file) {
+            return
+          }
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = (event) => {
+            const dataURL = event.target?.result
+            showFileSegment(dataURL as string)
+            e.target.value = ''
+          }
+        }}
+      />
+    </>
+  )
+}
+
+export default FileInsert

napcat.webui/src/components/chat_input/components/image_insert.tsx

@@ -0,0 +1,114 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import { useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { MdAddPhotoAlternate, MdEdit, MdImage, MdUpload } from 'react-icons/md'
+
+import { isURI } from '@/utils/url'
+
+export interface ImageInsertProps {
+  insertImage: (url: string) => void
+  onOpenChange: (open: boolean) => void
+}
+
+const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
+  const [imgUrl, setImgUrl] = useState<string>('')
+  const imageInputRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <>
+      <Popover onOpenChange={onOpenChange}>
+        <Tooltip content="插入图片">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="primary" variant="flat" isIconOnly radius="full">
+                <MdImage className="text-xl" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="flex-row gap-2 p-4">
+          <Tooltip content="上传图片">
+            <Button
+              className="text-lg"
+              color="primary"
+              isIconOnly
+              variant="flat"
+              radius="full"
+              onPress={() => {
+                imageInputRef?.current?.click()
+              }}
+            >
+              <MdUpload />
+            </Button>
+          </Tooltip>
+          <Popover>
+            <Tooltip content="输入图片地址">
+              <div className="max-w-fit">
+                <PopoverTrigger tooltip="输入图片地址">
+                  <Button
+                    className="text-lg"
+                    color="primary"
+                    isIconOnly
+                    variant="flat"
+                    radius="full"
+                  >
+                    <MdEdit />
+                  </Button>
+                </PopoverTrigger>
+              </div>
+            </Tooltip>
+            <PopoverContent className="flex-row gap-1 p-2">
+              <Input
+                value={imgUrl}
+                onChange={(e) => setImgUrl(e.target.value)}
+                placeholder="请输入图片地址"
+              />
+              <Button
+                color="primary"
+                variant="flat"
+                isIconOnly
+                radius="full"
+                onPress={() => {
+                  if (!isURI(imgUrl)) {
+                    toast.error('请输入正确的图片地址')
+                    return
+                  }
+                  insertImage(imgUrl)
+                  setImgUrl('')
+                }}
+              >
+                <MdAddPhotoAlternate />
+              </Button>
+            </PopoverContent>
+          </Popover>
+        </PopoverContent>
+      </Popover>
+
+      <input
+        type="file"
+        ref={imageInputRef}
+        hidden
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (!file) {
+            return
+          }
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = (event) => {
+            const dataURL = event.target?.result
+            insertImage(dataURL as string)
+            e.target.value = ''
+          }
+        }}
+      />
+    </>
+  )
+}
+
+export default ImageInsert

napcat.webui/src/components/chat_input/components/music_insert.tsx

@@ -1,35 +1,35 @@
-import { Button } from '@heroui/button';
-import { Form } from '@heroui/form';
-import { Input } from '@heroui/input';
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import { Select, SelectItem } from '@heroui/select';
-import type { SharedSelection } from '@heroui/system';
-import { Tab, Tabs } from '@heroui/tabs';
-import { Tooltip } from '@heroui/tooltip';
-import type { Key } from '@react-types/shared';
-import { useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
-import { IoMusicalNotes } from 'react-icons/io5';
-import { TbMusicPlus } from 'react-icons/tb';
+import { Button } from '@heroui/button'
+import { Form } from '@heroui/form'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Select, SelectItem } from '@heroui/select'
+import type { SharedSelection } from '@heroui/system'
+import { Tab, Tabs } from '@heroui/tabs'
+import { Tooltip } from '@heroui/tooltip'
+import type { Key } from '@react-types/shared'
+import { useRef, useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+import { IoMusicalNotes } from 'react-icons/io5'
+import { TbMusicPlus } from 'react-icons/tb'
 
-import useShowStructuredMessage from '@/hooks/use_show_strcuted_message';
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
 
-import { isURI } from '@/utils/url';
+import { isURI } from '@/utils/url'
 
 import type {
   CustomMusicSegment,
   MusicSegment,
-  OB11Segment,
-} from '@/types/onebot';
+  OB11Segment
+} from '@/types/onebot'
 
-type MusicData = CustomMusicSegment['data'] | MusicSegment['data'];
+type MusicData = CustomMusicSegment['data'] | MusicSegment['data']
 
 const MusicInsert = () => {
-  const [musicId, setMusicId] = useState<string>('');
-  const [musicType, setMusicType] = useState<SharedSelection>(new Set(['163']));
-  const [mode, setMode] = useState<Key>('default');
-  const containerRef = useRef<HTMLDivElement>(null);
+  const [musicId, setMusicId] = useState<string>('')
+  const [musicType, setMusicType] = useState<SharedSelection>(new Set(['163']))
+  const [mode, setMode] = useState<Key>('default')
+  const containerRef = useRef<HTMLDivElement>(null)
   const { control, handleSubmit, reset } = useForm<
     Omit<CustomMusicSegment['data'], 'type'>
   >({
@@ -38,84 +38,84 @@ const MusicInsert = () => {
       audio: '',
       title: '',
       image: '',
-      content: '',
-    },
-  });
-  const showStructuredMessage = useShowStructuredMessage();
+      content: ''
+    }
+  })
+  const showStructuredMessage = useShowStructuredMessage()
 
   const showMusicSegment = (data: MusicData) => {
-    const messages: OB11Segment[] = [];
+    const messages: OB11Segment[] = []
     if (data.type === 'custom') {
       messages.push({
         type: 'music',
         data: {
           ...data,
-          type: 'custom',
-        },
-      });
+          type: 'custom'
+        }
+      })
     } else {
       messages.push({
         type: 'music',
-        data,
-      });
+        data
+      })
     }
-    showStructuredMessage(messages);
-  };
+    showStructuredMessage(messages)
+  }
 
   const onSubmit = (data: Omit<CustomMusicSegment['data'], 'type'>) => {
     showMusicSegment({
       type: 'custom',
-      ...data,
-    });
-    reset();
-  };
+      ...data
+    })
+    reset()
+  }
 
   return (
-    <div ref={containerRef} className='overflow-visible'>
+    <div ref={containerRef} className="overflow-visible">
       <Popover
-        placement='right-start'
+        placement="right-start"
         shouldCloseOnScroll={false}
         portalContainer={containerRef.current!}
       >
-        <Tooltip content='发送音乐'>
-          <div className='max-w-fit'>
+        <Tooltip content="发送音乐">
+          <div className="max-w-fit">
             <PopoverTrigger>
-              <Button color='primary' variant='flat' isIconOnly radius='full'>
-                <IoMusicalNotes className='text-xl' />
+              <Button color="primary" variant="flat" isIconOnly radius="full">
+                <IoMusicalNotes className="text-xl" />
               </Button>
             </PopoverTrigger>
           </div>
         </Tooltip>
-        <PopoverContent className='gap-2 p-4'>
+        <PopoverContent className="gap-2 p-4">
           <Tabs
-            placement='top'
-            className='w-96'
+            placement="top"
+            className="w-96"
             fullWidth
             selectedKey={mode}
             onSelectionChange={(key) => {
-              if (key !== null) setMode(key);
+              if (key !== null) setMode(key)
             }}
           >
-            <Tab title='主流平台' key='default' className='flex flex-col gap-2'>
+            <Tab title="主流平台" key="default" className="flex flex-col gap-2">
               <Select
                 onClick={(e) => e.stopPropagation()}
-                aria-label='音乐平台'
+                aria-label="音乐平台"
                 selectedKeys={musicType}
-                label='音乐平台'
-                placeholder='请选择音乐平台'
+                label="音乐平台"
+                placeholder="请选择音乐平台"
                 items={[
                   {
                     name: 'QQ音乐',
-                    id: 'qq',
+                    id: 'qq'
                   },
                   {
                     name: '网易云音乐',
-                    id: '163',
+                    id: '163'
                   },
                   {
                     name: '虾米音乐',
-                    id: 'xm',
-                  },
+                    id: 'xm'
+                  }
                 ]}
                 onSelectionChange={setMusicType}
               >
@@ -128,27 +128,27 @@ const MusicInsert = () => {
               <Input
                 value={musicId}
                 onChange={(e) => setMusicId(e.target.value)}
-                placeholder='请输入音乐ID'
-                label='音乐ID'
+                placeholder="请输入音乐ID"
+                label="音乐ID"
               />
               <Button
                 fullWidth
-                size='lg'
-                color='primary'
-                variant='flat'
-                radius='full'
+                size="lg"
+                color="primary"
+                variant="flat"
+                radius="full"
                 onPress={() => {
                   if (!musicId) {
-                    toast.error('请输入音乐ID');
-                    return;
+                    toast.error('请输入音乐ID')
+                    return
                   }
                   showMusicSegment({
                     type: Array.from(
                       musicType
                     )[0] as MusicSegment['data']['type'],
-                    id: musicId,
-                  });
-                  setMusicId('');
+                    id: musicId
+                  })
+                  setMusicId('')
                 }}
                 startContent={<TbMusicPlus />}
               >
@@ -156,92 +156,92 @@ const MusicInsert = () => {
               </Button>
             </Tab>
             <Tab
-              title='自定义音乐'
-              key='custom'
-              className='flex flex-col gap-2'
+              title="自定义音乐"
+              key="custom"
+              className="flex flex-col gap-2"
             >
               <Form
                 onSubmit={handleSubmit(onSubmit)}
-                className='flex flex-col gap-2'
-                validationBehavior='native'
+                className="flex flex-col gap-2"
+                validationBehavior="native"
               >
                 <Controller
-                  name='url'
+                  name="url"
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
                       isRequired
                       validate={(v) => {
-                        return !isURI(v) ? '请输入正确的音乐URL' : null;
+                        return !isURI(v) ? '请输入正确的音乐URL' : null
                       }}
-                      size='sm'
-                      placeholder='请输入音乐URL'
-                      label='音乐URL'
+                      size="sm"
+                      placeholder="请输入音乐URL"
+                      label="音乐URL"
                     />
                   )}
                 />
                 <Controller
-                  name='audio'
+                  name="audio"
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
                       isRequired
                       validate={(v) => {
-                        return !isURI(v) ? '请输入正确的音频URL' : null;
+                        return !isURI(v) ? '请输入正确的音频URL' : null
                       }}
-                      size='sm'
-                      placeholder='请输入音频URL'
-                      label='音频URL'
+                      size="sm"
+                      placeholder="请输入音频URL"
+                      label="音频URL"
                     />
                   )}
                 />
                 <Controller
-                  name='title'
+                  name="title"
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
                       isRequired
-                      size='sm'
-                      errorMessage='请输入音乐标题'
-                      placeholder='请输入音乐标题'
-                      label='音乐标题'
+                      size="sm"
+                      errorMessage="请输入音乐标题"
+                      placeholder="请输入音乐标题"
+                      label="音乐标题"
                     />
                   )}
                 />
                 <Controller
-                  name='image'
+                  name="image"
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
-                      size='sm'
-                      placeholder='请输入封面图片URL'
-                      label='封面图片URL'
+                      size="sm"
+                      placeholder="请输入封面图片URL"
+                      label="封面图片URL"
                     />
                   )}
                 />
                 <Controller
-                  name='content'
+                  name="content"
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
-                      size='sm'
-                      placeholder='请输入音乐描述'
-                      label='音乐描述'
+                      size="sm"
+                      placeholder="请输入音乐描述"
+                      label="音乐描述"
                     />
                   )}
                 />
                 <Button
                   fullWidth
-                  size='lg'
-                  color='primary'
-                  variant='flat'
-                  radius='full'
-                  type='submit'
+                  size="lg"
+                  color="primary"
+                  variant="flat"
+                  radius="full"
+                  type="submit"
                   startContent={<TbMusicPlus />}
                 >
                   创建自定义音乐
@@ -252,7 +252,7 @@ const MusicInsert = () => {
         </PopoverContent>
       </Popover>
     </div>
-  );
-};
+  )
+}
 
-export default MusicInsert;
+export default MusicInsert

napcat.webui/src/components/chat_input/components/reply_insert.tsx

@@ -0,0 +1,58 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import { useState } from 'react'
+import { BsChatQuoteFill } from 'react-icons/bs'
+import { MdAdd } from 'react-icons/md'
+
+export interface ReplyInsertProps {
+  insertReply: (messageId: string) => void
+}
+
+const ReplyInsert = ({ insertReply }: ReplyInsertProps) => {
+  const [replyId, setReplyId] = useState<string>('')
+
+  return (
+    <>
+      <Popover>
+        <Tooltip content="回复消息">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="primary" variant="flat" isIconOnly radius="full">
+                <BsChatQuoteFill className="text-lg" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="flex-row gap-2 p-4">
+          <Input
+            placeholder="输入消息 ID"
+            value={replyId}
+            onChange={(e) => {
+              const value = e.target.value
+              const isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/
+              if (isNumberReg.test(value)) {
+                setReplyId(value)
+              }
+            }}
+          />
+          <Button
+            color="primary"
+            variant="flat"
+            radius="full"
+            isIconOnly
+            onPress={() => {
+              insertReply(replyId)
+              setReplyId('')
+            }}
+          >
+            <MdAdd />
+          </Button>
+        </PopoverContent>
+      </Popover>
+    </>
+  )
+}
+
+export default ReplyInsert

napcat.webui/src/components/chat_input/components/rps_insert.tsx

@@ -0,0 +1,31 @@
+import { Button } from '@heroui/button'
+import { Tooltip } from '@heroui/tooltip'
+import { LiaHandScissors } from 'react-icons/lia'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+const RPSInsert = () => {
+  const showStructuredMessage = useShowStructuredMessage()
+
+  return (
+    <Tooltip content="发送猜拳">
+      <Button
+        color="primary"
+        variant="flat"
+        isIconOnly
+        radius="full"
+        onPress={() => {
+          showStructuredMessage([
+            {
+              type: 'rps'
+            }
+          ])
+        }}
+      >
+        <LiaHandScissors className="text-2xl" />
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default RPSInsert

napcat.webui/src/components/chat_input/components/show_structed_message.tsx

@@ -1,6 +1,6 @@
-import { Snippet } from '@heroui/snippet';
+import { Snippet } from '@heroui/snippet'
 
-import { OB11Segment } from '@/types/onebot';
+import { OB11Segment } from '@/types/onebot'
 
 export interface ShowStructedMessageProps {
   messages: OB11Segment[]
@@ -11,22 +11,22 @@ const ShowStructedMessage = ({ messages }: ShowStructedMessageProps) => {
     <Snippet
       hideSymbol
       tooltipProps={{
-        content: '点击复制',
+        content: '点击复制'
       }}
       classNames={{
-        copyButton: 'self-start sticky top-0 right-0',
+        copyButton: 'self-start sticky top-0 right-0'
       }}
-      className='bg-content1 h-96 overflow-y-scroll items-start'
+      className="bg-content1 h-96 overflow-y-scroll items-start"
     >
       {JSON.stringify(messages, null, 2)
         .split('\n')
         .map((line, i) => (
-          <span key={i} className='whitespace-pre-wrap break-all'>
+          <span key={i} className="whitespace-pre-wrap break-all">
             {line}
           </span>
         ))}
     </Snippet>
-  );
-};
+  )
+}
 
-export default ShowStructedMessage;
+export default ShowStructedMessage

napcat.webui/src/components/chat_input/components/video_insert.tsx

@@ -0,0 +1,126 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Tooltip } from '@heroui/tooltip'
+import { useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { IoVideocam } from 'react-icons/io5'
+import { MdEdit, MdUpload } from 'react-icons/md'
+import { TbVideoPlus } from 'react-icons/tb'
+
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+import { isURI } from '@/utils/url'
+
+import type { OB11Segment } from '@/types/onebot'
+
+const VideoInsert = () => {
+  const [videoUrl, setVideoUrl] = useState<string>('')
+  const videoInputRef = useRef<HTMLInputElement>(null)
+  const showStructuredMessage = useShowStructuredMessage()
+  const showVideoSegment = (file: string) => {
+    const messages: OB11Segment[] = [
+      {
+        type: 'video',
+        data: {
+          file: file
+        }
+      }
+    ]
+    showStructuredMessage(messages)
+  }
+  return (
+    <>
+      <Popover>
+        <Tooltip content="发送视频">
+          <div className="max-w-fit">
+            <PopoverTrigger>
+              <Button color="primary" variant="flat" isIconOnly radius="full">
+                <IoVideocam className="text-xl" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
+        <PopoverContent className="flex-row gap-2 p-4">
+          <Tooltip content="上传视频">
+            <Button
+              className="text-lg"
+              color="primary"
+              isIconOnly
+              variant="flat"
+              radius="full"
+              onPress={() => {
+                videoInputRef?.current?.click()
+              }}
+            >
+              <MdUpload />
+            </Button>
+          </Tooltip>
+          <Popover>
+            <Tooltip content="输入视频地址">
+              <div className="max-w-fit">
+                <PopoverTrigger tooltip="输入视频地址">
+                  <Button
+                    className="text-lg"
+                    color="primary"
+                    isIconOnly
+                    variant="flat"
+                    radius="full"
+                  >
+                    <MdEdit />
+                  </Button>
+                </PopoverTrigger>
+              </div>
+            </Tooltip>
+            <PopoverContent className="flex-row gap-1 p-2">
+              <Input
+                value={videoUrl}
+                onChange={(e) => setVideoUrl(e.target.value)}
+                placeholder="请输入视频地址"
+              />
+              <Button
+                color="primary"
+                variant="flat"
+                isIconOnly
+                radius="full"
+                onPress={() => {
+                  if (!isURI(videoUrl)) {
+                    toast.error('请输入正确的视频地址')
+                    return
+                  }
+                  showVideoSegment(videoUrl)
+                  setVideoUrl('')
+                }}
+              >
+                <TbVideoPlus />
+              </Button>
+            </PopoverContent>
+          </Popover>
+        </PopoverContent>
+      </Popover>
+
+      <input
+        type="file"
+        ref={videoInputRef}
+        hidden
+        accept="video/*"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (!file) {
+            return
+          }
+          const reader = new FileReader()
+          reader.readAsDataURL(file)
+          reader.onload = (event) => {
+            const dataURL = event.target?.result
+            showVideoSegment(dataURL as string)
+            e.target.value = ''
+          }
+        }}
+      />
+    </>
+  )
+}
+
+export default VideoInsert

napcat.webui/src/components/chat_input/formats/emoji_blot.ts

@@ -0,0 +1,41 @@
+import Quill from 'quill'
+
+// eslint-disable-next-line
+const Embed = Quill.import('blots/embed') as any
+export interface EmojiValue {
+  alt: string
+  src: string
+  id: string
+}
+class EmojiBlot extends Embed {
+  static blotName: string = 'emoji'
+  static tagName: string = 'img'
+  static classNames: string[] = ['w-6', 'h-6']
+
+  static create(value: HTMLImageElement) {
+    const node = super.create(value)
+    node.setAttribute('alt', value.alt)
+    node.setAttribute('src', value.src)
+    node.setAttribute('data-id', value.id)
+    node.classList.add(...EmojiBlot.classNames)
+    return node
+  }
+
+  static formats(node: HTMLImageElement): EmojiValue {
+    return {
+      alt: node.getAttribute('alt') ?? '',
+      src: node.getAttribute('src') ?? '',
+      id: node.getAttribute('data-id') ?? ''
+    }
+  }
+
+  static value(node: HTMLImageElement): EmojiValue {
+    return {
+      alt: node.getAttribute('alt') ?? '',
+      src: node.getAttribute('src') ?? '',
+      id: node.getAttribute('data-id') ?? ''
+    }
+  }
+}
+
+export default EmojiBlot

napcat.webui/src/components/chat_input/formats/image_blot.ts

@@ -0,0 +1,30 @@
+import Quill from 'quill'
+
+// eslint-disable-next-line
+const Embed = Quill.import('blots/embed') as any
+export interface ImageValue {
+  alt: string
+  src: string
+}
+class ImageBlot extends Embed {
+  static blotName = 'image'
+  static tagName = 'img'
+  static classNames: string[] = ['max-w-48', 'max-h-48', 'align-bottom']
+
+  static create(value: ImageValue) {
+    let node = super.create()
+    node.setAttribute('alt', value.alt)
+    node.setAttribute('src', value.src)
+    node.classList.add(...ImageBlot.classNames)
+    return node
+  }
+
+  static value(node: HTMLImageElement): ImageValue {
+    return {
+      alt: node.getAttribute('alt') ?? '',
+      src: node.getAttribute('src') ?? ''
+    }
+  }
+}
+
+export default ImageBlot

napcat.webui/src/components/chat_input/formats/reply_blot.ts

@@ -1,4 +1,4 @@
-import Quill from 'quill';
+import Quill from 'quill'
 
 // eslint-disable-next-line
 const BlockEmbed = Quill.import('blots/block/embed') as any
@@ -6,38 +6,38 @@ export interface ReplyBlockValue {
   messageId: string
 }
 class ReplyBlock extends BlockEmbed {
-  static blotName = 'reply';
-  static tagName = 'div';
+  static blotName = 'reply'
+  static tagName = 'div'
   static classNames = [
     'p-2',
     'select-none',
     'bg-default-100',
     'rounded-md',
-    'pointer-events-none',
-  ];
+    'pointer-events-none'
+  ]
 
-  static create (value: ReplyBlockValue) {
-    const node = super.create();
-    node.setAttribute('data-message-id', value.messageId);
-    node.setAttribute('contenteditable', 'false');
-    node.classList.add(...ReplyBlock.classNames);
-    const innerDom = document.createElement('div');
-    innerDom.classList.add('text-sm', 'text-default-500', 'relative');
-    const svgContainer = document.createElement('div');
-    svgContainer.classList.add('w-3', 'h-3', 'absolute', 'top-0', 'right-0');
-    const svg = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.9082 12.3714H20.5982C20.5182 17.0414 19.5982 17.8114 16.7282 19.5114C16.3982 19.7114 16.2882 20.1314 16.4882 20.4714C16.6882 20.8014 17.1082 20.9114 17.4482 20.7114C20.8282 18.7114 22.0082 17.4914 22.0082 11.6714V6.28141C22.0082 4.57141 20.6182 3.19141 18.9182 3.19141H15.9182C14.1582 3.19141 12.8282 4.52141 12.8282 6.28141V9.28141C12.8182 11.0414 14.1482 12.3714 15.9082 12.3714Z" fill="#292D32"></path> <path d="M5.09 12.3714H9.78C9.7 17.0414 8.78 17.8114 5.91 19.5114C5.58 19.7114 5.47 20.1314 5.67 20.4714C5.87 20.8014 6.29 20.9114 6.63 20.7114C10.01 18.7114 11.19 17.4914 11.19 11.6714V6.28141C11.19 4.57141 9.8 3.19141 8.1 3.19141H5.1C3.33 3.19141 2 4.52141 2 6.28141V9.28141C2 11.0414 3.33 12.3714 5.09 12.3714Z" fill="#292D32"></path> </g></svg>';
-    svgContainer.innerHTML = svg;
-    innerDom.innerHTML = `消息ID：${value.messageId}`;
-    innerDom.appendChild(svgContainer);
-    node.appendChild(innerDom);
-    return node;
+  static create(value: ReplyBlockValue) {
+    const node = super.create()
+    node.setAttribute('data-message-id', value.messageId)
+    node.setAttribute('contenteditable', 'false')
+    node.classList.add(...ReplyBlock.classNames)
+    const innerDom = document.createElement('div')
+    innerDom.classList.add('text-sm', 'text-default-500', 'relative')
+    const svgContainer = document.createElement('div')
+    svgContainer.classList.add('w-3', 'h-3', 'absolute', 'top-0', 'right-0')
+    const svg = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.9082 12.3714H20.5982C20.5182 17.0414 19.5982 17.8114 16.7282 19.5114C16.3982 19.7114 16.2882 20.1314 16.4882 20.4714C16.6882 20.8014 17.1082 20.9114 17.4482 20.7114C20.8282 18.7114 22.0082 17.4914 22.0082 11.6714V6.28141C22.0082 4.57141 20.6182 3.19141 18.9182 3.19141H15.9182C14.1582 3.19141 12.8282 4.52141 12.8282 6.28141V9.28141C12.8182 11.0414 14.1482 12.3714 15.9082 12.3714Z" fill="#292D32"></path> <path d="M5.09 12.3714H9.78C9.7 17.0414 8.78 17.8114 5.91 19.5114C5.58 19.7114 5.47 20.1314 5.67 20.4714C5.87 20.8014 6.29 20.9114 6.63 20.7114C10.01 18.7114 11.19 17.4914 11.19 11.6714V6.28141C11.19 4.57141 9.8 3.19141 8.1 3.19141H5.1C3.33 3.19141 2 4.52141 2 6.28141V9.28141C2 11.0414 3.33 12.3714 5.09 12.3714Z" fill="#292D32"></path> </g></svg>`
+    svgContainer.innerHTML = svg
+    innerDom.innerHTML = `消息ID：${value.messageId}`
+    innerDom.appendChild(svgContainer)
+    node.appendChild(innerDom)
+    return node
   }
 
-  static value (node: HTMLElement): ReplyBlockValue {
+  static value(node: HTMLElement): ReplyBlockValue {
     return {
-      messageId: node.getAttribute('data-message-id') || '',
-    };
+      messageId: node.getAttribute('data-message-id') || ''
+    }
   }
 }
 
-export default ReplyBlock;
+export default ReplyBlock

napcat.webui/src/components/chat_input/index.tsx

@@ -0,0 +1,207 @@
+import { Button } from '@heroui/button'
+import type { Range } from 'quill'
+import 'quill/dist/quill.core.css'
+import { useRef } from 'react'
+import toast from 'react-hot-toast'
+
+import { useCustomQuill } from '@/hooks/use_custom_quill'
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+
+import { quillToMessage } from '@/utils/onebot'
+
+import type { OB11Segment } from '@/types/onebot'
+
+import AudioInsert from './components/audio_insert'
+import DiceInsert from './components/dice_insert'
+import EmojiPicker from './components/emoji_picker'
+import FileInsert from './components/file_insert'
+import ImageInsert from './components/image_insert'
+import MusicInsert from './components/music_insert'
+import ReplyInsert from './components/reply_insert'
+import RPSInsert from './components/rps_insert'
+import VideoInsert from './components/video_insert'
+import EmojiBlot from './formats/emoji_blot'
+import type { EmojiValue } from './formats/emoji_blot'
+import ImageBlot from './formats/image_blot'
+import ReplyBlock from './formats/reply_blot'
+
+const ChatInput = () => {
+  const memorizedRange = useRef<Range | null>(null)
+
+  const showStructuredMessage = useShowStructuredMessage()
+  const formats: string[] = ['image', 'emoji', 'reply']
+  const modules = {
+    toolbar: '#toolbar'
+  }
+  const { quillRef, quill, Quill } = useCustomQuill({
+    modules,
+    formats,
+    placeholder: '请输入消息'
+  })
+
+  if (Quill && !quill) {
+    Quill.register('formats/emoji', EmojiBlot)
+    Quill.register('formats/image', ImageBlot, true)
+    Quill.register('formats/reply', ReplyBlock)
+  }
+
+  if (quill) {
+    quill.on('selection-change', (range) => {
+      if (range) {
+        const editorContent = quill.getContents()
+        const firstOp = editorContent.ops[0]
+
+        if (
+          typeof firstOp?.insert !== 'string' &&
+          firstOp?.insert?.reply &&
+          range.index === 0 &&
+          range.length !== quill.getLength()
+        ) {
+          quill.setSelection(1, Quill.sources.SILENT)
+        }
+      }
+    })
+
+    quill.on('text-change', () => {
+      const editorContent = quill.getContents()
+      const firstOp = editorContent.ops[0]
+      if (
+        firstOp &&
+        typeof firstOp.insert !== 'string' &&
+        firstOp.insert?.reply &&
+        quill.getLength() === 1
+      ) {
+        quill.insertText(1, '\n', Quill.sources.SILENT)
+      }
+    })
+
+    quill.on('editor-change', (eventName: string) => {
+      if (eventName === 'text-change') {
+        const editorContent = quill.getContents()
+        const firstOp = editorContent.ops[0]
+        if (
+          firstOp &&
+          typeof firstOp.insert !== 'string' &&
+          firstOp.insert?.reply &&
+          quill.getLength() === 1
+        ) {
+          quill.insertText(1, '\n', Quill.sources.SILENT)
+        }
+      }
+    })
+
+    quill.root.addEventListener('compositionstart', () => {
+      const editorContent = quill.getContents()
+      const firstOp = editorContent.ops[0]
+      if (
+        firstOp &&
+        typeof firstOp.insert !== 'string' &&
+        firstOp.insert?.reply &&
+        quill.getLength() === 1
+      ) {
+        quill.insertText(1, '\n', Quill.sources.SILENT)
+      }
+    })
+  }
+
+  const onOpenChange = (open: boolean) => {
+    if (open) {
+      const selection = quill?.getSelection()
+      if (selection) memorizedRange.current = selection
+    }
+  }
+
+  const insertImage = (url: string) => {
+    const selection = memorizedRange.current || quill?.getSelection()
+    quill?.deleteText(selection?.index || 0, selection?.length || 0)
+    quill?.insertEmbed(selection?.index || 0, 'image', {
+      src: url,
+      alt: '图片'
+    })
+    quill?.setSelection((selection?.index || 0) + 1, 0)
+  }
+  function insertReplyBlock(messageId: string) {
+    const isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/
+    if (!isNumberReg.test(messageId)) {
+      toast.error('请输入正确的消息ID')
+      return
+    }
+    const editorContent = quill?.getContents()
+    const firstOp = editorContent?.ops[0]
+    const currentSelection = quill?.getSelection()
+    if (
+      firstOp &&
+      typeof firstOp.insert !== 'string' &&
+      firstOp.insert?.reply
+    ) {
+      const delta = quill?.getContents()
+      if (delta) {
+        delta.ops[0] = {
+          insert: { reply: { messageId } }
+        }
+        quill?.setContents(delta, Quill.sources.USER)
+      }
+    } else {
+      quill?.insertEmbed(0, 'reply', { messageId }, Quill.sources.USER)
+    }
+    quill?.setSelection((currentSelection?.index || 0) + 1, 0)
+    quill?.blur()
+  }
+  const onInsertEmoji = (emoji: EmojiValue) => {
+    const selection = memorizedRange.current || quill?.getSelection()
+    quill?.deleteText(selection?.index || 0, selection?.length || 0)
+    quill?.insertEmbed(selection?.index || 0, 'emoji', {
+      alt: emoji.alt,
+      src: emoji.src,
+      id: emoji.id
+    })
+    quill?.setSelection((selection?.index || 0) + 1, 0)
+  }
+
+  const getChatMessage = () => {
+    const delta = quill?.getContents()
+    const ops =
+      delta?.ops?.filter((op) => {
+        return op.insert !== '\n'
+      }) ?? []
+    const messages: OB11Segment[] = ops.map((op) => {
+      return quillToMessage(op)
+    })
+    return messages
+  }
+
+  return (
+    <div>
+      <div
+        ref={quillRef}
+        className="border border-default-200 rounded-md !mb-2 !text-base !h-64"
+      />
+      <div id="toolbar" className="!border-none flex gap-2">
+        <ImageInsert insertImage={insertImage} onOpenChange={onOpenChange} />
+        <EmojiPicker
+          onInsertEmoji={onInsertEmoji}
+          onOpenChange={onOpenChange}
+        />
+        <ReplyInsert insertReply={insertReplyBlock} />
+        <FileInsert />
+        <AudioInsert />
+        <VideoInsert />
+        <MusicInsert />
+        <DiceInsert />
+        <RPSInsert />
+        <Button
+          color="primary"
+          onPress={() => {
+            const messages = getChatMessage()
+            showStructuredMessage(messages)
+          }}
+          className="ml-auto"
+        >
+          获取JSON格式
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default ChatInput

napcat.webui/src/components/chat_input/modal.tsx

@@ -1,42 +1,42 @@
-import { Button } from '@heroui/button';
+import { Button } from '@heroui/button'
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
   ModalHeader,
-  useDisclosure,
-} from '@heroui/modal';
+  useDisclosure
+} from '@heroui/modal'
 
-import ChatInput from '.';
+import ChatInput from '.'
 
-export default function ChatInputModal () {
-  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+export default function ChatInputModal() {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure()
 
   return (
     <>
-      <Button onPress={onOpen} color='primary' radius='full' variant='flat'>
+      <Button onPress={onOpen} color="primary" radius="full" variant="flat">
         构造聊天消息
       </Button>
       <Modal
-        size='4xl'
-        scrollBehavior='inside'
+        size="4xl"
+        scrollBehavior="inside"
         isOpen={isOpen}
         onOpenChange={onOpenChange}
       >
         <ModalContent>
           {(onClose) => (
             <>
-              <ModalHeader className='flex flex-col gap-1'>
+              <ModalHeader className="flex flex-col gap-1">
                 构造消息
               </ModalHeader>
-              <ModalBody className='overflow-y-auto'>
-                <div className='overflow-y-auto'>
+              <ModalBody className="overflow-y-auto">
+                <div className="overflow-y-auto">
                   <ChatInput />
                 </div>
               </ModalBody>
               <ModalFooter>
-                <Button color='primary' onPress={onClose} variant='flat'>
+                <Button color="primary" onPress={onClose} variant="flat">
                   关闭
                 </Button>
               </ModalFooter>
@@ -45,5 +45,5 @@ export default function ChatInputModal () {
         </ModalContent>
       </Modal>
     </>
-  );
+  )
 }

napcat.webui/src/components/code_editor.tsx

@@ -1,46 +1,46 @@
-import Editor, { OnMount, loader } from '@monaco-editor/react';
+import Editor, { OnMount } from '@monaco-editor/react'
+import { loader } from '@monaco-editor/react'
+import React from 'react'
 
-import React from 'react';
+import { useTheme } from '@/hooks/use-theme'
 
-import { useTheme } from '@/hooks/use-theme';
-
-import monaco from '@/monaco';
+import monaco from '@/monaco'
 
 loader.config({
   monaco,
   paths: {
-    vs: '/webui/monaco-editor/min/vs',
-  },
-});
+    vs: '/webui/monaco-editor/min/vs'
+  }
+})
 
 loader.config({
   'vs/nls': {
-    availableLanguages: { '*': 'zh-cn' },
-  },
-});
+    availableLanguages: { '*': 'zh-cn' }
+  }
+})
 
 export interface CodeEditorProps extends React.ComponentProps<typeof Editor> {
   test?: string
 }
 
-export type CodeEditorRef = monaco.editor.IStandaloneCodeEditor;
+export type CodeEditorRef = monaco.editor.IStandaloneCodeEditor
 
 const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>(
   (props, ref) => {
-    const { isDark } = useTheme();
+    const { isDark } = useTheme()
 
     const handleEditorDidMount: OnMount = (editor, monaco) => {
       if (ref) {
         if (typeof ref === 'function') {
-          ref(editor);
+          ref(editor)
         } else {
-          (ref as React.RefObject<CodeEditorRef>).current = editor;
+          ;(ref as React.RefObject<CodeEditorRef>).current = editor
         }
       }
       if (props.onMount) {
-        props.onMount(editor, monaco);
+        props.onMount(editor, monaco)
       }
-    };
+    }
 
     return (
       <Editor
@@ -48,8 +48,8 @@ const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>(
         onMount={handleEditorDidMount}
         theme={isDark ? 'vs-dark' : 'light'}
       />
-    );
+    )
   }
-);
+)
 
-export default CodeEditor;
+export default CodeEditor

napcat.webui/src/components/display_card/common_card.tsx

@@ -1,13 +1,13 @@
-import { Button, ButtonGroup } from '@heroui/button';
-import { Switch } from '@heroui/switch';
-import { useState } from 'react';
-import { CgDebug } from 'react-icons/cg';
-import { FiEdit3 } from 'react-icons/fi';
-import { MdDeleteForever } from 'react-icons/md';
+import { Button, ButtonGroup } from '@heroui/button'
+import { Switch } from '@heroui/switch'
+import { useState } from 'react'
+import { CgDebug } from 'react-icons/cg'
+import { FiEdit3 } from 'react-icons/fi'
+import { MdDeleteForever } from 'react-icons/md'
 
-import DisplayCardContainer from './container';
+import DisplayCardContainer from './container'
 
-type NetworkType = OneBotConfig['network'];
+type NetworkType = OneBotConfig['network']
 
 export type NetworkDisplayCardFields<T extends keyof NetworkType> = Array<{
   label: string
@@ -15,7 +15,7 @@ export type NetworkDisplayCardFields<T extends keyof NetworkType> = Array<{
   render?: (
     value: NetworkType[T][0][keyof NetworkType[T][0]]
   ) => React.ReactNode
-}>;
+}>
 
 export interface NetworkDisplayCardProps<T extends keyof NetworkType> {
   data: NetworkType[T][0]
@@ -36,25 +36,25 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
   onEdit,
   onEnable,
   onDelete,
-  onEnableDebug,
+  onEnableDebug
 }: NetworkDisplayCardProps<T>) => {
-  const { name, enable, debug } = data;
-  const [editing, setEditing] = useState(false);
+  const { name, enable, debug } = data
+  const [editing, setEditing] = useState(false)
 
   const handleEnable = () => {
-    setEditing(true);
-    onEnable().finally(() => setEditing(false));
-  };
+    setEditing(true)
+    onEnable().finally(() => setEditing(false))
+  }
 
   const handleDelete = () => {
-    setEditing(true);
-    onDelete().finally(() => setEditing(false));
-  };
+    setEditing(true)
+    onDelete().finally(() => setEditing(false))
+  }
 
   const handleEnableDebug = () => {
-    setEditing(true);
-    onEnableDebug().finally(() => setEditing(false));
-  };
+    setEditing(true)
+    onEnableDebug().finally(() => setEditing(false))
+  }
 
   return (
     <DisplayCardContainer
@@ -62,12 +62,12 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
         <ButtonGroup
           fullWidth
           isDisabled={editing}
-          radius='sm'
-          size='sm'
-          variant='flat'
+          radius="sm"
+          size="sm"
+          variant="flat"
         >
           <Button
-            color='warning'
+            color="warning"
             startContent={<FiEdit3 size={16} />}
             onPress={onEdit}
           >
@@ -76,14 +76,14 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
 
           <Button
             color={debug ? 'secondary' : 'success'}
-            variant='flat'
+            variant="flat"
             startContent={
               <CgDebug
                 style={{
                   width: '16px',
                   height: '16px',
                   minWidth: '16px',
-                  minHeight: '16px',
+                  minHeight: '16px'
                 }}
               />
             }
@@ -92,8 +92,8 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
             {debug ? '关闭调试' : '开启调试'}
           </Button>
           <Button
-            className='bg-danger/20 text-danger hover:bg-danger/30 transition-colors'
-            variant='flat'
+            className="bg-danger/20 text-danger hover:bg-danger/30 transition-colors"
+            variant="flat"
             startContent={<MdDeleteForever size={16} />}
             onPress={handleDelete}
           >
@@ -111,7 +111,7 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
       tag={showType && typeLabel}
       title={name}
     >
-      <div className='grid grid-cols-2 gap-1'>
+      <div className="grid grid-cols-2 gap-1">
         {fields.map((field, index) => (
           <div
             key={index}
@@ -119,19 +119,17 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
               field.label === 'URL' ? 'col-span-2' : ''
             }`}
           >
-            <span className='text-default-400'>{field.label}</span>
-            {field.render
-              ? (
-                field.render(field.value)
-              )
-              : (
-                <span>{field.value}</span>
-              )}
+            <span className="text-default-400">{field.label}</span>
+            {field.render ? (
+              field.render(field.value)
+            ) : (
+              <span>{field.value}</span>
+            )}
           </div>
         ))}
       </div>
     </DisplayCardContainer>
-  );
-};
+  )
+}
 
-export default NetworkDisplayCard;
+export default NetworkDisplayCard

napcat.webui/src/components/display_card/container.tsx

@@ -1,7 +1,7 @@
-import { Card, CardBody, CardFooter, CardHeader } from '@heroui/card';
-import clsx from 'clsx';
+import { Card, CardBody, CardFooter, CardHeader } from '@heroui/card'
+import clsx from 'clsx'
 
-import { title } from '../primitives';
+import { title } from '../primitives'
 
 export interface ContainerProps {
   title: string
@@ -24,13 +24,13 @@ const DisplayCardContainer: React.FC<ContainerProps> = ({
   action,
   tag,
   enableSwitch,
-  children,
+  children
 }) => {
   return (
-    <Card className='bg-opacity-50 backdrop-blur-sm'>
-      <CardHeader className='pb-0 flex items-center'>
+    <Card className="bg-opacity-50 backdrop-blur-sm">
+      <CardHeader className={'pb-0 flex items-center'}>
         {tag && (
-          <div className='text-center text-default-400 mb-1 absolute top-0 left-1/2 -translate-x-1/2 text-sm pointer-events-none bg-warning-100 dark:bg-warning-50 px-2 rounded-b'>
+          <div className="text-center text-default-400 mb-1 absolute top-0 left-1/2 -translate-x-1/2 text-sm pointer-events-none bg-warning-100 dark:bg-warning-50 px-2 rounded-b">
             {tag}
           </div>
         )}
@@ -39,19 +39,19 @@ const DisplayCardContainer: React.FC<ContainerProps> = ({
             title({
               color: 'foreground',
               size: 'xs',
-              shadow: true,
+              shadow: true
             }),
             'truncate'
           )}
         >
           {_title}
         </h2>
-        <div className='ml-auto'>{enableSwitch}</div>
+        <div className="ml-auto">{enableSwitch}</div>
       </CardHeader>
-      <CardBody className='text-sm'>{children}</CardBody>
+      <CardBody className="text-sm">{children}</CardBody>
       <CardFooter>{action}</CardFooter>
     </Card>
-  );
-};
+  )
+}
 
-export default DisplayCardContainer;
+export default DisplayCardContainer

napcat.webui/src/components/display_card/http_client.tsx

@@ -1,7 +1,7 @@
-import { Chip } from '@heroui/chip';
+import { Chip } from '@heroui/chip'
 
-import NetworkDisplayCard from './common_card';
-import type { NetworkDisplayCardFields } from './common_card';
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
 
 interface HTTPClientDisplayCardProps {
   data: OneBotConfig['network']['httpClients'][0]
@@ -13,8 +13,8 @@ interface HTTPClientDisplayCardProps {
 }
 
 const HTTPClientDisplayCard: React.FC<HTTPClientDisplayCardProps> = (props) => {
-  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
-  const { url, reportSelfMessage, messagePostFormat } = data;
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const { url, reportSelfMessage, messagePostFormat } = data
 
   const fields: NetworkDisplayCardFields<'httpClients'> = [
     { label: 'URL', value: url },
@@ -23,25 +23,25 @@ const HTTPClientDisplayCard: React.FC<HTTPClientDisplayCardProps> = (props) => {
       label: '上报自身消息',
       value: reportSelfMessage,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
           {value ? '是' : '否'}
         </Chip>
-      ),
-    },
-  ];
+      )
+    }
+  ]
 
   return (
     <NetworkDisplayCard
       data={data}
       showType={showType}
-      typeLabel='HTTP客户端'
+      typeLabel="HTTP客户端"
       fields={fields}
       onEdit={onEdit}
       onEnable={onEnable}
       onDelete={onDelete}
       onEnableDebug={onEnableDebug}
     />
-  );
-};
+  )
+}
 
-export default HTTPClientDisplayCard;
+export default HTTPClientDisplayCard

napcat.webui/src/components/display_card/http_server.tsx

@@ -1,7 +1,7 @@
-import { Chip } from '@heroui/chip';
+import { Chip } from '@heroui/chip'
 
-import NetworkDisplayCard from './common_card';
-import type { NetworkDisplayCardFields } from './common_card';
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
 
 interface HTTPServerDisplayCardProps {
   data: OneBotConfig['network']['httpServers'][0]
@@ -13,8 +13,8 @@ interface HTTPServerDisplayCardProps {
 }
 
 const HTTPServerDisplayCard: React.FC<HTTPServerDisplayCardProps> = (props) => {
-  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
-  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data;
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data
 
   const fields: NetworkDisplayCardFields<'httpServers'> = [
     { label: '主机', value: host },
@@ -24,34 +24,34 @@ const HTTPServerDisplayCard: React.FC<HTTPServerDisplayCardProps> = (props) => {
       label: 'CORS',
       value: enableCors,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
           {value ? '已启用' : '未启用'}
         </Chip>
-      ),
+      )
     },
     {
       label: 'WS',
       value: enableWebsocket,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
           {value ? '已启用' : '未启用'}
         </Chip>
-      ),
-    },
-  ];
+      )
+    }
+  ]
 
   return (
     <NetworkDisplayCard
       data={data}
       showType={showType}
-      typeLabel='HTTP服务器'
+      typeLabel="HTTP服务器"
       fields={fields}
       onEdit={onEdit}
       onEnable={onEnable}
       onDelete={onDelete}
       onEnableDebug={onEnableDebug}
     />
-  );
-};
+  )
+}
 
-export default HTTPServerDisplayCard;
+export default HTTPServerDisplayCard

napcat.webui/src/components/display_card/http_sse_server.tsx

@@ -1,7 +1,7 @@
-import { Chip } from '@heroui/chip';
+import { Chip } from '@heroui/chip'
 
-import NetworkDisplayCard from './common_card';
-import type { NetworkDisplayCardFields } from './common_card';
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
 
 interface HTTPSSEServerDisplayCardProps {
   data: OneBotConfig['network']['httpSseServers'][0]
@@ -15,8 +15,8 @@ interface HTTPSSEServerDisplayCardProps {
 const HTTPSSEServerDisplayCard: React.FC<HTTPSSEServerDisplayCardProps> = (
   props
 ) => {
-  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
-  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data;
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data
 
   const fields: NetworkDisplayCardFields<'httpServers'> = [
     { label: '主机', value: host },
@@ -26,34 +26,34 @@ const HTTPSSEServerDisplayCard: React.FC<HTTPSSEServerDisplayCardProps> = (
       label: 'CORS',
       value: enableCors,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
           {value ? '已启用' : '未启用'}
         </Chip>
-      ),
+      )
     },
     {
       label: 'WS',
       value: enableWebsocket,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
           {value ? '已启用' : '未启用'}
         </Chip>
-      ),
-    },
-  ];
+      )
+    }
+  ]
 
   return (
     <NetworkDisplayCard
       data={data}
       showType={showType}
-      typeLabel='HTTP服务器'
+      typeLabel="HTTP服务器"
       fields={fields}
       onEdit={onEdit}
       onEnable={onEnable}
       onDelete={onDelete}
       onEnableDebug={onEnableDebug}
     />
-  );
-};
+  )
+}
 
-export default HTTPSSEServerDisplayCard;
+export default HTTPSSEServerDisplayCard

napcat.webui/src/components/display_card/ws_client.tsx

@@ -1,7 +1,7 @@
-import { Chip } from '@heroui/chip';
+import { Chip } from '@heroui/chip'
 
-import NetworkDisplayCard from './common_card';
-import type { NetworkDisplayCardFields } from './common_card';
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
 
 interface WebsocketClientDisplayCardProps {
   data: OneBotConfig['network']['websocketClients'][0]
@@ -15,14 +15,14 @@ interface WebsocketClientDisplayCardProps {
 const WebsocketClientDisplayCard: React.FC<WebsocketClientDisplayCardProps> = (
   props
 ) => {
-  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
   const {
     url,
     heartInterval,
     reconnectInterval,
     messagePostFormat,
-    reportSelfMessage,
-  } = data;
+    reportSelfMessage
+  } = data
 
   const fields: NetworkDisplayCardFields<'websocketClients'> = [
     { label: 'URL', value: url },
@@ -33,25 +33,25 @@ const WebsocketClientDisplayCard: React.FC<WebsocketClientDisplayCardProps> = (
       label: '上报自身消息',
       value: reportSelfMessage,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
           {value ? '是' : '否'}
         </Chip>
-      ),
-    },
-  ];
+      )
+    }
+  ]
 
   return (
     <NetworkDisplayCard
       data={data}
       showType={showType}
-      typeLabel='Websocket客户端'
+      typeLabel="Websocket客户端"
       fields={fields}
       onEdit={onEdit}
       onEnable={onEnable}
       onDelete={onDelete}
       onEnableDebug={onEnableDebug}
     />
-  );
-};
+  )
+}
 
-export default WebsocketClientDisplayCard;
+export default WebsocketClientDisplayCard

napcat.webui/src/components/display_card/ws_server.tsx

@@ -1,7 +1,7 @@
-import { Chip } from '@heroui/chip';
+import { Chip } from '@heroui/chip'
 
-import NetworkDisplayCard from './common_card';
-import type { NetworkDisplayCardFields } from './common_card';
+import NetworkDisplayCard from './common_card'
+import type { NetworkDisplayCardFields } from './common_card'
 
 interface WebsocketServerDisplayCardProps {
   data: OneBotConfig['network']['websocketServers'][0]
@@ -15,15 +15,15 @@ interface WebsocketServerDisplayCardProps {
 const WebsocketServerDisplayCard: React.FC<WebsocketServerDisplayCardProps> = (
   props
 ) => {
-  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
   const {
     host,
     port,
     heartInterval,
     messagePostFormat,
     reportSelfMessage,
-    enableForcePushEvent,
-  } = data;
+    enableForcePushEvent
+  } = data
 
   const fields: NetworkDisplayCardFields<'websocketServers'> = [
     { label: '主机', value: host },
@@ -34,34 +34,34 @@ const WebsocketServerDisplayCard: React.FC<WebsocketServerDisplayCardProps> = (
       label: '上报自身消息',
       value: reportSelfMessage,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
           {value ? '是' : '否'}
         </Chip>
-      ),
+      )
     },
     {
       label: '强制推送事件',
       value: enableForcePushEvent,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
+        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
           {value ? '是' : '否'}
         </Chip>
-      ),
-    },
-  ];
+      )
+    }
+  ]
 
   return (
     <NetworkDisplayCard
       data={data}
       showType={showType}
-      typeLabel='Websocket服务器'
+      typeLabel="Websocket服务器"
       fields={fields}
       onEdit={onEdit}
       onEnable={onEnable}
       onDelete={onDelete}
       onEnableDebug={onEnableDebug}
     />
-  );
-};
+  )
+}
 
-export default WebsocketServerDisplayCard;
+export default WebsocketServerDisplayCard

napcat.webui/src/components/display_network_item.tsx

@@ -1,7 +1,7 @@
-import { Card, CardBody } from '@heroui/card';
-import clsx from 'clsx';
+import { Card, CardBody } from '@heroui/card'
+import clsx from 'clsx'
 
-import { title } from '@/components/primitives';
+import { title } from '@/components/primitives'
 
 export interface NetworkItemDisplayProps {
   count: number
@@ -12,7 +12,7 @@ export interface NetworkItemDisplayProps {
 const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
   count,
   label,
-  size = 'md',
+  size = 'md'
 }) => {
   return (
     <Card
@@ -22,16 +22,16 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
           ? 'col-span-8 md:col-span-2 bg-primary-50 shadow-primary-100'
           : 'col-span-2 md:col-span-1 bg-warning-100 shadow-warning-200'
       )}
-      shadow='sm'
+      shadow="sm"
     >
-      <CardBody className='items-center md:gap-1 p-1 md:p-2'>
+      <CardBody className="items-center md:gap-1 p-1 md:p-2">
         <div
           className={clsx(
             'flex-1',
             size === 'md' ? 'text-2xl md:text-3xl' : 'text-xl md:text-2xl',
             title({
               color: size === 'md' ? 'pink' : 'yellow',
-              size,
+              size
             })
           )}
         >
@@ -44,7 +44,7 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
             title({
               color: size === 'md' ? 'pink' : 'yellow',
               shadow: true,
-              size: 'xxs',
+              size: 'xxs'
             })
           )}
         >
@@ -52,7 +52,7 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
         </div>
       </CardBody>
     </Card>
-  );
-};
+  )
+}
 
-export default NetworkItemDisplay;
+export default NetworkItemDisplay

napcat.webui/src/components/effect_card.tsx

@@ -1,6 +1,6 @@
-import { Card, CardProps } from '@heroui/card';
-import clsx from 'clsx';
-import React from 'react';
+import { Card, CardProps } from '@heroui/card'
+import clsx from 'clsx'
+import React from 'react'
 
 export interface HoverEffectCardProps extends CardProps {
   children: React.ReactNode
@@ -18,15 +18,15 @@ const HoverEffectCard: React.FC<HoverEffectCardProps> = (props) => {
     className,
     style,
     lightClassName,
-    lightStyle,
-  } = props;
-  const cardRef = React.useRef<HTMLDivElement | null>(null);
-  const lightRef = React.useRef<HTMLDivElement | null>(null);
-  const [isShowLight, setIsShowLight] = React.useState(false);
+    lightStyle
+  } = props
+  const cardRef = React.useRef<HTMLDivElement | null>(null)
+  const lightRef = React.useRef<HTMLDivElement | null>(null)
+  const [isShowLight, setIsShowLight] = React.useState(false)
   const [pos, setPos] = React.useState({
     left: 0,
-    top: 0,
-  });
+    top: 0
+  })
 
   return (
     <Card
@@ -40,53 +40,53 @@ const HoverEffectCard: React.FC<HoverEffectCardProps> = (props) => {
         willChange: 'transform',
         transform:
           'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)',
-        ...style,
+        ...style
       }}
       onMouseEnter={() => {
         if (cardRef.current) {
-          cardRef.current.style.transition = 'transform 0.3s ease-out';
+          cardRef.current.style.transition = 'transform 0.3s ease-out'
         }
       }}
       onMouseLeave={() => {
-        setIsShowLight(false);
+        setIsShowLight(false)
         if (cardRef.current) {
-          cardRef.current.style.transition = 'transform 0.5s';
+          cardRef.current.style.transition = 'transform 0.5s'
           cardRef.current.style.transform =
-            'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
+            'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)'
         }
       }}
       onMouseMove={(e: React.MouseEvent<HTMLDivElement>) => {
         if (cardRef.current) {
-          setIsShowLight(true);
+          setIsShowLight(true)
 
-          const { x, y } = cardRef.current.getBoundingClientRect();
-          const { clientX, clientY } = e;
+          const { x, y } = cardRef.current.getBoundingClientRect()
+          const { clientX, clientY } = e
 
-          const offsetX = clientX - x;
-          const offsetY = clientY - y;
+          const offsetX = clientX - x
+          const offsetY = clientY - y
 
-          const lightWidth = lightStyle?.width?.toString() || '100';
-          const lightHeight = lightStyle?.height?.toString() || '100';
-          const lightWidthNum = parseInt(lightWidth);
-          const lightHeightNum = parseInt(lightHeight);
+          const lightWidth = lightStyle?.width?.toString() || '100'
+          const lightHeight = lightStyle?.height?.toString() || '100'
+          const lightWidthNum = parseInt(lightWidth)
+          const lightHeightNum = parseInt(lightHeight)
 
-          const left = offsetX - lightWidthNum / 2;
-          const top = offsetY - lightHeightNum / 2;
+          const left = offsetX - lightWidthNum / 2
+          const top = offsetY - lightHeightNum / 2
 
           setPos({
             left,
-            top,
-          });
+            top
+          })
 
-          cardRef.current.style.transition = 'transform 0.1s';
+          cardRef.current.style.transition = 'transform 0.1s'
 
-          const rangeX = 400 / 2;
-          const rangeY = 400 / 2;
+          const rangeX = 400 / 2
+          const rangeY = 400 / 2
 
-          const rotateX = ((offsetY - rangeY) / rangeY) * maxXRotation;
-          const rotateY = -1 * ((offsetX - rangeX) / rangeX) * maxYRotation;
+          const rotateX = ((offsetY - rangeY) / rangeY) * maxXRotation
+          const rotateY = -1 * ((offsetX - rangeX) / rangeX) * maxYRotation
 
-          cardRef.current.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+          cardRef.current.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
         }
       }}
     >
@@ -98,12 +98,12 @@ const HoverEffectCard: React.FC<HoverEffectCardProps> = (props) => {
           lightClassName
         )}
         style={{
-          ...pos,
+          ...pos
         }}
       />
       {children}
     </Card>
-  );
-};
+  )
+}
 
-export default HoverEffectCard;
+export default HoverEffectCard

napcat.webui/src/components/error_fallback.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@heroui/button'
+import { Code } from '@heroui/code'
+import { MdError } from 'react-icons/md'
+
+export interface ErrorFallbackProps {
+  error: Error
+  resetErrorBoundary: () => void
+}
+function errorFallbackRender({
+  error,
+  resetErrorBoundary
+}: ErrorFallbackProps) {
+  return (
+    <div className="pt-32 flex flex-col justify-center items-center">
+      <div className="flex items-center">
+        <MdError className="mr-2" color="red" size={30} />
+        <h1 className="text-2xl">出错了</h1>
+      </div>
+      <div className="my-6 flex flex-col justify-center items-center">
+        <p className="mb-2">错误信息</p>
+        <Code>{error.message}</Code>
+      </div>
+      <Button color="primary" size="md" onPress={resetErrorBoundary}>
+        重试
+      </Button>
+    </div>
+  )
+}
+
+export default errorFallbackRender

napcat.webui/src/components/file_icon.tsx

@@ -11,8 +11,8 @@ import {
   FaFileVideo,
   FaFileWord,
   FaFileZipper,
-  FaFolderClosed,
-} from 'react-icons/fa6';
+  FaFolderClosed
+} from 'react-icons/fa6'
 
 export interface FileIconProps {
   name?: string
@@ -20,12 +20,12 @@ export interface FileIconProps {
 }
 
 const FileIcon = (props: FileIconProps) => {
-  const { name, isDirectory = false } = props;
+  const { name, isDirectory = false } = props
   if (isDirectory) {
-    return <FaFolderClosed className='text-yellow-500' />;
+    return <FaFolderClosed className="text-yellow-500" />
   }
 
-  const ext = name?.split('.').pop() || '';
+  const ext = name?.split('.').pop() || ''
   if (ext) {
     switch (ext.toLowerCase()) {
       case 'jpg':
@@ -50,20 +50,20 @@ const FileIcon = (props: FileIconProps) => {
       case 'fig':
       case 'xd':
       case 'svgz':
-        return <FaFileImage className='text-green-500' />;
+        return <FaFileImage className="text-green-500" />
       case 'pdf':
-        return <FaFilePdf className='text-red-500' />;
+        return <FaFilePdf className="text-red-500" />
       case 'doc':
       case 'docx':
-        return <FaFileWord className='text-blue-500' />;
+        return <FaFileWord className="text-blue-500" />
       case 'xls':
       case 'xlsx':
-        return <FaFileExcel className='text-green-500' />;
+        return <FaFileExcel className="text-green-500" />
       case 'csv':
-        return <FaFileCsv className='text-green-500' />;
+        return <FaFileCsv className="text-green-500" />
       case 'ppt':
       case 'pptx':
-        return <FaFilePowerpoint className='text-red-500' />;
+        return <FaFilePowerpoint className="text-red-500" />
       case 'zip':
       case 'rar':
       case '7z':
@@ -79,18 +79,18 @@ const FileIcon = (props: FileIconProps) => {
       case 'taz':
       case 'tz':
       case 'tzo':
-        return <FaFileZipper className='text-green-500' />;
+        return <FaFileZipper className="text-green-500" />
       case 'txt':
-        return <FaFileLines className='text-gray-500' />;
+        return <FaFileLines className="text-gray-500" />
       case 'mp3':
       case 'wav':
       case 'flac':
-        return <FaFileAudio className='text-green-500' />;
+        return <FaFileAudio className="text-green-500" />
       case 'mp4':
       case 'avi':
       case 'mov':
       case 'wmv':
-        return <FaFileVideo className='text-red-500' />;
+        return <FaFileVideo className="text-red-500" />
       case 'html':
       case 'css':
       case 'js':
@@ -154,13 +154,13 @@ const FileIcon = (props: FileIconProps) => {
       case 'userosscache':
       case 'sln.docstates':
       case 'dll':
-        return <FaFileCode className='text-blue-500' />;
+        return <FaFileCode className="text-blue-500" />
       default:
-        return <FaFile className='text-gray-500' />;
+        return <FaFile className="text-gray-500" />
     }
   }
 
-  return <FaFile className='text-gray-500' />;
-};
+  return <FaFile className="text-gray-500" />
+}
 
-export default FileIcon;
+export default FileIcon

napcat.webui/src/components/file_manage/create_file_modal.tsx

@@ -1,12 +1,12 @@
-import { Button, ButtonGroup } from '@heroui/button';
-import { Input } from '@heroui/input';
+import { Button, ButtonGroup } from '@heroui/button'
+import { Input } from '@heroui/input'
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
-  ModalHeader,
-} from '@heroui/modal';
+  ModalHeader
+} from '@heroui/modal'
 
 interface CreateFileModalProps {
   isOpen: boolean
@@ -18,22 +18,22 @@ interface CreateFileModalProps {
   onCreate: () => void
 }
 
-export default function CreateFileModal ({
+export default function CreateFileModal({
   isOpen,
   fileType,
   newFileName,
   onTypeChange,
   onNameChange,
   onClose,
-  onCreate,
+  onCreate
 }: CreateFileModalProps) {
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalContent>
         <ModalHeader>新建</ModalHeader>
         <ModalBody>
-          <div className='flex flex-col gap-4'>
-            <ButtonGroup color='primary'>
+          <div className="flex flex-col gap-4">
+            <ButtonGroup color="primary">
               <Button
                 variant={fileType === 'file' ? 'solid' : 'flat'}
                 onPress={() => onTypeChange('file')}
@@ -47,18 +47,18 @@ export default function CreateFileModal ({
                 目录
               </Button>
             </ButtonGroup>
-            <Input label='名称' value={newFileName} onChange={onNameChange} />
+            <Input label="名称" value={newFileName} onChange={onNameChange} />
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button color='primary' variant='flat' onPress={onClose}>
+          <Button color="primary" variant="flat" onPress={onClose}>
             取消
           </Button>
-          <Button color='primary' onPress={onCreate}>
+          <Button color="primary" onPress={onCreate}>
             创建
           </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
-  );
+  )
 }

napcat.webui/src/components/file_manage/file_edit_modal.tsx

@@ -0,0 +1,94 @@
+import { Button } from '@heroui/button'
+import { Code } from '@heroui/code'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+} from '@heroui/modal'
+
+import CodeEditor from '@/components/code_editor'
+
+interface FileEditModalProps {
+  isOpen: boolean
+  file: { path: string; content: string } | null
+  onClose: () => void
+  onSave: () => void
+  onContentChange: (newContent?: string) => void
+}
+
+export default function FileEditModal({
+  isOpen,
+  file,
+  onClose,
+  onSave,
+  onContentChange
+}: FileEditModalProps) {
+  // 根据文件后缀返回对应语言
+  const getLanguage = (filePath: string) => {
+    if (filePath.endsWith('.js')) return 'javascript'
+    if (filePath.endsWith('.ts')) return 'typescript'
+    if (filePath.endsWith('.tsx')) return 'tsx'
+    if (filePath.endsWith('.jsx')) return 'jsx'
+    if (filePath.endsWith('.vue')) return 'vue'
+    if (filePath.endsWith('.svelte')) return 'svelte'
+    if (filePath.endsWith('.json')) return 'json'
+    if (filePath.endsWith('.html')) return 'html'
+    if (filePath.endsWith('.css')) return 'css'
+    if (filePath.endsWith('.scss')) return 'scss'
+    if (filePath.endsWith('.less')) return 'less'
+    if (filePath.endsWith('.md')) return 'markdown'
+    if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) return 'yaml'
+    if (filePath.endsWith('.xml')) return 'xml'
+    if (filePath.endsWith('.sql')) return 'sql'
+    if (filePath.endsWith('.sh')) return 'shell'
+    if (filePath.endsWith('.bat')) return 'bat'
+    if (filePath.endsWith('.php')) return 'php'
+    if (filePath.endsWith('.java')) return 'java'
+    if (filePath.endsWith('.c')) return 'c'
+    if (filePath.endsWith('.cpp')) return 'cpp'
+    if (filePath.endsWith('.h')) return 'h'
+    if (filePath.endsWith('.hpp')) return 'hpp'
+    if (filePath.endsWith('.go')) return 'go'
+    if (filePath.endsWith('.py')) return 'python'
+    if (filePath.endsWith('.rb')) return 'ruby'
+    if (filePath.endsWith('.cs')) return 'csharp'
+    if (filePath.endsWith('.swift')) return 'swift'
+    if (filePath.endsWith('.vb')) return 'vb'
+    if (filePath.endsWith('.lua')) return 'lua'
+    if (filePath.endsWith('.pl')) return 'perl'
+    if (filePath.endsWith('.r')) return 'r'
+    return 'plaintext'
+  }
+
+  return (
+    <Modal size="full" isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader className="flex items-center gap-2 bg-content2 bg-opacity-50">
+          <span>编辑文件</span>
+          <Code className="text-xs">{file?.path}</Code>
+        </ModalHeader>
+        <ModalBody className="p-0">
+          <div className="h-full">
+            <CodeEditor
+              height="100%"
+              value={file?.content || ''}
+              onChange={onContentChange}
+              options={{ wordWrap: 'on' }}
+              language={file?.path ? getLanguage(file.path) : 'plaintext'}
+            />
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" variant="flat" onPress={onClose}>
+            取消
+          </Button>
+          <Button color="primary" onPress={onSave}>
+            保存
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

napcat.webui/src/components/file_manage/file_preview_modal.tsx

@@ -1,17 +1,17 @@
-import { Button } from '@heroui/button';
+import { Button } from '@heroui/button'
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
-  ModalHeader,
-} from '@heroui/modal';
-import { Spinner } from '@heroui/spinner';
-import { useRequest } from 'ahooks';
-import path from 'path-browserify';
-import { useEffect } from 'react';
+  ModalHeader
+} from '@heroui/modal'
+import { Spinner } from '@heroui/spinner'
+import { useRequest } from 'ahooks'
+import path from 'path-browserify'
+import { useEffect } from 'react'
 
-import FileManager from '@/controllers/file_manager';
+import FileManager from '@/controllers/file_manager'
 
 interface FilePreviewModalProps {
   isOpen: boolean
@@ -19,74 +19,74 @@ interface FilePreviewModalProps {
   onClose: () => void
 }
 
-export const videoExts = ['.mp4', '.webm'];
-export const audioExts = ['.mp3', '.wav'];
+export const videoExts = ['.mp4', '.webm']
+export const audioExts = ['.mp3', '.wav']
 
-export const supportedPreviewExts = [...videoExts, ...audioExts];
+export const supportedPreviewExts = [...videoExts, ...audioExts]
 
-export default function FilePreviewModal ({
+export default function FilePreviewModal({
   isOpen,
   filePath,
-  onClose,
+  onClose
 }: FilePreviewModalProps) {
-  const ext = path.extname(filePath).toLowerCase();
+  const ext = path.extname(filePath).toLowerCase()
   const { data, loading, error, run } = useRequest(
     async () => FileManager.downloadToURL(filePath),
     {
       refreshDeps: [filePath],
       manual: true,
       refreshDepsAction: () => {
-        const ext = path.extname(filePath).toLowerCase();
+        const ext = path.extname(filePath).toLowerCase()
         if (!filePath || !supportedPreviewExts.includes(ext)) {
-          return;
+          return
         }
-        run();
-      },
+        run()
+      }
     }
-  );
+  )
 
   useEffect(() => {
     if (filePath) {
-      run();
+      run()
     }
-  }, [filePath]);
+  }, [filePath])
 
-  let contentElement = null;
+  let contentElement = null
   if (!supportedPreviewExts.includes(ext)) {
-    contentElement = <div>暂不支持预览此文件类型</div>;
+    contentElement = <div>暂不支持预览此文件类型</div>
   } else if (error) {
-    contentElement = <div>读取文件失败</div>;
+    contentElement = <div>读取文件失败</div>
   } else if (loading || !data) {
     contentElement = (
-      <div className='flex justify-center items-center h-full'>
+      <div className="flex justify-center items-center h-full">
         <Spinner />
       </div>
-    );
+    )
   } else if (videoExts.includes(ext)) {
-    contentElement = <video src={data} controls className='max-w-full' />;
+    contentElement = <video src={data} controls className="max-w-full" />
   } else if (audioExts.includes(ext)) {
-    contentElement = <audio src={data} controls className='w-full' />;
+    contentElement = <audio src={data} controls className="w-full" />
   } else {
     contentElement = (
-      <div className='flex justify-center items-center h-full'>
+      <div className="flex justify-center items-center h-full">
         <Spinner />
       </div>
-    );
+    )
   }
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} scrollBehavior='inside' size='3xl'>
+    <Modal isOpen={isOpen} onClose={onClose} scrollBehavior="inside" size="3xl">
       <ModalContent>
         <ModalHeader>文件预览</ModalHeader>
-        <ModalBody className='flex justify-center items-center'>
+        <ModalBody className="flex justify-center items-center">
           {contentElement}
         </ModalBody>
         <ModalFooter>
-          <Button color='primary' variant='flat' onPress={onClose}>
+          <Button color="primary" variant="flat" onPress={onClose}>
             关闭
           </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
-  );
+  )
 }

napcat.webui/src/components/file_manage/file_table.tsx

@@ -1,6 +1,6 @@
-import { Button, ButtonGroup } from '@heroui/button';
-import { Pagination } from '@heroui/pagination';
-import { Spinner } from '@heroui/spinner';
+import { Button, ButtonGroup } from '@heroui/button'
+import { Pagination } from '@heroui/pagination'
+import { Spinner } from '@heroui/spinner'
 import {
   type Selection,
   type SortDescriptor,
@@ -9,20 +9,20 @@ import {
   TableCell,
   TableColumn,
   TableHeader,
-  TableRow,
-} from '@heroui/table';
-import path from 'path-browserify';
-import { useCallback, useEffect, useState } from 'react';
-import { BiRename } from 'react-icons/bi';
-import { FiCopy, FiDownload, FiMove, FiTrash2 } from 'react-icons/fi';
-import { PhotoSlider } from 'react-photo-view';
+  TableRow
+} from '@heroui/table'
+import path from 'path-browserify'
+import { useCallback, useEffect, useState } from 'react'
+import { BiRename } from 'react-icons/bi'
+import { FiCopy, FiDownload, FiMove, FiTrash2 } from 'react-icons/fi'
+import { PhotoSlider } from 'react-photo-view'
 
-import FileIcon from '@/components/file_icon';
+import FileIcon from '@/components/file_icon'
 
-import type { FileInfo } from '@/controllers/file_manager';
+import type { FileInfo } from '@/controllers/file_manager'
 
-import { supportedPreviewExts } from './file_preview_modal';
-import ImageNameButton, { PreviewImage, imageExts } from './image_name_button';
+import { supportedPreviewExts } from './file_preview_modal'
+import ImageNameButton, { PreviewImage, imageExts } from './image_name_button'
 
 export interface FileTableProps {
   files: FileInfo[]
@@ -42,9 +42,9 @@ export interface FileTableProps {
   onDownload: (filePath: string) => void
 }
 
-const PAGE_SIZE = 20;
+const PAGE_SIZE = 20
 
-export default function FileTable ({
+export default function FileTable({
   files,
   currentPath,
   loading,
@@ -59,40 +59,39 @@ export default function FileTable ({
   onMoveRequest,
   onCopyPath,
   onDelete,
-  onDownload,
+  onDownload
 }: FileTableProps) {
-  const [page, setPage] = useState(1);
-  const pages = Math.ceil(files.length / PAGE_SIZE) || 1;
-  const start = (page - 1) * PAGE_SIZE;
-  const end = start + PAGE_SIZE;
-  const displayFiles = files.slice(start, end);
-  const [showImage, setShowImage] = useState(false);
-  const [previewIndex, setPreviewIndex] = useState(0);
-  const [previewImages, setPreviewImages] = useState<PreviewImage[]>([]);
+  const [page, setPage] = useState(1)
+  const pages = Math.ceil(files.length / PAGE_SIZE) || 1
+  const start = (page - 1) * PAGE_SIZE
+  const end = start + PAGE_SIZE
+  const displayFiles = files.slice(start, end)
+  const [showImage, setShowImage] = useState(false)
+  const [previewIndex, setPreviewIndex] = useState(0)
+  const [previewImages, setPreviewImages] = useState<PreviewImage[]>([])
 
   const addPreviewImage = useCallback((image: PreviewImage) => {
     setPreviewImages((prev) => {
-      const exists = prev.some((p) => p.key === image.key);
-      if (exists) return prev;
-      return [...prev, image];
-    });
-  }, []);
+      const exists = prev.some((p) => p.key === image.key)
+      if (exists) return prev
+      return [...prev, image]
+    })
+  }, [])
 
   useEffect(() => {
-    setPreviewImages([]);
-    setPreviewIndex(0);
-    setShowImage(false);
-    setPage(1);
-  }, [currentPath]);
+    setPreviewImages([])
+    setPreviewIndex(0)
+    setShowImage(false)
+  }, [currentPath])
 
   const onPreviewImage = (name: string, images: PreviewImage[]) => {
-    const index = images.findIndex((image) => image.key === name);
+    const index = images.findIndex((image) => image.key === name)
     if (index === -1) {
-      return;
+      return
     }
-    setPreviewIndex(index);
-    setShowImage(true);
-  };
+    setPreviewIndex(index)
+    setShowImage(true)
+  }
 
   return (
     <>
@@ -104,20 +103,20 @@ export default function FileTable ({
         onIndexChange={setPreviewIndex}
       />
       <Table
-        aria-label='文件列表'
+        aria-label="文件列表"
         sortDescriptor={sortDescriptor}
         onSortChange={onSortChange}
         onSelectionChange={onSelectionChange}
         defaultSelectedKeys={[]}
         selectedKeys={selectedFiles}
-        selectionMode='multiple'
+        selectionMode="multiple"
         bottomContent={
-          <div className='flex w-full justify-center'>
+          <div className="flex w-full justify-center">
             <Pagination
               isCompact
               showControls
               showShadow
-              color='primary'
+              color="primary"
               page={page}
               total={pages}
               onChange={(page) => setPage(page)}
@@ -126,65 +125,64 @@ export default function FileTable ({
         }
       >
         <TableHeader>
-          <TableColumn key='name' allowsSorting>
+          <TableColumn key="name" allowsSorting>
             名称
           </TableColumn>
-          <TableColumn key='type' allowsSorting>
+          <TableColumn key="type" allowsSorting>
             类型
           </TableColumn>
-          <TableColumn key='size' allowsSorting>
+          <TableColumn key="size" allowsSorting>
             大小
           </TableColumn>
-          <TableColumn key='mtime' allowsSorting>
+          <TableColumn key="mtime" allowsSorting>
             修改时间
           </TableColumn>
-          <TableColumn key='actions'>操作</TableColumn>
+          <TableColumn key="actions">操作</TableColumn>
         </TableHeader>
         <TableBody
           isLoading={loading}
           loadingContent={
-            <div className='flex justify-center items-center h-full'>
+            <div className="flex justify-center items-center h-full">
               <Spinner />
             </div>
           }
         >
           {displayFiles.map((file: FileInfo) => {
-            const filePath = path.join(currentPath, file.name);
-            const ext = path.extname(file.name).toLowerCase();
-            const previewable = supportedPreviewExts.includes(ext);
-            const images = previewImages;
+            const filePath = path.join(currentPath, file.name)
+            const ext = path.extname(file.name).toLowerCase()
+            const previewable = supportedPreviewExts.includes(ext)
+            const images = previewImages
             return (
               <TableRow key={file.name}>
                 <TableCell>
-                  {imageExts.includes(ext)
-                    ? (
-                      <ImageNameButton
-                        name={file.name}
-                        filePath={filePath}
-                        onPreview={() => onPreviewImage(file.name, images)}
-                        onAddPreview={addPreviewImage}
-                      />
-                    )
-                    : (
-                      <Button
-                        variant='light'
-                        onPress={() =>
-                          file.isDirectory
-                            ? onDirectoryClick(file.name)
-                            : previewable
-                              ? onPreview(filePath)
-                              : onEdit(filePath)}
-                        className='text-left justify-start'
-                        startContent={
-                          <FileIcon
-                            name={file.name}
-                            isDirectory={file.isDirectory}
-                          />
+                  {imageExts.includes(ext) ? (
+                    <ImageNameButton
+                      name={file.name}
+                      filePath={filePath}
+                      onPreview={() => onPreviewImage(file.name, images)}
+                      onAddPreview={addPreviewImage}
+                    />
+                  ) : (
+                    <Button
+                      variant="light"
+                      onPress={() =>
+                        file.isDirectory
+                          ? onDirectoryClick(file.name)
+                          : previewable
+                            ? onPreview(filePath)
+                            : onEdit(filePath)
                       }
-                      >
-                        {file.name}
-                      </Button>
-                    )}
+                      className="text-left justify-start"
+                      startContent={
+                        <FileIcon
+                          name={file.name}
+                          isDirectory={file.isDirectory}
+                        />
+                      }
+                    >
+                      {file.name}
+                    </Button>
+                  )}
                 </TableCell>
                 <TableCell>{file.isDirectory ? '目录' : '文件'}</TableCell>
                 <TableCell>
@@ -194,43 +192,43 @@ export default function FileTable ({
                 </TableCell>
                 <TableCell>{new Date(file.mtime).toLocaleString()}</TableCell>
                 <TableCell>
-                  <ButtonGroup size='sm'>
+                  <ButtonGroup size="sm">
                     <Button
                       isIconOnly
-                      color='primary'
-                      variant='flat'
+                      color="primary"
+                      variant="flat"
                       onPress={() => onRenameRequest(file.name)}
                     >
                       <BiRename />
                     </Button>
                     <Button
                       isIconOnly
-                      color='primary'
-                      variant='flat'
+                      color="primary"
+                      variant="flat"
                       onPress={() => onMoveRequest(file.name)}
                     >
                       <FiMove />
                     </Button>
                     <Button
                       isIconOnly
-                      color='primary'
-                      variant='flat'
+                      color="primary"
+                      variant="flat"
                       onPress={() => onCopyPath(file.name)}
                     >
                       <FiCopy />
                     </Button>
                     <Button
                       isIconOnly
-                      color='primary'
-                      variant='flat'
+                      color="primary"
+                      variant="flat"
                       onPress={() => onDownload(filePath)}
                     >
                       <FiDownload />
                     </Button>
                     <Button
                       isIconOnly
-                      color='primary'
-                      variant='flat'
+                      color="primary"
+                      variant="flat"
                       onPress={() => onDelete(filePath)}
                     >
                       <FiTrash2 />
@@ -238,10 +236,10 @@ export default function FileTable ({
                   </ButtonGroup>
                 </TableCell>
               </TableRow>
-            );
+            )
           })}
         </TableBody>
       </Table>
     </>
-  );
+  )
 }

napcat.webui/src/components/file_manage/image_name_button.tsx

@@ -0,0 +1,88 @@
+import { Button } from '@heroui/button'
+import { Image } from '@heroui/image'
+import { Spinner } from '@heroui/spinner'
+import { useRequest } from 'ahooks'
+import path from 'path-browserify'
+import { useEffect } from 'react'
+
+import FileManager from '@/controllers/file_manager'
+
+import FileIcon from '../file_icon'
+
+export interface PreviewImage {
+  key: string
+  src: string
+  alt: string
+}
+export const imageExts = ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
+
+export interface ImageNameButtonProps {
+  name: string
+  filePath: string
+  onPreview: () => void
+  onAddPreview: (image: PreviewImage) => void
+}
+
+export default function ImageNameButton({
+  name,
+  filePath,
+  onPreview,
+  onAddPreview
+}: ImageNameButtonProps) {
+  const { data, loading, error, run } = useRequest(
+    async () => FileManager.downloadToURL(filePath),
+    {
+      refreshDeps: [filePath],
+      manual: true,
+      refreshDepsAction: () => {
+        const ext = path.extname(filePath).toLowerCase()
+        if (!filePath || !imageExts.includes(ext)) {
+          return
+        }
+        run()
+      }
+    }
+  )
+  useEffect(() => {
+    if (data) {
+      onAddPreview({
+        key: name,
+        src: data,
+        alt: name
+      })
+    }
+  }, [data, name, onAddPreview])
+
+  useEffect(() => {
+    if (filePath) {
+      run()
+    }
+  }, [])
+
+  return (
+    <Button
+      variant="light"
+      className="text-left justify-start"
+      onPress={onPreview}
+      startContent={
+        error ? (
+          <FileIcon name={name} isDirectory={false} />
+        ) : loading || !data ? (
+          <Spinner size="sm" />
+        ) : (
+          <Image
+            src={data}
+            alt={name}
+            className="w-8 h-8 flex-shrink-0"
+            classNames={{
+              wrapper: 'w-8 h-8 flex-shrink-0'
+            }}
+            radius="sm"
+          />
+        )
+      }
+    >
+      {name}
+    </Button>
+  )
+}

napcat.webui/src/components/file_manage/move_modal.tsx

@@ -0,0 +1,168 @@
+import { Button } from '@heroui/button'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+} from '@heroui/modal'
+import { Spinner } from '@heroui/spinner'
+import clsx from 'clsx'
+import path from 'path-browserify'
+import { useState } from 'react'
+import { IoAdd, IoRemove } from 'react-icons/io5'
+
+import FileManager from '@/controllers/file_manager'
+
+interface MoveModalProps {
+  isOpen: boolean
+  moveTargetPath: string
+  selectionInfo: string
+  onClose: () => void
+  onMove: () => void
+  onSelect: (dir: string) => void // 新增回调
+}
+
+// 将 DirectoryTree 改为递归组件
+// 新增 selectedPath 属性，用于标识当前选中的目录
+function DirectoryTree({
+  basePath,
+  onSelect,
+  selectedPath
+}: {
+  basePath: string
+  onSelect: (dir: string) => void
+  selectedPath?: string
+}) {
+  const [dirs, setDirs] = useState<string[]>([])
+  const [expanded, setExpanded] = useState(false)
+  // 新增loading状态
+  const [loading, setLoading] = useState(false)
+
+  const fetchDirectories = async () => {
+    try {
+      // 直接使用 basePath 调用接口，移除 process.platform 判断
+      const list = await FileManager.listDirectories(basePath)
+      setDirs(list.map((item) => item.name))
+    } catch (error) {
+      // ...error handling...
+    }
+  }
+
+  const handleToggle = async () => {
+    if (!expanded) {
+      setExpanded(true)
+      setLoading(true)
+      await fetchDirectories()
+      setLoading(false)
+    } else {
+      setExpanded(false)
+    }
+  }
+
+  const handleClick = () => {
+    onSelect(basePath)
+    handleToggle()
+  }
+
+  // 计算显示的名称
+  const getDisplayName = () => {
+    if (basePath === '/') return '/'
+    if (/^[A-Z]:$/i.test(basePath)) return basePath
+    return path.basename(basePath)
+  }
+
+  // 更新 Button 的 variant 逻辑
+  const isSeleted = selectedPath === basePath
+  const variant = isSeleted
+    ? 'solid'
+    : selectedPath && path.dirname(selectedPath) === basePath
+      ? 'flat'
+      : 'light'
+
+  return (
+    <div className="ml-4">
+      <Button
+        onPress={handleClick}
+        className="py-1 px-2 text-left justify-start min-w-0 min-h-0 h-auto text-sm rounded-md"
+        size="sm"
+        color="primary"
+        variant={variant}
+        startContent={
+          <div
+            className={clsx(
+              'rounded-md',
+              isSeleted ? 'bg-primary-600' : 'bg-primary-50'
+            )}
+          >
+            {expanded ? <IoRemove /> : <IoAdd />}
+          </div>
+        }
+      >
+        {getDisplayName()}
+      </Button>
+      {expanded && (
+        <div>
+          {loading ? (
+            <div className="flex py-1 px-8">
+              <Spinner size="sm" color="primary" />
+            </div>
+          ) : (
+            dirs.map((dirName) => {
+              const childPath =
+                basePath === '/' && /^[A-Z]:$/i.test(dirName)
+                  ? dirName
+                  : path.join(basePath, dirName)
+              return (
+                <DirectoryTree
+                  key={childPath}
+                  basePath={childPath}
+                  onSelect={onSelect}
+                  selectedPath={selectedPath}
+                />
+              )
+            })
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function MoveModal({
+  isOpen,
+  moveTargetPath,
+  selectionInfo,
+  onClose,
+  onMove,
+  onSelect
+}: MoveModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader>选择目标目录</ModalHeader>
+        <ModalBody>
+          <div className="rounded-md p-2 border border-default-300 overflow-auto max-h-60">
+            <DirectoryTree
+              basePath="/"
+              onSelect={onSelect}
+              selectedPath={moveTargetPath}
+            />
+          </div>
+          <p className="text-sm text-default-500 mt-2">
+            当前选择：{moveTargetPath || '未选择'}
+          </p>
+          <p className="text-sm text-default-500">移动项：{selectionInfo}</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" variant="flat" onPress={onClose}>
+            取消
+          </Button>
+          <Button color="primary" onPress={onMove}>
+            确定
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

napcat.webui/src/components/file_manage/rename_modal.tsx

@@ -1,12 +1,12 @@
-import { Button } from '@heroui/button';
-import { Input } from '@heroui/input';
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
-  ModalHeader,
-} from '@heroui/modal';
+  ModalHeader
+} from '@heroui/modal'
 
 interface RenameModalProps {
   isOpen: boolean
@@ -16,29 +16,29 @@ interface RenameModalProps {
   onRename: () => void
 }
 
-export default function RenameModal ({
+export default function RenameModal({
   isOpen,
   newFileName,
   onNameChange,
   onClose,
-  onRename,
+  onRename
 }: RenameModalProps) {
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalContent>
         <ModalHeader>重命名</ModalHeader>
         <ModalBody>
-          <Input label='新名称' value={newFileName} onChange={onNameChange} />
+          <Input label="新名称" value={newFileName} onChange={onNameChange} />
         </ModalBody>
         <ModalFooter>
-          <Button color='primary' variant='flat' onPress={onClose}>
+          <Button color="primary" variant="flat" onPress={onClose}>
             取消
           </Button>
-          <Button color='primary' onPress={onRename}>
+          <Button color="primary" onPress={onRename}>
             确定
           </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
-  );
+  )
 }

napcat.webui/src/components/github_info/icon_wrapper.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import clsx from 'clsx'
 
 export interface IconWrapperProps {
   children?: React.ReactNode
@@ -14,6 +14,6 @@ const IconWrapper = ({ children, className }: IconWrapperProps) => (
   >
     {children}
   </div>
-);
+)
 
-export default IconWrapper;
+export default IconWrapper

napcat.webui/src/components/github_info/item_counter.tsx

@@ -0,0 +1,10 @@
+import { ChevronRightIcon } from '../icons'
+
+const ItemCounter = ({ number }: { number: number }) => (
+  <div className="flex items-center gap-1 text-default-400">
+    <span className="text-small">{number}</span>
+    <ChevronRightIcon className="text-xl" />
+  </div>
+)
+
+export default ItemCounter

napcat.webui/src/components/github_info/release.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react'
+
+import { getReleaseTime } from '@/utils/time'
+
+import type { GithubRelease as GithubReleaseType } from '@/types/github'
+
+export interface GithubReleaseProps {
+  releaseData: GithubReleaseType
+}
+const GithubRelease: React.FC<GithubReleaseProps> = (props) => {
+  const { releaseData } = props
+  const [releaseTime, setReleaseTime] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (releaseData) {
+      const timer = setInterval(() => {
+        const time = getReleaseTime(releaseData.published_at)
+
+        setReleaseTime(time)
+      }, 1000)
+
+      return () => clearInterval(timer)
+    }
+  }, [releaseData])
+
+  return (
+    <div className="flex flex-col gap-1">
+      <span>Releases</span>
+      <div className="px-2 py-1 rounded-small bg-default-100 bg-opacity-50 backdrop-blur-sm group-data-[hover=true]:bg-default-200">
+        <span className="text-tiny text-default-600">{releaseData.name}</span>
+        <div className="flex gap-2 text-tiny">
+          <span className="text-default-500">{releaseTime}</span>
+          <span className="text-success">Latest</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default GithubRelease

napcat.webui/src/components/hitokoto.tsx

@@ -0,0 +1,76 @@
+import { Button } from '@heroui/button'
+import { Tooltip } from '@heroui/tooltip'
+import { useRequest } from 'ahooks'
+import toast from 'react-hot-toast'
+import { IoCopy, IoRefresh } from 'react-icons/io5'
+
+import { request } from '@/utils/request'
+
+import PageLoading from './page_loading'
+
+export default function Hitokoto() {
+  const {
+    data: dataOri,
+    error,
+    loading,
+    run
+  } = useRequest(() => request.get<IHitokoto>('https://hitokoto.152710.xyz/'), {
+    pollingInterval: 10000,
+    throttleWait: 1000
+  })
+  const data = dataOri?.data
+  const onCopy = () => {
+    try {
+      const text = `${data?.hitokoto} —— ${data?.from} ${data?.from_who}`
+      navigator.clipboard.writeText(text)
+      toast.success('复制成功')
+    } catch (error) {
+      toast.error('复制失败, 请手动复制')
+    }
+  }
+  return (
+    <div>
+      <div className="relative">
+        {loading && <PageLoading />}
+        {error ? (
+          <div className="text-primary-400">一言加载失败：{error.message}</div>
+        ) : (
+          <>
+            <div>{data?.hitokoto}</div>
+            <div className="text-right">
+              —— <span className="text-default-400">{data?.from}</span>{' '}
+              {data?.from_who}
+            </div>
+          </>
+        )}
+      </div>
+      <div className="flex gap-2">
+        <Tooltip content="刷新" placement="top">
+          <Button
+            onPress={run}
+            size="sm"
+            isLoading={loading}
+            isIconOnly
+            radius="full"
+            color="primary"
+            variant="flat"
+          >
+            <IoRefresh />
+          </Button>
+        </Tooltip>
+        <Tooltip content="复制" placement="top">
+          <Button
+            onPress={onCopy}
+            size="sm"
+            isIconOnly
+            radius="full"
+            color="success"
+            variant="flat"
+          >
+            <IoCopy />
+          </Button>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}

napcat.webui/src/components/hover_titled_card.tsx

@@ -1,11 +1,11 @@
-import { motion, useMotionValue, useSpring } from 'motion/react';
-import { useRef, useState } from 'react';
+import { motion, useMotionValue, useSpring } from 'motion/react'
+import { useRef, useState } from 'react'
 
 const springValues = {
   damping: 30,
   stiffness: 100,
-  mass: 2,
-};
+  mass: 2
+}
 
 export interface HoverTiltedCardProps {
   imageSrc: string
@@ -22,7 +22,7 @@ export interface HoverTiltedCardProps {
   displayOverlayContent?: boolean
 }
 
-export default function HoverTiltedCard ({
+export default function HoverTiltedCard({
   imageSrc,
   altText = 'NapCat',
   captionText = 'NapCat',
@@ -34,95 +34,95 @@ export default function HoverTiltedCard ({
   rotateAmplitude = 14,
   showTooltip = false,
   overlayContent = (
-    <div className='text-center mt-6 px-4 py-0.5 shadow-lg rounded-full bg-primary-600 text-default-100 bg-opacity-80'>
+    <div className="text-center mt-6 px-4 py-0.5 shadow-lg rounded-full bg-primary-600 text-default-100 bg-opacity-80">
       NapCat
     </div>
   ),
-  displayOverlayContent = true,
+  displayOverlayContent = true
 }: HoverTiltedCardProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  const x = useMotionValue(0);
-  const y = useMotionValue(0);
-  const rotateX = useSpring(useMotionValue(0), springValues);
-  const rotateY = useSpring(useMotionValue(0), springValues);
-  const scale = useSpring(1, springValues);
-  const opacity = useSpring(0);
+  const ref = useRef<HTMLDivElement>(null)
+  const x = useMotionValue(0)
+  const y = useMotionValue(0)
+  const rotateX = useSpring(useMotionValue(0), springValues)
+  const rotateY = useSpring(useMotionValue(0), springValues)
+  const scale = useSpring(1, springValues)
+  const opacity = useSpring(0)
   const rotateFigcaption = useSpring(0, {
     stiffness: 350,
     damping: 30,
-    mass: 1,
-  });
+    mass: 1
+  })
 
-  const [lastY, setLastY] = useState(0);
+  const [lastY, setLastY] = useState(0)
 
-  function handleMouse (e: React.MouseEvent) {
-    if (!ref.current) return;
+  function handleMouse(e: React.MouseEvent) {
+    if (!ref.current) return
 
-    const rect = ref.current.getBoundingClientRect();
-    const offsetX = e.clientX - rect.left - rect.width / 2;
-    const offsetY = e.clientY - rect.top - rect.height / 2;
+    const rect = ref.current.getBoundingClientRect()
+    const offsetX = e.clientX - rect.left - rect.width / 2
+    const offsetY = e.clientY - rect.top - rect.height / 2
 
-    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;
-    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;
+    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude
+    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude
 
-    rotateX.set(rotationX);
-    rotateY.set(rotationY);
+    rotateX.set(rotationX)
+    rotateY.set(rotationY)
 
-    x.set(e.clientX - rect.left);
-    y.set(e.clientY - rect.top);
+    x.set(e.clientX - rect.left)
+    y.set(e.clientY - rect.top)
 
-    const velocityY = offsetY - lastY;
-    rotateFigcaption.set(-velocityY * 0.6);
-    setLastY(offsetY);
+    const velocityY = offsetY - lastY
+    rotateFigcaption.set(-velocityY * 0.6)
+    setLastY(offsetY)
   }
 
-  function handleMouseEnter () {
-    scale.set(scaleOnHover);
-    opacity.set(1);
+  function handleMouseEnter() {
+    scale.set(scaleOnHover)
+    opacity.set(1)
   }
 
-  function handleMouseLeave () {
-    opacity.set(0);
-    scale.set(1);
-    rotateX.set(0);
-    rotateY.set(0);
-    rotateFigcaption.set(0);
+  function handleMouseLeave() {
+    opacity.set(0)
+    scale.set(1)
+    rotateX.set(0)
+    rotateY.set(0)
+    rotateFigcaption.set(0)
   }
 
   return (
     <figure
       ref={ref}
-      className='relative w-full h-full [perspective:800px] flex flex-col items-center justify-center'
+      className="relative w-full h-full [perspective:800px] flex flex-col items-center justify-center"
       style={{
         height: containerHeight,
-        width: containerWidth,
+        width: containerWidth
       }}
       onMouseMove={handleMouse}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <motion.div
-        className='relative [transform-style:preserve-3d]'
+        className="relative [transform-style:preserve-3d]"
         style={{
           width: imageWidth,
           height: imageHeight,
           rotateX,
           rotateY,
-          scale,
+          scale
         }}
       >
         <motion.img
           src={imageSrc}
           alt={altText}
-          className='absolute top-0 left-0 object-cover rounded-md will-change-transform [transform:translateZ(0)] pointer-events-none select-none'
+          className="absolute top-0 left-0 object-cover rounded-md will-change-transform [transform:translateZ(0)] pointer-events-none select-none"
           style={{
             width: imageWidth,
-            height: imageHeight,
+            height: imageHeight
           }}
         />
 
         {displayOverlayContent && overlayContent && (
-          <motion.div className='absolute top-0 left-0 right-0 z-10 flex justify-center will-change-transform [transform:translateZ(30px)]'>
+          <motion.div className="absolute top-0 left-0 right-0 z-10 flex justify-center will-change-transform [transform:translateZ(30px)]">
             {overlayContent}
           </motion.div>
         )}
@@ -130,17 +130,17 @@ export default function HoverTiltedCard ({
 
       {showTooltip && (
         <motion.figcaption
-          className='pointer-events-none absolute left-0 top-0 rounded-md bg-white px-2 py-1 text-sm text-default-900 opacity-0 z-10 hidden sm:block'
+          className="pointer-events-none absolute left-0 top-0 rounded-md bg-white px-2 py-1 text-sm text-default-900 opacity-0 z-10 hidden sm:block"
           style={{
             x,
             y,
             opacity,
-            rotate: rotateFigcaption,
+            rotate: rotateFigcaption
           }}
         >
           {captionText}
         </motion.figcaption>
       )}
     </figure>
-  );
+  )
 }

napcat.webui/src/components/input/file_input.tsx

@@ -0,0 +1,69 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import { useRef, useState } from 'react'
+
+export interface FileInputProps {
+  onChange: (file: File) => Promise<void> | void
+  onDelete?: () => Promise<void> | void
+  label?: string
+  accept?: string
+}
+
+const FileInput: React.FC<FileInputProps> = ({
+  onChange,
+  onDelete,
+  label,
+  accept
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  return (
+    <div className="flex items-end gap-2">
+      <div className="flex-grow">
+        <Input
+          isDisabled={isLoading}
+          ref={inputRef}
+          label={label}
+          type="file"
+          placeholder="选择文件"
+          accept={accept}
+          onChange={async (e) => {
+            try {
+              setIsLoading(true)
+              const file = e.target.files?.[0]
+              if (file) {
+                await onChange(file)
+              }
+            } catch (error) {
+              console.error(error)
+            } finally {
+              setIsLoading(false)
+              if (inputRef.current) inputRef.current.value = ''
+            }
+          }}
+        />
+      </div>
+      <Button
+        isDisabled={isLoading}
+        onPress={async () => {
+          try {
+            setIsLoading(true)
+            if (onDelete) await onDelete()
+          } catch (error) {
+            console.error(error)
+          } finally {
+            setIsLoading(false)
+            if (inputRef.current) inputRef.current.value = ''
+          }
+        }}
+        color="primary"
+        variant="flat"
+        size="sm"
+      >
+        删除
+      </Button>
+    </div>
+  )
+}
+
+export default FileInput

napcat.webui/src/components/input/image_input.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@heroui/button'
+import { Image } from '@heroui/image'
+import { Input } from '@heroui/input'
+import { useRef } from 'react'
+
+export interface ImageInputProps {
+  onChange: (base64: string) => void
+  value: string
+  label?: string
+}
+
+const ImageInput: React.FC<ImageInputProps> = ({ onChange, value, label }) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  return (
+    <div className="flex items-end gap-2">
+      <div className="w-5 h-5 flex-shrink-0">
+        <Image
+          src={value}
+          alt={label}
+          className="w-5 h-5 flex-shrink-0 rounded-none"
+        />
+      </div>
+      <Input
+        ref={inputRef}
+        label={label}
+        type="file"
+        placeholder="选择图片"
+        accept="image/*"
+        onChange={async (e) => {
+          const file = e.target.files?.[0]
+          if (file) {
+            const reader = new FileReader()
+            reader.onload = async () => {
+              const base64 = reader.result as string
+              onChange(base64)
+            }
+            reader.readAsDataURL(file)
+          }
+        }}
+      />
+      <Button
+        onPress={() => {
+          onChange('')
+          if (inputRef.current) inputRef.current.value = ''
+        }}
+        color="primary"
+        variant="flat"
+        size="sm"
+      >
+        删除
+      </Button>
+    </div>
+  )
+}
+
+export default ImageInput

napcat.webui/src/components/log_com/history.tsx

@@ -1,15 +1,15 @@
-import { Button } from '@heroui/button';
-import { Card, CardBody, CardHeader } from '@heroui/card';
-import { Select, SelectItem } from '@heroui/select';
-import type { Selection } from '@react-types/shared';
-import { useEffect, useRef, useState } from 'react';
+import { Button } from '@heroui/button'
+import { Card, CardBody, CardHeader } from '@heroui/card'
+import { Select, SelectItem } from '@heroui/select'
+import type { Selection } from '@react-types/shared'
+import { useEffect, useRef, useState } from 'react'
 
-import { colorizeLogLevel } from '@/utils/terminal';
+import { colorizeLogLevel } from '@/utils/terminal'
 
-import PageLoading from '../page_loading';
-import XTerm from '../xterm';
-import type { XTermRef } from '../xterm';
-import LogLevelSelect from './log_level_select';
+import PageLoading from '../page_loading'
+import XTerm from '../xterm'
+import type { XTermRef } from '../xterm'
+import LogLevelSelect from './log_level_select'
 
 export interface HistoryLogsProps {
   list: string[]
@@ -32,80 +32,80 @@ const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
     listLoading,
     logContent,
     listError,
-    logLoading,
-  } = props;
-  const Xterm = useRef<XTermRef>(null);
+    logLoading
+  } = props
+  const Xterm = useRef<XTermRef>(null)
 
   const [logLevel, setLogLevel] = useState<Selection>(
     new Set(['info', 'warn', 'error'])
-  );
+  )
 
   const logToColored = (log: string) => {
     const logs = log
       .split('\n')
       .map((line) => {
-        const colored = colorizeLogLevel(line);
-        return colored;
+        const colored = colorizeLogLevel(line)
+        return colored
       })
       .filter((log) => {
         if (logLevel === 'all') {
-          return true;
+          return true
         }
-        return logLevel.has(log.level);
+        return logLevel.has(log.level)
       })
       .map((log) => log.content)
-      .join('\r\n');
-    return logs;
-  };
+      .join('\r\n')
+    return logs
+  }
 
   const onDownloadLog = () => {
     if (!logContent) {
-      return;
+      return
     }
-    const blob = new Blob([logContent], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${selectedLog}.log`;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
+    const blob = new Blob([logContent], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${selectedLog}.log`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
 
   useEffect(() => {
     if (!Xterm.current || !logContent) {
-      return;
+      return
     }
-    Xterm.current.clear();
-    const _logContent = logToColored(logContent);
-    Xterm.current.write(_logContent + '\r\nnapcat@webui:~$ ');
-  }, [logContent, logLevel]);
+    Xterm.current.clear()
+    const _logContent = logToColored(logContent)
+    Xterm.current.write(_logContent + '\r\nnapcat@webui:~$ ')
+  }, [logContent, logLevel])
 
   return (
     <>
       <title>历史日志 - NapCat WebUI</title>
-      <Card className='max-w-full h-full bg-opacity-50 backdrop-blur-sm'>
-        <CardHeader className='flex-row justify-start gap-3'>
+      <Card className="max-w-full h-full bg-opacity-50 backdrop-blur-sm">
+        <CardHeader className="flex-row justify-start gap-3">
           <Select
-            label='选择日志'
-            size='sm'
+            label="选择日志"
+            size="sm"
             isLoading={listLoading}
             errorMessage={listError?.message}
             classNames={{
               trigger:
-                'hover:!bg-content3 bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60',
+                'hover:!bg-content3 bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60'
             }}
-            placeholder='选择日志'
+            placeholder="选择日志"
             onChange={(e) => {
-              const value = e.target.value;
+              const value = e.target.value
               if (!value) {
-                return;
+                return
               }
-              onSelect(value);
+              onSelect(value)
             }}
             selectedKeys={[selectedLog || '']}
             items={list.map((name) => ({
               value: name,
-              label: name,
+              label: name
             }))}
           >
             {(item) => (
@@ -118,19 +118,19 @@ const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
             selectedKeys={logLevel}
             onSelectionChange={setLogLevel}
           />
-          <Button className='flex-shrink-0' onPress={onDownloadLog}>
+          <Button className="flex-shrink-0" onPress={onDownloadLog}>
             下载日志
           </Button>
           <Button onPress={refreshList}>刷新列表</Button>
           <Button onPress={refreshLog}>刷新日志</Button>
         </CardHeader>
-        <CardBody className='relative'>
+        <CardBody className="relative">
           <PageLoading loading={logLoading} />
-          <XTerm className='w-full h-full' ref={Xterm} />
+          <XTerm className="w-full h-full" ref={Xterm} />
         </CardBody>
       </Card>
     </>
-  );
-};
+  )
+}
 
-export default HistoryLogs;
+export default HistoryLogs

napcat.webui/src/components/log_com/log_level_select.tsx

@@ -1,9 +1,9 @@
-import { Chip } from '@heroui/chip';
-import { Select, SelectItem } from '@heroui/select';
-import { SharedSelection } from '@heroui/system';
-import type { Selection } from '@react-types/shared';
+import { Chip } from '@heroui/chip'
+import { Select, SelectItem } from '@heroui/select'
+import { SharedSelection } from '@heroui/system'
+import type { Selection } from '@react-types/shared'
 
-import { LogLevel } from '@/const/enum';
+import { LogLevel } from '@/const/enum'
 
 export interface LogLevelSelectProps {
   selectedKeys: Selection
@@ -22,57 +22,57 @@ const logLevelColor: {
   [LogLevel.INFO]: 'primary',
   [LogLevel.WARN]: 'warning',
   [LogLevel.ERROR]: 'primary',
-  [LogLevel.FATAL]: 'primary',
-};
+  [LogLevel.FATAL]: 'primary'
+}
 const LogLevelSelect = (props: LogLevelSelectProps) => {
-  const { selectedKeys, onSelectionChange } = props;
+  const { selectedKeys, onSelectionChange } = props
   return (
     <Select
       selectedKeys={selectedKeys}
       onSelectionChange={(selectedKeys) => {
         if (selectedKeys !== 'all' && selectedKeys?.size === 0) {
-          selectedKeys = 'all';
+          selectedKeys = 'all'
         }
-        onSelectionChange(selectedKeys);
+        onSelectionChange(selectedKeys)
       }}
-      label='日志级别'
-      selectionMode='multiple'
-      aria-label='Log Level'
+      label="日志级别"
+      selectionMode="multiple"
+      aria-label="Log Level"
       classNames={{
         label: 'mb-2',
         trigger: 'bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60',
-        popoverContent: 'bg-opacity-50 backdrop-blur-sm',
+        popoverContent: 'bg-opacity-50 backdrop-blur-sm'
       }}
-      size='sm'
+      size="sm"
       items={[
         { label: 'Debug', value: LogLevel.DEBUG },
         { label: 'Info', value: LogLevel.INFO },
         { label: 'Warn', value: LogLevel.WARN },
         { label: 'Error', value: LogLevel.ERROR },
-        { label: 'Fatal', value: LogLevel.FATAL },
+        { label: 'Fatal', value: LogLevel.FATAL }
       ]}
       renderValue={(value) => {
         if (value.length === 5) {
           return (
-            <Chip size='sm' color='primary' variant='flat'>
+            <Chip size="sm" color="primary" variant="flat">
               全部
             </Chip>
-          );
+          )
         }
         return (
-          <div className='flex gap-2'>
+          <div className="flex gap-2">
             {value.map((v) => (
               <Chip
-                size='sm'
+                size="sm"
                 key={v.key}
                 color={logLevelColor[v.data?.value as LogLevel]}
-                variant='flat'
+                variant="flat"
               >
                 {v.data?.label}
               </Chip>
             ))}
           </div>
-        );
+        )
       }}
     >
       {(item) => (
@@ -81,7 +81,7 @@ const LogLevelSelect = (props: LogLevelSelectProps) => {
         </SelectItem>
       )}
     </Select>
-  );
-};
+  )
+}
 
-export default LogLevelSelect;
+export default LogLevelSelect

napcat.webui/src/components/log_com/realtime.tsx

@@ -0,0 +1,114 @@
+import { Button } from '@heroui/button'
+import type { Selection } from '@react-types/shared'
+import { useEffect, useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { IoDownloadOutline } from 'react-icons/io5'
+
+import { colorizeLogLevelWithTag } from '@/utils/terminal'
+
+import WebUIManager, { Log } from '@/controllers/webui_manager'
+
+import type { XTermRef } from '../xterm'
+import XTerm from '../xterm'
+import LogLevelSelect from './log_level_select'
+
+const RealTimeLogs = () => {
+  const Xterm = useRef<XTermRef>(null)
+  const [logLevel, setLogLevel] = useState<Selection>(
+    new Set(['info', 'warn', 'error'])
+  )
+  const [dataArr, setDataArr] = useState<Log[]>([])
+
+  const onDownloadLog = () => {
+    const logContent = dataArr
+      .filter((log) => {
+        if (logLevel === 'all') {
+          return true
+        }
+        return logLevel.has(log.level)
+      })
+      .map((log) => colorizeLogLevelWithTag(log.message, log.level))
+      .join('\r\n')
+    const blob = new Blob([logContent], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'napcat.log'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const writeStream = () => {
+    try {
+      const _data = dataArr
+        .filter((log) => {
+          if (logLevel === 'all') {
+            return true
+          }
+          return logLevel.has(log.level)
+        })
+        .map((log) => colorizeLogLevelWithTag(log.message, log.level))
+        .join('\r\n')
+      Xterm.current?.clear()
+      Xterm.current?.write(_data)
+    } catch (error) {
+      console.error(error)
+      toast.error('获取实时日志失败')
+    }
+  }
+
+  useEffect(() => {
+    writeStream()
+  }, [logLevel, dataArr])
+
+  useEffect(() => {
+    const subscribeLogs = () => {
+      try {
+        const source = WebUIManager.getRealTimeLogs((data) => {
+          setDataArr((prev) => {
+            const newData = [...prev, ...data]
+            if (newData.length > 1000) {
+              newData.splice(0, newData.length - 1000)
+            }
+            return newData
+          })
+        })
+        return () => {
+          source.close()
+        }
+      } catch (error) {
+        toast.error('获取实时日志失败')
+      }
+    }
+
+    const close = subscribeLogs()
+    return () => {
+      console.log('close')
+      close?.()
+    }
+  }, [])
+
+  return (
+    <>
+      <title>实时日志 - NapCat WebUI</title>
+      <div className="flex items-center gap-2">
+        <LogLevelSelect
+          selectedKeys={logLevel}
+          onSelectionChange={setLogLevel}
+        />
+        <Button
+          className="flex-shrink-0"
+          onPress={onDownloadLog}
+          startContent={<IoDownloadOutline className="text-lg" />}
+        >
+          下载日志
+        </Button>
+      </div>
+      <div className="flex-1 h-full overflow-hidden">
+        <XTerm ref={Xterm} />
+      </div>
+    </>
+  )
+}
+
+export default RealTimeLogs

napcat.webui/src/components/modal.tsx

@@ -1,13 +1,13 @@
-import { Button } from '@heroui/button';
+import { Button } from '@heroui/button'
 import {
   ModalBody,
   ModalContent,
   ModalFooter,
   ModalHeader,
   Modal as NextUIModal,
-  useDisclosure,
-} from '@heroui/modal';
-import React from 'react';
+  useDisclosure
+} from '@heroui/modal'
+import React from 'react'
 
 export interface ModalProps {
   content: React.ReactNode
@@ -37,8 +37,8 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
     onConfirm,
     onCancel,
     ...rest
-  } = props;
-  const { onClose: onNativeClose } = useDisclosure();
+  } = props
+  const { onClose: onNativeClose } = useDisclosure()
 
   return (
     <NextUIModal
@@ -46,12 +46,12 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
       backdrop={backdrop}
       isDismissable={dismissible}
       onClose={() => {
-        onClose?.();
-        onNativeClose();
+        onClose?.()
+        onNativeClose()
       }}
       classNames={{
         backdrop: 'z-[99]',
-        wrapper: 'z-[99]',
+        wrapper: 'z-[99]'
       }}
       {...rest}
     >
@@ -59,27 +59,27 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
         {(nativeClose) => (
           <>
             {title && (
-              <ModalHeader className='flex flex-col gap-1'>{title}</ModalHeader>
+              <ModalHeader className="flex flex-col gap-1">{title}</ModalHeader>
             )}
-            <ModalBody className='break-all'>{content}</ModalBody>
+            <ModalBody className="break-all">{content}</ModalBody>
             <ModalFooter>
               {showCancel && (
                 <Button
-                  color='primary'
-                  variant='light'
+                  color="primary"
+                  variant="light"
                   onPress={() => {
-                    onCancel?.();
-                    nativeClose();
+                    onCancel?.()
+                    nativeClose()
                   }}
                 >
                   {cancelText}
                 </Button>
               )}
               <Button
-                color='primary'
+                color="primary"
                 onPress={() => {
-                  onConfirm?.();
-                  nativeClose();
+                  onConfirm?.()
+                  nativeClose()
                 }}
               >
                 {confirmText}
@@ -89,9 +89,9 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
         )}
       </ModalContent>
     </NextUIModal>
-  );
-});
+  )
+})
 
-Modal.displayName = 'Modal';
+Modal.displayName = 'Modal'
 
-export default Modal;
+export default Modal