feat: png video截图

Ensure busiId is compared as a string in parsePrivateMsgEvent to handle cases where busiId may not be a string type. This prevents potential mismatches due to type differences.

.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 = 4
+indent_size = 2
 
 [*.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.

.gitignore

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

.prettierrc.json

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

.vscode/settings.json

@@ -3,15 +3,35 @@
     "explorer.fileNesting.expand": false,
     "explorer.fileNesting.patterns": {
         ".env.universal": ".env.*",
-        "tsconfig.json": "tsconfig.*.json, env.d.ts, vite.config.ts",
+        "vite.config.ts": "vite*.ts",
+        "README.md": "CODE_OF_CONDUCT.md, RELEASES.md, CONTRIBUTING.md, CHANGELOG.md, SECURITY.md",
+        "tsconfig.json": "tsconfig.*.json, env.d.ts",
         "package.json": "package-lock.json, eslint*, .prettier*, .editorconfig, manifest.json, logo.png, .gitignore, LICENSE"
     },
     "css.customData": [
         ".vscode/tailwindcss.json"
     ],
-    "editor.formatOnPaste": false,
+    "editor.detectIndentation": false,
-     "editor.formatOnSave": false,
+    "editor.tabSize": 2,
+    "editor.formatOnSave": true,
+    "editor.formatOnType": false,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSaveMode": "file",
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": "never"
+        "source.fixAll.eslint": "always"
     },
-}
+    "files.autoSave": "onFocusChange",
+    "javascript.preferences.quoteStyle": "single",
+    "typescript.preferences.quoteStyle": "single",
+    "javascript.format.semicolons": "insert",
+    "typescript.format.semicolons": "insert",
+    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
+    "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
+    "typescript.format.insertSpaceAfterConstructor": true,
+    "javascript.format.insertSpaceAfterConstructor": true,
+    "typescript.preferences.importModuleSpecifier": "non-relative",
+    "typescript.preferences.importModuleSpecifierEnding": "minimal",
+    "javascript.preferences.importModuleSpecifier": "non-relative",
+    "javascript.preferences.importModuleSpecifierEnding": "minimal",
+    "typescript.disableAutomaticTypeAcquisition": true,
+}

README.md

@@ -3,8 +3,6 @@
 
 # NapCat
 
-
-
 _Modern protocol-side framework implemented based on NTQQ._
 
 > 云起兮风生，心向远方兮路未曾至.
@@ -14,6 +12,7 @@ _Modern protocol-side framework implemented based on NTQQ._
 ---
 
 ## New Feature
+
 在 v4.8.115+ 版本开始
 
 1. NapCatQQ 支持 [Stream Api](https://napneko.github.io/develop/file)
@@ -23,19 +22,21 @@ _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/) 页面下载最新版本
@@ -43,6 +44,7 @@ _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/) |
@@ -64,20 +66,22 @@ _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

@@ -1,32 +1,52 @@
-import eslint from '@eslint/js';
+import neostandard from 'neostandard';
-import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
-import tsEslintParser from '@typescript-eslint/parser';
-import globals from "globals";
 
-const customTsFlatConfig = [
+/** 尾随逗号 */
-    {
+const commaDangle = val => {
-        name: 'typescript-eslint/base',
+  if (val?.rules?.['@stylistic/comma-dangle']?.[0] === 'warn') {
-        languageOptions: {
+    const rule = val?.rules?.['@stylistic/comma-dangle']?.[1];
-            parser: tsEslintParser,
+    Object.keys(rule).forEach(key => {
-            sourceType: 'module',
+      rule[key] = 'always-multiline';
-            globals: {
+    });
-                ...globals.browser,
+    val.rules['@stylistic/comma-dangle'][1] = rule;
-                ...globals.node,
+  }
-                NodeJS: 'readonly', // 添加 NodeJS 全局变量
+
-            },
+  /** 三元表达式 */
-        },
+  if (val?.rules?.['@stylistic/indent']) {
-        files: ['**/*.{ts,tsx}'],
+    val.rules['@stylistic/indent'][2] = {
-        rules: {
+      ...val.rules?.['@stylistic/indent']?.[2],
-            ...tsEslintPlugin.configs.recommended.rules,
+      flatTernaryExpressions: true,
-            'quotes': ['error', 'single'], // 使用单引号
+      offsetTernaryExpressions: false,
-            'semi': ['error', 'always'], // 强制使用分号
+    };
-            'indent': ['error', 4], // 使用 4 空格缩进
+  }
-        },
+
-        plugins: {
+  /** 支持下划线 - 禁用 camelcase 规则 */
-            '@typescript-eslint': tsEslintPlugin,
+  if (val?.rules?.camelcase) {
-        },
+    val.rules.camelcase = 'off';
-        ignores: ['src/webui/**'], // 忽略 src/webui/ 目录所有文件
+  }
-    },
+
+  /** 未使用的变量强制报错 */
+  if (val?.rules?.['@typescript-eslint/no-unused-vars']) {
+    val.rules['@typescript-eslint/no-unused-vars'] = ['error', {
+      argsIgnorePattern: '^_',
+      varsIgnorePattern: '^_',
+      caughtErrorsIgnorePattern: '^_',
+    }];
+  }
+
+  return val;
+};
+
+/** 忽略的文件 */
+const ignores = [
+  'node_modules',
+  '**/dist/**',
+  'launcher',
 ];
 
-export default [eslint.configs.recommended, ...customTsFlatConfig];
+const options = neostandard({
+  ts: true,
+  ignores,
+  semi: true, // 强制使用分号
+}).map(commaDangle);
+
+export default options;

launcher/qqnt.json

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

manifest.json

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

napcat.webui/.prettierignore

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

napcat.webui/.prettierrc

@@ -1,23 +0,0 @@
-{
-  "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

@@ -1,91 +1,2 @@
-import eslint_js from '@eslint/js'
+import eslintConfig from '../eslint.config.mjs';
-import tsEslintPlugin from '@typescript-eslint/eslint-plugin'
+export default eslintConfig;
-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

@@ -86,7 +86,6 @@
     "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",
@@ -97,20 +96,14 @@
     "@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

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

napcat.webui/src/components/ColorPicker.tsx

@@ -1,6 +1,6 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import React from 'react'
+import React from 'react';
-import { ColorResult, SketchPicker } from 'react-color'
+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 { Button } from '@heroui/button';
-import { Card, CardBody, CardHeader } from '@heroui/card'
+import { Card, CardBody, CardHeader } from '@heroui/card';
-import { Image } from '@heroui/image'
+import { Image } from '@heroui/image';
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import { Slider } from '@heroui/slider'
+import { Slider } from '@heroui/slider';
-import { Tooltip } from '@heroui/tooltip'
+import { Tooltip } from '@heroui/tooltip';
-import { useLocalStorage } from '@uidotdev/usehooks'
+import { useLocalStorage } from '@uidotdev/usehooks';
-import clsx from 'clsx'
+import clsx from 'clsx';
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react';
 import {
   BiSolidSkipNextCircle,
-  BiSolidSkipPreviousCircle
+  BiSolidSkipPreviousCircle,
-} from 'react-icons/bi'
+} from 'react-icons/bi';
 import {
   FaPause,
   FaPlay,
   FaRegHandPointRight,
   FaRepeat,
-  FaShuffle
+  FaShuffle,
-} from 'react-icons/fa6'
+} from 'react-icons/fa6';
-import { TbRepeatOnce } from 'react-icons/tb'
+import { TbRepeatOnce } from 'react-icons/tb';
-import { useMediaQuery } from 'react-responsive'
+import { useMediaQuery } from 'react-responsive';
 
-import { PlayMode } from '@/const/enum'
+import { PlayMode } from '@/const/enum';
-import key from '@/const/key'
+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 [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(0)
+  const [duration, setDuration] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(false)
+  const [isPlaying, setIsPlaying] = useState(false);
-  const [volume, setVolume] = useState(100)
+  const [volume, setVolume] = useState(100);
   const [isCollapsed, setIsCollapsed] = useLocalStorage(
     key.isCollapsedMusicPlayer,
     false
-  )
+  );
-  const audioRef = useRef<HTMLAudioElement>(null)
+  const audioRef = useRef<HTMLAudioElement>(null);
-  const cardRef = useRef<HTMLDivElement>(null)
+  const cardRef = useRef<HTMLDivElement>(null);
-  const startY = useRef(0)
+  const startY = useRef(0);
-  const startX = useRef(0)
+  const startX = useRef(0);
-  const [translateY, setTranslateY] = useState(0)
+  const [translateY, setTranslateY] = useState(0);
-  const [translateX, setTranslateX] = useState(0)
+  const [translateX, setTranslateX] = useState(0);
-  const isSmallScreen = useMediaQuery({ maxWidth: 767 })
+  const isSmallScreen = useMediaQuery({ maxWidth: 767 });
-  const isMediumUp = useMediaQuery({ minWidth: 768 })
+  const isMediumUp = useMediaQuery({ minWidth: 768 });
-  const shouldAdd = useRef(false)
+  const shouldAdd = useRef(false);
-  const currentProgress = (currentTime / duration) * 100
+  const currentProgress = (currentTime / duration) * 100;
   const [storageAutoPlay, setStorageAutoPlay] = useLocalStorage(
     key.autoPlay,
     true
-  )
+  );
 
   const handleTimeUpdate = (event: React.SyntheticEvent<HTMLAudioElement>) => {
-    const audio = event.target as HTMLAudioElement
+    const audio = event.target as HTMLAudioElement;
-    setCurrentTime(audio.currentTime)
+    setCurrentTime(audio.currentTime);
-    onTimeUpdate?.(event)
+    onTimeUpdate?.(event);
-  }
+  };
 
   const handleLoadedData = (event: React.SyntheticEvent<HTMLAudioElement>) => {
-    const audio = event.target as HTMLAudioElement
+    const audio = event.target as HTMLAudioElement;
-    setDuration(audio.duration)
+    setDuration(audio.duration);
-    onLoadedData?.(event)
+    onLoadedData?.(event);
-  }
+  };
 
   const handlePlay = (e: React.SyntheticEvent<HTMLAudioElement>) => {
-    setIsPlaying(true)
+    setIsPlaying(true);
-    setStorageAutoPlay(true)
+    setStorageAutoPlay(true);
-    onPlay?.(e)
+    onPlay?.(e);
-  }
+  };
 
   const handlePause = (e: React.SyntheticEvent<HTMLAudioElement>) => {
-    setIsPlaying(false)
+    setIsPlaying(false);
-    onPause?.(e)
+    onPause?.(e);
-  }
+  };
 
   const changeMode = () => {
-    const modes = [PlayMode.Loop, PlayMode.Random, PlayMode.Single]
+    const modes = [PlayMode.Loop, PlayMode.Random, PlayMode.Single];
-    const currentIndex = modes.findIndex((_mode) => _mode === mode)
+    const currentIndex = modes.findIndex((_mode) => _mode === mode);
-    const nextIndex = currentIndex + 1
+    const nextIndex = currentIndex + 1;
-    const nextMode = modes[nextIndex] || modes[0]
+    const nextMode = modes[nextIndex] || modes[0];
-    onChangeMode?.(nextMode)
+    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
+    startY.current = e.touches[0].clientY;
-    startX.current = e.touches[0].clientX
+    startX.current = e.touches[0].clientX;
-  }
+  };
 
   const handleTouchMove = (e: React.TouchEvent) => {
-    const deltaY = e.touches[0].clientY - startY.current
+    const deltaY = e.touches[0].clientY - startY.current;
-    const deltaX = e.touches[0].clientX - startX.current
+    const deltaX = e.touches[0].clientX - startX.current;
-    const container = cardRef.current
+    const container = cardRef.current;
-    const header = cardRef.current?.querySelector('[data-header]')
+    const header = cardRef.current?.querySelector('[data-header]');
-    const headerHeight = header?.clientHeight || 20
+    const headerHeight = header?.clientHeight || 20;
-    const addHeight = (container?.clientHeight || headerHeight) - headerHeight
+    const addHeight = (container?.clientHeight || headerHeight) - headerHeight;
-    const _shouldAdd = isCollapsed && deltaY < 0
+    const _shouldAdd = isCollapsed && deltaY < 0;
     if (isSmallScreen) {
-      shouldAdd.current = _shouldAdd
+      shouldAdd.current = _shouldAdd;
-      setTranslateY(_shouldAdd ? deltaY + addHeight : deltaY)
+      setTranslateY(_shouldAdd ? deltaY + addHeight : deltaY);
     } else {
-      setTranslateX(deltaX)
+      setTranslateX(deltaX);
     }
-  }
+  };
 
   const handleTouchEnd = () => {
     if (isSmallScreen) {
-      const container = cardRef.current
+      const container = cardRef.current;
-      const header = cardRef.current?.querySelector('[data-header]')
+      const header = cardRef.current?.querySelector('[data-header]');
-      const headerHeight = header?.clientHeight || 20
+      const headerHeight = header?.clientHeight || 20;
-      const addHeight = (container?.clientHeight || headerHeight) - headerHeight
+      const addHeight = (container?.clientHeight || headerHeight) - headerHeight;
-      const _translateY = translateY - (shouldAdd.current ? addHeight : 0)
+      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"
+        shadow='sm'
-        radius="none"
+        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"
+            variant='solid'
-            color="primary"
+            color='primary'
-            size="sm"
+            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>
+            <div className='w-24 h-2 rounded-full bg-content2-foreground shadow-sm' />
           </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='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='relative col-span-6 md:col-span-4 flex justify-center'>
               <Image
-                alt="Album cover"
+                alt='Album cover'
-                className="object-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 col-span-6 md:col-span-8'>
-              <div className="flex flex-col gap-0">
+              <div className='flex flex-col gap-0'>
-                <h1 className="font-medium truncate">{title}</h1>
+                <h1 className='font-medium truncate'>{title}</h1>
-                <p className="text-xs text-foreground/80 truncate">{artist}</p>
+                <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
+                    value = Array.isArray(value) ? value[0] : value;
-                    const audio = audioRef.current
+                    const audio = audioRef.current;
                     if (audio) {
-                      audio.currentTime = (value / 100) * duration
+                      audio.currentTime = (value / 100) * duration;
                     }
                   }}
                 />
-                <div className="flex justify-between h-3">
+                <div className='flex justify-between h-3'>
-                  <p className="text-xs">
+                  <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"
+                    className='data-[hover]:bg-foreground/10 text-lg md:text-medium'
-                    radius="full"
+                    radius='full'
-                    variant="light"
+                    variant='light'
-                    size="md"
+                    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"
+                    className='data-[hover]:bg-foreground/10 text-2xl md:text-xl'
-                    radius="full"
+                    radius='full'
-                    variant="light"
+                    variant='light'
-                    size="md"
+                    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"
+                    className='data-[hover]:bg-foreground/10 text-3xl md:text-3xl'
-                    radius="full"
+                    radius='full'
-                    variant="light"
+                    variant='light'
-                    size="lg"
+                    size='lg'
                     onPress={() => {
                       if (isPlaying) {
-                        audioRef.current?.pause()
+                        audioRef.current?.pause();
-                        setStorageAutoPlay(false)
+                        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"
+                    className='data-[hover]:bg-foreground/10 text-2xl md:text-xl'
-                    radius="full"
+                    radius='full'
-                    variant="light"
+                    variant='light'
-                    size="md"
+                    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"
+                      className='data-[hover]:bg-foreground/10 text-xl md:text-xl'
-                      radius="full"
+                      radius='full'
-                      variant="light"
+                      variant='light'
-                      size="md"
+                      size='md'
                     >
                       <VolumeHighIcon />
                     </Button>
                   </PopoverTrigger>
                   <PopoverContent>
                     <Slider
-                      orientation="vertical"
+                      orientation='vertical'
                       showTooltip
-                      aria-label="Volume"
+                      aria-label='Volume'
-                      className="h-40"
+                      className='h-40'
-                      color="primary"
+                      color='primary'
                       defaultValue={volume}
                       onChange={(value) => {
-                        value = Array.isArray(value) ? value[0] : value
+                        value = Array.isArray(value) ? value[0] : value;
-                        volumeChange(value)
+                        volumeChange(value);
                       }}
-                      startContent={<VolumeHighIcon className="text-2xl" />}
+                      startContent={<VolumeHighIcon className='text-2xl' />}
-                      size="sm"
+                      size='sm'
-                      endContent={<VolumeLowIcon className="text-2xl" />}
+                      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
+  DropdownTrigger,
-} from '@heroui/dropdown'
+} from '@heroui/dropdown';
-import { Tooltip } from '@heroui/tooltip'
+import { Tooltip } from '@heroui/tooltip';
-import { FaRegCircleQuestion } from 'react-icons/fa6'
+import { FaRegCircleQuestion } from 'react-icons/fa6';
-import { IoAddCircleOutline } from 'react-icons/io5'
+import { IoAddCircleOutline } from 'react-icons/io5';
 
 import {
   HTTPClientIcon,
   HTTPServerIcon,
   PCIcon,
   PlusIcon,
-  WebsocketIcon
+  WebsocketIcon,
-} from '../icons'
+} 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"
+          color='primary'
-          startContent={<IoAddCircleOutline className="text-2xl" />}
+          startContent={<IoAddCircleOutline className='text-2xl' />}
         >
           新建
         </Button>
       </DropdownTrigger>
       <DropdownMenu
-        aria-label="Create Network Config"
+        aria-label='Create Network Config'
-        color="primary"
+        color='primary'
-        variant="flat"
+        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"
+          className='cursor-default hover:!bg-transparent'
-          textValue="title"
+          textValue='title'
         >
-          <div className="flex items-center gap-2 justify-center">
+          <div className='flex items-center gap-2 justify-center'>
-            <div className="w-5 h-5 -ml-3">
+            <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"
+          key='httpServers'
-          textValue="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"
+                radius='full'
-                size="sm"
+                size='sm'
-                variant="light"
+                variant='light'
-                className="w-4 h-4 min-w-0"
+                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"
+          key='httpSseServers'
-          textValue="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"
+                radius='full'
-                size="sm"
+                size='sm'
-                variant="light"
+                variant='light'
-                className="w-4 h-4 min-w-0"
+                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"
+          key='httpClients'
-          textValue="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"
+                radius='full'
-                size="sm"
+                size='sm'
-                variant="light"
+                variant='light'
-                className="w-4 h-4 min-w-0"
+                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"
+          key='websocketServers'
-          textValue="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"
+                radius='full'
-                size="sm"
+                size='sm'
-                variant="light"
+                variant='light'
-                className="w-4 h-4 min-w-0"
+                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"
+          key='websocketClients'
-          textValue="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"
+                radius='full'
-                size="sm"
+                size='sm'
-                variant="light"
+                variant='light'
-                className="w-4 h-4 min-w-0"
+                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 { Button } from '@heroui/button';
-import clsx from 'clsx'
+import clsx from 'clsx';
-import toast from 'react-hot-toast'
+import toast from 'react-hot-toast';
-import { IoMdRefresh } from 'react-icons/io'
+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()
+          reset();
-          toast.success('重置成功')
+          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"
+          color='secondary'
-          radius="full"
+          radius='full'
-          variant="flat"
+          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

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

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

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

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

@@ -1,20 +1,20 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Image } from '@heroui/image'
+import { Image } from '@heroui/image';
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import { Tooltip } from '@heroui/tooltip'
+import { Tooltip } from '@heroui/tooltip';
-import { data, getUrl } from 'qface'
+import { data, getUrl } from 'qface';
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react';
-import { MdEmojiEmotions } from 'react-icons/md'
+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
+    id: item.QSid,
-  } as EmojiValue
+  } 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 [visibleEmojis, setVisibleEmojis] = useState<EmojiValue[]>([]);
-  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (isPopoverOpen) {
-      setVisibleEmojis([]) // Reset visible emojis
+      setVisibleEmojis([]); // Reset visible emojis
-      requestAnimationFrame(() => loadEmojis()) // Start loading 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)
+        ...emojis.slice(index, index + batchSize),
-      ])
+      ]);
-      requestAnimationFrame(() => loadEmojis(index + batchSize, 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)
+          onOpenChange(v);
-          setIsPopoverOpen(v)
+          setIsPopoverOpen(v);
         }}
       >
-        <Tooltip content="插入表情">
+        <Tooltip content='插入表情'>
-          <div className="max-w-fit">
+          <div className='max-w-fit'>
             <PopoverTrigger>
-              <Button color="primary" variant="flat" isIconOnly radius="full">
+              <Button color='primary' variant='flat' isIconOnly radius='full'>
-                <MdEmojiEmotions className="text-xl" />
+                <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"
+              color='primary'
-              variant="flat"
+              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

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

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

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

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

@@ -1,35 +1,35 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Form } from '@heroui/form'
+import { Form } from '@heroui/form';
-import { Input } from '@heroui/input'
+import { Input } from '@heroui/input';
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import { Select, SelectItem } from '@heroui/select'
+import { Select, SelectItem } from '@heroui/select';
-import type { SharedSelection } from '@heroui/system'
+import type { SharedSelection } from '@heroui/system';
-import { Tab, Tabs } from '@heroui/tabs'
+import { Tab, Tabs } from '@heroui/tabs';
-import { Tooltip } from '@heroui/tooltip'
+import { Tooltip } from '@heroui/tooltip';
-import type { Key } from '@react-types/shared'
+import type { Key } from '@react-types/shared';
-import { useRef, useState } from 'react'
+import { useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form'
+import { Controller, useForm } from 'react-hook-form';
-import toast from 'react-hot-toast'
+import toast from 'react-hot-toast';
-import { IoMusicalNotes } from 'react-icons/io5'
+import { IoMusicalNotes } from 'react-icons/io5';
-import { TbMusicPlus } from 'react-icons/tb'
+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
+  OB11Segment,
-} from '@/types/onebot'
+} from '@/types/onebot';
 
-type MusicData = CustomMusicSegment['data'] | MusicSegment['data']
+type MusicData = CustomMusicSegment['data'] | MusicSegment['data'];
 
 const MusicInsert = () => {
-  const [musicId, setMusicId] = useState<string>('')
+  const [musicId, setMusicId] = useState<string>('');
-  const [musicType, setMusicType] = useState<SharedSelection>(new Set(['163']))
+  const [musicType, setMusicType] = useState<SharedSelection>(new Set(['163']));
-  const [mode, setMode] = useState<Key>('default')
+  const [mode, setMode] = useState<Key>('default');
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null);
   const { control, handleSubmit, reset } = useForm<
     Omit<CustomMusicSegment['data'], 'type'>
   >({
@@ -38,84 +38,84 @@ const MusicInsert = () => {
       audio: '',
       title: '',
       image: '',
-      content: ''
+      content: '',
-    }
+    },
-  })
+  });
-  const showStructuredMessage = useShowStructuredMessage()
+  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
+      ...data,
-    })
+    });
-    reset()
+    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="发送音乐">
+        <Tooltip content='发送音乐'>
-          <div className="max-w-fit">
+          <div className='max-w-fit'>
             <PopoverTrigger>
-              <Button color="primary" variant="flat" isIconOnly radius="full">
+              <Button color='primary' variant='flat' isIconOnly radius='full'>
-                <IoMusicalNotes className="text-xl" />
+                <IoMusicalNotes className='text-xl' />
               </Button>
             </PopoverTrigger>
           </div>
         </Tooltip>
-        <PopoverContent className="gap-2 p-4">
+        <PopoverContent className='gap-2 p-4'>
           <Tabs
-            placement="top"
+            placement='top'
-            className="w-96"
+            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="音乐平台"
+                label='音乐平台'
-                placeholder="请选择音乐平台"
+                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"
+                placeholder='请输入音乐ID'
-                label="音乐ID"
+                label='音乐ID'
               />
               <Button
                 fullWidth
-                size="lg"
+                size='lg'
-                color="primary"
+                color='primary'
-                variant="flat"
+                variant='flat'
-                radius="full"
+                radius='full'
                 onPress={() => {
                   if (!musicId) {
-                    toast.error('请输入音乐ID')
+                    toast.error('请输入音乐ID');
-                    return
+                    return;
                   }
                   showMusicSegment({
                     type: Array.from(
                       musicType
                     )[0] as MusicSegment['data']['type'],
-                    id: musicId
+                    id: musicId,
-                  })
+                  });
-                  setMusicId('')
+                  setMusicId('');
                 }}
                 startContent={<TbMusicPlus />}
               >
@@ -156,92 +156,92 @@ const MusicInsert = () => {
               </Button>
             </Tab>
             <Tab
-              title="自定义音乐"
+              title='自定义音乐'
-              key="custom"
+              key='custom'
-              className="flex flex-col gap-2"
+              className='flex flex-col gap-2'
             >
               <Form
                 onSubmit={handleSubmit(onSubmit)}
-                className="flex flex-col gap-2"
+                className='flex flex-col gap-2'
-                validationBehavior="native"
+                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"
+                      size='sm'
-                      placeholder="请输入音乐URL"
+                      placeholder='请输入音乐URL'
-                      label="音乐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"
+                      size='sm'
-                      placeholder="请输入音频URL"
+                      placeholder='请输入音频URL'
-                      label="音频URL"
+                      label='音频URL'
                     />
                   )}
                 />
                 <Controller
-                  name="title"
+                  name='title'
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
                       isRequired
-                      size="sm"
+                      size='sm'
-                      errorMessage="请输入音乐标题"
+                      errorMessage='请输入音乐标题'
-                      placeholder="请输入音乐标题"
+                      placeholder='请输入音乐标题'
-                      label="音乐标题"
+                      label='音乐标题'
                     />
                   )}
                 />
                 <Controller
-                  name="image"
+                  name='image'
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
-                      size="sm"
+                      size='sm'
-                      placeholder="请输入封面图片URL"
+                      placeholder='请输入封面图片URL'
-                      label="封面图片URL"
+                      label='封面图片URL'
                     />
                   )}
                 />
                 <Controller
-                  name="content"
+                  name='content'
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
-                      size="sm"
+                      size='sm'
-                      placeholder="请输入音乐描述"
+                      placeholder='请输入音乐描述'
-                      label="音乐描述"
+                      label='音乐描述'
                     />
                   )}
                 />
                 <Button
                   fullWidth
-                  size="lg"
+                  size='lg'
-                  color="primary"
+                  color='primary'
-                  variant="flat"
+                  variant='flat'
-                  radius="full"
+                  radius='full'
-                  type="submit"
+                  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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import Quill from 'quill'
+import Quill from 'quill';
 
 // eslint-disable-next-line
 const Embed = Quill.import('blots/embed') as any
@@ -7,24 +7,24 @@ export interface ImageValue {
   src: string
 }
 class ImageBlot extends Embed {
-  static blotName = 'image'
+  static blotName = 'image';
-  static tagName = 'img'
+  static tagName = 'img';
-  static classNames: string[] = ['max-w-48', 'max-h-48', 'align-bottom']
+  static classNames: string[] = ['max-w-48', 'max-h-48', 'align-bottom'];
 
-  static create(value: ImageValue) {
+  static create (value: ImageValue) {
-    let node = super.create()
+    const node = super.create();
-    node.setAttribute('alt', value.alt)
+    node.setAttribute('alt', value.alt);
-    node.setAttribute('src', value.src)
+    node.setAttribute('src', value.src);
-    node.classList.add(...ImageBlot.classNames)
+    node.classList.add(...ImageBlot.classNames);
-    return node
+    return node;
   }
 
-  static value(node: HTMLImageElement): ImageValue {
+  static value (node: HTMLImageElement): ImageValue {
     return {
       alt: node.getAttribute('alt') ?? '',
-      src: node.getAttribute('src') ?? ''
+      src: node.getAttribute('src') ?? '',
-    }
+    };
   }
 }
 
-export default ImageBlot
+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 blotName = 'reply';
-  static tagName = 'div'
+  static tagName = 'div';
   static classNames = [
     'p-2',
     'select-none',
     'bg-default-100',
     'rounded-md',
-    'pointer-events-none'
+    'pointer-events-none',
-  ]
+  ];
 
-  static create(value: ReplyBlockValue) {
+  static create (value: ReplyBlockValue) {
-    const node = super.create()
+    const node = super.create();
-    node.setAttribute('data-message-id', value.messageId)
+    node.setAttribute('data-message-id', value.messageId);
-    node.setAttribute('contenteditable', 'false')
+    node.setAttribute('contenteditable', 'false');
-    node.classList.add(...ReplyBlock.classNames)
+    node.classList.add(...ReplyBlock.classNames);
-    const innerDom = document.createElement('div')
+    const innerDom = document.createElement('div');
-    innerDom.classList.add('text-sm', 'text-default-500', 'relative')
+    innerDom.classList.add('text-sm', 'text-default-500', 'relative');
-    const svgContainer = document.createElement('div')
+    const svgContainer = document.createElement('div');
-    svgContainer.classList.add('w-3', 'h-3', 'absolute', 'top-0', 'right-0')
+    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>`
+    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
+    svgContainer.innerHTML = svg;
-    innerDom.innerHTML = `消息ID：${value.messageId}`
+    innerDom.innerHTML = `消息ID：${value.messageId}`;
-    innerDom.appendChild(svgContainer)
+    innerDom.appendChild(svgContainer);
-    node.appendChild(innerDom)
+    node.appendChild(innerDom);
-    return node
+    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

@@ -1,55 +1,55 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import type { Range } from 'quill'
+import type { Range } from 'quill';
-import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.core.css';
-import { useRef } from 'react'
+import { useRef } from 'react';
-import toast from 'react-hot-toast'
+import toast from 'react-hot-toast';
 
-import { useCustomQuill } from '@/hooks/use_custom_quill'
+import { useCustomQuill } from '@/hooks/use_custom_quill';
-import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message';
 
-import { quillToMessage } from '@/utils/onebot'
+import { quillToMessage } from '@/utils/onebot';
 
-import type { OB11Segment } from '@/types/onebot'
+import type { OB11Segment } from '@/types/onebot';
 
-import AudioInsert from './components/audio_insert'
+import AudioInsert from './components/audio_insert';
-import DiceInsert from './components/dice_insert'
+import DiceInsert from './components/dice_insert';
-import EmojiPicker from './components/emoji_picker'
+import EmojiPicker from './components/emoji_picker';
-import FileInsert from './components/file_insert'
+import FileInsert from './components/file_insert';
-import ImageInsert from './components/image_insert'
+import ImageInsert from './components/image_insert';
-import MusicInsert from './components/music_insert'
+import MusicInsert from './components/music_insert';
-import ReplyInsert from './components/reply_insert'
+import ReplyInsert from './components/reply_insert';
-import RPSInsert from './components/rps_insert'
+import RPSInsert from './components/rps_insert';
-import VideoInsert from './components/video_insert'
+import VideoInsert from './components/video_insert';
-import EmojiBlot from './formats/emoji_blot'
+import EmojiBlot from './formats/emoji_blot';
-import type { EmojiValue } from './formats/emoji_blot'
+import type { EmojiValue } from './formats/emoji_blot';
-import ImageBlot from './formats/image_blot'
+import ImageBlot from './formats/image_blot';
-import ReplyBlock from './formats/reply_blot'
+import ReplyBlock from './formats/reply_blot';
 
 const ChatInput = () => {
-  const memorizedRange = useRef<Range | null>(null)
+  const memorizedRange = useRef<Range | null>(null);
 
-  const showStructuredMessage = useShowStructuredMessage()
+  const showStructuredMessage = useShowStructuredMessage();
-  const formats: string[] = ['image', 'emoji', 'reply']
+  const formats: string[] = ['image', 'emoji', 'reply'];
   const modules = {
-    toolbar: '#toolbar'
+    toolbar: '#toolbar',
-  }
+  };
   const { quillRef, quill, Quill } = useCustomQuill({
     modules,
     formats,
-    placeholder: '请输入消息'
+    placeholder: '请输入消息',
-  })
+  });
 
   if (Quill && !quill) {
-    Quill.register('formats/emoji', EmojiBlot)
+    Quill.register('formats/emoji', EmojiBlot);
-    Quill.register('formats/image', ImageBlot, true)
+    Quill.register('formats/image', ImageBlot, true);
-    Quill.register('formats/reply', ReplyBlock)
+    Quill.register('formats/reply', ReplyBlock);
   }
 
   if (quill) {
     quill.on('selection-change', (range) => {
       if (range) {
-        const editorContent = quill.getContents()
+        const editorContent = quill.getContents();
-        const firstOp = editorContent.ops[0]
+        const firstOp = editorContent.ops[0];
 
         if (
           typeof firstOp?.insert !== 'string' &&
@@ -57,126 +57,126 @@ const ChatInput = () => {
           range.index === 0 &&
           range.length !== quill.getLength()
         ) {
-          quill.setSelection(1, Quill.sources.SILENT)
+          quill.setSelection(1, Quill.sources.SILENT);
         }
       }
-    })
+    });
 
     quill.on('text-change', () => {
-      const editorContent = quill.getContents()
+      const editorContent = quill.getContents();
-      const firstOp = editorContent.ops[0]
+      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.insertText(1, '\n', Quill.sources.SILENT);
       }
-    })
+    });
 
     quill.on('editor-change', (eventName: string) => {
       if (eventName === 'text-change') {
-        const editorContent = quill.getContents()
+        const editorContent = quill.getContents();
-        const firstOp = editorContent.ops[0]
+        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.insertText(1, '\n', Quill.sources.SILENT);
         }
       }
-    })
+    });
 
     quill.root.addEventListener('compositionstart', () => {
-      const editorContent = quill.getContents()
+      const editorContent = quill.getContents();
-      const firstOp = editorContent.ops[0]
+      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.insertText(1, '\n', Quill.sources.SILENT);
       }
-    })
+    });
   }
 
   const onOpenChange = (open: boolean) => {
     if (open) {
-      const selection = quill?.getSelection()
+      const selection = quill?.getSelection();
-      if (selection) memorizedRange.current = selection
+      if (selection) memorizedRange.current = selection;
     }
-  }
+  };
 
   const insertImage = (url: string) => {
-    const selection = memorizedRange.current || quill?.getSelection()
+    const selection = memorizedRange.current || quill?.getSelection();
-    quill?.deleteText(selection?.index || 0, selection?.length || 0)
+    quill?.deleteText(selection?.index || 0, selection?.length || 0);
     quill?.insertEmbed(selection?.index || 0, 'image', {
       src: url,
-      alt: '图片'
+      alt: '图片',
-    })
+    });
-    quill?.setSelection((selection?.index || 0) + 1, 0)
+    quill?.setSelection((selection?.index || 0) + 1, 0);
-  }
+  };
-  function insertReplyBlock(messageId: string) {
+  function insertReplyBlock (messageId: string) {
-    const isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/
+    const isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/;
     if (!isNumberReg.test(messageId)) {
-      toast.error('请输入正确的消息ID')
+      toast.error('请输入正确的消息ID');
-      return
+      return;
     }
-    const editorContent = quill?.getContents()
+    const editorContent = quill?.getContents();
-    const firstOp = editorContent?.ops[0]
+    const firstOp = editorContent?.ops[0];
-    const currentSelection = quill?.getSelection()
+    const currentSelection = quill?.getSelection();
     if (
       firstOp &&
       typeof firstOp.insert !== 'string' &&
       firstOp.insert?.reply
     ) {
-      const delta = quill?.getContents()
+      const delta = quill?.getContents();
       if (delta) {
         delta.ops[0] = {
-          insert: { reply: { messageId } }
+          insert: { reply: { messageId } },
-        }
+        };
-        quill?.setContents(delta, Quill.sources.USER)
+        quill?.setContents(delta, Quill.sources.USER);
       }
     } else {
-      quill?.insertEmbed(0, 'reply', { messageId }, Quill.sources.USER)
+      quill?.insertEmbed(0, 'reply', { messageId }, Quill.sources.USER);
     }
-    quill?.setSelection((currentSelection?.index || 0) + 1, 0)
+    quill?.setSelection((currentSelection?.index || 0) + 1, 0);
-    quill?.blur()
+    quill?.blur();
   }
   const onInsertEmoji = (emoji: EmojiValue) => {
-    const selection = memorizedRange.current || quill?.getSelection()
+    const selection = memorizedRange.current || quill?.getSelection();
-    quill?.deleteText(selection?.index || 0, selection?.length || 0)
+    quill?.deleteText(selection?.index || 0, selection?.length || 0);
     quill?.insertEmbed(selection?.index || 0, 'emoji', {
       alt: emoji.alt,
       src: emoji.src,
-      id: emoji.id
+      id: emoji.id,
-    })
+    });
-    quill?.setSelection((selection?.index || 0) + 1, 0)
+    quill?.setSelection((selection?.index || 0) + 1, 0);
-  }
+  };
 
   const getChatMessage = () => {
-    const delta = quill?.getContents()
+    const delta = quill?.getContents();
     const ops =
       delta?.ops?.filter((op) => {
-        return op.insert !== '\n'
+        return op.insert !== '\n';
-      }) ?? []
+      }) ?? [];
     const messages: OB11Segment[] = ops.map((op) => {
-      return quillToMessage(op)
+      return quillToMessage(op);
-    })
+    });
-    return messages
+    return messages;
-  }
+  };
 
   return (
     <div>
       <div
         ref={quillRef}
-        className="border border-default-200 rounded-md !mb-2 !text-base !h-64"
+        className='border border-default-200 rounded-md !mb-2 !text-base !h-64'
       />
-      <div id="toolbar" className="!border-none flex gap-2">
+      <div id='toolbar' className='!border-none flex gap-2'>
         <ImageInsert insertImage={insertImage} onOpenChange={onOpenChange} />
         <EmojiPicker
           onInsertEmoji={onInsertEmoji}
@@ -190,18 +190,18 @@ const ChatInput = () => {
         <DiceInsert />
         <RPSInsert />
         <Button
-          color="primary"
+          color='primary'
           onPress={() => {
-            const messages = getChatMessage()
+            const messages = getChatMessage();
-            showStructuredMessage(messages)
+            showStructuredMessage(messages);
           }}
-          className="ml-auto"
+          className='ml-auto'
         >
           获取JSON格式
         </Button>
       </div>
     </div>
-  )
+  );
-}
+};
 
-export default ChatInput
+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
+  useDisclosure,
-} from '@heroui/modal'
+} from '@heroui/modal';
 
-import ChatInput from '.'
+import ChatInput from '.';
 
-export default function ChatInputModal() {
+export default function ChatInputModal () {
-  const { isOpen, onOpen, onOpenChange } = useDisclosure()
+  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"
+        size='4xl'
-        scrollBehavior="inside"
+        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">
+              <ModalBody className='overflow-y-auto'>
-                <div 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 } from '@monaco-editor/react'
+import Editor, { OnMount, loader } from '@monaco-editor/react';
-import { loader } from '@monaco-editor/react'
-import React from 'react'
 
-import { useTheme } from '@/hooks/use-theme'
+import React from 'react';
 
-import monaco from '@/monaco'
+import { useTheme } from '@/hooks/use-theme';
+
+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 { Button, ButtonGroup } from '@heroui/button';
-import { Switch } from '@heroui/switch'
+import { Switch } from '@heroui/switch';
-import { useState } from 'react'
+import { useState } from 'react';
-import { CgDebug } from 'react-icons/cg'
+import { CgDebug } from 'react-icons/cg';
-import { FiEdit3 } from 'react-icons/fi'
+import { FiEdit3 } from 'react-icons/fi';
-import { MdDeleteForever } from 'react-icons/md'
+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 { name, enable, debug } = data;
-  const [editing, setEditing] = useState(false)
+  const [editing, setEditing] = useState(false);
 
   const handleEnable = () => {
-    setEditing(true)
+    setEditing(true);
-    onEnable().finally(() => setEditing(false))
+    onEnable().finally(() => setEditing(false));
-  }
+  };
 
   const handleDelete = () => {
-    setEditing(true)
+    setEditing(true);
-    onDelete().finally(() => setEditing(false))
+    onDelete().finally(() => setEditing(false));
-  }
+  };
 
   const handleEnableDebug = () => {
-    setEditing(true)
+    setEditing(true);
-    onEnableDebug().finally(() => setEditing(false))
+    onEnableDebug().finally(() => setEditing(false));
-  }
+  };
 
   return (
     <DisplayCardContainer
@@ -62,12 +62,12 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
         <ButtonGroup
           fullWidth
           isDisabled={editing}
-          radius="sm"
+          radius='sm'
-          size="sm"
+          size='sm'
-          variant="flat"
+          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"
+            className='bg-danger/20 text-danger hover:bg-danger/30 transition-colors'
-            variant="flat"
+            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,17 +119,19 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
               field.label === 'URL' ? 'col-span-2' : ''
             }`}
           >
-            <span className="text-default-400">{field.label}</span>
+            <span className='text-default-400'>{field.label}</span>
-            {field.render ? (
+            {field.render
-              field.render(field.value)
+              ? (
-            ) : (
+                field.render(field.value)
-              <span>{field.value}</span>
+              )
-            )}
+              : (
+                <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 { Card, CardBody, CardFooter, CardHeader } from '@heroui/card';
-import clsx from 'clsx'
+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">
+    <Card className='bg-opacity-50 backdrop-blur-sm'>
-      <CardHeader className={'pb-0 flex items-center'}>
+      <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 NetworkDisplayCard from './common_card';
-import type { NetworkDisplayCardFields } 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 { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
-  const { url, reportSelfMessage, messagePostFormat } = data
+  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 NetworkDisplayCard from './common_card';
-import type { NetworkDisplayCardFields } 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 { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
-  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data
+  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 NetworkDisplayCard from './common_card';
-import type { NetworkDisplayCardFields } 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 { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
-  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data
+  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 NetworkDisplayCard from './common_card';
-import type { NetworkDisplayCardFields } 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
+    reportSelfMessage,
-  } = data
+  } = 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 NetworkDisplayCard from './common_card';
-import type { NetworkDisplayCardFields } 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
+    enableForcePushEvent,
-  } = data
+  } = 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 { Card, CardBody } from '@heroui/card';
-import clsx from 'clsx'
+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 { Card, CardProps } from '@heroui/card';
-import clsx from 'clsx'
+import clsx from 'clsx';
-import React from 'react'
+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
+    lightStyle,
-  } = props
+  } = props;
-  const cardRef = React.useRef<HTMLDivElement | null>(null)
+  const cardRef = React.useRef<HTMLDivElement | null>(null);
-  const lightRef = React.useRef<HTMLDivElement | null>(null)
+  const lightRef = React.useRef<HTMLDivElement | null>(null);
-  const [isShowLight, setIsShowLight] = React.useState(false)
+  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 { x, y } = cardRef.current.getBoundingClientRect();
-          const { clientX, clientY } = e
+          const { clientX, clientY } = e;
 
-          const offsetX = clientX - x
+          const offsetX = clientX - x;
-          const offsetY = clientY - y
+          const offsetY = clientY - y;
 
-          const lightWidth = lightStyle?.width?.toString() || '100'
+          const lightWidth = lightStyle?.width?.toString() || '100';
-          const lightHeight = lightStyle?.height?.toString() || '100'
+          const lightHeight = lightStyle?.height?.toString() || '100';
-          const lightWidthNum = parseInt(lightWidth)
+          const lightWidthNum = parseInt(lightWidth);
-          const lightHeightNum = parseInt(lightHeight)
+          const lightHeightNum = parseInt(lightHeight);
 
-          const left = offsetX - lightWidthNum / 2
+          const left = offsetX - lightWidthNum / 2;
-          const top = offsetY - lightHeightNum / 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 rangeX = 400 / 2;
-          const rangeY = 400 / 2
+          const rangeY = 400 / 2;
 
-          const rotateX = ((offsetY - rangeY) / rangeY) * maxXRotation
+          const rotateX = ((offsetY - rangeY) / rangeY) * maxXRotation;
-          const rotateY = -1 * ((offsetX - rangeX) / rangeX) * maxYRotation
+          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

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

napcat.webui/src/components/file_icon.tsx

@@ -11,8 +11,8 @@ import {
   FaFileVideo,
   FaFileWord,
   FaFileZipper,
-  FaFolderClosed
+  FaFolderClosed,
-} from 'react-icons/fa6'
+} 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 { Button, ButtonGroup } from '@heroui/button';
-import { Input } from '@heroui/input'
+import { Input } from '@heroui/input';
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
-  ModalHeader
+  ModalHeader,
-} from '@heroui/modal'
+} 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">
+          <div className='flex flex-col gap-4'>
-            <ButtonGroup color="primary">
+            <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

@@ -1,14 +1,14 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Code } from '@heroui/code'
+import { Code } from '@heroui/code';
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
-  ModalHeader
+  ModalHeader,
-} from '@heroui/modal'
+} from '@heroui/modal';
 
-import CodeEditor from '@/components/code_editor'
+import CodeEditor from '@/components/code_editor';
 
 interface FileEditModalProps {
   isOpen: boolean
@@ -18,61 +18,61 @@ interface FileEditModalProps {
   onContentChange: (newContent?: string) => void
 }
 
-export default function FileEditModal({
+export default function FileEditModal ({
   isOpen,
   file,
   onClose,
   onSave,
-  onContentChange
+  onContentChange,
 }: FileEditModalProps) {
   // 根据文件后缀返回对应语言
   const getLanguage = (filePath: string) => {
-    if (filePath.endsWith('.js')) return 'javascript'
+    if (filePath.endsWith('.js')) return 'javascript';
-    if (filePath.endsWith('.ts')) return 'typescript'
+    if (filePath.endsWith('.ts')) return 'typescript';
-    if (filePath.endsWith('.tsx')) return 'tsx'
+    if (filePath.endsWith('.tsx')) return 'tsx';
-    if (filePath.endsWith('.jsx')) return 'jsx'
+    if (filePath.endsWith('.jsx')) return 'jsx';
-    if (filePath.endsWith('.vue')) return 'vue'
+    if (filePath.endsWith('.vue')) return 'vue';
-    if (filePath.endsWith('.svelte')) return 'svelte'
+    if (filePath.endsWith('.svelte')) return 'svelte';
-    if (filePath.endsWith('.json')) return 'json'
+    if (filePath.endsWith('.json')) return 'json';
-    if (filePath.endsWith('.html')) return 'html'
+    if (filePath.endsWith('.html')) return 'html';
-    if (filePath.endsWith('.css')) return 'css'
+    if (filePath.endsWith('.css')) return 'css';
-    if (filePath.endsWith('.scss')) return 'scss'
+    if (filePath.endsWith('.scss')) return 'scss';
-    if (filePath.endsWith('.less')) return 'less'
+    if (filePath.endsWith('.less')) return 'less';
-    if (filePath.endsWith('.md')) return 'markdown'
+    if (filePath.endsWith('.md')) return 'markdown';
-    if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) return 'yaml'
+    if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) return 'yaml';
-    if (filePath.endsWith('.xml')) return 'xml'
+    if (filePath.endsWith('.xml')) return 'xml';
-    if (filePath.endsWith('.sql')) return 'sql'
+    if (filePath.endsWith('.sql')) return 'sql';
-    if (filePath.endsWith('.sh')) return 'shell'
+    if (filePath.endsWith('.sh')) return 'shell';
-    if (filePath.endsWith('.bat')) return 'bat'
+    if (filePath.endsWith('.bat')) return 'bat';
-    if (filePath.endsWith('.php')) return 'php'
+    if (filePath.endsWith('.php')) return 'php';
-    if (filePath.endsWith('.java')) return 'java'
+    if (filePath.endsWith('.java')) return 'java';
-    if (filePath.endsWith('.c')) return 'c'
+    if (filePath.endsWith('.c')) return 'c';
-    if (filePath.endsWith('.cpp')) return 'cpp'
+    if (filePath.endsWith('.cpp')) return 'cpp';
-    if (filePath.endsWith('.h')) return 'h'
+    if (filePath.endsWith('.h')) return 'h';
-    if (filePath.endsWith('.hpp')) return 'hpp'
+    if (filePath.endsWith('.hpp')) return 'hpp';
-    if (filePath.endsWith('.go')) return 'go'
+    if (filePath.endsWith('.go')) return 'go';
-    if (filePath.endsWith('.py')) return 'python'
+    if (filePath.endsWith('.py')) return 'python';
-    if (filePath.endsWith('.rb')) return 'ruby'
+    if (filePath.endsWith('.rb')) return 'ruby';
-    if (filePath.endsWith('.cs')) return 'csharp'
+    if (filePath.endsWith('.cs')) return 'csharp';
-    if (filePath.endsWith('.swift')) return 'swift'
+    if (filePath.endsWith('.swift')) return 'swift';
-    if (filePath.endsWith('.vb')) return 'vb'
+    if (filePath.endsWith('.vb')) return 'vb';
-    if (filePath.endsWith('.lua')) return 'lua'
+    if (filePath.endsWith('.lua')) return 'lua';
-    if (filePath.endsWith('.pl')) return 'perl'
+    if (filePath.endsWith('.pl')) return 'perl';
-    if (filePath.endsWith('.r')) return 'r'
+    if (filePath.endsWith('.r')) return 'r';
-    return 'plaintext'
+    return 'plaintext';
-  }
+  };
 
   return (
-    <Modal size="full" isOpen={isOpen} onClose={onClose}>
+    <Modal size='full' isOpen={isOpen} onClose={onClose}>
       <ModalContent>
-        <ModalHeader className="flex items-center gap-2 bg-content2 bg-opacity-50">
+        <ModalHeader className='flex items-center gap-2 bg-content2 bg-opacity-50'>
           <span>编辑文件</span>
-          <Code className="text-xs">{file?.path}</Code>
+          <Code className='text-xs'>{file?.path}</Code>
         </ModalHeader>
-        <ModalBody className="p-0">
+        <ModalBody className='p-0'>
-          <div className="h-full">
+          <div className='h-full'>
             <CodeEditor
-              height="100%"
+              height='100%'
               value={file?.content || ''}
               onChange={onContentChange}
               options={{ wordWrap: 'on' }}
@@ -81,14 +81,14 @@ export default function FileEditModal({
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" variant="flat" onPress={onClose}>
+          <Button color='primary' variant='flat' onPress={onClose}>
             取消
           </Button>
-          <Button color="primary" onPress={onSave}>
+          <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
+  ModalHeader,
-} from '@heroui/modal'
+} from '@heroui/modal';
-import { Spinner } from '@heroui/spinner'
+import { Spinner } from '@heroui/spinner';
-import { useRequest } from 'ahooks'
+import { useRequest } from 'ahooks';
-import path from 'path-browserify'
+import path from 'path-browserify';
-import { useEffect } from 'react'
+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 videoExts = ['.mp4', '.webm'];
-export const audioExts = ['.mp3', '.wav']
+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 { Button, ButtonGroup } from '@heroui/button';
-import { Pagination } from '@heroui/pagination'
+import { Pagination } from '@heroui/pagination';
-import { Spinner } from '@heroui/spinner'
+import { Spinner } from '@heroui/spinner';
 import {
   type Selection,
   type SortDescriptor,
@@ -9,20 +9,20 @@ import {
   TableCell,
   TableColumn,
   TableHeader,
-  TableRow
+  TableRow,
-} from '@heroui/table'
+} from '@heroui/table';
-import path from 'path-browserify'
+import path from 'path-browserify';
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react';
-import { BiRename } from 'react-icons/bi'
+import { BiRename } from 'react-icons/bi';
-import { FiCopy, FiDownload, FiMove, FiTrash2 } from 'react-icons/fi'
+import { FiCopy, FiDownload, FiMove, FiTrash2 } from 'react-icons/fi';
-import { PhotoSlider } from 'react-photo-view'
+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 { supportedPreviewExts } from './file_preview_modal';
-import ImageNameButton, { PreviewImage, imageExts } from './image_name_button'
+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,40 @@ export default function FileTable({
   onMoveRequest,
   onCopyPath,
   onDelete,
-  onDownload
+  onDownload,
 }: FileTableProps) {
-  const [page, setPage] = useState(1)
+  const [page, setPage] = useState(1);
-  const pages = Math.ceil(files.length / PAGE_SIZE) || 1
+  const pages = Math.ceil(files.length / PAGE_SIZE) || 1;
-  const start = (page - 1) * PAGE_SIZE
+  const start = (page - 1) * PAGE_SIZE;
-  const end = start + PAGE_SIZE
+  const end = start + PAGE_SIZE;
-  const displayFiles = files.slice(start, end)
+  const displayFiles = files.slice(start, end);
-  const [showImage, setShowImage] = useState(false)
+  const [showImage, setShowImage] = useState(false);
-  const [previewIndex, setPreviewIndex] = useState(0)
+  const [previewIndex, setPreviewIndex] = useState(0);
-  const [previewImages, setPreviewImages] = useState<PreviewImage[]>([])
+  const [previewImages, setPreviewImages] = useState<PreviewImage[]>([]);
 
   const addPreviewImage = useCallback((image: PreviewImage) => {
     setPreviewImages((prev) => {
-      const exists = prev.some((p) => p.key === image.key)
+      const exists = prev.some((p) => p.key === image.key);
-      if (exists) return prev
+      if (exists) return prev;
-      return [...prev, image]
+      return [...prev, image];
-    })
+    });
-  }, [])
+  }, []);
 
   useEffect(() => {
-    setPreviewImages([])
+    setPreviewImages([]);
-    setPreviewIndex(0)
+    setPreviewIndex(0);
-    setShowImage(false)
+    setShowImage(false);
-    setPage(1)
+    setPage(1);
-  }, [currentPath])
+  }, [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)
+    setPreviewIndex(index);
-    setShowImage(true)
+    setShowImage(true);
-  }
+  };
 
   return (
     <>
@@ -104,20 +104,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,64 +126,65 @@ 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 filePath = path.join(currentPath, file.name);
-            const ext = path.extname(file.name).toLowerCase()
+            const ext = path.extname(file.name).toLowerCase();
-            const previewable = supportedPreviewExts.includes(ext)
+            const previewable = supportedPreviewExts.includes(ext);
-            const images = previewImages
+            const images = previewImages;
             return (
               <TableRow key={file.name}>
                 <TableCell>
-                  {imageExts.includes(ext) ? (
+                  {imageExts.includes(ext)
-                    <ImageNameButton
+                    ? (
-                      name={file.name}
+                      <ImageNameButton
-                      filePath={filePath}
+                        name={file.name}
-                      onPreview={() => onPreviewImage(file.name, images)}
+                        filePath={filePath}
-                      onAddPreview={addPreviewImage}
+                        onPreview={() => onPreviewImage(file.name, images)}
-                    />
+                        onAddPreview={addPreviewImage}
-                  ) : (
+                      />
-                    <Button
+                    )
-                      variant="light"
+                    : (
-                      onPress={() =>
+                      <Button
-                        file.isDirectory
+                        variant='light'
-                          ? onDirectoryClick(file.name)
+                        onPress={() =>
-                          : previewable
+                          file.isDirectory
-                            ? onPreview(filePath)
+                            ? onDirectoryClick(file.name)
-                            : onEdit(filePath)
+                            : previewable
+                              ? onPreview(filePath)
+                              : onEdit(filePath)}
+                        className='text-left justify-start'
+                        startContent={
+                          <FileIcon
+                            name={file.name}
+                            isDirectory={file.isDirectory}
+                          />
                       }
-                      className="text-left justify-start"
+                      >
-                      startContent={
+                        {file.name}
-                        <FileIcon
+                      </Button>
-                          name={file.name}
+                    )}
-                          isDirectory={file.isDirectory}
-                        />
-                      }
-                    >
-                      {file.name}
-                    </Button>
-                  )}
                 </TableCell>
                 <TableCell>{file.isDirectory ? '目录' : '文件'}</TableCell>
                 <TableCell>
@@ -193,43 +194,43 @@ export default function FileTable({
                 </TableCell>
                 <TableCell>{new Date(file.mtime).toLocaleString()}</TableCell>
                 <TableCell>
-                  <ButtonGroup size="sm">
+                  <ButtonGroup size='sm'>
                     <Button
                       isIconOnly
-                      color="primary"
+                      color='primary'
-                      variant="flat"
+                      variant='flat'
                       onPress={() => onRenameRequest(file.name)}
                     >
                       <BiRename />
                     </Button>
                     <Button
                       isIconOnly
-                      color="primary"
+                      color='primary'
-                      variant="flat"
+                      variant='flat'
                       onPress={() => onMoveRequest(file.name)}
                     >
                       <FiMove />
                     </Button>
                     <Button
                       isIconOnly
-                      color="primary"
+                      color='primary'
-                      variant="flat"
+                      variant='flat'
                       onPress={() => onCopyPath(file.name)}
                     >
                       <FiCopy />
                     </Button>
                     <Button
                       isIconOnly
-                      color="primary"
+                      color='primary'
-                      variant="flat"
+                      variant='flat'
                       onPress={() => onDownload(filePath)}
                     >
                       <FiDownload />
                     </Button>
                     <Button
                       isIconOnly
-                      color="primary"
+                      color='primary'
-                      variant="flat"
+                      variant='flat'
                       onPress={() => onDelete(filePath)}
                     >
                       <FiTrash2 />
@@ -237,10 +238,10 @@ export default function FileTable({
                   </ButtonGroup>
                 </TableCell>
               </TableRow>
-            )
+            );
           })}
         </TableBody>
       </Table>
     </>
-  )
+  );
 }

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

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

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

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

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

@@ -1,40 +1,40 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 
-import { getReleaseTime } from '@/utils/time'
+import { getReleaseTime } from '@/utils/time';
 
-import type { GithubRelease as GithubReleaseType } from '@/types/github'
+import type { GithubRelease as GithubReleaseType } from '@/types/github';
 
 export interface GithubReleaseProps {
   releaseData: GithubReleaseType
 }
 const GithubRelease: React.FC<GithubReleaseProps> = (props) => {
-  const { releaseData } = props
+  const { releaseData } = props;
-  const [releaseTime, setReleaseTime] = useState<string | null>(null)
+  const [releaseTime, setReleaseTime] = useState<string | null>(null);
 
   useEffect(() => {
     if (releaseData) {
       const timer = setInterval(() => {
-        const time = getReleaseTime(releaseData.published_at)
+        const time = getReleaseTime(releaseData.published_at);
 
-        setReleaseTime(time)
+        setReleaseTime(time);
-      }, 1000)
+      }, 1000);
 
-      return () => clearInterval(timer)
+      return () => clearInterval(timer);
     }
-  }, [releaseData])
+  }, [releaseData]);
 
   return (
-    <div className="flex flex-col gap-1">
+    <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">
+      <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>
+        <span className='text-tiny text-default-600'>{releaseData.name}</span>
-        <div className="flex gap-2 text-tiny">
+        <div className='flex gap-2 text-tiny'>
-          <span className="text-default-500">{releaseTime}</span>
+          <span className='text-default-500'>{releaseTime}</span>
-          <span className="text-success">Latest</span>
+          <span className='text-success'>Latest</span>
         </div>
       </div>
     </div>
-  )
+  );
-}
+};
 
-export default GithubRelease
+export default GithubRelease;

napcat.webui/src/components/hitokoto.tsx

@@ -1,76 +1,78 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Tooltip } from '@heroui/tooltip'
+import { Tooltip } from '@heroui/tooltip';
-import { useRequest } from 'ahooks'
+import { useRequest } from 'ahooks';
-import toast from 'react-hot-toast'
+import toast from 'react-hot-toast';
-import { IoCopy, IoRefresh } from 'react-icons/io5'
+import { IoCopy, IoRefresh } from 'react-icons/io5';
 
-import { request } from '@/utils/request'
+import { request } from '@/utils/request';
 
-import PageLoading from './page_loading'
+import PageLoading from './page_loading';
 
-export default function Hitokoto() {
+export default function Hitokoto () {
   const {
     data: dataOri,
     error,
     loading,
-    run
+    run,
   } = useRequest(() => request.get<IHitokoto>('https://hitokoto.152710.xyz/'), {
     pollingInterval: 10000,
-    throttleWait: 1000
+    throttleWait: 1000,
-  })
+  });
-  const data = dataOri?.data
+  const data = dataOri?.data;
   const onCopy = () => {
     try {
-      const text = `${data?.hitokoto} —— ${data?.from} ${data?.from_who}`
+      const text = `${data?.hitokoto} —— ${data?.from} ${data?.from_who}`;
-      navigator.clipboard.writeText(text)
+      navigator.clipboard.writeText(text);
-      toast.success('复制成功')
+      toast.success('复制成功');
-    } catch (error) {
+    } catch (_error) {
-      toast.error('复制失败, 请手动复制')
+      toast.error('复制失败, 请手动复制');
     }
-  }
+  };
   return (
     <div>
-      <div className="relative">
+      <div className='relative'>
         {loading && <PageLoading />}
-        {error ? (
+        {error
-          <div className="text-primary-400">一言加载失败：{error.message}</div>
+          ? (
-        ) : (
+            <div className='text-primary-400'>一言加载失败：{error.message}</div>
-          <>
+          )
-            <div>{data?.hitokoto}</div>
+          : (
-            <div className="text-right">
+            <>
-              —— <span className="text-default-400">{data?.from}</span>{' '}
+              <div>{data?.hitokoto}</div>
-              {data?.from_who}
+              <div className='text-right'>
-            </div>
+                —— <span className='text-default-400'>{data?.from}</span>{' '}
-          </>
+                {data?.from_who}
-        )}
+              </div>
+            </>
+          )}
       </div>
-      <div className="flex gap-2">
+      <div className='flex gap-2'>
-        <Tooltip content="刷新" placement="top">
+        <Tooltip content='刷新' placement='top'>
           <Button
             onPress={run}
-            size="sm"
+            size='sm'
             isLoading={loading}
             isIconOnly
-            radius="full"
+            radius='full'
-            color="primary"
+            color='primary'
-            variant="flat"
+            variant='flat'
           >
             <IoRefresh />
           </Button>
         </Tooltip>
-        <Tooltip content="复制" placement="top">
+        <Tooltip content='复制' placement='top'>
           <Button
             onPress={onCopy}
-            size="sm"
+            size='sm'
             isIconOnly
-            radius="full"
+            radius='full'
-            color="success"
+            color='success'
-            variant="flat"
+            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 { motion, useMotionValue, useSpring } from 'motion/react';
-import { useRef, useState } from '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 ref = useRef<HTMLDivElement>(null);
-  const x = useMotionValue(0)
+  const x = useMotionValue(0);
-  const y = useMotionValue(0)
+  const y = useMotionValue(0);
-  const rotateX = useSpring(useMotionValue(0), springValues)
+  const rotateX = useSpring(useMotionValue(0), springValues);
-  const rotateY = useSpring(useMotionValue(0), springValues)
+  const rotateY = useSpring(useMotionValue(0), springValues);
-  const scale = useSpring(1, springValues)
+  const scale = useSpring(1, springValues);
-  const opacity = useSpring(0)
+  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) {
+  function handleMouse (e: React.MouseEvent) {
-    if (!ref.current) return
+    if (!ref.current) return;
 
-    const rect = ref.current.getBoundingClientRect()
+    const rect = ref.current.getBoundingClientRect();
-    const offsetX = e.clientX - rect.left - rect.width / 2
+    const offsetX = e.clientX - rect.left - rect.width / 2;
-    const offsetY = e.clientY - rect.top - rect.height / 2
+    const offsetY = e.clientY - rect.top - rect.height / 2;
 
-    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude
+    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;
-    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude
+    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;
 
-    rotateX.set(rotationX)
+    rotateX.set(rotationX);
-    rotateY.set(rotationY)
+    rotateY.set(rotationY);
 
-    x.set(e.clientX - rect.left)
+    x.set(e.clientX - rect.left);
-    y.set(e.clientY - rect.top)
+    y.set(e.clientY - rect.top);
 
-    const velocityY = offsetY - lastY
+    const velocityY = offsetY - lastY;
-    rotateFigcaption.set(-velocityY * 0.6)
+    rotateFigcaption.set(-velocityY * 0.6);
-    setLastY(offsetY)
+    setLastY(offsetY);
   }
 
-  function handleMouseEnter() {
+  function handleMouseEnter () {
-    scale.set(scaleOnHover)
+    scale.set(scaleOnHover);
-    opacity.set(1)
+    opacity.set(1);
   }
 
-  function handleMouseLeave() {
+  function handleMouseLeave () {
-    opacity.set(0)
+    opacity.set(0);
-    scale.set(1)
+    scale.set(1);
-    rotateX.set(0)
+    rotateX.set(0);
-    rotateY.set(0)
+    rotateY.set(0);
-    rotateFigcaption.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

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

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

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

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

@@ -1,15 +1,15 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Card, CardBody, CardHeader } from '@heroui/card'
+import { Card, CardBody, CardHeader } from '@heroui/card';
-import { Select, SelectItem } from '@heroui/select'
+import { Select, SelectItem } from '@heroui/select';
-import type { Selection } from '@react-types/shared'
+import type { Selection } from '@react-types/shared';
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react';
 
-import { colorizeLogLevel } from '@/utils/terminal'
+import { colorizeLogLevel } from '@/utils/terminal';
 
-import PageLoading from '../page_loading'
+import PageLoading from '../page_loading';
-import XTerm from '../xterm'
+import XTerm from '../xterm';
-import type { XTermRef } from '../xterm'
+import type { XTermRef } from '../xterm';
-import LogLevelSelect from './log_level_select'
+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
+    logLoading,
-  } = props
+  } = props;
-  const Xterm = useRef<XTermRef>(null)
+  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)
+        const colored = colorizeLogLevel(line);
-        return colored
+        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')
+      .join('\r\n');
-    return logs
+    return logs;
-  }
+  };
 
   const onDownloadLog = () => {
     if (!logContent) {
-      return
+      return;
     }
-    const blob = new Blob([logContent], { type: 'text/plain' })
+    const blob = new Blob([logContent], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob)
+    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a')
+    const a = document.createElement('a');
-    a.href = url
+    a.href = url;
-    a.download = `${selectedLog}.log`
+    a.download = `${selectedLog}.log`;
-    a.click()
+    a.click();
-    URL.revokeObjectURL(url)
+    URL.revokeObjectURL(url);
-  }
+  };
 
   useEffect(() => {
     if (!Xterm.current || !logContent) {
-      return
+      return;
     }
-    Xterm.current.clear()
+    Xterm.current.clear();
-    const _logContent = logToColored(logContent)
+    const _logContent = logToColored(logContent);
-    Xterm.current.write(_logContent + '\r\nnapcat@webui:~$ ')
+    Xterm.current.write(_logContent + '\r\nnapcat@webui:~$ ');
-  }, [logContent, logLevel])
+  }, [logContent, logLevel]);
 
   return (
     <>
       <title>历史日志 - NapCat WebUI</title>
-      <Card className="max-w-full h-full bg-opacity-50 backdrop-blur-sm">
+      <Card className='max-w-full h-full bg-opacity-50 backdrop-blur-sm'>
-        <CardHeader className="flex-row justify-start gap-3">
+        <CardHeader className='flex-row justify-start gap-3'>
           <Select
-            label="选择日志"
+            label='选择日志'
-            size="sm"
+            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 { Chip } from '@heroui/chip';
-import { Select, SelectItem } from '@heroui/select'
+import { Select, SelectItem } from '@heroui/select';
-import { SharedSelection } from '@heroui/system'
+import { SharedSelection } from '@heroui/system';
-import type { Selection } from '@react-types/shared'
+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="日志级别"
+      label='日志级别'
-      selectionMode="multiple"
+      selectionMode='multiple'
-      aria-label="Log Level"
+      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

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

napcat.webui/src/components/napcat_repo_info.tsx

@@ -1,11 +1,11 @@
-import { Listbox, ListboxItem } from '@heroui/listbox'
+import { Listbox, ListboxItem } from '@heroui/listbox';
-import { Spinner } from '@heroui/spinner'
+import { Spinner } from '@heroui/spinner';
-import { useRequest } from 'ahooks'
+import { useRequest } from 'ahooks';
-import { MdError } from 'react-icons/md'
+import { MdError } from 'react-icons/md';
 
-import IconWrapper from '@/components/github_info/icon_wrapper'
+import IconWrapper from '@/components/github_info/icon_wrapper';
-import ItemCounter from '@/components/github_info/item_counter'
+import ItemCounter from '@/components/github_info/item_counter';
-import GithubRelease from '@/components/github_info/release'
+import GithubRelease from '@/components/github_info/release';
 import {
   BookIcon,
   BugIcon,
@@ -13,193 +13,197 @@ import {
   StarIcon,
   TagIcon,
   UsersIcon,
-  WatchersIcon
+  WatchersIcon,
-} from '@/components/icons'
+} from '@/components/icons';
 
-import { request } from '@/utils/request'
+import { request } from '@/utils/request';
-import { openUrl } from '@/utils/url'
+import { openUrl } from '@/utils/url';
 
 import type {
   GirhubRepo,
   GithubContributor,
   GithubPullRequest,
-  GithubRelease as GithubReleaseType
+  GithubRelease as GithubReleaseType,
-} from '@/types/github'
+} from '@/types/github';
 
-function displayData(data: number, loading: boolean, error?: Error) {
+function displayData (data: number, loading: boolean, error?: Error) {
   if (error) {
-    return <MdError className="text-primary-400" />
+    return <MdError className='text-primary-400' />;
   }
 
   if (loading) {
-    return <Spinner size="sm" />
+    return <Spinner size='sm' />;
   }
 
-  return <ItemCounter number={data} />
+  return <ItemCounter number={data} />;
 }
 
-export default function NapCatRepoInfo() {
+export default function NapCatRepoInfo () {
   // repo info
   const {
     data: repoOriData,
     error: repoError,
-    loading: repoLoading
+    loading: repoLoading,
   } = useRequest(() =>
     request.get<GirhubRepo>('https://api.github.com/repos/NapNeko/NapCatQQ')
-  )
+  );
 
   // release info
   const {
     data: releaseOriData,
     error: releaseError,
-    loading: releaseLoading
+    loading: releaseLoading,
   } = useRequest(() =>
     request.get<GithubReleaseType[]>(
       'https://api.github.com/repos/NapNeko/NapCatQQ/releases'
     )
-  )
+  );
 
   // pr info
   const {
     data: prData,
     error: prError,
-    loading: prLoading
+    loading: prLoading,
   } = useRequest(() =>
     request.get<GithubPullRequest[]>(
       'https://api.github.com/repos/NapNeko/NapCatQQ/pulls'
     )
-  )
+  );
 
   // contributors info
   const {
     data: contributorsData,
     error: contributorsError,
-    loading: contributorsLoading
+    loading: contributorsLoading,
   } = useRequest(() =>
     request.get<GithubContributor[]>(
       'https://api.github.com/repos/NapNeko/NapCatQQ/contributors'
     )
-  )
+  );
 
-  const repoData = repoOriData?.data
+  const repoData = repoOriData?.data;
-  const releaseData = releaseOriData?.data?.[0]
+  const releaseData = releaseOriData?.data?.[0];
-  const prCount = prData?.data?.length || 0
+  const prCount = prData?.data?.length || 0;
-  const contributorsCount = contributorsData?.data?.length || 0
+  const contributorsCount = contributorsData?.data?.length || 0;
 
-  const releaseCount = releaseOriData?.data?.length || 0
+  const releaseCount = releaseOriData?.data?.length || 0;
 
   return (
     <Listbox
-      aria-label="NapCat Repo Info"
+      aria-label='NapCat Repo Info'
-      className="p-0 gap-0 divide-y divide-default-300/50 dark:divide-default-100/80 bg-content1 max-w-[300px] overflow-visible shadow-small rounded-medium bg-opacity-50 backdrop-blur-sm"
+      className='p-0 gap-0 divide-y divide-default-300/50 dark:divide-default-100/80 bg-content1 max-w-[300px] overflow-visible shadow-small rounded-medium bg-opacity-50 backdrop-blur-sm'
       itemClasses={{
-        base: 'px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 data-[hover=true]:bg-default-100/80'
+        base: 'px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 data-[hover=true]:bg-default-100/80',
       }}
       onAction={(key: React.Key) => {
         switch (key) {
           case 'releases':
-            openUrl('https://github.com/NapNeko/NapCatQQ/releases', true)
+            openUrl('https://github.com/NapNeko/NapCatQQ/releases', true);
-            break
+            break;
           case 'contributors':
             openUrl(
               'https://github.com/NapNeko/NapCatQQ/graphs/contributors',
               true
-            )
+            );
-            break
+            break;
           case 'license':
             openUrl(
               'https://github.com/NapNeko/NapCatQQ/blob/main/LICENSE',
               true
-            )
+            );
-            break
+            break;
           case 'watchers':
-            openUrl('https://github.com/NapNeko/NapCatQQ/watchers', true)
+            openUrl('https://github.com/NapNeko/NapCatQQ/watchers', true);
-            break
+            break;
           case 'star':
-            openUrl('https://github.com/NapNeko/NapCatQQ/stargazers', true)
+            openUrl('https://github.com/NapNeko/NapCatQQ/stargazers', true);
-            break
+            break;
           case 'issues':
-            openUrl('https://github.com/NapNeko/NapCatQQ/issues', true)
+            openUrl('https://github.com/NapNeko/NapCatQQ/issues', true);
-            break
+            break;
           case 'pull_requests':
-            openUrl('https://github.com/NapNeko/NapCatQQ/pulls', true)
+            openUrl('https://github.com/NapNeko/NapCatQQ/pulls', true);
-            break
+            break;
           default:
-            openUrl('https://github.com/NapNeko/NapCatQQ', true)
+            openUrl('https://github.com/NapNeko/NapCatQQ', true);
         }
       }}
     >
       <ListboxItem
-        key="star"
+        key='star'
         endContent={displayData(
           repoData?.stargazers_count ?? 0,
           false,
           repoError
         )}
         startContent={
-          <IconWrapper className="bg-success/10 text-success">
+          <IconWrapper className='bg-success/10 text-success'>
-            <StarIcon className="text-lg" />
+            <StarIcon className='text-lg' />
           </IconWrapper>
         }
       >
         Star
       </ListboxItem>
       <ListboxItem
-        key="issues"
+        key='issues'
         endContent={displayData(
           repoData?.open_issues_count ?? 0,
           false,
           repoError
         )}
         startContent={
-          <IconWrapper className="bg-success/10 text-success">
+          <IconWrapper className='bg-success/10 text-success'>
-            <BugIcon className="text-lg" />
+            <BugIcon className='text-lg' />
           </IconWrapper>
         }
       >
         Issues
       </ListboxItem>
       <ListboxItem
-        key="pull_requests"
+        key='pull_requests'
         endContent={displayData(prCount, prLoading, prError)}
         startContent={
-          <IconWrapper className="bg-primary/10 text-primary">
+          <IconWrapper className='bg-primary/10 text-primary'>
-            <PullRequestIcon className="text-lg" />
+            <PullRequestIcon className='text-lg' />
           </IconWrapper>
         }
       >
         Pull Requests
       </ListboxItem>
       <ListboxItem
-        key="releases"
+        key='releases'
-        className="group h-auto py-3"
+        className='group h-auto py-3'
         endContent={
-          releaseError ? (
+          releaseError
-            <MdError className="text-primary-400" />
+            ? (
-          ) : releaseLoading ? (
+              <MdError className='text-primary-400' />
-            <Spinner size="sm" />
+            )
-          ) : (
+            : releaseLoading
-            <ItemCounter number={releaseCount} />
+              ? (
-          )
+                <Spinner size='sm' />
+              )
+              : (
+                <ItemCounter number={releaseCount} />
+              )
         }
         startContent={
-          <IconWrapper className="bg-primary/10 text-primary">
+          <IconWrapper className='bg-primary/10 text-primary'>
-            <TagIcon className="text-lg" />
+            <TagIcon className='text-lg' />
           </IconWrapper>
         }
-        textValue="Releases"
+        textValue='Releases'
       >
         {releaseData && <GithubRelease releaseData={releaseData} />}
       </ListboxItem>
       <ListboxItem
-        key="contributors"
+        key='contributors'
         endContent={displayData(
           contributorsCount,
           contributorsLoading,
           contributorsError
         )}
         startContent={
-          <IconWrapper className="bg-warning/10 text-warning">
+          <IconWrapper className='bg-warning/10 text-warning'>
             <UsersIcon />
           </IconWrapper>
         }
@@ -207,14 +211,14 @@ export default function NapCatRepoInfo() {
         Contributors
       </ListboxItem>
       <ListboxItem
-        key="watchers"
+        key='watchers'
         endContent={displayData(
           repoData?.watchers_count ?? 0,
           repoLoading,
           repoError
         )}
         startContent={
-          <IconWrapper className="bg-default/50 text-foreground">
+          <IconWrapper className='bg-default/50 text-foreground'>
             <WatchersIcon />
           </IconWrapper>
         }
@@ -222,14 +226,14 @@ export default function NapCatRepoInfo() {
         Watchers
       </ListboxItem>
       <ListboxItem
-        key="license"
+        key='license'
         endContent={
-          <span className="text-small text-default-400">
+          <span className='text-small text-default-400'>
             {repoData?.license?.name ?? 'unknown'}
           </span>
         }
         startContent={
-          <IconWrapper className="bg-primary/10 text-primary dark:text-primary-500">
+          <IconWrapper className='bg-primary/10 text-primary dark:text-primary-500'>
             <BookIcon />
           </IconWrapper>
         }
@@ -237,5 +241,5 @@ export default function NapCatRepoInfo() {
         License
       </ListboxItem>
     </Listbox>
-  )
+  );
 }

napcat.webui/src/components/network_edit/generic_form.tsx

@@ -1,87 +1,87 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Input } from '@heroui/input'
+import { Input } from '@heroui/input';
-import { ModalBody, ModalFooter } from '@heroui/modal'
+import { ModalBody, ModalFooter } from '@heroui/modal';
-import { Select, SelectItem } from '@heroui/select'
+import { Select, SelectItem } from '@heroui/select';
-import { ReactElement, useEffect } from 'react'
+import { ReactElement, useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form'
+import { Controller, useForm } from 'react-hook-form';
 import type {
   DefaultValues,
   Path,
   PathValue,
-  SubmitHandler
+  SubmitHandler,
-} from 'react-hook-form'
+} from 'react-hook-form';
-import toast from 'react-hot-toast'
+import toast from 'react-hot-toast';
 
-import SwitchCard from '../switch_card'
+import SwitchCard from '../switch_card';
 
-export type FieldTypes = 'input' | 'select' | 'switch'
+export type FieldTypes = 'input' | 'select' | 'switch';
 
-type NetworkConfigType = OneBotConfig['network']
+type NetworkConfigType = OneBotConfig['network'];
 
 export interface Field<T extends keyof OneBotConfig['network']> {
-  name: keyof NetworkConfigType[T][0]
+  name: keyof NetworkConfigType[T][0];
-  label: string
+  label: string;
-  type: FieldTypes
+  type: FieldTypes;
-  options?: Array<{ key: string; value: string }>
+  options?: Array<{ key: string; value: string; }>;
-  placeholder?: string
+  placeholder?: string;
-  isRequired?: boolean
+  isRequired?: boolean;
-  isDisabled?: boolean
+  isDisabled?: boolean;
-  description?: string
+  description?: string;
-  colSpan?: 1 | 2
+  colSpan?: 1 | 2;
 }
 
 export interface GenericFormProps<T extends keyof NetworkConfigType> {
-  data?: NetworkConfigType[T][0]
+  data?: NetworkConfigType[T][0];
-  defaultValues: DefaultValues<NetworkConfigType[T][0]>
+  defaultValues: DefaultValues<NetworkConfigType[T][0]>;
-  onClose: () => void
+  onClose: () => void;
-  onSubmit: (data: NetworkConfigType[T][0]) => Promise<void>
+  onSubmit: (data: NetworkConfigType[T][0]) => Promise<void>;
-  fields: Array<Field<T>>
+  fields: Array<Field<T>>;
 }
 
-const GenericForm = <T extends keyof NetworkConfigType>({
+const GenericForm = <T extends keyof NetworkConfigType> ({
   data,
   defaultValues,
   onClose,
   onSubmit,
-  fields
+  fields,
 }: GenericFormProps<T>): ReactElement => {
   const { control, handleSubmit, formState, setValue, reset } = useForm<
     NetworkConfigType[T][0]
   >({
-    defaultValues
+    defaultValues,
-  })
+  });
 
   const submitAction: SubmitHandler<NetworkConfigType[T][0]> = async (data) => {
-    await onSubmit(data)
+    await onSubmit(data);
-    onClose()
+    onClose();
-  }
+  };
 
   const _onSubmit = handleSubmit(submitAction, (e) => {
-    for (const error in e) {
+    const errors = Object.values(e);
-      toast.error(e[error]?.message as string)
+    if (errors.length > 0) {
-      return
+      toast.error(errors[0]?.message as string);
     }
-  })
+  });
 
   useEffect(() => {
     if (data) {
-      const keys = Object.keys(data) as Path<NetworkConfig[T][0]>[]
+      const keys = Object.keys(data) as Path<NetworkConfig[T][0]>[];
       for (const key of keys) {
         const value = data[key] as PathValue<
           NetworkConfig[T][0],
           Path<NetworkConfig[T][0]>
-        >
+        >;
-        setValue(key, value)
+        setValue(key, value);
       }
     } else {
-      reset()
+      reset();
     }
-  }, [data, reset, setValue])
+  }, [data, reset, setValue]);
 
   return (
     <>
       <ModalBody>
-        <div className="grid grid-cols-2 gap-y-4 gap-x-2 w-full">
+        <div className='grid grid-cols-2 gap-y-4 gap-x-2 w-full'>
           {fields.map((field) => (
             <div
               key={field.name as string}
@@ -93,9 +93,9 @@ const GenericForm = <T extends keyof NetworkConfigType>({
                 rules={
                   field.isRequired
                     ? {
-                        required: `请填写${field.label}`
+                      required: `请填写${field.label}`,
-                      }
+                    }
-                    : void 0
+                    : undefined
                 }
                 render={({ field: controllerField }) => {
                   switch (field.type) {
@@ -103,15 +103,14 @@ const GenericForm = <T extends keyof NetworkConfigType>({
                       return (
                         <Input
                           value={controllerField.value as string}
-                          onChange={controllerField.onChange}
+                          onValueChange={(value) => controllerField.onChange(value)}
-                          onBlur={controllerField.onBlur}
                           ref={controllerField.ref}
                           isRequired={field.isRequired}
                           isDisabled={field.isDisabled}
                           label={field.label}
                           placeholder={field.placeholder}
                         />
-                      )
+                      );
                     case 'select':
                       return (
                         <Select
@@ -129,7 +128,7 @@ const GenericForm = <T extends keyof NetworkConfigType>({
                             </SelectItem>
                           )) || <></>}
                         </Select>
-                      )
+                      );
                     case 'switch':
                       return (
                         <SwitchCard
@@ -138,9 +137,9 @@ const GenericForm = <T extends keyof NetworkConfigType>({
                           description={field.description}
                           label={field.label}
                         />
-                      )
+                      );
                     default:
-                      return <></>
+                      return <></>;
                   }
                 }}
               />
@@ -150,15 +149,15 @@ const GenericForm = <T extends keyof NetworkConfigType>({
       </ModalBody>
       <ModalFooter>
         <Button
-          color="primary"
+          color='primary'
           isDisabled={formState.isSubmitting}
-          variant="light"
+          variant='light'
           onPress={onClose}
         >
           关闭
         </Button>
         <Button
-          color="primary"
+          color='primary'
           isLoading={formState.isSubmitting}
           onPress={() => _onSubmit()}
         >
@@ -166,16 +165,16 @@ const GenericForm = <T extends keyof NetworkConfigType>({
         </Button>
       </ModalFooter>
     </>
-  )
+  );
-}
+};
 
-export default GenericForm
+export default GenericForm;
-export function random_token(length: number) {
+export function random_token (length: number) {
   const chars =
-    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()-_=+[]{}|;:,.<>?'
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()-_=+[]{}|;:,.<>?';
-  let result = ''
+  let result = '';
   for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length))
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
   }
-  return result
+  return result;
 }

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

@@ -1,5 +1,5 @@
-import GenericForm, { random_token } from './generic_form'
+import GenericForm, { random_token } from './generic_form';
-import type { Field } from './generic_form'
+import type { Field } from './generic_form';
 
 export interface HTTPClientFormProps {
   data?: OneBotConfig['network']['httpClients'][0]
@@ -7,12 +7,12 @@ export interface HTTPClientFormProps {
   onSubmit: (data: OneBotConfig['network']['httpClients'][0]) => Promise<void>
 }
 
-type HTTPClientFormType = OneBotConfig['network']['httpClients']
+type HTTPClientFormType = OneBotConfig['network']['httpClients'];
 
 const HTTPClientForm: React.FC<HTTPClientFormProps> = ({
   data,
   onClose,
-  onSubmit
+  onSubmit,
 }) => {
   const defaultValues: HTTPClientFormType[0] = {
     enable: false,
@@ -21,8 +21,8 @@ const HTTPClientForm: React.FC<HTTPClientFormProps> = ({
     reportSelfMessage: false,
     messagePostFormat: 'array',
     token: random_token(16),
-    debug: false
+    debug: false,
-  }
+  };
 
   const fields: Field<'httpClients'>[] = [
     {
@@ -30,14 +30,14 @@ const HTTPClientForm: React.FC<HTTPClientFormProps> = ({
       label: '启用',
       type: 'switch',
       description: '保存后启用此配置',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'debug',
       label: '开启Debug',
       type: 'switch',
       description: '是否开启调试模式',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'name',
@@ -45,21 +45,21 @@ const HTTPClientForm: React.FC<HTTPClientFormProps> = ({
       type: 'input',
       placeholder: '请输入名称',
       isRequired: true,
-      isDisabled: !!data
+      isDisabled: !!data,
     },
     {
       name: 'url',
       label: 'URL',
       type: 'input',
       placeholder: '请输入URL',
-      isRequired: true
+      isRequired: true,
     },
     {
       name: 'reportSelfMessage',
       label: '上报自身消息',
       type: 'switch',
       description: '是否上报自身消息',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'messagePostFormat',
@@ -69,17 +69,17 @@ const HTTPClientForm: React.FC<HTTPClientFormProps> = ({
       isRequired: true,
       options: [
         { key: 'array', value: 'Array' },
-        { key: 'string', value: 'String' }
+        { key: 'string', value: 'String' },
       ],
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'token',
       label: 'Token',
       type: 'input',
-      placeholder: '请输入Token'
+      placeholder: '请输入Token',
-    }
+    },
-  ]
+  ];
 
   return (
     <GenericForm
@@ -89,7 +89,7 @@ const HTTPClientForm: React.FC<HTTPClientFormProps> = ({
       onSubmit={onSubmit}
       fields={fields}
     />
-  )
+  );
-}
+};
 
-export default HTTPClientForm
+export default HTTPClientForm;

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

@@ -1,5 +1,5 @@
-import GenericForm, { random_token } from './generic_form'
+import GenericForm, { random_token } from './generic_form';
-import type { Field } from './generic_form'
+import type { Field } from './generic_form';
 
 export interface HTTPServerFormProps {
   data?: OneBotConfig['network']['httpServers'][0]
@@ -7,12 +7,12 @@ export interface HTTPServerFormProps {
   onSubmit: (data: OneBotConfig['network']['httpServers'][0]) => Promise<void>
 }
 
-type HTTPServerFormType = OneBotConfig['network']['httpServers']
+type HTTPServerFormType = OneBotConfig['network']['httpServers'];
 
 const HTTPServerForm: React.FC<HTTPServerFormProps> = ({
   data,
   onClose,
-  onSubmit
+  onSubmit,
 }) => {
   const defaultValues: HTTPServerFormType[0] = {
     enable: false,
@@ -23,8 +23,8 @@ const HTTPServerForm: React.FC<HTTPServerFormProps> = ({
     enableWebsocket: true,
     messagePostFormat: 'array',
     token: random_token(16),
-    debug: false
+    debug: false,
-  }
+  };
 
   const fields: Field<'httpServers'>[] = [
     {
@@ -32,14 +32,14 @@ const HTTPServerForm: React.FC<HTTPServerFormProps> = ({
       label: '启用',
       type: 'switch',
       description: '保存后启用此配置',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'debug',
       label: '开启Debug',
       type: 'switch',
       description: '是否开启调试模式',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'name',
@@ -47,35 +47,35 @@ const HTTPServerForm: React.FC<HTTPServerFormProps> = ({
       type: 'input',
       placeholder: '请输入名称',
       isRequired: true,
-      isDisabled: !!data
+      isDisabled: !!data,
     },
     {
       name: 'host',
       label: 'Host',
       type: 'input',
       placeholder: '请输入主机地址',
-      isRequired: true
+      isRequired: true,
     },
     {
       name: 'port',
       label: 'Port',
       type: 'input',
       placeholder: '请输入端口',
-      isRequired: true
+      isRequired: true,
     },
     {
       name: 'enableCors',
       label: '启用CORS',
       type: 'switch',
       description: '是否启用CORS跨域',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'enableWebsocket',
       label: '启用Websocket',
       type: 'switch',
       description: '是否启用Websocket',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'messagePostFormat',
@@ -85,16 +85,16 @@ const HTTPServerForm: React.FC<HTTPServerFormProps> = ({
       isRequired: true,
       options: [
         { key: 'array', value: 'Array' },
-        { key: 'string', value: 'String' }
+        { key: 'string', value: 'String' },
-      ]
+      ],
     },
     {
       name: 'token',
       label: 'Token',
       type: 'input',
-      placeholder: '请输入Token'
+      placeholder: '请输入Token',
-    }
+    },
-  ]
+  ];
 
   return (
     <GenericForm
@@ -104,7 +104,7 @@ const HTTPServerForm: React.FC<HTTPServerFormProps> = ({
       onSubmit={onSubmit}
       fields={fields}
     />
-  )
+  );
-}
+};
 
-export default HTTPServerForm
+export default HTTPServerForm;

napcat.webui/src/components/network_edit/http_sse.tsx

@@ -1,5 +1,5 @@
-import GenericForm, { random_token } from './generic_form'
+import GenericForm, { random_token } from './generic_form';
-import type { Field } from './generic_form'
+import type { Field } from './generic_form';
 
 export interface HTTPServerSSEFormProps {
   data?: OneBotConfig['network']['httpSseServers'][0]
@@ -9,12 +9,12 @@ export interface HTTPServerSSEFormProps {
   ) => Promise<void>
 }
 
-type HTTPServerSSEFormType = OneBotConfig['network']['httpSseServers']
+type HTTPServerSSEFormType = OneBotConfig['network']['httpSseServers'];
 
 const HTTPServerSSEForm: React.FC<HTTPServerSSEFormProps> = ({
   data,
   onClose,
-  onSubmit
+  onSubmit,
 }) => {
   const defaultValues: HTTPServerSSEFormType[0] = {
     enable: false,
@@ -26,8 +26,8 @@ const HTTPServerSSEForm: React.FC<HTTPServerSSEFormProps> = ({
     messagePostFormat: 'array',
     token: random_token(16),
     debug: false,
-    reportSelfMessage: false
+    reportSelfMessage: false,
-  }
+  };
 
   const fields: Field<'httpSseServers'>[] = [
     {
@@ -35,14 +35,14 @@ const HTTPServerSSEForm: React.FC<HTTPServerSSEFormProps> = ({
       label: '启用',
       type: 'switch',
       description: '保存后启用此配置',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'debug',
       label: '开启Debug',
       type: 'switch',
       description: '是否开启调试模式',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'name',
@@ -50,35 +50,35 @@ const HTTPServerSSEForm: React.FC<HTTPServerSSEFormProps> = ({
       type: 'input',
       placeholder: '请输入名称',
       isRequired: true,
-      isDisabled: !!data
+      isDisabled: !!data,
     },
     {
       name: 'host',
       label: 'Host',
       type: 'input',
       placeholder: '请输入主机地址',
-      isRequired: true
+      isRequired: true,
     },
     {
       name: 'port',
       label: 'Port',
       type: 'input',
       placeholder: '请输入端口',
-      isRequired: true
+      isRequired: true,
     },
     {
       name: 'enableCors',
       label: '启用CORS',
       type: 'switch',
       description: '是否启用CORS跨域',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'enableWebsocket',
       label: '启用Websocket',
       type: 'switch',
       description: '是否启用Websocket',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'messagePostFormat',
@@ -88,23 +88,23 @@ const HTTPServerSSEForm: React.FC<HTTPServerSSEFormProps> = ({
       isRequired: true,
       options: [
         { key: 'array', value: 'Array' },
-        { key: 'string', value: 'String' }
+        { key: 'string', value: 'String' },
-      ]
+      ],
     },
     {
       name: 'token',
       label: 'Token',
       type: 'input',
-      placeholder: '请输入Token'
+      placeholder: '请输入Token',
     },
     {
       name: 'reportSelfMessage',
       label: '上报自身消息',
       type: 'switch',
       description: '是否上报自身消息',
-      colSpan: 1
+      colSpan: 1,
-    }
+    },
-  ]
+  ];
 
   return (
     <GenericForm
@@ -114,7 +114,7 @@ const HTTPServerSSEForm: React.FC<HTTPServerSSEFormProps> = ({
       onSubmit={onSubmit}
       fields={fields}
     />
-  )
+  );
-}
+};
 
-export default HTTPServerSSEForm
+export default HTTPServerSSEForm;

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

@@ -1,54 +1,54 @@
-import { Modal, ModalContent, ModalHeader } from '@heroui/modal'
+import { Modal, ModalContent, ModalHeader } from '@heroui/modal';
-import toast from 'react-hot-toast'
+import toast from 'react-hot-toast';
 
-import useConfig from '@/hooks/use-config'
+import useConfig from '@/hooks/use-config';
 
-import HTTPClientForm from './http_client'
+import HTTPClientForm from './http_client';
-import HTTPServerForm from './http_server'
+import HTTPServerForm from './http_server';
-import HTTPServerSSEForm from './http_sse'
+import HTTPServerSSEForm from './http_sse';
-import WebsocketClientForm from './ws_client'
+import WebsocketClientForm from './ws_client';
-import WebsocketServerForm from './ws_server'
+import WebsocketServerForm from './ws_server';
 
 const modalTitle = {
   httpServers: 'HTTP Server',
   httpClients: 'HTTP Client',
   httpSseServers: 'HTTP SSE Server',
   websocketServers: 'Websocket Server',
-  websocketClients: 'Websocket Client'
+  websocketClients: 'Websocket Client',
-}
+};
 
 export interface NetworkFormModalProps<
   T extends keyof OneBotConfig['network']
 > {
-  isOpen: boolean
+  isOpen: boolean;
-  field: T
+  field: T;
-  data?: OneBotConfig['network'][T][0]
+  data?: OneBotConfig['network'][T][0];
-  onOpenChange: (isOpen: boolean) => void
+  onOpenChange: (isOpen: boolean) => void;
 }
 
-const NetworkFormModal = <T extends keyof OneBotConfig['network']>(
+const NetworkFormModal = <T extends keyof OneBotConfig['network']> (
   props: NetworkFormModalProps<T>
 ) => {
-  const { isOpen, onOpenChange, field, data } = props
+  const { isOpen, onOpenChange, field, data } = props;
-  const { createNetworkConfig, updateNetworkConfig } = useConfig()
+  const { createNetworkConfig, updateNetworkConfig } = useConfig();
-  const isCreate = !data
+  const isCreate = !data;
 
   const onSubmit = async (data: OneBotConfig['network'][typeof field][0]) => {
     try {
       if (isCreate) {
-        await createNetworkConfig(field, data)
+        await createNetworkConfig(field, data);
       } else {
-        await updateNetworkConfig(field, data)
+        await updateNetworkConfig(field, data);
       }
-      toast.success('保存配置成功')
+      toast.success('保存配置成功');
     } catch (error) {
-      const msg = (error as Error).message
+      const msg = (error as Error).message;
 
-      toast.error(`保存配置失败: ${msg}`)
+      toast.error(`保存配置失败: ${msg}`);
 
-      throw error
+      throw error;
     }
-  }
+  };
 
   const renderFormComponent = (onClose: () => void) => {
     switch (field) {
@@ -59,7 +59,7 @@ const NetworkFormModal = <T extends keyof OneBotConfig['network']>(
             onClose={onClose}
             onSubmit={onSubmit}
           />
-        )
+        );
       case 'httpClients':
         return (
           <HTTPClientForm
@@ -67,7 +67,7 @@ const NetworkFormModal = <T extends keyof OneBotConfig['network']>(
             onClose={onClose}
             onSubmit={onSubmit}
           />
-        )
+        );
       case 'websocketServers':
         return (
           <WebsocketServerForm
@@ -75,7 +75,7 @@ const NetworkFormModal = <T extends keyof OneBotConfig['network']>(
             onClose={onClose}
             onSubmit={onSubmit}
           />
-        )
+        );
       case 'websocketClients':
         return (
           <WebsocketClientForm
@@ -83,7 +83,7 @@ const NetworkFormModal = <T extends keyof OneBotConfig['network']>(
             onClose={onClose}
             onSubmit={onSubmit}
           />
-        )
+        );
       case 'httpSseServers':
         return (
           <HTTPServerSSEForm
@@ -91,25 +91,25 @@ const NetworkFormModal = <T extends keyof OneBotConfig['network']>(
             onClose={onClose}
             onSubmit={onSubmit}
           />
-        )
+        );
       default:
-        return null
+        return null;
     }
-  }
+  };
 
   return (
     <Modal
-      backdrop="blur"
+      backdrop='blur'
       isDismissable={false}
       isOpen={isOpen}
-      size="lg"
+      size='lg'
-      scrollBehavior="outside"
+      scrollBehavior='outside'
       onOpenChange={onOpenChange}
     >
       <ModalContent>
         {(onClose) => (
           <>
-            <ModalHeader className="flex flex-col gap-1">
+            <ModalHeader className='flex flex-col gap-1'>
               {modalTitle[field]}
             </ModalHeader>
             {renderFormComponent(onClose)}
@@ -117,7 +117,7 @@ const NetworkFormModal = <T extends keyof OneBotConfig['network']>(
         )}
       </ModalContent>
     </Modal>
-  )
+  );
-}
+};
 
-export default NetworkFormModal
+export default NetworkFormModal;

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

@@ -1,5 +1,5 @@
-import GenericForm, { random_token } from './generic_form'
+import GenericForm, { random_token } from './generic_form';
-import type { Field } from './generic_form'
+import type { Field } from './generic_form';
 
 export interface WebsocketClientFormProps {
   data?: OneBotConfig['network']['websocketClients'][0]
@@ -9,12 +9,12 @@ export interface WebsocketClientFormProps {
   ) => Promise<void>
 }
 
-type WebsocketClientFormType = OneBotConfig['network']['websocketClients']
+type WebsocketClientFormType = OneBotConfig['network']['websocketClients'];
 
 const WebsocketClientForm: React.FC<WebsocketClientFormProps> = ({
   data,
   onClose,
-  onSubmit
+  onSubmit,
 }) => {
   const defaultValues: WebsocketClientFormType[0] = {
     enable: false,
@@ -25,8 +25,8 @@ const WebsocketClientForm: React.FC<WebsocketClientFormProps> = ({
     token: random_token(16),
     debug: false,
     heartInterval: 30000,
-    reconnectInterval: 30000
+    reconnectInterval: 30000,
-  }
+  };
 
   const fields: Field<'websocketClients'>[] = [
     {
@@ -34,14 +34,14 @@ const WebsocketClientForm: React.FC<WebsocketClientFormProps> = ({
       label: '启用',
       type: 'switch',
       description: '保存后启用此配置',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'debug',
       label: '开启Debug',
       type: 'switch',
       description: '是否开启调试模式',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'name',
@@ -49,21 +49,21 @@ const WebsocketClientForm: React.FC<WebsocketClientFormProps> = ({
       type: 'input',
       placeholder: '请输入名称',
       isRequired: true,
-      isDisabled: !!data
+      isDisabled: !!data,
     },
     {
       name: 'url',
       label: 'URL',
       type: 'input',
       placeholder: '请输入URL',
-      isRequired: true
+      isRequired: true,
     },
     {
       name: 'reportSelfMessage',
       label: '上报自身消息',
       type: 'switch',
       description: '是否上报自身消息',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'messagePostFormat',
@@ -73,15 +73,15 @@ const WebsocketClientForm: React.FC<WebsocketClientFormProps> = ({
       isRequired: true,
       options: [
         { key: 'array', value: 'Array' },
-        { key: 'string', value: 'String' }
+        { key: 'string', value: 'String' },
       ],
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'token',
       label: 'Token',
       type: 'input',
-      placeholder: '请输入Token'
+      placeholder: '请输入Token',
     },
     {
       name: 'heartInterval',
@@ -89,7 +89,7 @@ const WebsocketClientForm: React.FC<WebsocketClientFormProps> = ({
       type: 'input',
       placeholder: '请输入心跳间隔',
       isRequired: true,
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'reconnectInterval',
@@ -97,9 +97,9 @@ const WebsocketClientForm: React.FC<WebsocketClientFormProps> = ({
       type: 'input',
       placeholder: '请输入重连间隔',
       isRequired: true,
-      colSpan: 1
+      colSpan: 1,
-    }
+    },
-  ]
+  ];
 
   return (
     <GenericForm
@@ -109,7 +109,7 @@ const WebsocketClientForm: React.FC<WebsocketClientFormProps> = ({
       onSubmit={onSubmit}
       fields={fields}
     />
-  )
+  );
-}
+};
 
-export default WebsocketClientForm
+export default WebsocketClientForm;

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

@@ -1,5 +1,5 @@
-import GenericForm, { random_token } from './generic_form'
+import GenericForm, { random_token } from './generic_form';
-import type { Field } from './generic_form'
+import type { Field } from './generic_form';
 
 export interface WebsocketServerFormProps {
   data?: OneBotConfig['network']['websocketServers'][0]
@@ -9,12 +9,12 @@ export interface WebsocketServerFormProps {
   ) => Promise<void>
 }
 
-type WebsocketServerFormType = OneBotConfig['network']['websocketServers']
+type WebsocketServerFormType = OneBotConfig['network']['websocketServers'];
 
 const WebsocketServerForm: React.FC<WebsocketServerFormProps> = ({
   data,
   onClose,
-  onSubmit
+  onSubmit,
 }) => {
   const defaultValues: WebsocketServerFormType[0] = {
     enable: false,
@@ -26,8 +26,8 @@ const WebsocketServerForm: React.FC<WebsocketServerFormProps> = ({
     messagePostFormat: 'array',
     token: random_token(16),
     debug: false,
-    heartInterval: 30000
+    heartInterval: 30000,
-  }
+  };
 
   const fields: Field<'websocketServers'>[] = [
     {
@@ -35,14 +35,14 @@ const WebsocketServerForm: React.FC<WebsocketServerFormProps> = ({
       label: '启用',
       type: 'switch',
       description: '保存后启用此配置',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'debug',
       label: '开启Debug',
       type: 'switch',
       description: '是否开启调试模式',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'name',
@@ -50,14 +50,14 @@ const WebsocketServerForm: React.FC<WebsocketServerFormProps> = ({
       type: 'input',
       placeholder: '请输入名称',
       isRequired: true,
-      isDisabled: !!data
+      isDisabled: !!data,
     },
     {
       name: 'host',
       label: 'Host',
       type: 'input',
       placeholder: '请输入主机地址',
-      isRequired: true
+      isRequired: true,
     },
     {
       name: 'port',
@@ -65,7 +65,7 @@ const WebsocketServerForm: React.FC<WebsocketServerFormProps> = ({
       type: 'input',
       placeholder: '请输入端口',
       isRequired: true,
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'messagePostFormat',
@@ -75,38 +75,38 @@ const WebsocketServerForm: React.FC<WebsocketServerFormProps> = ({
       isRequired: true,
       options: [
         { key: 'array', value: 'Array' },
-        { key: 'string', value: 'String' }
+        { key: 'string', value: 'String' },
       ],
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'reportSelfMessage',
       label: '上报自身消息',
       type: 'switch',
       description: '是否上报自身消息',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'enableForcePushEvent',
       label: '强制推送事件',
       type: 'switch',
       description: '是否强制推送事件',
-      colSpan: 1
+      colSpan: 1,
     },
     {
       name: 'token',
       label: 'Token',
       type: 'input',
-      placeholder: '请输入Token'
+      placeholder: '请输入Token',
     },
     {
       name: 'heartInterval',
       label: '心跳间隔',
       type: 'input',
       placeholder: '请输入心跳间隔',
-      isRequired: true
+      isRequired: true,
-    }
+    },
-  ]
+  ];
 
   return (
     <GenericForm
@@ -116,7 +116,7 @@ const WebsocketServerForm: React.FC<WebsocketServerFormProps> = ({
       onSubmit={onSubmit}
       fields={fields}
     />
-  )
+  );
-}
+};
 
-export default WebsocketServerForm
+export default WebsocketServerForm;

napcat.webui/src/components/onebot/api/debug.tsx

@@ -1,133 +1,131 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Card, CardBody, CardHeader } from '@heroui/card'
+import { Card, CardBody, CardHeader } from '@heroui/card';
-import { Input } from '@heroui/input'
+import { Input } from '@heroui/input';
-import { Snippet } from '@heroui/snippet'
+import { Snippet } from '@heroui/snippet';
-import { useLocalStorage } from '@uidotdev/usehooks'
+import { useLocalStorage } from '@uidotdev/usehooks';
-import { motion } from 'motion/react'
+import { motion } from 'motion/react';
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react';
-import toast from 'react-hot-toast'
+import toast from 'react-hot-toast';
-import { IoLink, IoSend } from 'react-icons/io5'
+import { IoLink, IoSend } from 'react-icons/io5';
-import { PiCatDuotone } from 'react-icons/pi'
+import { PiCatDuotone } from 'react-icons/pi';
 
-import key from '@/const/key'
+import key from '@/const/key';
-import { OneBotHttpApiContent, OneBotHttpApiPath } from '@/const/ob_api'
+import { OneBotHttpApiContent, OneBotHttpApiPath } from '@/const/ob_api';
 
-import ChatInputModal from '@/components/chat_input/modal'
+import ChatInputModal from '@/components/chat_input/modal';
-import CodeEditor from '@/components/code_editor'
+import CodeEditor from '@/components/code_editor';
-import PageLoading from '@/components/page_loading'
+import PageLoading from '@/components/page_loading';
 
-import { request } from '@/utils/request'
+import { request } from '@/utils/request';
-import { parseAxiosResponse } from '@/utils/url'
+import { parseAxiosResponse } from '@/utils/url';
-import { generateDefaultJson, parse } from '@/utils/zod'
+import { generateDefaultJson, parse } from '@/utils/zod';
 
-import DisplayStruct from './display_struct'
+import DisplayStruct from './display_struct';
 
 export interface OneBotApiDebugProps {
-  path: OneBotHttpApiPath
+  path: OneBotHttpApiPath;
-  data: OneBotHttpApiContent
+  data: OneBotHttpApiContent;
 }
 
 const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
-  const { path, data } = props
+  const { path, data } = props;
-  const currentURL = new URL(window.location.origin)
+  const currentURL = new URL(window.location.origin);
-  currentURL.port = '3000'
+  currentURL.port = '3000';
-  const defaultHttpUrl = currentURL.href
+  const defaultHttpUrl = currentURL.href;
   const [httpConfig, setHttpConfig] = useLocalStorage(key.httpDebugConfig, {
     url: defaultHttpUrl,
-    token: ''
+    token: '',
-  })
+  });
-  const [requestBody, setRequestBody] = useState('{}')
+  const [requestBody, setRequestBody] = useState('{}');
-  const [responseContent, setResponseContent] = useState('')
+  const [responseContent, setResponseContent] = useState('');
-  const [isCodeEditorOpen, setIsCodeEditorOpen] = useState(false)
+  const [isCodeEditorOpen, setIsCodeEditorOpen] = useState(false);
-  const [isResponseOpen, setIsResponseOpen] = useState(false)
+  const [isResponseOpen, setIsResponseOpen] = useState(false);
-  const [isFetching, setIsFetching] = useState(false)
+  const [isFetching, setIsFetching] = useState(false);
-  const responseRef = useRef<HTMLDivElement>(null)
+  const responseRef = useRef<HTMLDivElement>(null);
-  const parsedRequest = parse(data.request)
+  const parsedRequest = parse(data.request);
-  const parsedResponse = parse(data.response)
+  const parsedResponse = parse(data.response);
 
   const sendRequest = async () => {
-    if (isFetching) return
+    if (isFetching) return;
-    setIsFetching(true)
+    setIsFetching(true);
-    const r = toast.loading('正在发送请求...')
+    const r = toast.loading('正在发送请求...');
     try {
-      const parsedRequestBody = JSON.parse(requestBody)
+      const parsedRequestBody = JSON.parse(requestBody);
-      const requestURL = new URL(httpConfig.url)
+      const requestURL = new URL(httpConfig.url);
-      requestURL.pathname = path
+      requestURL.pathname = path;
       request
         .post(requestURL.href, parsedRequestBody, {
           headers: {
-            Authorization: `Bearer ${httpConfig.token}`
+            Authorization: `Bearer ${httpConfig.token}`,
           },
-          responseType: 'text'
+          responseType: 'text',
         })
         .then((res) => {
-          setResponseContent(parseAxiosResponse(res))
+          setResponseContent(parseAxiosResponse(res));
-          toast.success('请求发送完成，请查看响应')
+          toast.success('请求发送完成，请查看响应');
         })
         .catch((err) => {
-          toast.error('请求发送失败：' + err.message)
+          toast.error('请求发送失败：' + err.message);
-          setResponseContent(parseAxiosResponse(err.response))
+          setResponseContent(parseAxiosResponse(err.response));
         })
         .finally(() => {
-          setIsFetching(false)
+          setIsFetching(false);
-          setIsResponseOpen(true)
+          setIsResponseOpen(true);
           responseRef.current?.scrollIntoView({
             behavior: 'smooth',
-            block: 'start'
+            block: 'start',
-          })
+          });
-          toast.dismiss(r)
+          toast.dismiss(r);
-        })
+        });
-    } catch (error) {
+    } catch (_error) {
-      toast.error('请求体 JSON 格式错误')
+      toast.error('请求体 JSON 格式错误');
-      setIsFetching(false)
+      setIsFetching(false);
-      toast.dismiss(r)
+      toast.dismiss(r);
     }
-  }
+  };
 
   useEffect(() => {
-    setRequestBody(generateDefaultJson(data.request))
+    setRequestBody(generateDefaultJson(data.request));
-    setResponseContent('')
+    setResponseContent('');
-  }, [path])
+  }, [path]);
 
   return (
-    <section className="p-4 pt-14 rounded-lg shadow-md">
+    <section className='p-4 pt-14 rounded-lg shadow-md'>
-      <h1 className="text-2xl font-bold mb-4 flex items-center gap-1 text-primary-400">
+      <h1 className='text-2xl font-bold mb-4 flex items-center gap-1 text-primary-400'>
         <PiCatDuotone />
         {data.description}
       </h1>
-      <h1 className="text-lg font-bold mb-4">
+      <h1 className='text-lg font-bold mb-4'>
         <Snippet
-          className="bg-default-50 bg-opacity-50 backdrop-blur-md"
+          className='bg-default-50 bg-opacity-50 backdrop-blur-md'
-          symbol={<IoLink size={18} className="inline-block mr-1" />}
+          symbol={<IoLink size={18} className='inline-block mr-1' />}
           tooltipProps={{
-            content: '点击复制地址'
+            content: '点击复制地址',
           }}
         >
           {path}
         </Snippet>
       </h1>
-      <div className="flex gap-2 items-center">
+      <div className='flex gap-2 items-center'>
         <Input
-          label="HTTP URL"
+          label='HTTP URL'
-          placeholder="输入 HTTP URL"
+          placeholder='输入 HTTP URL'
           value={httpConfig.url}
           onChange={(e) =>
-            setHttpConfig({ ...httpConfig, url: e.target.value })
+            setHttpConfig({ ...httpConfig, url: e.target.value })}
-          }
         />
         <Input
-          label="Token"
+          label='Token'
-          placeholder="输入 Token"
+          placeholder='输入 Token'
           value={httpConfig.token}
           onChange={(e) =>
-            setHttpConfig({ ...httpConfig, token: e.target.value })
+            setHttpConfig({ ...httpConfig, token: e.target.value })}
-          }
         />
         <Button
           onPress={sendRequest}
-          color="primary"
+          color='primary'
-          size="lg"
+          size='lg'
-          radius="full"
+          radius='full'
           isIconOnly
           isDisabled={isFetching}
         >
@@ -135,17 +133,17 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
         </Button>
       </div>
       <Card
-        shadow="sm"
+        shadow='sm'
-        className="my-4 bg-opacity-50 backdrop-blur-md overflow-visible"
+        className='my-4 bg-opacity-50 backdrop-blur-md overflow-visible'
       >
-        <CardHeader className="font-bold text-lg gap-1 pb-0">
+        <CardHeader className='font-bold text-lg gap-1 pb-0'>
-          <span className="mr-2">请求体</span>
+          <span className='mr-2'>请求体</span>
           <Button
-            color="warning"
+            color='warning'
-            variant="flat"
+            variant='flat'
             onPress={() => setIsCodeEditorOpen(!isCodeEditorOpen)}
-            size="sm"
+            size='sm'
-            radius="full"
+            radius='full'
           >
             {isCodeEditorOpen ? '收起' : '展开'}
           </Button>
@@ -156,24 +154,23 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
             initial={{ opacity: 0, height: 0 }}
             animate={{
               opacity: isCodeEditorOpen ? 1 : 0,
-              height: isCodeEditorOpen ? 'auto' : 0
+              height: isCodeEditorOpen ? 'auto' : 0,
             }}
           >
             <CodeEditor
               value={requestBody}
               onChange={(value) => setRequestBody(value ?? '')}
-              language="json"
+              language='json'
-              height="400px"
+              height='400px'
             />
 
-            <div className="flex justify-end gap-1">
+            <div className='flex justify-end gap-1'>
               <ChatInputModal />
               <Button
-                color="primary"
+                color='primary'
-                variant="flat"
+                variant='flat'
                 onPress={() =>
-                  setRequestBody(generateDefaultJson(data.request))
+                  setRequestBody(generateDefaultJson(data.request))}
-                }
               >
                 填充示例请求体
               </Button>
@@ -182,61 +179,61 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
         </CardBody>
       </Card>
       <Card
-        shadow="sm"
+        shadow='sm'
-        className="my-4 relative bg-opacity-50 backdrop-blur-md"
+        className='my-4 relative bg-opacity-50 backdrop-blur-md'
       >
         <PageLoading loading={isFetching} />
-        <CardHeader className="font-bold text-lg gap-1 pb-0">
+        <CardHeader className='font-bold text-lg gap-1 pb-0'>
-          <span className="mr-2">响应</span>
+          <span className='mr-2'>响应</span>
           <Button
-            color="warning"
+            color='warning'
-            variant="flat"
+            variant='flat'
             onPress={() => setIsResponseOpen(!isResponseOpen)}
-            size="sm"
+            size='sm'
-            radius="full"
+            radius='full'
           >
             {isResponseOpen ? '收起' : '展开'}
           </Button>
           <Button
-            color="success"
+            color='success'
-            variant="flat"
+            variant='flat'
             onPress={() => {
-              navigator.clipboard.writeText(responseContent)
+              navigator.clipboard.writeText(responseContent);
-              toast.success('响应内容已复制到剪贴板')
+              toast.success('响应内容已复制到剪贴板');
             }}
-            size="sm"
+            size='sm'
-            radius="full"
+            radius='full'
           >
             复制
           </Button>
         </CardHeader>
         <CardBody>
           <motion.div
-            className="overflow-y-auto text-sm"
+            className='overflow-y-auto text-sm'
             initial={{ opacity: 0, height: 0 }}
             animate={{
               opacity: isResponseOpen ? 1 : 0,
-              height: isResponseOpen ? 300 : 0
+              height: isResponseOpen ? 300 : 0,
             }}
           >
             <pre>
               <code>
                 {responseContent || (
-                  <div className="text-gray-400">暂无响应</div>
+                  <div className='text-gray-400'>暂无响应</div>
                 )}
               </code>
             </pre>
           </motion.div>
         </CardBody>
       </Card>
-      <div className="p-2 md:p-4 border border-default-50 dark:border-default-200 rounded-lg backdrop-blur-sm">
+      <div className='p-2 md:p-4 border border-default-50 dark:border-default-200 rounded-lg backdrop-blur-sm'>
-        <h2 className="text-xl font-semibold mb-2">请求体结构</h2>
+        <h2 className='text-xl font-semibold mb-2'>请求体结构</h2>
         <DisplayStruct schema={parsedRequest} />
-        <h2 className="text-xl font-semibold mt-4 mb-2">响应体结构</h2>
+        <h2 className='text-xl font-semibold mt-4 mb-2'>响应体结构</h2>
         <DisplayStruct schema={parsedResponse} />
       </div>
     </section>
-  )
+  );
-}
+};
 
-export default OneBotApiDebug
+export default OneBotApiDebug;

napcat.webui/src/components/onebot/api/display_struct.tsx

@@ -1,11 +1,11 @@
-import { Chip } from '@heroui/chip'
+import { Chip } from '@heroui/chip';
-import { Tooltip } from '@heroui/tooltip'
+import { Tooltip } from '@heroui/tooltip';
-import { motion } from 'motion/react'
+import { motion } from 'motion/react';
-import React, { useState } from 'react'
+import React, { useState } from 'react';
-import toast from 'react-hot-toast'
+import toast from 'react-hot-toast';
-import { TbSquareRoundedChevronRightFilled } from 'react-icons/tb'
+import { TbSquareRoundedChevronRightFilled } from 'react-icons/tb';
 
-import type { LiteralValue, ParsedSchema } from '@/utils/zod'
+import type { LiteralValue, ParsedSchema } from '@/utils/zod';
 
 interface DisplayStructProps {
   schema: ParsedSchema | ParsedSchema[]
@@ -13,84 +13,86 @@ interface DisplayStructProps {
 
 const SchemaType = ({
   type,
-  value
+  value,
 }: {
   type: string
   value?: LiteralValue
 }) => {
-  let name = type
+  let name = type;
   switch (type) {
     case 'union':
-      name = '联合类型'
+      name = '联合类型';
-      break
+      break;
     case 'value':
-      name = '固定值'
+      name = '固定值';
-      break
+      break;
   }
   let chipColor: 'primary' | 'success' | 'primary' | 'warning' | 'secondary' =
-    'primary'
+    'primary';
   switch (type) {
     case 'enum':
-      chipColor = 'warning'
+      chipColor = 'warning';
-      break
+      break;
     case 'union':
-      chipColor = 'secondary'
+      chipColor = 'secondary';
-      break
+      break;
     case 'array':
-      chipColor = 'primary'
+      chipColor = 'primary';
-      break
+      break;
     case 'object':
-      chipColor = 'success'
+      chipColor = 'success';
-      break
+      break;
   }
 
   return (
-    <Chip size="sm" color={chipColor} variant="flat">
+    <Chip size='sm' color={chipColor} variant='flat'>
       {name}
       {type === 'value' && (
-        <span className="px-1 rounded-full bg-primary-400 text-white ml-1">
+        <span className='px-1 rounded-full bg-primary-400 text-white ml-1'>
           {value}
         </span>
       )}
     </Chip>
-  )
+  );
-}
+};
 
 const SchemaLabel: React.FC<{
   schema: ParsedSchema
 }> = ({ schema }) => (
   <>
-    {Array.isArray(schema.type) ? (
+    {Array.isArray(schema.type)
-      schema.type.map((type) => (
+      ? (
-        <SchemaType key={type} type={type} value={schema?.value} />
+        schema.type.map((type) => (
-      ))
+          <SchemaType key={type} type={type} value={schema?.value} />
-    ) : (
+        ))
-      <SchemaType type={schema.type} value={schema?.value} />
+      )
-    )}
+      : (
+        <SchemaType type={schema.type} value={schema?.value} />
+      )}
     {schema.optional && (
-      <Chip size="sm" color="default" variant="flat">
+      <Chip size='sm' color='default' variant='flat'>
         可选
       </Chip>
     )}
     {schema.description && (
-      <span className="text-xs text-default-400">{schema.description}</span>
+      <span className='text-xs text-default-400'>{schema.description}</span>
     )}
   </>
-)
+);
 
 const SchemaContainer: React.FC<{
   schema: ParsedSchema
   children: React.ReactNode
 }> = ({ schema, children }) => {
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(false);
 
-  const toggleExpand = () => setExpanded(!expanded)
+  const toggleExpand = () => setExpanded(!expanded);
 
   return (
-    <div className="mb-2">
+    <div className='mb-2'>
       <div
         onClick={toggleExpand}
-        className="md:cursor-pointer flex items-center gap-1"
+        className='md:cursor-pointer flex items-center gap-1'
       >
         <motion.div
           initial={{ rotate: 0 }}
@@ -98,13 +100,13 @@ const SchemaContainer: React.FC<{
         >
           <TbSquareRoundedChevronRightFilled />
         </motion.div>
-        <Tooltip content="点击复制" placement="top" showArrow>
+        <Tooltip content='点击复制' placement='top' showArrow>
           <span
-            className="border-b border-transparent border-dashed hover:border-primary-400"
+            className='border-b border-transparent border-dashed hover:border-primary-400'
             onClick={(e) => {
-              e.stopPropagation()
+              e.stopPropagation();
-              navigator.clipboard.writeText(schema.name || '')
+              navigator.clipboard.writeText(schema.name || '');
-              toast.success('已复制')
+              toast.success('已复制');
             }}
           >
             {schema.name}
@@ -113,30 +115,32 @@ const SchemaContainer: React.FC<{
         <SchemaLabel schema={schema} />
       </div>
       <motion.div
-        className="ml-5 overflow-hidden"
+        className='ml-5 overflow-hidden'
         initial={{ opacity: 0, height: 0 }}
         animate={{ opacity: expanded ? 1 : 0, height: expanded ? 'auto' : 0 }}
       >
-        <div className="h-2"></div>
+        <div className='h-2' />
         {children}
       </motion.div>
     </div>
-  )
+  );
-}
+};
 
 const RenderSchema: React.FC<{ schema: ParsedSchema }> = ({ schema }) => {
   if (schema.type === 'object') {
     return (
       <SchemaContainer schema={schema}>
-        {schema.children && schema.children.length > 0 ? (
+        {schema.children && schema.children.length > 0
-          schema.children.map((child, i) => (
+          ? (
-            <RenderSchema key={child.name || i} schema={child} />
+            schema.children.map((child, i) => (
-          ))
+              <RenderSchema key={child.name || i} schema={child} />
-        ) : (
+            ))
-          <div>{`{}`}</div>
+          )
-        )}
+          : (
+            <div>{'{}'}</div>
+          )}
       </SchemaContainer>
-    )
+    );
   }
 
   if (schema.type === 'array' || schema.type === 'union') {
@@ -146,37 +150,37 @@ const RenderSchema: React.FC<{ schema: ParsedSchema }> = ({ schema }) => {
           <RenderSchema key={child.name || i} schema={child} />
         ))}
       </SchemaContainer>
-    )
+    );
   }
 
   if (schema.type === 'enum' && Array.isArray(schema.enum)) {
     return (
       <SchemaContainer schema={schema}>
-        <div className="flex gap-1 items-center">
+        <div className='flex gap-1 items-center'>
           {schema.enum?.map((value, i) => (
             <Chip
               key={value?.toString() || i}
-              size="sm"
+              size='sm'
-              variant="flat"
+              variant='flat'
-              color="success"
+              color='success'
             >
               {value?.toString()}
             </Chip>
           ))}
         </div>
       </SchemaContainer>
-    )
+    );
   }
 
   return (
-    <div className="mb-2 flex items-center gap-1 pl-5">
+    <div className='mb-2 flex items-center gap-1 pl-5'>
-      <Tooltip content="点击复制" placement="top" showArrow>
+      <Tooltip content='点击复制' placement='top' showArrow>
         <span
-          className="border-b border-transparent border-dashed hover:border-primary-400 md:cursor-pointer"
+          className='border-b border-transparent border-dashed hover:border-primary-400 md:cursor-pointer'
           onClick={(e) => {
-            e.stopPropagation()
+            e.stopPropagation();
-            navigator.clipboard.writeText(schema.name || '')
+            navigator.clipboard.writeText(schema.name || '');
-            toast.success('已复制')
+            toast.success('已复制');
           }}
         >
           {schema.name}
@@ -184,19 +188,21 @@ const RenderSchema: React.FC<{ schema: ParsedSchema }> = ({ schema }) => {
       </Tooltip>
       <SchemaLabel schema={schema} />
     </div>
-  )
+  );
-}
+};
 
 const DisplayStruct: React.FC<DisplayStructProps> = ({ schema }) => {
   return (
-    <div className="p-4 bg-content2 rounded-lg bg-opacity-50">
+    <div className='p-4 bg-content2 rounded-lg bg-opacity-50'>
-      {Array.isArray(schema) ? (
+      {Array.isArray(schema)
-        schema.map((s, i) => <RenderSchema key={s.name || i} schema={s} />)
+        ? (
-      ) : (
+          schema.map((s, i) => <RenderSchema key={s.name || i} schema={s} />)
-        <RenderSchema schema={schema} />
+        )
-      )}
+        : (
+          <RenderSchema schema={schema} />
+        )}
     </div>
-  )
+  );
-}
+};
 
-export default DisplayStruct
+export default DisplayStruct;

napcat.webui/src/components/onebot/api/nav_list.tsx

@@ -1,10 +1,10 @@
-import { Card, CardBody } from '@heroui/card'
+import { Card, CardBody } from '@heroui/card';
-import { Input } from '@heroui/input'
+import { Input } from '@heroui/input';
-import clsx from 'clsx'
+import clsx from 'clsx';
-import { motion } from 'motion/react'
+import { motion } from 'motion/react';
-import { useState } from 'react'
+import { useState } from 'react';
 
-import type { OneBotHttpApi, OneBotHttpApiPath } from '@/const/ob_api'
+import type { OneBotHttpApi, OneBotHttpApiPath } from '@/const/ob_api';
 
 export interface OneBotApiNavListProps {
   data: OneBotHttpApi
@@ -14,8 +14,8 @@ export interface OneBotApiNavListProps {
 }
 
 const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
-  const { data, selectedApi, onSelect, openSideBar } = props
+  const { data, selectedApi, onSelect, openSideBar } = props;
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState('');
   return (
     <motion.div
       className={clsx(
@@ -26,21 +26,21 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
       transition={{
         type: openSideBar ? 'spring' : 'tween',
         stiffness: 150,
-        damping: 15
+        damping: 15,
       }}
       animate={{ width: openSideBar ? '16rem' : '0rem' }}
       style={{ overflowY: openSideBar ? 'auto' : 'hidden' }}
     >
-      <div className="w-64 h-full overflow-y-auto px-2 pt-2 pb-10 md:pb-0">
+      <div className='w-64 h-full overflow-y-auto px-2 pt-2 pb-10 md:pb-0'>
         <Input
-          className="sticky top-0 z-10 text-primary-600"
+          className='sticky top-0 z-10 text-primary-600'
           classNames={{
             inputWrapper:
               'bg-opacity-30 bg-primary-50 backdrop-blur-sm border border-primary-300 mb-2',
-            input: 'bg-transparent !text-primary-400 !placeholder-primary-400'
+            input: 'bg-transparent !text-primary-400 !placeholder-primary-400',
           }}
-          radius="full"
+          radius='full'
-          placeholder="搜索 API"
+          placeholder='搜索 API'
           value={searchValue}
           onChange={(e) => setSearchValue(e.target.value)}
           isClearable
@@ -49,28 +49,28 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
         {Object.entries(data).map(([apiName, api]) => (
           <Card
             key={apiName}
-            shadow="none"
+            shadow='none'
             className={clsx(
               'w-full border border-primary-100 rounded-lg mb-1 bg-opacity-30 backdrop-blur-sm text-primary-400',
               {
                 hidden: !(
                   apiName.includes(searchValue) ||
                   api.description?.includes(searchValue)
-                )
+                ),
               },
               {
                 '!bg-opacity-40 border border-primary-400 bg-primary-50 text-primary-600':
-                  apiName === selectedApi
+                  apiName === selectedApi,
               }
             )}
             isPressable
             onPress={() => onSelect(apiName as OneBotHttpApiPath)}
           >
             <CardBody>
-              <h2 className="font-bold">{api.description}</h2>
+              <h2 className='font-bold'>{api.description}</h2>
               <div
                 className={clsx('text-sm text-primary-200', {
-                  '!text-primary-400': apiName === selectedApi
+                  '!text-primary-400': apiName === selectedApi,
                 })}
               >
                 {apiName}
@@ -80,7 +80,7 @@ const OneBotApiNavList: React.FC<OneBotApiNavListProps> = (props) => {
         ))}
       </div>
     </motion.div>
-  )
+  );
-}
+};
 
-export default OneBotApiNavList
+export default OneBotApiNavList;

napcat.webui/src/components/onebot/display_card/message.tsx

@@ -1,16 +1,16 @@
-import { Avatar } from '@heroui/avatar'
+import { Avatar } from '@heroui/avatar';
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import clsx from 'clsx'
+import clsx from 'clsx';
 
-import { isOB11GroupMessage } from '@/utils/onebot'
+import { isOB11GroupMessage } from '@/utils/onebot';
 
 import type {
   OB11GroupMessage,
   OB11Message,
-  OB11PrivateMessage
+  OB11PrivateMessage,
-} from '@/types/onebot'
+} from '@/types/onebot';
 
-import { renderMessageContent } from '../render_message'
+import { renderMessageContent } from '../render_message';
 
 export interface OneBotMessageProps {
   data: OB11Message
@@ -26,11 +26,11 @@ export interface OneBotMessagePrivateProps {
 
 const MessageContent: React.FC<{ data: OB11Message }> = ({ data }) => {
   return (
-    <div className="h-full flex flex-col overflow-hidden flex-1">
+    <div className='h-full flex flex-col overflow-hidden flex-1'>
-      <div className="flex gap-2 items-center flex-shrink-0">
+      <div className='flex gap-2 items-center flex-shrink-0'>
-        <div className="font-bold">
+        <div className='font-bold'>
           {isOB11GroupMessage(data) && data.sender.card && (
-            <span className="mr-1">{data.sender.card}</span>
+            <span className='mr-1'>{data.sender.card}</span>
           )}
           <span
             className={clsx(
@@ -43,12 +43,12 @@ const MessageContent: React.FC<{ data: OB11Message }> = ({ data }) => {
           </span>
         </div>
         <div>({data.sender.user_id})</div>
-        <div className="text-sm">消息ID: {data.message_id}</div>
+        <div className='text-sm'>消息ID: {data.message_id}</div>
       </div>
       <Popover showArrow triggerScaleOnOpen={false}>
         <PopoverTrigger>
-          <div className="flex-1 break-all overflow-hidden whitespace-pre-wrap border border-default-100 p-2 rounded-md hover:bg-content2 md:cursor-pointer transition-background relative group">
+          <div className='flex-1 break-all overflow-hidden whitespace-pre-wrap border border-default-100 p-2 rounded-md hover:bg-content2 md:cursor-pointer transition-background relative group'>
-            <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 text-default-300">
+            <div className='absolute right-2 top-2 opacity-0 group-hover:opacity-100 text-default-300'>
               点击查看完整消息
             </div>
             {Array.isArray(data.message)
@@ -57,7 +57,7 @@ const MessageContent: React.FC<{ data: OB11Message }> = ({ data }) => {
           </div>
         </PopoverTrigger>
         <PopoverContent>
-          <div className="p-2">
+          <div className='p-2'>
             {Array.isArray(data.message)
               ? renderMessageContent(data.message)
               : data.raw_message}
@@ -65,58 +65,58 @@ const MessageContent: React.FC<{ data: OB11Message }> = ({ data }) => {
         </PopoverContent>
       </Popover>
     </div>
-  )
+  );
-}
+};
 
 const OneBotMessageGroup: React.FC<OneBotMessageGroupProps> = ({ data }) => {
   return (
-    <div className="h-full overflow-hidden flex flex-col w-full">
+    <div className='h-full overflow-hidden flex flex-col w-full'>
-      <div className="flex items-center p-1 flex-shrink-0">
+      <div className='flex items-center p-1 flex-shrink-0'>
         <Avatar
           src={`https://p.qlogo.cn/gh/${data.group_id}/${data.group_id}/640/`}
-          alt="群头像"
+          alt='群头像'
-          size="sm"
+          size='sm'
-          className="flex-shrink-0 mr-2"
+          className='flex-shrink-0 mr-2'
         />
         <div>群 {data.group_id}</div>
       </div>
-      <div className="flex items-start p-1 rounded-md h-full flex-1 border border-default-100">
+      <div className='flex items-start p-1 rounded-md h-full flex-1 border border-default-100'>
         <Avatar
           src={`https://q1.qlogo.cn/g?b=qq&nk=${data.sender.user_id}&s=100`}
-          alt="用户头像"
+          alt='用户头像'
-          size="md"
+          size='md'
-          className="flex-shrink-0 mr-2"
+          className='flex-shrink-0 mr-2'
         />
         <MessageContent data={data} />
       </div>
     </div>
-  )
+  );
-}
+};
 
 const OneBotMessagePrivate: React.FC<OneBotMessagePrivateProps> = ({
-  data
+  data,
 }) => {
   return (
-    <div className="flex items-start p-2 rounded-md h-full flex-1">
+    <div className='flex items-start p-2 rounded-md h-full flex-1'>
       <Avatar
         src={`https://q1.qlogo.cn/g?b=qq&nk=${data.sender.user_id}&s=100`}
-        alt="用户头像"
+        alt='用户头像'
-        size="md"
+        size='md'
-        className="flex-shrink-0 mr-2"
+        className='flex-shrink-0 mr-2'
       />
       <MessageContent data={data} />
     </div>
-  )
+  );
-}
+};
 
 const OneBotMessage: React.FC<OneBotMessageProps> = ({ data }) => {
   if (data.message_type === 'group') {
-    return <OneBotMessageGroup data={data} />
+    return <OneBotMessageGroup data={data} />;
   } else if (data.message_type === 'private') {
-    return <OneBotMessagePrivate data={data} />
+    return <OneBotMessagePrivate data={data} />;
   } else {
-    return <div>未知消息类型</div>
+    return <div>未知消息类型</div>;
   }
-}
+};
 
-export default OneBotMessage
+export default OneBotMessage;

napcat.webui/src/components/onebot/display_card/meta.tsx

@@ -1,12 +1,12 @@
-import { Chip } from '@heroui/chip'
+import { Chip } from '@heroui/chip';
 
-import { getLifecycleColor, getLifecycleName } from '@/utils/onebot'
+import { getLifecycleColor, getLifecycleName } from '@/utils/onebot';
 
 import type {
   OB11Meta,
   OneBot11Heartbeat,
-  OneBot11Lifecycle
+  OneBot11Lifecycle,
-} from '@/types/onebot'
+} from '@/types/onebot';
 
 export interface OneBotDisplayMetaProps {
   data: OB11Meta
@@ -21,32 +21,32 @@ export interface OneBotDisplayMetaLifecycleProps {
 }
 
 const OneBotDisplayMetaHeartbeat: React.FC<OneBotDisplayMetaHeartbeatProps> = ({
-  data
+  data,
 }) => {
   return (
-    <div className="flex gap-2">
+    <div className='flex gap-2'>
       <Chip>心跳</Chip>
       <Chip>间隔 {data.status.interval}ms</Chip>
     </div>
-  )
+  );
-}
+};
 
 const OneBotDisplayMetaLifecycle: React.FC<OneBotDisplayMetaLifecycleProps> = ({
-  data
+  data,
 }) => {
   return (
-    <div className="flex gap-2">
+    <div className='flex gap-2'>
       <Chip>生命周期</Chip>
       <Chip color={getLifecycleColor(data.sub_type)}>
         {getLifecycleName(data.sub_type)}
       </Chip>
     </div>
-  )
+  );
-}
+};
 
 const OneBotDisplayMeta: React.FC<OneBotDisplayMetaProps> = ({ data }) => {
   return (
-    <div className="h-full flex items-center">
+    <div className='h-full flex items-center'>
       {data.meta_event_type === 'lifecycle' && (
         <OneBotDisplayMetaLifecycle data={data} />
       )}
@@ -54,7 +54,7 @@ const OneBotDisplayMeta: React.FC<OneBotDisplayMetaProps> = ({ data }) => {
         <OneBotDisplayMetaHeartbeat data={data} />
       )}
     </div>
-  )
+  );
-}
+};
 
-export default OneBotDisplayMeta
+export default OneBotDisplayMeta;

napcat.webui/src/components/onebot/display_card/notice.tsx

@@ -1,6 +1,6 @@
-import { Chip } from '@heroui/chip'
+import { Chip } from '@heroui/chip';
 
-import { getNoticeTypeName } from '@/utils/onebot'
+import { getNoticeTypeName } from '@/utils/onebot';
 
 import {
   OB11Notice,
@@ -18,8 +18,8 @@ import {
   OneBot11GroupUpload,
   OneBot11Honor,
   OneBot11LuckyKing,
-  OneBot11Poke
+  OneBot11Poke,
-} from '@/types/onebot'
+} from '@/types/onebot';
 
 export interface OneBotNoticeProps {
   data: OB11Notice
@@ -30,9 +30,9 @@ export interface NoticeProps<T> {
 }
 
 const GroupUploadNotice: React.FC<NoticeProps<OneBot11GroupUpload>> = ({
-  data
+  data,
 }) => {
-  const { group_id, user_id, file } = data
+  const { group_id, user_id, file } = data;
   return (
     <>
       <div>群号: {group_id}</div>
@@ -40,26 +40,26 @@ const GroupUploadNotice: React.FC<NoticeProps<OneBot11GroupUpload>> = ({
       <div>文件名: {file.name}</div>
       <div>文件大小: {file.size} 字节</div>
     </>
-  )
+  );
-}
+};
 
 const GroupAdminNotice: React.FC<NoticeProps<OneBot11GroupAdmin>> = ({
-  data
+  data,
 }) => {
-  const { group_id, user_id, sub_type } = data
+  const { group_id, user_id, sub_type } = data;
   return (
     <>
       <div>群号: {group_id}</div>
       <div>用户ID: {user_id}</div>
       <div>变动类型: {sub_type === 'set' ? '设置管理员' : '取消管理员'}</div>
     </>
-  )
+  );
-}
+};
 
 const GroupDecreaseNotice: React.FC<NoticeProps<OneBot11GroupDecrease>> = ({
-  data
+  data,
 }) => {
-  const { group_id, operator_id, user_id, sub_type } = data
+  const { group_id, operator_id, user_id, sub_type } = data;
   return (
     <>
       <div>群号: {group_id}</div>
@@ -67,13 +67,13 @@ const GroupDecreaseNotice: React.FC<NoticeProps<OneBot11GroupDecrease>> = ({
       <div>用户ID: {user_id}</div>
       <div>原因: {sub_type}</div>
     </>
-  )
+  );
-}
+};
 
 const GroupIncreaseNotice: React.FC<NoticeProps<OneBot11GroupIncrease>> = ({
-  data
+  data,
 }) => {
-  const { group_id, operator_id, user_id, sub_type } = data
+  const { group_id, operator_id, user_id, sub_type } = data;
   return (
     <>
       <div>群号: {group_id}</div>
@@ -81,11 +81,11 @@ const GroupIncreaseNotice: React.FC<NoticeProps<OneBot11GroupIncrease>> = ({
       <div>用户ID: {user_id}</div>
       <div>增加类型: {sub_type}</div>
     </>
-  )
+  );
-}
+};
 
 const GroupBanNotice: React.FC<NoticeProps<OneBot11GroupBan>> = ({ data }) => {
-  const { group_id, operator_id, user_id, sub_type, duration } = data
+  const { group_id, operator_id, user_id, sub_type, duration } = data;
   return (
     <>
       <div>群号: {group_id}</div>
@@ -94,24 +94,24 @@ const GroupBanNotice: React.FC<NoticeProps<OneBot11GroupBan>> = ({ data }) => {
       <div>禁言类型: {sub_type}</div>
       <div>禁言时长: {duration} 秒</div>
     </>
-  )
+  );
-}
+};
 
 const FriendAddNotice: React.FC<NoticeProps<OneBot11FriendAdd>> = ({
-  data
+  data,
 }) => {
-  const { user_id } = data
+  const { user_id } = data;
   return (
     <>
       <div>用户ID: {user_id}</div>
     </>
-  )
+  );
-}
+};
 
 const GroupRecallNotice: React.FC<NoticeProps<OneBot11GroupRecall>> = ({
-  data
+  data,
 }) => {
-  const { group_id, user_id, operator_id, message_id } = data
+  const { group_id, user_id, operator_id, message_id } = data;
   return (
     <>
       <div>群号: {group_id}</div>
@@ -119,60 +119,60 @@ const GroupRecallNotice: React.FC<NoticeProps<OneBot11GroupRecall>> = ({
       <div>操作者ID: {operator_id}</div>
       <div>消息ID: {message_id}</div>
     </>
-  )
+  );
-}
+};
 
 const FriendRecallNotice: React.FC<NoticeProps<OneBot11FriendRecall>> = ({
-  data
+  data,
 }) => {
-  const { user_id, message_id } = data
+  const { user_id, message_id } = data;
   return (
     <>
       <div>用户ID: {user_id}</div>
       <div>消息ID: {message_id}</div>
     </>
-  )
+  );
-}
+};
 
 const PokeNotice: React.FC<NoticeProps<OneBot11Poke>> = ({ data }) => {
-  const { group_id, user_id, target_id } = data
+  const { group_id, user_id, target_id } = data;
   return (
     <>
       <div>群号: {group_id}</div>
       <div>用户ID: {user_id}</div>
       <div>目标ID: {target_id}</div>
     </>
-  )
+  );
-}
+};
 
 const LuckyKingNotice: React.FC<NoticeProps<OneBot11LuckyKing>> = ({
-  data
+  data,
 }) => {
-  const { group_id, user_id, target_id } = data
+  const { group_id, user_id, target_id } = data;
   return (
     <>
       <div>群号: {group_id}</div>
       <div>用户ID: {user_id}</div>
       <div>目标ID: {target_id}</div>
     </>
-  )
+  );
-}
+};
 
 const HonorNotice: React.FC<NoticeProps<OneBot11Honor>> = ({ data }) => {
-  const { group_id, user_id, honor_type } = data
+  const { group_id, user_id, honor_type } = data;
   return (
     <>
       <div>群号: {group_id}</div>
       <div>用户ID: {user_id}</div>
       <div>荣誉类型: {honor_type}</div>
     </>
-  )
+  );
-}
+};
 
 const GroupMessageReactionNotice: React.FC<
   NoticeProps<OneBot11GroupMessageReaction>
 > = ({ data }) => {
-  const { group_id, user_id, message_id, likes } = data
+  const { group_id, user_id, message_id, likes } = data;
   return (
     <>
       <div>群号: {group_id}</div>
@@ -185,13 +185,13 @@ const GroupMessageReactionNotice: React.FC<
           .join(', ')}
       </div>
     </>
-  )
+  );
-}
+};
 
 const GroupEssenceNotice: React.FC<NoticeProps<OneBot11GroupEssence>> = ({
-  data
+  data,
 }) => {
-  const { group_id, message_id, sender_id, operator_id, sub_type } = data
+  const { group_id, message_id, sender_id, operator_id, sub_type } = data;
   return (
     <>
       <div>群号: {group_id}</div>
@@ -200,13 +200,13 @@ const GroupEssenceNotice: React.FC<NoticeProps<OneBot11GroupEssence>> = ({
       <div>操作者ID: {operator_id}</div>
       <div>操作类型: {sub_type}</div>
     </>
-  )
+  );
-}
+};
 
 const GroupCardNotice: React.FC<NoticeProps<OneBot11GroupCard>> = ({
-  data
+  data,
 }) => {
-  const { group_id, user_id, card_new, card_old } = data
+  const { group_id, user_id, card_new, card_old } = data;
   return (
     <>
       <div>群号: {group_id}</div>
@@ -214,79 +214,79 @@ const GroupCardNotice: React.FC<NoticeProps<OneBot11GroupCard>> = ({
       <div>新名片: {card_new}</div>
       <div>旧名片: {card_old}</div>
     </>
-  )
+  );
-}
+};
 
 const OneBotNotice: React.FC<OneBotNoticeProps> = ({ data }) => {
-  let NoticeComponent: React.ReactNode
+  let NoticeComponent: React.ReactNode;
   switch (data.notice_type) {
     case OB11NoticeType.GroupUpload:
-      NoticeComponent = <GroupUploadNotice data={data} />
+      NoticeComponent = <GroupUploadNotice data={data} />;
-      break
+      break;
     case OB11NoticeType.GroupAdmin:
-      NoticeComponent = <GroupAdminNotice data={data} />
+      NoticeComponent = <GroupAdminNotice data={data} />;
-      break
+      break;
     case OB11NoticeType.GroupDecrease:
-      NoticeComponent = <GroupDecreaseNotice data={data} />
+      NoticeComponent = <GroupDecreaseNotice data={data} />;
-      break
+      break;
     case OB11NoticeType.GroupIncrease:
       NoticeComponent = (
         <GroupIncreaseNotice data={data as OneBot11GroupIncrease} />
-      )
+      );
-      break
+      break;
     case OB11NoticeType.GroupBan:
-      NoticeComponent = <GroupBanNotice data={data} />
+      NoticeComponent = <GroupBanNotice data={data} />;
-      break
+      break;
     case OB11NoticeType.FriendAdd:
-      NoticeComponent = <FriendAddNotice data={data as OneBot11FriendAdd} />
+      NoticeComponent = <FriendAddNotice data={data as OneBot11FriendAdd} />;
-      break
+      break;
     case OB11NoticeType.GroupRecall:
-      NoticeComponent = <GroupRecallNotice data={data as OneBot11GroupRecall} />
+      NoticeComponent = <GroupRecallNotice data={data as OneBot11GroupRecall} />;
-      break
+      break;
     case OB11NoticeType.FriendRecall:
       NoticeComponent = (
         <FriendRecallNotice data={data as OneBot11FriendRecall} />
-      )
+      );
-      break
+      break;
     case OB11NoticeType.Notify:
       switch (data.sub_type) {
         case 'poke':
-          NoticeComponent = <PokeNotice data={data as OneBot11Poke} />
+          NoticeComponent = <PokeNotice data={data as OneBot11Poke} />;
-          break
+          break;
         case 'lucky_king':
-          NoticeComponent = <LuckyKingNotice data={data as OneBot11LuckyKing} />
+          NoticeComponent = <LuckyKingNotice data={data as OneBot11LuckyKing} />;
-          break
+          break;
         case 'honor':
-          NoticeComponent = <HonorNotice data={data as OneBot11Honor} />
+          NoticeComponent = <HonorNotice data={data as OneBot11Honor} />;
-          break
+          break;
       }
-      break
+      break;
     case OB11NoticeType.GroupMsgEmojiLike:
       NoticeComponent = (
         <GroupMessageReactionNotice
           data={data as OneBot11GroupMessageReaction}
         />
-      )
+      );
-      break
+      break;
     case OB11NoticeType.GroupEssence:
       NoticeComponent = (
         <GroupEssenceNotice data={data as OneBot11GroupEssence} />
-      )
+      );
-      break
+      break;
     case OB11NoticeType.GroupCard:
-      NoticeComponent = <GroupCardNotice data={data as OneBot11GroupCard} />
+      NoticeComponent = <GroupCardNotice data={data as OneBot11GroupCard} />;
-      break
+      break;
   }
 
   return (
-    <div className="flex gap-2 items-center">
+    <div className='flex gap-2 items-center'>
-      <Chip color="warning" variant="flat">
+      <Chip color='warning' variant='flat'>
         通知
       </Chip>
       <Chip>{getNoticeTypeName(data.notice_type)}</Chip>
       {NoticeComponent}
     </div>
-  )
+  );
-}
+};
 
-export default OneBotNotice
+export default OneBotNotice;

napcat.webui/src/components/onebot/display_card/render.tsx

@@ -1,24 +1,24 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Card, CardBody, CardHeader } from '@heroui/card'
+import { Card, CardBody, CardHeader } from '@heroui/card';
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import { Snippet } from '@heroui/snippet'
+import { Snippet } from '@heroui/snippet';
-import { motion } from 'motion/react'
+import { motion } from 'motion/react';
-import { IoCode } from 'react-icons/io5'
+import { IoCode } from 'react-icons/io5';
 
-import OneBotDisplayMeta from '@/components/onebot/display_card/meta'
+import OneBotDisplayMeta from '@/components/onebot/display_card/meta';
 
-import { getEventName, isOB11Event } from '@/utils/onebot'
+import { getEventName, isOB11Event } from '@/utils/onebot';
-import { timestampToDateString } from '@/utils/time'
+import { timestampToDateString } from '@/utils/time';
 
 import type {
   AllOB11WsResponse,
   OB11AllEvent,
-  OB11Request
+  OB11Request,
-} from '@/types/onebot'
+} from '@/types/onebot';
 
-import OneBotMessage from './message'
+import OneBotMessage from './message';
-import OneBotNotice from './notice'
+import OneBotNotice from './notice';
-import OneBotDisplayResponse from './response'
+import OneBotDisplayResponse from './response';
 
 const itemVariants = {
   hidden: { opacity: 0, scale: 0.8, y: 50 },
@@ -26,12 +26,12 @@ const itemVariants = {
     opacity: 1,
     scale: 1,
     y: 0,
-    transition: { type: 'spring' as const, stiffness: 300, damping: 20 }
+    transition: { type: 'spring' as const, stiffness: 300, damping: 20 },
-  }
+  },
-}
+};
 
-function RequestComponent({ data: _ }: { data: OB11Request }) {
+function RequestComponent ({ data: _ }: { data: OB11Request }) {
-  return <div>Request消息，暂未适配</div>
+  return <div>Request消息，暂未适配</div>;
 }
 
 export interface OneBotItemRenderProps {
@@ -42,78 +42,78 @@ export interface OneBotItemRenderProps {
 
 export const getItemSize = (event: OB11AllEvent['post_type']) => {
   if (event === 'meta_event') {
-    return 100
+    return 100;
   }
   if (event === 'message') {
-    return 180
+    return 180;
   }
   if (event === 'request') {
-    return 100
+    return 100;
   }
   if (event === 'notice') {
-    return 100
+    return 100;
   }
   if (event === 'message_sent') {
-    return 250
+    return 250;
   }
-  return 100
+  return 100;
-}
+};
 
 const renderDetail = (data: AllOB11WsResponse) => {
   if (isOB11Event(data)) {
     switch (data.post_type) {
       case 'meta_event':
-        return <OneBotDisplayMeta data={data} />
+        return <OneBotDisplayMeta data={data} />;
       case 'message':
-        return <OneBotMessage data={data} />
+        return <OneBotMessage data={data} />;
       case 'request':
-        return <RequestComponent data={data} />
+        return <RequestComponent data={data} />;
       case 'notice':
-        return <OneBotNotice data={data} />
+        return <OneBotNotice data={data} />;
       case 'message_sent':
-        return <OneBotMessage data={data} />
+        return <OneBotMessage data={data} />;
       default:
-        return <div>未知类型的消息</div>
+        return <div>未知类型的消息</div>;
     }
   }
-  return <OneBotDisplayResponse data={data} />
+  return <OneBotDisplayResponse data={data} />;
-}
+};
 
 const OneBotItemRender = ({ data, index, style }: OneBotItemRenderProps) => {
-  const msg = data[index]
+  const msg = data[index];
-  const isEvent = isOB11Event(msg)
+  const isEvent = isOB11Event(msg);
   return (
-    <div style={style} className="p-1 overflow-visible w-full h-full">
+    <div style={style} className='p-1 overflow-visible w-full h-full'>
       <motion.div
         variants={itemVariants}
-        initial="hidden"
+        initial='hidden'
-        animate="visible"
+        animate='visible'
-        className="h-full px-2"
+        className='h-full px-2'
       >
-        <Card className="w-full h-full py-2 bg-opacity-50 backdrop-blur-sm">
+        <Card className='w-full h-full py-2 bg-opacity-50 backdrop-blur-sm'>
-          <CardHeader className="py-0 text-default-500 flex-row gap-2">
+          <CardHeader className='py-0 text-default-500 flex-row gap-2'>
-            <div className="font-bold">
+            <div className='font-bold'>
               {isEvent ? getEventName(msg.post_type) : '请求响应'}
             </div>
-            <div className="text-sm">
+            <div className='text-sm'>
               {isEvent && timestampToDateString(msg.time)}
             </div>
-            <div className="ml-auto">
+            <div className='ml-auto'>
               <Popover
-                placement="left"
+                placement='left'
                 showArrow
                 classNames={{
-                  content: 'max-h-96 max-w-96 overflow-hidden p-0'
+                  content: 'max-h-96 max-w-96 overflow-hidden p-0',
                 }}
               >
                 <PopoverTrigger>
                   <Button
-                    size="sm"
+                    size='sm'
-                    color="primary"
+                    color='primary'
-                    variant="flat"
+                    variant='flat'
-                    radius="full"
+                    radius='full'
                     isIconOnly
-                    className="text-medium"
+                    className='text-medium'
                   >
                     <IoCode />
                   </Button>
@@ -122,17 +122,17 @@ const OneBotItemRender = ({ data, index, style }: OneBotItemRenderProps) => {
                   <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-full overflow-y-scroll items-start"
+                    className='bg-content1 h-full overflow-y-scroll items-start'
                   >
                     {JSON.stringify(msg, 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>
                       ))}
@@ -141,11 +141,11 @@ const OneBotItemRender = ({ data, index, style }: OneBotItemRenderProps) => {
               </Popover>
             </div>
           </CardHeader>
-          <CardBody className="py-0">{renderDetail(msg)}</CardBody>
+          <CardBody className='py-0'>{renderDetail(msg)}</CardBody>
         </Card>
       </motion.div>
     </div>
-  )
+  );
-}
+};
 
-export default OneBotItemRender
+export default OneBotItemRender;

napcat.webui/src/components/onebot/display_card/response.tsx

@@ -1,39 +1,39 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Chip } from '@heroui/chip'
+import { Chip } from '@heroui/chip';
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
-import { Snippet } from '@heroui/snippet'
+import { Snippet } from '@heroui/snippet';
 
-import { getResponseStatusColor, getResponseStatusText } from '@/utils/onebot'
+import { getResponseStatusColor, getResponseStatusText } from '@/utils/onebot';
 
-import { RequestResponse } from '@/types/onebot'
+import { RequestResponse } from '@/types/onebot';
 
 export interface OneBotDisplayResponseProps {
   data: RequestResponse
 }
 
 const OneBotDisplayResponse: React.FC<OneBotDisplayResponseProps> = ({
-  data
+  data,
 }) => {
   return (
-    <div className="flex gap-2 items-center">
+    <div className='flex gap-2 items-center'>
-      <Chip color={getResponseStatusColor(data.status)} variant="flat">
+      <Chip color={getResponseStatusColor(data.status)} variant='flat'>
         {getResponseStatusText(data.status)}
       </Chip>
       {data.data && (
         <Popover
-          placement="right"
+          placement='right'
           showArrow
           classNames={{
-            content: 'max-h-96 max-w-96 overflow-hidden p-0'
+            content: 'max-h-96 max-w-96 overflow-hidden p-0',
           }}
         >
           <PopoverTrigger>
             <Button
-              size="sm"
+              size='sm'
-              color="primary"
+              color='primary'
-              variant="flat"
+              variant='flat'
-              radius="full"
+              radius='full'
-              className="text-medium"
+              className='text-medium'
             >
               查看数据
             </Button>
@@ -42,17 +42,17 @@ const OneBotDisplayResponse: React.FC<OneBotDisplayResponseProps> = ({
             <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-full overflow-y-scroll items-start"
+              className='bg-content1 h-full overflow-y-scroll items-start'
             >
               {JSON.stringify(data.data, 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>
                 ))}
@@ -61,15 +61,15 @@ const OneBotDisplayResponse: React.FC<OneBotDisplayResponseProps> = ({
         </Popover>
       )}
       {data.message && (
-        <Chip className="pl-0.5" variant="flat">
+        <Chip className='pl-0.5' variant='flat'>
-          <Chip color="warning" size="sm" className="-ml-2 mr-1" variant="flat">
+          <Chip color='warning' size='sm' className='-ml-2 mr-1' variant='flat'>
             返回消息
           </Chip>
           {data.message}
         </Chip>
       )}
     </div>
-  )
+  );
-}
+};
 
-export default OneBotDisplayResponse
+export default OneBotDisplayResponse;

napcat.webui/src/components/onebot/filter_message_type.tsx

@@ -1,6 +1,6 @@
-import { Select, SelectItem } from '@heroui/select'
+import { Select, SelectItem } from '@heroui/select';
-import { SharedSelection } from '@heroui/system'
+import { SharedSelection } from '@heroui/system';
-import type { Selection } from '@react-types/shared'
+import type { Selection } from '@react-types/shared';
 
 export interface FilterMessageTypeProps {
   filterTypes: Selection
@@ -11,27 +11,27 @@ const items = [
   { label: '消息', value: 'message' },
   { label: '请求', value: 'request' },
   { label: '通知', value: 'notice' },
-  { label: '消息发送', value: 'message_sent' }
+  { label: '消息发送', value: 'message_sent' },
-]
+];
 const FilterMessageType: React.FC<FilterMessageTypeProps> = (props) => {
-  const { filterTypes, onSelectionChange } = props
+  const { filterTypes, onSelectionChange } = props;
   return (
     <Select
       selectedKeys={filterTypes}
       onSelectionChange={(selectedKeys) => {
         if (selectedKeys !== 'all' && selectedKeys?.size === 0) {
-          selectedKeys = 'all'
+          selectedKeys = 'all';
         }
-        onSelectionChange(selectedKeys)
+        onSelectionChange(selectedKeys);
       }}
-      label="筛选消息类型"
+      label='筛选消息类型'
-      selectionMode="multiple"
+      selectionMode='multiple'
       items={items}
       renderValue={(value) => {
         if (value.length === items.length) {
-          return '全部'
+          return '全部';
         }
-        return value.map((v) => v.data?.label).join(',')
+        return value.map((v) => v.data?.label).join(',');
       }}
     >
       {(item) => (
@@ -40,8 +40,8 @@ const FilterMessageType: React.FC<FilterMessageTypeProps> = (props) => {
         </SelectItem>
       )}
     </Select>
-  )
+  );
-}
+};
 
 export const renderFilterMessageType = (
   filterTypes: Selection,
@@ -52,7 +52,7 @@ export const renderFilterMessageType = (
       filterTypes={filterTypes}
       onSelectionChange={onSelectionChange}
     />
-  )
+  );
-}
+};
 
-export default FilterMessageType
+export default FilterMessageType;

napcat.webui/src/components/onebot/message_list.tsx

@@ -1,62 +1,62 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react';
-import { VariableSizeList } from 'react-window'
+import { VariableSizeList } from 'react-window';
 
 import OneBotItemRender, {
-  getItemSize
+  getItemSize,
-} from '@/components/onebot/display_card/render'
+} from '@/components/onebot/display_card/render';
 
-import { isOB11Event } from '@/utils/onebot'
+import { isOB11Event } from '@/utils/onebot';
 
-import type { AllOB11WsResponse } from '@/types/onebot'
+import type { AllOB11WsResponse } from '@/types/onebot';
 
 export interface OneBotMessageListProps {
   messages: AllOB11WsResponse[]
 }
 
 const OneBotMessageList: React.FC<OneBotMessageListProps> = (props) => {
-  const { messages } = props
+  const { messages } = props;
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<VariableSizeList>(null)
+  const listRef = useRef<VariableSizeList>(null);
-  const [containerHeight, setContainerHeight] = useState(400)
+  const [containerHeight, setContainerHeight] = useState(400);
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
       if (containerRef.current) {
-        setContainerHeight(containerRef.current.offsetHeight)
+        setContainerHeight(containerRef.current.offsetHeight);
       }
-    })
+    });
 
     if (containerRef.current) {
-      resizeObserver.observe(containerRef.current)
+      resizeObserver.observe(containerRef.current);
     }
 
     return () => {
-      resizeObserver.disconnect()
+      resizeObserver.disconnect();
-    }
+    };
-  }, [])
+  }, []);
 
   useEffect(() => {
     if (listRef.current) {
-      listRef.current.resetAfterIndex(0, true)
+      listRef.current.resetAfterIndex(0, true);
     }
-  }, [messages])
+  }, [messages]);
 
   return (
-    <div className="w-full h-full overflow-hidden" ref={containerRef}>
+    <div className='w-full h-full overflow-hidden' ref={containerRef}>
       <VariableSizeList
         ref={listRef}
         itemCount={messages.length}
-        width="100%"
+        width='100%'
         style={{
-          overflowX: 'hidden'
+          overflowX: 'hidden',
         }}
         itemSize={(idx) => {
-          const msg = messages[idx]
+          const msg = messages[idx];
           if (isOB11Event(msg)) {
-            const size = getItemSize(msg.post_type)
+            const size = getItemSize(msg.post_type);
-            return size
+            return size;
           } else {
-            return 100
+            return 100;
           }
         }}
         height={containerHeight}
@@ -66,7 +66,7 @@ const OneBotMessageList: React.FC<OneBotMessageListProps> = (props) => {
         {OneBotItemRender}
       </VariableSizeList>
     </div>
-  )
+  );
-}
+};
 
-export default OneBotMessageList
+export default OneBotMessageList;

napcat.webui/src/components/onebot/render_message.tsx

@@ -1,8 +1,8 @@
-import { Image } from '@heroui/image'
+import { Image } from '@heroui/image';
-import qface from 'qface'
+import qface from 'qface';
-import { FaReply } from 'react-icons/fa6'
+import { FaReply } from 'react-icons/fa6';
 
-import { OB11Segment } from '@/types/onebot'
+import { OB11Segment } from '@/types/onebot';
 
 export const renderMessageContent = (
   segments: OB11Segment[],
@@ -11,27 +11,27 @@ export const renderMessageContent = (
   return segments.map((segment, index) => {
     switch (segment.type) {
       case 'text':
-        return <span key={index}>{segment.data.text}</span>
+        return <span key={index}>{segment.data.text}</span>;
       case 'face':
         return (
           <Image
             removeWrapper
             classNames={{
-              img: 'w-6 h-6 inline !text-[0px] m-0 -mt-1.5 !p-0'
+              img: 'w-6 h-6 inline !text-[0px] m-0 -mt-1.5 !p-0',
             }}
             key={index}
             src={qface.getUrl(segment.data.id)}
             alt={`face-${segment.data.id}`}
           />
-        )
+        );
       case 'image':
         return (
           <Image
             classNames={{
               wrapper: 'block !text-[0px] !m-0 !p-0',
-              img: 'block'
+              img: 'block',
             }}
-            radius="sm"
+            radius='sm'
             className={
               small
                 ? 'max-h-16 object-cover'
@@ -39,10 +39,10 @@ export const renderMessageContent = (
             }
             key={index}
             src={segment.data.url || segment.data.file}
-            alt="image"
+            alt='image'
-            referrerPolicy="no-referrer"
+            referrerPolicy='no-referrer'
           />
-        )
+        );
       case 'record':
         return (
           <audio
@@ -50,7 +50,7 @@ export const renderMessageContent = (
             controls
             src={segment.data.url || segment.data.file}
           />
-        )
+        );
       case 'video':
         return (
           <video
@@ -58,107 +58,109 @@ export const renderMessageContent = (
             controls
             src={segment.data.url || segment.data.file}
           />
-        )
+        );
       case 'at':
         return (
-          <span key={index} className="text-blue-500">
+          <span key={index} className='text-blue-500'>
             @
-            {segment.data.qq === 'all' ? (
+            {segment.data.qq === 'all'
-              '所有人'
+              ? (
-            ) : (
+                '所有人'
-              <span>
+              )
-                {segment.data.name}({segment.data.qq})
+              : (
-              </span>
+                <span>
-            )}
+                  {segment.data.name}({segment.data.qq})
+                </span>
+              )}
           </span>
-        )
+        );
       case 'rps':
-        return <span key={index}>[猜拳]</span>
+        return <span key={index}>[猜拳]</span>;
       case 'dice':
-        return <span key={index}>[掷骰子]</span>
+        return <span key={index}>[掷骰子]</span>;
       case 'shake':
-        return <span key={index}>[窗口抖动]</span>
+        return <span key={index}>[窗口抖动]</span>;
       case 'poke':
         return (
           <span key={index}>
             [戳一戳: {segment.data.name || segment.data.id}]
           </span>
-        )
+        );
       case 'anonymous':
-        return <span key={index}>[匿名消息]</span>
+        return <span key={index}>[匿名消息]</span>;
       case 'share':
         return (
           <a
             key={index}
             href={segment.data.url}
-            target="_blank"
+            target='_blank'
-            rel="noopener noreferrer"
+            rel='noopener noreferrer'
           >
             {segment.data.title}
           </a>
-        )
+        );
       case 'contact':
         return (
           <span key={index}>
             [推荐{segment.data.type === 'qq' ? '好友' : '群'}: {segment.data.id}
             ]
           </span>
-        )
+        );
       case 'location':
-        return <span key={index}>[位置: {segment.data.title || '未知'}]</span>
+        return <span key={index}>[位置: {segment.data.title || '未知'}]</span>;
       case 'music':
         if (segment.data.type === 'custom') {
           return (
             <a
               key={index}
               href={segment.data.url}
-              target="_blank"
+              target='_blank'
-              rel="noopener noreferrer"
+              rel='noopener noreferrer'
             >
               {segment.data.title}
             </a>
-          )
+          );
         }
         return (
           <span key={index}>
             [音乐: {segment.data.type} - {segment.data.id}]
           </span>
-        )
+        );
       case 'reply':
         return (
           <div
             key={index}
-            className="bg-content3 py-1 px-2 rounded-md flex items-center gap-1"
+            className='bg-content3 py-1 px-2 rounded-md flex items-center gap-1'
           >
-            <FaReply className="text-default-500" />
+            <FaReply className='text-default-500' />
             回复消息ID: {segment.data.id}
           </div>
-        )
+        );
       case 'forward':
-        return <span key={index}>[合并转发: {segment.data.id}]</span>
+        return <span key={index}>[合并转发: {segment.data.id}]</span>;
       case 'node':
-        return <span key={index}>[消息节点]</span>
+        return <span key={index}>[消息节点]</span>;
       case 'xml':
-        return <pre key={index}>{segment.data.data}</pre>
+        return <pre key={index}>{segment.data.data}</pre>;
       case 'json':
         return (
-          <pre key={index} className="break-all whitespace-break-spaces">
+          <pre key={index} className='break-all whitespace-break-spaces'>
             {segment.data.data}
           </pre>
-        )
+        );
       case 'file':
         return (
           <a
             key={index}
             href={segment.data.file}
-            target="_blank"
+            target='_blank'
-            rel="noopener noreferrer"
+            rel='noopener noreferrer'
           >
             [文件]
           </a>
-        )
+        );
       default:
-        return <span key={index}>[不支持的消息类型]</span>
+        return <span key={index}>[不支持的消息类型]</span>;
     }
-  })
+  });
-}
+};

napcat.webui/src/components/onebot/send_modal.tsx

@@ -1,70 +1,70 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
   ModalHeader,
-  useDisclosure
+  useDisclosure,
-} from '@heroui/modal'
+} from '@heroui/modal';
-import { useCallback, useRef } from 'react'
+import { useCallback, useRef } from 'react';
-import toast from 'react-hot-toast'
+import toast from 'react-hot-toast';
 
-import ChatInputModal from '@/components/chat_input/modal'
+import ChatInputModal from '@/components/chat_input/modal';
-import CodeEditor from '@/components/code_editor'
+import CodeEditor from '@/components/code_editor';
-import type { CodeEditorRef } from '@/components/code_editor'
+import type { CodeEditorRef } from '@/components/code_editor';
 
 export interface OneBotSendModalProps {
-  sendMessage: (msg: string) => void
+  sendMessage: (msg: string) => void;
 }
 
 const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
-  const { sendMessage } = props
+  const { sendMessage } = props;
-  const { isOpen, onOpen, onOpenChange } = useDisclosure()
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
-  const editorRef = useRef<CodeEditorRef | null>(null)
+  const editorRef = useRef<CodeEditorRef | null>(null);
 
   const handleSendMessage = useCallback(
     (onClose: () => void) => {
-      const msg = editorRef.current?.getValue()
+      const msg = editorRef.current?.getValue();
       if (!msg) {
-        toast.error('消息不能为空')
+        toast.error('消息不能为空');
-        return
+        return;
       }
       try {
-        sendMessage(msg)
+        sendMessage(msg);
-        toast.success('消息发送成功')
+        toast.success('消息发送成功');
-        onClose()
+        onClose();
-      } catch (error) {
+      } catch (_error) {
-        toast.error('消息发送失败')
+        toast.error('消息发送失败');
       }
     },
     [sendMessage]
-  )
+  );
 
   return (
     <>
-      <Button onPress={onOpen} color="primary" radius="full" variant="flat">
+      <Button onPress={onOpen} color='primary' radius='full' variant='flat'>
         构造请求
       </Button>
       <Modal
         isOpen={isOpen}
         onOpenChange={onOpenChange}
-        placement="top-center"
+        placement='top-center'
-        size="5xl"
+        size='5xl'
-        scrollBehavior="outside"
+        scrollBehavior='outside'
         isDismissable={false}
       >
         <ModalContent>
           {(onClose) => (
             <>
-              <ModalHeader className="flex flex-col gap-1">
+              <ModalHeader className='flex flex-col gap-1'>
                 构造请求
               </ModalHeader>
               <ModalBody>
-                <div className="h-96 dark:bg-[rgb(30,30,30)] p-2 rounded-md border border-default-100">
+                <div className='h-96 dark:bg-[rgb(30,30,30)] p-2 rounded-md border border-default-100'>
                   <CodeEditor
-                    height="100%"
+                    height='100%'
-                    defaultLanguage="json"
+                    defaultLanguage='json'
                     defaultValue={`{
   "action": "get_group_list"
 }`}
@@ -75,11 +75,11 @@ const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
               <ModalFooter>
                 <ChatInputModal />
 
-                <Button color="primary" variant="flat" onPress={onClose}>
+                <Button color='primary' variant='flat' onPress={onClose}>
                   取消
                 </Button>
                 <Button
-                  color="primary"
+                  color='primary'
                   onPress={() => handleSendMessage(onClose)}
                 >
                   发送
@@ -90,6 +90,6 @@ const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
         </ModalContent>
       </Modal>
     </>
-  )
+  );
-}
+};
-export default OneBotSendModal
+export default OneBotSendModal;

napcat.webui/src/components/onebot/ws_status.tsx

@@ -1,39 +1,39 @@
-import clsx from 'clsx'
+import clsx from 'clsx';
-import { ReadyState } from 'react-use-websocket'
+import { ReadyState } from 'react-use-websocket';
 
 export interface WSStatusProps {
   state: ReadyState
 }
 
-function StatusTag({
+function StatusTag ({
   title,
-  color
+  color,
 }: {
   title: string
   color: 'success' | 'primary' | 'warning'
 }) {
-  const textClassName = `text-${color} text-sm`
+  const textClassName = `text-${color} text-sm`;
-  const bgClassName = `bg-${color}`
+  const bgClassName = `bg-${color}`;
   return (
-    <div className="flex flex-col justify-center items-center gap-1 rounded-md px-2 col-span-2 md:col-span-1">
+    <div className='flex flex-col justify-center items-center gap-1 rounded-md px-2 col-span-2 md:col-span-1'>
-      <div className={clsx('w-4 h-4 rounded-full', bgClassName)}></div>
+      <div className={clsx('w-4 h-4 rounded-full', bgClassName)} />
       <div className={textClassName}>{title}</div>
     </div>
-  )
+  );
 }
 
-export default function WSStatus({ state }: WSStatusProps) {
+export default function WSStatus ({ state }: WSStatusProps) {
   if (state === ReadyState.OPEN) {
-    return <StatusTag title="已连接" color="success" />
+    return <StatusTag title='已连接' color='success' />;
   }
   if (state === ReadyState.CLOSED) {
-    return <StatusTag title="已关闭" color="primary" />
+    return <StatusTag title='已关闭' color='primary' />;
   }
   if (state === ReadyState.CONNECTING) {
-    return <StatusTag title="连接中" color="warning" />
+    return <StatusTag title='连接中' color='warning' />;
   }
   if (state === ReadyState.CLOSING) {
-    return <StatusTag title="关闭中" color="warning" />
+    return <StatusTag title='关闭中' color='warning' />;
   }
-  return null
+  return null;
 }

napcat.webui/src/components/page_background.tsx

@@ -1,25 +1,24 @@
-import { Image } from '@heroui/image'
+import { Image } from '@heroui/image';
-import React from 'react'
 
-import bkg_color from '@/assets/images/bkg-color.png'
+import bkg_color from '@/assets/images/bkg-color.png';
 
 const PageBackground = () => {
   return (
-    <React.Fragment>
+    <>
-      <div className="fixed w-full h-full -z-[0] flex justify-end opacity-80">
+      <div className='fixed w-full h-full -z-[0] flex justify-end opacity-80'>
         <Image
-          className="overflow-hidden object-contain -top-42 h-[160%] -right-[30%] -rotate-45 pointer-events-none select-none -z-10 relative"
+          className='overflow-hidden object-contain -top-42 h-[160%] -right-[30%] -rotate-45 pointer-events-none select-none -z-10 relative'
           src={bkg_color}
         />
       </div>
-      <div className="fixed w-full h-full overflow-hidden -z-[0] hue-rotate-90 flex justify-start opacity-80">
+      <div className='fixed w-full h-full overflow-hidden -z-[0] hue-rotate-90 flex justify-start opacity-80'>
         <Image
-          className="relative -top-92 h-[180%] object-contain pointer-events-none rotate-90 select-none -z-10 top-44"
+          className='relative -top-92 h-[180%] object-contain pointer-events-none rotate-90 select-none -z-10 top-44'
           src={bkg_color}
         />
       </div>
-    </React.Fragment>
+    </>
-  )
+  );
-}
+};
 
-export default PageBackground
+export default PageBackground;

napcat.webui/src/components/page_loading.tsx

@@ -1,5 +1,5 @@
-import { Spinner } from '@heroui/spinner'
+import { Spinner } from '@heroui/spinner';
-import clsx from 'clsx'
+import clsx from 'clsx';
 
 export interface PageLoadingProps {
   loading?: boolean
@@ -10,13 +10,13 @@ const PageLoading: React.FC<PageLoadingProps> = ({ loading }) => {
       className={clsx(
         'absolute top-0 left-0 w-full h-full bg-zinc-500 bg-opacity-10 z-50 flex justify-center items-center backdrop-blur',
         {
-          hidden: !loading
+          hidden: !loading,
         }
       )}
     >
-      <Spinner size="lg" />
+      <Spinner size='lg' />
     </div>
-  )
+  );
-}
+};
 
-export default PageLoading
+export default PageLoading;

napcat.webui/src/components/primitives.ts

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants'
+import { tv } from 'tailwind-variants';
 
 export const title = tv({
   base: 'tracking-tight inline font-semibold',
@@ -10,24 +10,24 @@ export const title = tv({
       cyan: 'from-[#00b7fa] to-[#01cfea]',
       green: 'from-[#6FEE8D] to-[#17c964]',
       pink: 'from-[#FF72E1] to-[#F54C7A]',
-      foreground: 'from-[#FFFFFF] to-[#4B4B4B]'
+      foreground: 'from-[#FFFFFF] to-[#4B4B4B]',
     },
     size: {
       xxs: 'text-medium lg:text-medium',
       xs: 'text-xl lg:text-xl',
       sm: 'text-3xl lg:text-4xl',
       md: 'text-[2.3rem] lg:text-5xl leading-9',
-      lg: 'text-4xl lg:text-6xl'
+      lg: 'text-4xl lg:text-6xl',
     },
     fullWidth: {
-      true: 'w-full block'
+      true: 'w-full block',
     },
     shadow: {
-      true: 'drop-shadow-md'
+      true: 'drop-shadow-md',
-    }
+    },
   },
   defaultVariants: {
-    size: 'md'
+    size: 'md',
   },
   compoundVariants: [
     {
@@ -38,21 +38,21 @@ export const title = tv({
         'cyan',
         'green',
         'pink',
-        'foreground'
+        'foreground',
       ],
-      class: 'bg-clip-text text-transparent bg-gradient-to-b'
+      class: 'bg-clip-text text-transparent bg-gradient-to-b',
-    }
+    },
-  ]
+  ],
-})
+});
 
 export const subtitle = tv({
   base: 'w-full md:w-1/2 my-2 text-lg lg:text-xl text-default-600 block max-w-full',
   variants: {
     fullWidth: {
-      true: '!w-full'
+      true: '!w-full',
-    }
+    },
   },
   defaultVariants: {
-    fullWidth: true
+    fullWidth: true,
-  }
+  },
-})
+});

napcat.webui/src/components/qq_info_card.tsx

@@ -1,11 +1,11 @@
-import { Card, CardBody } from '@heroui/card'
+import { Card, CardBody } from '@heroui/card';
-import { Image } from '@heroui/image'
+import { Image } from '@heroui/image';
-import clsx from 'clsx'
+import clsx from 'clsx';
-import { BsTencentQq } from 'react-icons/bs'
+import { BsTencentQq } from 'react-icons/bs';
 
-import { SelfInfo } from '@/types/user'
+import { SelfInfo } from '@/types/user';
 
-import PageLoading from './page_loading'
+import PageLoading from './page_loading';
 
 export interface QQInfoCardProps {
   data?: SelfInfo
@@ -16,46 +16,48 @@ export interface QQInfoCardProps {
 const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
   return (
     <Card
-      className="relative bg-primary-100 bg-opacity-60 overflow-hidden flex-shrink-0 shadow-md shadow-primary-300 dark:shadow-primary-50"
+      className='relative bg-primary-100 bg-opacity-60 overflow-hidden flex-shrink-0 shadow-md shadow-primary-300 dark:shadow-primary-50'
-      shadow="none"
+      shadow='none'
-      radius="lg"
+      radius='lg'
     >
       <PageLoading loading={loading} />
-      {error ? (
+      {error
-        <CardBody className="items-center gap-1 justify-center">
+        ? (
-          <div className="flex-1 text-content1-foreground">Error</div>
+          <CardBody className='items-center gap-1 justify-center'>
-          <div className="whitespace-nowrap text-nowrap flex-shrink-0">
+            <div className='flex-1 text-content1-foreground'>Error</div>
-            {error.message}
+            <div className='whitespace-nowrap text-nowrap flex-shrink-0'>
-          </div>
+              {error.message}
-        </CardBody>
+            </div>
-      ) : (
+          </CardBody>
-        <CardBody className="flex-row items-center gap-2 overflow-hidden relative">
+        )
-          <div className="absolute right-0 bottom-0 text-5xl text-primary-400">
+        : (
-            <BsTencentQq />
+          <CardBody className='flex-row items-center gap-2 overflow-hidden relative'>
-          </div>
+            <div className='absolute right-0 bottom-0 text-5xl text-primary-400'>
-          <div className="relative flex-shrink-0 z-10">
+              <BsTencentQq />
-            <Image
+            </div>
-              src={
+            <div className='relative flex-shrink-0 z-10'>
+              <Image
+                src={
                 data?.avatarUrl ??
                 `https://q1.qlogo.cn/g?b=qq&nk=${data?.uin}&s=1`
               }
-              className="shadow-md rounded-full w-12 aspect-square"
+                className='shadow-md rounded-full w-12 aspect-square'
-            />
+              />
-            <div
+              <div
-              className={clsx(
+                className={clsx(
-                'w-4 h-4 rounded-full absolute right-0.5 bottom-0 border-2 border-primary-100 z-10',
+                  'w-4 h-4 rounded-full absolute right-0.5 bottom-0 border-2 border-primary-100 z-10',
-                data?.online ? 'bg-green-500' : 'bg-gray-500'
+                  data?.online ? 'bg-green-500' : 'bg-gray-500'
-              )}
+                )}
-            ></div>
+              />
-          </div>
+            </div>
-          <div className="flex-col justify-center">
+            <div className='flex-col justify-center'>
-            <div className="text-lg truncate">{data?.nick}</div>
+              <div className='text-lg truncate'>{data?.nick}</div>
-            <div className="text-primary-500 text-sm">{data?.uin}</div>
+              <div className='text-primary-500 text-sm'>{data?.uin}</div>
-          </div>
+            </div>
-        </CardBody>
+          </CardBody>
-      )}
+        )}
     </Card>
-  )
+  );
-}
+};
 
-export default QQInfoCard
+export default QQInfoCard;

napcat.webui/src/components/qr_code_login.tsx

@@ -1,5 +1,5 @@
-import { Spinner } from '@heroui/spinner'
+import { Spinner } from '@heroui/spinner';
-import { QRCodeSVG } from 'qrcode.react'
+import { QRCodeSVG } from 'qrcode.react';
 
 interface QrCodeLoginProps {
   qrcode: string
@@ -7,18 +7,18 @@ interface QrCodeLoginProps {
 
 const QrCodeLogin: React.FC<QrCodeLoginProps> = ({ qrcode }) => {
   return (
-    <div className="flex flex-col items-center">
+    <div className='flex flex-col items-center'>
-      <div className="bg-white p-2 rounded-md w-fit mx-auto relative overflow-hidden">
+      <div className='bg-white p-2 rounded-md w-fit mx-auto relative overflow-hidden'>
         {!qrcode && (
-          <div className="absolute left-2 top-2 right-2 bottom-2 bg-white bg-opacity-50 backdrop-blur flex items-center justify-center">
+          <div className='absolute left-2 top-2 right-2 bottom-2 bg-white bg-opacity-50 backdrop-blur flex items-center justify-center'>
-            <Spinner color="primary" />
+            <Spinner color='primary' />
           </div>
         )}
         <QRCodeSVG size={180} value={qrcode} />
       </div>
-      <div className="mt-5 text-center">请使用QQ或者TIM扫描上方二维码</div>
+      <div className='mt-5 text-center'>请使用QQ或者TIM扫描上方二维码</div>
     </div>
-  )
+  );
-}
+};
 
-export default QrCodeLogin
+export default QrCodeLogin;

napcat.webui/src/components/quick_login.tsx

@@ -1,10 +1,10 @@
-import { Avatar } from '@heroui/avatar'
+import { Avatar } from '@heroui/avatar';
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Image } from '@heroui/image'
+import { Image } from '@heroui/image';
-import { Select, SelectItem } from '@heroui/select'
+import { Select, SelectItem } from '@heroui/select';
-import { IoMdRefresh } from 'react-icons/io'
+import { IoMdRefresh } from 'react-icons/io';
 
-import { isQQQuickNewItem } from '@/utils/qq'
+import { isQQQuickNewItem } from '@/utils/qq';
 
 export interface QQItem {
   uin: string
@@ -27,67 +27,67 @@ const QuickLogin: React.FC<QuickLoginProps> = ({
   selectedQQ,
   onUpdateQQList,
   handleSelectionChange,
-  onSubmit
+  onSubmit,
 }) => {
   return (
-    <div className="flex flex-col gap-8">
+    <div className='flex flex-col gap-8'>
-      <div className="flex justify-center">
+      <div className='flex justify-center'>
         <Image
-          className="shadow-lg"
+          className='shadow-lg'
           height={100}
-          radius="full"
+          radius='full'
           src={`https://q1.qlogo.cn/g?b=qq&nk=${selectedQQ || '0'}&s=100`}
           width={100}
         />
       </div>
-      <div className="flex items-center gap-2">
+      <div className='flex items-center gap-2'>
         <Select
           classNames={{
-            popoverContent: 'bg-opacity-50 backdrop-blur'
+            popoverContent: 'bg-opacity-50 backdrop-blur',
           }}
-          aria-label="QQ Login"
+          aria-label='QQ Login'
           isDisabled={refresh}
           items={qqList}
-          placeholder="请选择QQ"
+          placeholder='请选择QQ'
           renderValue={(items) => {
             return items.map((item) => (
-              <div key={item.key} className="flex items-center gap-2">
+              <div key={item.key} className='flex items-center gap-2'>
                 <Avatar
                   alt={item.key?.toString()}
-                  className="flex-shrink-0"
+                  className='flex-shrink-0'
-                  size="sm"
+                  size='sm'
                   src={
                     isQQQuickNewItem(item.data)
                       ? item.data?.faceUrl
                       : `https://q1.qlogo.cn/g?b=qq&nk=${item.key}&s=1`
                   }
                 />
-                <div className="flex flex-col">
+                <div className='flex flex-col'>
                   {isQQQuickNewItem(item.data)
                     ? `${item.data.nickName}(${item.key?.toString()})`
                     : item.key?.toString()}
                 </div>
               </div>
-            ))
+            ));
           }}
           selectedKeys={[selectedQQ]}
-          size="lg"
+          size='lg'
           onChange={handleSelectionChange}
         >
           {(item) => (
             <SelectItem key={item.uin} textValue={item.uin}>
-              <div className="flex items-center gap-2">
+              <div className='flex items-center gap-2'>
                 <Avatar
                   alt={item.uin}
-                  className="flex-shrink-0"
+                  className='flex-shrink-0'
-                  size="sm"
+                  size='sm'
                   src={
                     isQQQuickNewItem(item)
                       ? item.faceUrl
                       : `https://q1.qlogo.cn/g?b=qq&nk=${item.uin}&s=1`
                   }
                 />
-                <div className="flex flex-col">
+                <div className='flex flex-col'>
                   {isQQQuickNewItem(item)
                     ? `${item.nickName}(${item.uin})`
                     : item.uin}
@@ -98,32 +98,32 @@ const QuickLogin: React.FC<QuickLoginProps> = ({
         </Select>
         <Button
           isIconOnly
-          className="flex-grow-0 flex-shrink-0"
+          className='flex-grow-0 flex-shrink-0'
-          color="secondary"
+          color='secondary'
           isLoading={refresh}
-          radius="full"
+          radius='full'
-          size="lg"
+          size='lg'
-          variant="light"
+          variant='light'
           onPress={onUpdateQQList}
         >
           <IoMdRefresh size={24} />
         </Button>
       </div>
-      <div className="flex justify-center mt-5">
+      <div className='flex justify-center mt-5'>
         <Button
-          className="w-64 max-w-full"
+          className='w-64 max-w-full'
-          color="primary"
+          color='primary'
           isLoading={isLoading}
-          radius="full"
+          radius='full'
-          size="lg"
+          size='lg'
-          variant="shadow"
+          variant='shadow'
           onPress={onSubmit}
         >
           登录
         </Button>
       </div>
     </div>
-  )
+  );
-}
+};
 
-export default QuickLogin
+export default QuickLogin;

napcat.webui/src/components/rotating_text.tsx

@@ -3,19 +3,19 @@ import {
   HTMLMotionProps,
   TargetAndTransition,
   Transition,
-  motion
+  motion,
-} from 'motion/react'
+} from 'motion/react';
 import {
   forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
-  useState
+  useState,
-} from 'react'
+} from 'react';
 
-function cn(...classes: (string | undefined | null | boolean)[]): string {
+function cn (...classes: (string | undefined | null | boolean)[]): string {
-  return classes.filter(Boolean).join(' ')
+  return classes.filter(Boolean).join(' ');
 }
 
 export interface RotatingTextRef {
@@ -73,65 +73,65 @@ const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
     },
     ref
   ) => {
-    const [currentTextIndex, setCurrentTextIndex] = useState<number>(0)
+    const [currentTextIndex, setCurrentTextIndex] = useState<number>(0);
 
     const splitIntoCharacters = (text: string): string[] => {
-      return Array.from(text)
+      return Array.from(text);
-    }
+    };
 
     const elements = useMemo(() => {
-      const currentText: string = texts[currentTextIndex]
+      const currentText: string = texts[currentTextIndex];
       if (splitBy === 'characters') {
-        const words = currentText.split(' ')
+        const words = currentText.split(' ');
         return words.map((word, i) => ({
           characters: splitIntoCharacters(word),
-          needsSpace: i !== words.length - 1
+          needsSpace: i !== words.length - 1,
-        }))
+        }));
       }
       if (splitBy === 'words') {
         return currentText.split(' ').map((word, i, arr) => ({
           characters: [word],
-          needsSpace: i !== arr.length - 1
+          needsSpace: i !== arr.length - 1,
-        }))
+        }));
       }
       if (splitBy === 'lines') {
         return currentText.split('\n').map((line, i, arr) => ({
           characters: [line],
-          needsSpace: i !== arr.length - 1
+          needsSpace: i !== arr.length - 1,
-        }))
+        }));
       }
 
       return currentText.split(splitBy).map((part, i, arr) => ({
         characters: [part],
-        needsSpace: i !== arr.length - 1
+        needsSpace: i !== arr.length - 1,
-      }))
+      }));
-    }, [texts, currentTextIndex, splitBy])
+    }, [texts, currentTextIndex, splitBy]);
 
     const getStaggerDelay = useCallback(
       (index: number, totalChars: number): number => {
-        const total = totalChars
+        const total = totalChars;
-        if (staggerFrom === 'first') return index * staggerDuration
+        if (staggerFrom === 'first') return index * staggerDuration;
-        if (staggerFrom === 'last') return (total - 1 - index) * staggerDuration
+        if (staggerFrom === 'last') return (total - 1 - index) * staggerDuration;
         if (staggerFrom === 'center') {
-          const center = Math.floor(total / 2)
+          const center = Math.floor(total / 2);
-          return Math.abs(center - index) * staggerDuration
+          return Math.abs(center - index) * staggerDuration;
         }
         if (staggerFrom === 'random') {
-          const randomIndex = Math.floor(Math.random() * total)
+          const randomIndex = Math.floor(Math.random() * total);
-          return Math.abs(randomIndex - index) * staggerDuration
+          return Math.abs(randomIndex - index) * staggerDuration;
         }
-        return Math.abs((staggerFrom as number) - index) * staggerDuration
+        return Math.abs((staggerFrom as number) - index) * staggerDuration;
       },
       [staggerFrom, staggerDuration]
-    )
+    );
 
     const handleIndexChange = useCallback(
       (newIndex: number) => {
-        setCurrentTextIndex(newIndex)
+        setCurrentTextIndex(newIndex);
-        if (onNext) onNext(newIndex)
+        if (onNext) onNext(newIndex);
       },
       [onNext]
-    )
+    );
 
     const next = useCallback(() => {
       const nextIndex =
@@ -139,11 +139,11 @@ const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
           ? loop
             ? 0
             : currentTextIndex
-          : currentTextIndex + 1
+          : currentTextIndex + 1;
       if (nextIndex !== currentTextIndex) {
-        handleIndexChange(nextIndex)
+        handleIndexChange(nextIndex);
       }
-    }, [currentTextIndex, texts.length, loop, handleIndexChange])
+    }, [currentTextIndex, texts.length, loop, handleIndexChange]);
 
     const previous = useCallback(() => {
       const prevIndex =
@@ -151,27 +151,27 @@ const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
           ? loop
             ? texts.length - 1
             : currentTextIndex
-          : currentTextIndex - 1
+          : currentTextIndex - 1;
       if (prevIndex !== currentTextIndex) {
-        handleIndexChange(prevIndex)
+        handleIndexChange(prevIndex);
       }
-    }, [currentTextIndex, texts.length, loop, handleIndexChange])
+    }, [currentTextIndex, texts.length, loop, handleIndexChange]);
 
     const jumpTo = useCallback(
       (index: number) => {
-        const validIndex = Math.max(0, Math.min(index, texts.length - 1))
+        const validIndex = Math.max(0, Math.min(index, texts.length - 1));
         if (validIndex !== currentTextIndex) {
-          handleIndexChange(validIndex)
+          handleIndexChange(validIndex);
         }
       },
       [texts.length, currentTextIndex, handleIndexChange]
-    )
+    );
 
     const reset = useCallback(() => {
       if (currentTextIndex !== 0) {
-        handleIndexChange(0)
+        handleIndexChange(0);
       }
-    }, [currentTextIndex, handleIndexChange])
+    }, [currentTextIndex, handleIndexChange]);
 
     useImperativeHandle(
       ref,
@@ -179,16 +179,16 @@ const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
         next,
         previous,
         jumpTo,
-        reset
+        reset,
       }),
       [next, previous, jumpTo, reset]
-    )
+    );
 
     useEffect(() => {
-      if (!auto) return
+      if (!auto) return;
-      const intervalId = setInterval(next, rotationInterval)
+      const intervalId = setInterval(next, rotationInterval);
-      return () => clearInterval(intervalId)
+      return () => clearInterval(intervalId);
-    }, [next, rotationInterval, auto])
+    }, [next, rotationInterval, auto]);
 
     return (
       <motion.span
@@ -200,7 +200,7 @@ const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
         layout
         transition={transition}
       >
-        <span className="sr-only">{texts[currentTextIndex]}</span>
+        <span className='sr-only'>{texts[currentTextIndex]}</span>
         <AnimatePresence
           mode={animatePresenceMode}
           initial={animatePresenceInitial}
@@ -213,7 +213,7 @@ const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
                 : 'flex flex-wrap whitespace-pre-wrap relative'
             )}
             layout
-            aria-hidden="true"
+            aria-hidden='true'
             initial={initial as HTMLMotionProps<'div'>['initial']}
             animate={animate as HTMLMotionProps<'div'>['animate']}
             exit={exit as HTMLMotionProps<'div'>['exit']}
@@ -221,7 +221,7 @@ const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
             {elements.map((wordObj, wordIndex, array) => {
               const previousCharsCount = array
                 .slice(0, wordIndex)
-                .reduce((sum, word) => sum + word.characters.length, 0)
+                .reduce((sum, word) => sum + word.characters.length, 0);
               return (
                 <span
                   key={wordIndex}
@@ -241,7 +241,7 @@ const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
                             (sum, word) => sum + word.characters.length,
                             0
                           )
-                        )
+                        ),
                       }}
                       className={cn('inline-block', elementLevelClassName)}
                     >
@@ -249,17 +249,17 @@ const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
                     </motion.span>
                   ))}
                   {wordObj.needsSpace && (
-                    <span className="whitespace-pre"> </span>
+                    <span className='whitespace-pre'> </span>
                   )}
                 </span>
-              )
+              );
             })}
           </motion.div>
         </AnimatePresence>
       </motion.span>
-    )
+    );
   }
-)
+);
 
-RotatingText.displayName = 'RotatingText'
+RotatingText.displayName = 'RotatingText';
-export default RotatingText
+export default RotatingText;

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

@@ -1,19 +1,19 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Image } from '@heroui/image'
+import { Image } from '@heroui/image';
-import clsx from 'clsx'
+import clsx from 'clsx';
-import { motion } from 'motion/react'
+import { motion } from 'motion/react';
-import React from 'react'
+import React from 'react';
-import { IoMdLogOut } from 'react-icons/io'
+import { IoMdLogOut } from 'react-icons/io';
-import { MdDarkMode, MdLightMode } from 'react-icons/md'
+import { MdDarkMode, MdLightMode } from 'react-icons/md';
 
-import useAuth from '@/hooks/auth'
+import useAuth from '@/hooks/auth';
-import useDialog from '@/hooks/use-dialog'
+import useDialog from '@/hooks/use-dialog';
-import { useTheme } from '@/hooks/use-theme'
+import { useTheme } from '@/hooks/use-theme';
 
-import logo from '@/assets/images/logo.png'
+import logo from '@/assets/images/logo.png';
-import type { MenuItem } from '@/config/site'
+import type { MenuItem } from '@/config/site';
 
-import Menus from './menus'
+import Menus from './menus';
 
 interface SideBarProps {
   open: boolean
@@ -21,17 +21,17 @@ interface SideBarProps {
 }
 
 const SideBar: React.FC<SideBarProps> = (props) => {
-  const { open, items } = props
+  const { open, items } = props;
-  const { toggleTheme, isDark } = useTheme()
+  const { toggleTheme, isDark } = useTheme();
-  const { revokeAuth } = useAuth()
+  const { revokeAuth } = useAuth();
-  const dialog = useDialog()
+  const dialog = useDialog();
   const onRevokeAuth = () => {
     dialog.confirm({
       title: '退出登录',
       content: '确定要退出登录吗？',
-      onConfirm: revokeAuth
+      onConfirm: revokeAuth,
-    })
+    });
-  }
+  };
   return (
     <motion.div
       className={clsx(
@@ -42,13 +42,13 @@ const SideBar: React.FC<SideBarProps> = (props) => {
       transition={{
         type: open ? 'spring' : 'tween',
         stiffness: 150,
-        damping: open ? 15 : 10
+        damping: open ? 15 : 10,
       }}
       style={{ overflow: 'hidden' }}
     >
-      <motion.div className="w-64 flex flex-col items-stretch h-full transition-transform duration-300 ease-in-out z-30 relative float-right">
+      <motion.div className='w-64 flex flex-col items-stretch h-full transition-transform duration-300 ease-in-out z-30 relative float-right'>
-        <div className="flex justify-center items-center my-2 gap-2">
+        <div className='flex justify-center items-center my-2 gap-2'>
-          <Image radius="none" height={40} src={logo} className="mb-2" />
+          <Image radius='none' height={40} src={logo} className='mb-2' />
           <div
             className={clsx(
               'flex items-center font-bold',
@@ -58,14 +58,14 @@ const SideBar: React.FC<SideBarProps> = (props) => {
             NapCat
           </div>
         </div>
-        <div className="overflow-y-auto flex flex-col flex-1 px-4">
+        <div className='overflow-y-auto flex flex-col flex-1 px-4'>
           <Menus items={items} />
-          <div className="mt-auto mb-10 md:mb-0">
+          <div className='mt-auto mb-10 md:mb-0'>
             <Button
-              className="w-full"
+              className='w-full'
-              color="primary"
+              color='primary'
-              radius="full"
+              radius='full'
-              variant="light"
+              variant='light'
               onPress={toggleTheme}
               startContent={
                 !isDark ? <MdLightMode size={16} /> : <MdDarkMode size={16} />
@@ -74,10 +74,10 @@ const SideBar: React.FC<SideBarProps> = (props) => {
               切换主题
             </Button>
             <Button
-              className="w-full mb-2"
+              className='w-full mb-2'
-              color="primary"
+              color='primary'
-              radius="full"
+              radius='full'
-              variant="light"
+              variant='light'
               onPress={onRevokeAuth}
               startContent={<IoMdLogOut size={16} />}
             >
@@ -87,7 +87,7 @@ const SideBar: React.FC<SideBarProps> = (props) => {
         </div>
       </motion.div>
     </motion.div>
-  )
+  );
-}
+};
 
-export default SideBar
+export default SideBar;

napcat.webui/src/components/sidebar/menus.tsx

@@ -1,50 +1,50 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Image } from '@heroui/image'
+import { Image } from '@heroui/image';
-import { useLocalStorage } from '@uidotdev/usehooks'
+import { useLocalStorage } from '@uidotdev/usehooks';
-import clsx from 'clsx'
+import clsx from 'clsx';
-import React from 'react'
+import React from 'react';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom'
+import { matchPath, useLocation, useNavigate } from 'react-router-dom';
 
-import key from '@/const/key'
+import key from '@/const/key';
 
-import type { MenuItem } from '@/config/site'
+import type { MenuItem } from '@/config/site';
 
 const renderItems = (items: MenuItem[], children = false) => {
   return items?.map((item) => {
-    const navigate = useNavigate()
+    const navigate = useNavigate();
-    const locate = useLocation()
+    const locate = useLocation();
-    const [open, setOpen] = React.useState(!!item.autoOpen)
+    const [open, setOpen] = React.useState(!!item.autoOpen);
     const canOpen = React.useMemo(
       () => item.items && item.items.length > 0,
       [item.items]
-    )
+    );
-    const [b64img] = useLocalStorage(key.backgroundImage, '')
+    const [b64img] = useLocalStorage(key.backgroundImage, '');
     const [customIcons] = useLocalStorage<Record<string, string>>(
       key.customIcons,
       {}
-    )
+    );
     const isActive = React.useMemo(() => {
       if (item.href) {
-        return !!matchPath(item.href, locate.pathname)
+        return !!matchPath(item.href, locate.pathname);
       }
 
-      return false
+      return false;
-    }, [item.href, locate.pathname])
+    }, [item.href, locate.pathname]);
 
     const goTo = (href: string) => {
-      navigate(href)
+      navigate(href);
-    }
+    };
 
     React.useEffect(() => {
       if (item.items) {
         const shouldOpen = item.items.some(
           (item) => item?.href && !!matchPath(item.href, locate.pathname)
-        )
+        );
 
-        if (shouldOpen) setOpen(true)
+        if (shouldOpen) setOpen(true);
       }
-    }, [item.items, locate.pathname])
+    }, [item.items, locate.pathname]);
-    const panelRef = React.useRef<HTMLDivElement>(null)
+    const panelRef = React.useRef<HTMLDivElement>(null);
 
     return (
       <div key={item.href + item.label}>
@@ -55,74 +55,78 @@ const renderItems = (items: MenuItem[], children = false) => {
             isActive && 'bg-opacity-60',
             b64img && 'backdrop-blur-md text-white'
           )}
-          color="primary"
+          color='primary'
           endContent={
-            canOpen ? (
+            canOpen
-              <div
+              ? (
-                className={clsx(
+                <div
-                  'ml-auto relative w-3 h-3 transition-transform',
+                  className={clsx(
-                  open && 'transform rotate-180',
+                    'ml-auto relative w-3 h-3 transition-transform',
-                  isActive
+                    open && 'transform rotate-180',
-                    ? 'text-primary-500'
+                    isActive
-                    : 'text-primary-200 dark:text-white',
+                      ? 'text-primary-500'
-                  'before:rounded-full',
+                      : 'text-primary-200 dark:text-white',
-                  'before:content-[""]',
+                    'before:rounded-full',
-                  'before:block',
+                    'before:content-[""]',
-                  'before:absolute',
+                    'before:block',
-                  'before:w-3',
+                    'before:absolute',
-                  'before:h-[4.5px]',
+                    'before:w-3',
-                  'before:bg-current',
+                    'before:h-[4.5px]',
-                  'before:top-1/2',
+                    'before:bg-current',
-                  'before:-left-[3px]',
+                    'before:top-1/2',
-                  'before:transform',
+                    'before:-left-[3px]',
-                  'before:-translate-y-1/2',
+                    'before:transform',
-                  'before:rotate-45',
+                    'before:-translate-y-1/2',
-                  'after:rounded-full',
+                    'before:rotate-45',
-                  'after:content-[""]',
+                    'after:rounded-full',
-                  'after:block',
+                    'after:content-[""]',
-                  'after:absolute',
+                    'after:block',
-                  'after:w-3',
+                    'after:absolute',
-                  'after:h-[4.5px]',
+                    'after:w-3',
-                  'after:bg-current',
+                    'after:h-[4.5px]',
-                  'after:top-1/2',
+                    'after:bg-current',
-                  'after:left-[3px]',
+                    'after:top-1/2',
-                  'after:transform',
+                    'after:left-[3px]',
-                  'after:-translate-y-1/2',
+                    'after:transform',
-                  'after:-rotate-45'
+                    'after:-translate-y-1/2',
-                )}
+                    'after:-rotate-45'
-              />
+                  )}
-            ) : (
+                />
-              <div
+              )
-                className={clsx(
+              : (
-                  'w-3 h-1.5 rounded-full ml-auto shadow-lg',
+                <div
-                  isActive
+                  className={clsx(
-                    ? 'bg-primary-500 animate-spinner-ease-spin'
+                    'w-3 h-1.5 rounded-full ml-auto shadow-lg',
-                    : 'bg-primary-200 dark:bg-white'
+                    isActive
-                )}
+                      ? 'bg-primary-500 animate-spinner-ease-spin'
-              />
+                      : 'bg-primary-200 dark:bg-white'
-            )
+                  )}
+                />
+              )
           }
-          radius="full"
+          radius='full'
           startContent={
-            customIcons[item.label] ? (
+            customIcons[item.label]
-              <Image
+              ? (
-                radius="none"
+                <Image
-                src={customIcons[item.label]}
+                  radius='none'
-                alt={item.label}
+                  src={customIcons[item.label]}
-                className="w-5 h-5"
+                  alt={item.label}
-              />
+                  className='w-5 h-5'
-            ) : (
+                />
-              item.icon
+              )
-            )
+              : (
+                item.icon
+              )
           }
           variant={isActive ? (children ? 'solid' : 'shadow') : 'light'}
           onPress={() => {
             if (item.href) {
               if (!isActive) {
-                goTo(item.href)
+                goTo(item.href);
               }
             } else if (canOpen) {
-              setOpen(!open)
+              setOpen(!open);
             }
           }}
         >
@@ -130,29 +134,29 @@ const renderItems = (items: MenuItem[], children = false) => {
         </Button>
         <div
           ref={panelRef}
-          className="ml-4 overflow-hidden transition-all duration-300"
+          className='ml-4 overflow-hidden transition-all duration-300'
           style={{
-            height: open ? panelRef.current?.scrollHeight : 0
+            height: open ? panelRef.current?.scrollHeight : 0,
           }}
         >
           {item.items && renderItems(item.items, true)}
         </div>
       </div>
-    )
+    );
-  })
+  });
-}
+};
 
 interface MenusProps {
   items: MenuItem[]
 }
 const Menus: React.FC<MenusProps> = (props) => {
-  const { items } = props
+  const { items } = props;
 
   return (
-    <div className="flex flex-col justify-content-center flex-1 gap-2">
+    <div className='flex flex-col justify-content-center flex-1 gap-2'>
       {renderItems(items)}
     </div>
-  )
+  );
-}
+};
 
-export default Menus
+export default Menus;

napcat.webui/src/components/switch_card.tsx

@@ -1,6 +1,6 @@
-import { Switch } from '@heroui/switch'
+import { Switch } from '@heroui/switch';
-import clsx from 'clsx'
+import clsx from 'clsx';
-import React, { forwardRef } from 'react'
+import React, { forwardRef } from 'react';
 
 export interface SwitchCardProps {
   label?: string
@@ -15,8 +15,8 @@ export interface SwitchCardProps {
 
 const SwitchCard = forwardRef<HTMLInputElement, SwitchCardProps>(
   (props, ref) => {
-    const { label, description, value, onValueChange, disabled } = props
+    const { label, description, value, onValueChange, disabled } = props;
-    const selectString = value ? 'true' : 'false'
+    const selectString = value ? 'true' : 'false';
 
     return (
       <Switch
@@ -25,7 +25,7 @@ const SwitchCard = forwardRef<HTMLInputElement, SwitchCardProps>(
             'inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center',
             'justify-between cursor-pointer rounded-lg gap-2 p-3 border-2 border-transparent',
             'data-[selected=true]:border-primary bg-opacity-50 backdrop-blur-sm'
-          )
+          ),
         }}
         {...props}
         ref={ref}
@@ -34,15 +34,15 @@ const SwitchCard = forwardRef<HTMLInputElement, SwitchCardProps>(
         value={selectString}
         onValueChange={onValueChange}
       >
-        <div className="flex flex-col gap-1">
+        <div className='flex flex-col gap-1'>
-          <p className="text-medium">{label}</p>
+          <p className='text-medium'>{label}</p>
-          <p className="text-tiny text-default-400">{description}</p>
+          <p className='text-tiny text-default-400'>{description}</p>
         </div>
       </Switch>
-    )
+    );
   }
-)
+);
 
-SwitchCard.displayName = 'SwitchCard'
+SwitchCard.displayName = 'SwitchCard';
 
-export default SwitchCard
+export default SwitchCard;

napcat.webui/src/components/system_info.tsx

@@ -1,24 +1,24 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
-import { Card, CardBody, CardHeader } from '@heroui/card'
+import { Card, CardBody, CardHeader } from '@heroui/card';
-import { Chip } from '@heroui/chip'
+import { Chip } from '@heroui/chip';
-import { Spinner } from '@heroui/spinner'
+import { Spinner } from '@heroui/spinner';
-import { Tooltip } from '@heroui/tooltip'
+import { Tooltip } from '@heroui/tooltip';
-import { useRequest } from 'ahooks'
+import { useRequest } from 'ahooks';
-import { useEffect } from 'react'
+import { useEffect } from 'react';
-import { BsStars } from 'react-icons/bs'
+import { BsStars } from 'react-icons/bs';
-import { FaCircleInfo, FaInfo, FaQq } from 'react-icons/fa6'
+import { FaCircleInfo, FaInfo, FaQq } from 'react-icons/fa6';
-import { IoLogoChrome, IoLogoOctocat } from 'react-icons/io'
+import { IoLogoChrome, IoLogoOctocat } from 'react-icons/io';
-import { RiMacFill } from 'react-icons/ri'
+import { RiMacFill } from 'react-icons/ri';
 
-import useDialog from '@/hooks/use-dialog'
+import useDialog from '@/hooks/use-dialog';
 
-import { request } from '@/utils/request'
+import { request } from '@/utils/request';
-import { compareVersion } from '@/utils/version'
+import { compareVersion } from '@/utils/version';
 
-import WebUIManager from '@/controllers/webui_manager'
+import WebUIManager from '@/controllers/webui_manager';
-import { GithubRelease } from '@/types/github'
+import { GithubRelease } from '@/types/github';
 
-import TailwindMarkdown from './tailwind_markdown'
+import TailwindMarkdown from './tailwind_markdown';
 
 export interface SystemInfoItemProps {
   title: string
@@ -31,71 +31,71 @@ const SystemInfoItem: React.FC<SystemInfoItemProps> = ({
   title,
   value = '--',
   icon,
-  endContent
+  endContent,
 }) => {
   return (
-    <div className="flex text-sm gap-1 p-2 items-center shadow-sm shadow-primary-100 dark:shadow-primary-100 rounded text-primary-400">
+    <div className='flex text-sm gap-1 p-2 items-center shadow-sm shadow-primary-100 dark:shadow-primary-100 rounded text-primary-400'>
       {icon}
-      <div className="w-24">{title}</div>
+      <div className='w-24'>{title}</div>
-      <div className="text-primary-200">{value}</div>
+      <div className='text-primary-200'>{value}</div>
-      <div className="ml-auto">{endContent}</div>
+      <div className='ml-auto'>{endContent}</div>
     </div>
-  )
+  );
-}
+};
 
 export interface NewVersionTipProps {
   currentVersion?: string
 }
 
 const NewVersionTip = (props: NewVersionTipProps) => {
-  const { currentVersion } = props
+  const { currentVersion } = props;
-  const dialog = useDialog()
+  const dialog = useDialog();
   const { data: releaseData, error } = useRequest(() =>
     request.get<GithubRelease[]>(
       'https://api.github.com/repos/NapNeko/NapCatQQ/releases'
     )
-  )
+  );
 
   if (error) {
     return (
-      <Tooltip content="检查新版本失败">
+      <Tooltip content='检查新版本失败'>
         <Button
           isIconOnly
-          radius="full"
+          radius='full'
-          color="primary"
+          color='primary'
-          variant="shadow"
+          variant='shadow'
-          className="!w-5 !h-5 !min-w-0 text-small shadow-md"
+          className='!w-5 !h-5 !min-w-0 text-small shadow-md'
           onPress={() => {
             dialog.alert({
               title: '检查新版本失败',
-              content: error.message
+              content: error.message,
-            })
+            });
           }}
         >
           <FaInfo />
         </Button>
       </Tooltip>
-    )
+    );
   }
 
-  const latestVersion = releaseData?.data?.[0]?.tag_name
+  const latestVersion = releaseData?.data?.[0]?.tag_name;
 
   if (!latestVersion || !currentVersion) {
-    return null
+    return null;
   }
 
   if (compareVersion(latestVersion, currentVersion) <= 0) {
-    return null
+    return null;
   }
 
-  const middleVersions: GithubRelease[] = []
+  const middleVersions: GithubRelease[] = [];
 
   for (let i = 0; i < releaseData.data.length; i++) {
-    const versionInfo = releaseData.data[i]
+    const versionInfo = releaseData.data[i];
     if (compareVersion(versionInfo.tag_name, currentVersion) > 0) {
-      middleVersions.push(versionInfo)
+      middleVersions.push(versionInfo);
     } else {
-      break
+      break;
     }
   }
 
@@ -104,72 +104,72 @@ const NewVersionTip = (props: NewVersionTipProps) => {
       data: aiSummaryData,
       loading: aiSummaryLoading,
       error: aiSummaryError,
-      run: runAiSummary
+      run: runAiSummary,
     } = useRequest(
       (version) =>
         request.get<ServerResponse<string | null>>(
           `https://release.nc.152710.xyz/?version=${version}`,
           {
-            timeout: 30000
+            timeout: 30000,
           }
         ),
       {
-        manual: true
+        manual: true,
       }
-    )
+    );
 
     useEffect(() => {
-      runAiSummary(currentVersion)
+      runAiSummary(currentVersion);
-    }, [currentVersion, runAiSummary])
+    }, [currentVersion, runAiSummary]);
 
     if (aiSummaryLoading) {
       return (
-        <div className="flex justify-center py-1">
+        <div className='flex justify-center py-1'>
-          <Spinner size="sm" />
+          <Spinner size='sm' />
         </div>
-      )
+      );
     }
     if (aiSummaryError) {
-      return <div className="text-center text-primary-500">AI 摘要获取失败</div>
+      return <div className='text-center text-primary-500'>AI 摘要获取失败</div>;
     }
-    return <span className="text-default-700">{aiSummaryData?.data.data}</span>
+    return <span className='text-default-700'>{aiSummaryData?.data.data}</span>;
-  }
+  };
 
   return (
-    <Tooltip content="有新版本可用">
+    <Tooltip content='有新版本可用'>
       <Button
         isIconOnly
-        radius="full"
+        radius='full'
-        color="primary"
+        color='primary'
-        variant="shadow"
+        variant='shadow'
-        className="!w-5 !h-5 !min-w-0 text-small shadow-md"
+        className='!w-5 !h-5 !min-w-0 text-small shadow-md'
         onPress={() => {
           dialog.confirm({
             title: '有新版本可用',
             content: (
-              <div className="space-y-2">
+              <div className='space-y-2'>
-                <div className="text-sm space-x-2">
+                <div className='text-sm space-x-2'>
                   <span>当前版本</span>
-                  <Chip color="primary" variant="flat">
+                  <Chip color='primary' variant='flat'>
                     v{currentVersion}
                   </Chip>
                 </div>
-                <div className="text-sm space-x-2">
+                <div className='text-sm space-x-2'>
                   <span>最新版本</span>
-                  <Chip color="primary">{latestVersion}</Chip>
+                  <Chip color='primary'>{latestVersion}</Chip>
                 </div>
-                <div className="p-2 rounded-md bg-content2 text-sm">
+                <div className='p-2 rounded-md bg-content2 text-sm'>
-                  <div className="text-primary-400 font-bold flex items-center gap-1 mb-1">
+                  <div className='text-primary-400 font-bold flex items-center gap-1 mb-1'>
                     <BsStars />
                     <span>AI总结</span>
                   </div>
-                  {<AISummaryComponent />}
+                  <AISummaryComponent />
                 </div>
-                <div className="text-sm space-y-2 !mt-4">
+                <div className='text-sm space-y-2 !mt-4'>
                   {middleVersions.map((versionInfo) => (
                     <div
                       key={versionInfo.tag_name}
-                      className="p-4 bg-content1 rounded-md shadow-small"
+                      className='p-4 bg-content1 rounded-md shadow-small'
                     >
                       <TailwindMarkdown content={versionInfo.body} />
                     </div>
@@ -180,95 +180,103 @@ const NewVersionTip = (props: NewVersionTipProps) => {
             scrollBehavior: 'inside',
             size: '3xl',
             confirmText: '前往下载',
-            onConfirm() {
+            onConfirm () {
               window.open(
                 'https://github.com/NapNeko/NapCatQQ/releases',
                 '_blank',
                 'noopener'
-              )
+              );
-            }
+            },
-          })
+          });
         }}
       >
         <FaInfo />
       </Button>
     </Tooltip>
-  )
+  );
-}
+};
 
 const NapCatVersion = () => {
   const {
     data: packageData,
     loading: packageLoading,
-    error: packageError
+    error: packageError,
-  } = useRequest(WebUIManager.getPackageInfo)
+  } = useRequest(WebUIManager.getPackageInfo);
 
-  const currentVersion = packageData?.version
+  const currentVersion = packageData?.version;
 
   return (
     <SystemInfoItem
-      title="NapCat 版本"
+      title='NapCat 版本'
-      icon={<IoLogoOctocat className="text-xl" />}
+      icon={<IoLogoOctocat className='text-xl' />}
       value={
-        packageError ? (
+        packageError
+          ? (
           `错误：${packageError.message}`
-        ) : packageLoading ? (
+          )
-          <Spinner size="sm" />
+          : packageLoading
-        ) : (
+            ? (
-          currentVersion
+              <Spinner size='sm' />
-        )
+            )
+            : (
+              currentVersion
+            )
       }
       endContent={<NewVersionTip currentVersion={currentVersion} />}
     />
-  )
+  );
-}
+};
 
 export interface SystemInfoProps {
   archInfo?: string
 }
 const SystemInfo: React.FC<SystemInfoProps> = (props) => {
-  const { archInfo } = props
+  const { archInfo } = props;
   const {
     data: qqVersionData,
     loading: qqVersionLoading,
-    error: qqVersionError
+    error: qqVersionError,
-  } = useRequest(WebUIManager.getQQVersion)
+  } = useRequest(WebUIManager.getQQVersion);
   return (
-    <Card className="bg-opacity-60 shadow-sm shadow-primary-100 dark:shadow-primary-100 overflow-visible flex-1">
+    <Card className='bg-opacity-60 shadow-sm shadow-primary-100 dark:shadow-primary-100 overflow-visible flex-1'>
-      <CardHeader className="pb-0 items-center gap-1 text-primary-500 font-extrabold">
+      <CardHeader className='pb-0 items-center gap-1 text-primary-500 font-extrabold'>
-        <FaCircleInfo className="text-lg" />
+        <FaCircleInfo className='text-lg' />
         <span>系统信息</span>
       </CardHeader>
-      <CardBody className="flex-1">
+      <CardBody className='flex-1'>
-        <div className="flex flex-col justify-between h-full">
+        <div className='flex flex-col justify-between h-full'>
           <NapCatVersion />
           <SystemInfoItem
-            title="QQ 版本"
+            title='QQ 版本'
-            icon={<FaQq className="text-lg" />}
+            icon={<FaQq className='text-lg' />}
             value={
-              qqVersionError ? (
+              qqVersionError
+                ? (
                 `错误：${qqVersionError.message}`
-              ) : qqVersionLoading ? (
+                )
-                <Spinner size="sm" />
+                : qqVersionLoading
-              ) : (
+                  ? (
-                qqVersionData
+                    <Spinner size='sm' />
-              )
+                  )
+                  : (
+                    qqVersionData
+                  )
             }
           />
           <SystemInfoItem
-            title="WebUI 版本"
+            title='WebUI 版本'
-            icon={<IoLogoChrome className="text-xl" />}
+            icon={<IoLogoChrome className='text-xl' />}
-            value="Next"
+            value='Next'
           />
           <SystemInfoItem
-            title="系统版本"
+            title='系统版本'
-            icon={<RiMacFill className="text-xl" />}
+            icon={<RiMacFill className='text-xl' />}
             value={archInfo}
           />
         </div>
       </CardBody>
     </Card>
-  )
+  );
-}
+};
 
-export default SystemInfo
+export default SystemInfo;

napcat.webui/src/components/system_status_display.tsx

@@ -1,12 +1,12 @@
-import { Card, CardBody } from '@heroui/card'
+import { Card, CardBody } from '@heroui/card';
-import { Image } from '@heroui/image'
+import { Image } from '@heroui/image';
-import clsx from 'clsx'
+import clsx from 'clsx';
-import { BiSolidMemoryCard } from 'react-icons/bi'
+import { BiSolidMemoryCard } from 'react-icons/bi';
-import { GiCpu } from 'react-icons/gi'
+import { GiCpu } from 'react-icons/gi';
 
-import bkg from '@/assets/images/bg/1AD934174C0107F14BAD8776D29C5F90.png'
+import bkg from '@/assets/images/bg/1AD934174C0107F14BAD8776D29C5F90.png';
 
-import UsagePie from './usage_pie'
+import UsagePie from './usage_pie';
 
 export interface SystemStatusItemProps {
   title: string
@@ -19,7 +19,7 @@ const SystemStatusItem: React.FC<SystemStatusItemProps> = ({
   title,
   value = '-',
   size = 'md',
-  unit
+  unit,
 }) => {
   return (
     <div
@@ -28,14 +28,14 @@ const SystemStatusItem: React.FC<SystemStatusItemProps> = ({
         size === 'lg' ? 'col-span-2' : 'col-span-1 flex justify-between'
       )}
     >
-      <div className="w-24">{title}</div>
+      <div className='w-24'>{title}</div>
-      <div className="text-default-400">
+      <div className='text-default-400'>
         {value}
         {unit}
       </div>
     </div>
-  )
+  );
-}
+};
 
 export interface SystemStatusDisplayProps {
   data?: SystemStatus
@@ -44,87 +44,87 @@ export interface SystemStatusDisplayProps {
 const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
   const memoryUsage = {
     system: 0,
-    qq: 0
+    qq: 0,
-  }
+  };
   if (data) {
-    const system = Number(data.memory.total) || 1
+    const system = Number(data.memory.total) || 1;
-    const systemUsage = Number(data.memory.usage.system)
+    const systemUsage = Number(data.memory.usage.system);
-    const qqUsage = Number(data.memory.usage.qq)
+    const qqUsage = Number(data.memory.usage.qq);
-    memoryUsage.system = (systemUsage / system) * 100
+    memoryUsage.system = (systemUsage / system) * 100;
-    memoryUsage.qq = (qqUsage / system) * 100
+    memoryUsage.qq = (qqUsage / system) * 100;
   }
 
   return (
-    <Card className="bg-opacity-60 shadow-sm shadow-primary-100 col-span-1 lg:col-span-2 relative overflow-hidden">
+    <Card className='bg-opacity-60 shadow-sm shadow-primary-100 col-span-1 lg:col-span-2 relative overflow-hidden'>
-      <div className="absolute h-full right-0 top-0">
+      <div className='absolute h-full right-0 top-0'>
         <Image
           src={bkg}
-          alt="background"
+          alt='background'
-          className="select-none pointer-events-none !opacity-30 w-full h-full"
+          className='select-none pointer-events-none !opacity-30 w-full h-full'
           classNames={{
             wrapper: 'w-full h-full',
-            img: 'object-contain w-full h-full'
+            img: 'object-contain w-full h-full',
           }}
         />
       </div>
-      <CardBody className="overflow-visible md:flex-row gap-4 items-center justify-stretch z-10">
+      <CardBody className='overflow-visible md:flex-row gap-4 items-center justify-stretch z-10'>
-        <div className="flex-1 w-full md:max-w-96">
+        <div className='flex-1 w-full md:max-w-96'>
-          <h2 className="text-lg font-semibold flex items-center gap-1 text-primary-400">
+          <h2 className='text-lg font-semibold flex items-center gap-1 text-primary-400'>
-            <GiCpu className="text-xl" />
+            <GiCpu className='text-xl' />
             <span>CPU</span>
           </h2>
-          <div className="grid grid-cols-2 gap-2">
+          <div className='grid grid-cols-2 gap-2'>
-            <SystemStatusItem title="型号" value={data?.cpu.model} size="lg" />
+            <SystemStatusItem title='型号' value={data?.cpu.model} size='lg' />
-            <SystemStatusItem title="内核数" value={data?.cpu.core} />
+            <SystemStatusItem title='内核数' value={data?.cpu.core} />
-            <SystemStatusItem title="主频" value={data?.cpu.speed} unit="GHz" />
+            <SystemStatusItem title='主频' value={data?.cpu.speed} unit='GHz' />
             <SystemStatusItem
-              title="使用率"
+              title='使用率'
               value={data?.cpu.usage.system}
-              unit="%"
+              unit='%'
             />
             <SystemStatusItem
-              title="QQ主线程"
+              title='QQ主线程'
               value={data?.cpu.usage.qq}
-              unit="%"
+              unit='%'
             />
           </div>
-          <h2 className="text-lg font-semibold flex items-center gap-1 text-primary-400 mt-2">
+          <h2 className='text-lg font-semibold flex items-center gap-1 text-primary-400 mt-2'>
-            <BiSolidMemoryCard className="text-xl" />
+            <BiSolidMemoryCard className='text-xl' />
             <span>内存</span>
           </h2>
-          <div className="grid grid-cols-2 gap-2">
+          <div className='grid grid-cols-2 gap-2'>
             <SystemStatusItem
-              title="总量"
+              title='总量'
               value={data?.memory.total}
-              size="lg"
+              size='lg'
-              unit="MB"
+              unit='MB'
             />
             <SystemStatusItem
-              title="使用量"
+              title='使用量'
               value={data?.memory.usage.system}
-              unit="MB"
+              unit='MB'
             />
             <SystemStatusItem
-              title="QQ主线程"
+              title='QQ主线程'
               value={data?.memory.usage.qq}
-              unit="MB"
+              unit='MB'
             />
           </div>
         </div>
-        <div className="flex flex-row md:flex-col gap-2 flex-shrink-0 w-full justify-center md:w-40 min-h-40 mt-4 md:mt-0 md:mx-auto">
+        <div className='flex flex-row md:flex-col gap-2 flex-shrink-0 w-full justify-center md:w-40 min-h-40 mt-4 md:mt-0 md:mx-auto'>
           <UsagePie
             systemUsage={Number(data?.cpu.usage.system) || 0}
             processUsage={Number(data?.cpu.usage.qq) || 0}
-            title="CPU占用"
+            title='CPU占用'
           />
           <UsagePie
             systemUsage={memoryUsage.system}
             processUsage={memoryUsage.qq}
-            title="内存占用"
+            title='内存占用'
           />
         </div>
       </CardBody>
     </Card>
-  )
+  );
-}
+};
-export default SystemStatusDisplay
+export default SystemStatusDisplay;

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

@@ -1,5 +1,5 @@
-import clsx from 'clsx'
+import clsx from 'clsx';
-import { type ReactNode, createContext, forwardRef, useContext } from 'react'
+import { type ReactNode, createContext, forwardRef, useContext } from 'react';
 
 export interface TabsContextValue {
   activeKey: string
@@ -8,8 +8,8 @@ export interface TabsContextValue {
 
 const TabsContext = createContext<TabsContextValue>({
   activeKey: '',
-  onChange: () => {}
+  onChange: () => {},
-})
+});
 
 export interface TabsProps {
   activeKey: string
@@ -18,12 +18,12 @@ export interface TabsProps {
   className?: string
 }
 
-export function Tabs({ activeKey, onChange, children, className }: TabsProps) {
+export function Tabs ({ activeKey, onChange, children, className }: TabsProps) {
   return (
     <TabsContext.Provider value={{ activeKey, onChange }}>
       <div className={clsx('flex flex-col gap-2', className)}>{children}</div>
     </TabsContext.Provider>
-  )
+  );
 }
 
 export interface TabListProps {
@@ -31,10 +31,10 @@ export interface TabListProps {
   className?: string
 }
 
-export function TabList({ children, className }: TabListProps) {
+export function TabList ({ children, className }: TabListProps) {
   return (
     <div className={clsx('flex items-center gap-1', className)}>{children}</div>
-  )
+  );
 }
 
 export interface TabProps extends React.ButtonHTMLAttributes<HTMLDivElement> {
@@ -46,17 +46,17 @@ export interface TabProps extends React.ButtonHTMLAttributes<HTMLDivElement> {
 
 export const Tab = forwardRef<HTMLDivElement, TabProps>(
   ({ className, isSelected, value, ...props }, ref) => {
-    const { onChange } = useContext(TabsContext)
+    const { onChange } = useContext(TabsContext);
 
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-      onChange(value)
+      onChange(value);
-      props.onClick?.(e)
+      props.onClick?.(e);
-    }
+    };
 
     return (
       <div
         ref={ref}
-        role="tab"
+        role='tab'
         aria-selected={isSelected}
         onClick={handleClick}
         className={clsx(
@@ -68,11 +68,11 @@ export const Tab = forwardRef<HTMLDivElement, TabProps>(
         )}
         {...props}
       />
-    )
+    );
   }
-)
+);
 
-Tab.displayName = 'Tab'
+Tab.displayName = 'Tab';
 
 export interface TabPanelProps {
   value: string
@@ -80,10 +80,10 @@ export interface TabPanelProps {
   className?: string
 }
 
-export function TabPanel({ value, children, className }: TabPanelProps) {
+export function TabPanel ({ value, children, className }: TabPanelProps) {
-  const { activeKey } = useContext(TabsContext)
+  const { activeKey } = useContext(TabsContext);
 
-  if (value !== activeKey) return null
+  if (value !== activeKey) return null;
 
-  return <div className={clsx('flex-1', className)}>{children}</div>
+  return <div className={clsx('flex-1', className)}>{children}</div>;
 }

napcat.webui/src/components/tabs/sortable_tab.tsx

@@ -1,30 +1,30 @@
-import { useSortable } from '@dnd-kit/sortable'
+import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities'
+import { CSS } from '@dnd-kit/utilities';
 
-import { Tab } from '@/components/tabs'
+import { Tab } from '@/components/tabs';
-import type { TabProps } from '@/components/tabs'
+import type { TabProps } from '@/components/tabs';
 
 interface SortableTabProps extends TabProps {
   id: string
 }
 
-export function SortableTab({ id, ...props }: SortableTabProps) {
+export function SortableTab ({ id, ...props }: SortableTabProps) {
   const {
     attributes,
     listeners,
     setNodeRef,
     transform,
     transition,
-    isDragging
+    isDragging,
-  } = useSortable({ id })
+  } = useSortable({ id });
 
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
     zIndex: isDragging ? 1 : 0,
     position: 'relative' as const,
-    touchAction: 'none'
+    touchAction: 'none',
-  }
+  };
 
   return (
     <Tab
@@ -34,5 +34,5 @@ export function SortableTab({ id, ...props }: SortableTabProps) {
       {...listeners}
       {...props}
     />
-  )
+  );
 }